Colour Filtering displaying bunches of dots

[Netrovert]

Colour filter on Dawn Theme.

Would usually just show a single 'dot' of the colour to filter by.

Suddenly started doing this, no idea why. Happens on all of the collection pages. 
https://buycarpetonline.uk/collections/carpets 

Should display a nice single dot, sort of like this.

Any ideas greatly appreciated. 

[loyalty-wizard]

Try adding the following css to your theme: 

#Details-1-template--24685176029557__product-grid .facet-checkbox {
background-repeat: no-repeat;
	background-position: 0px;
}

#Details-1-template--24685176029557__product-grid .facet-checkbox span {
padding-left: 32px;
}

#Details-1-template--24685176029557__product-grid label {
border-radius: 0 !important;
}

[Netrovert]

In which file would I add this css?

[tim · Accepted solution]

Non sure why this happened, but this can fix it.

Paste into "Custom CSS" setting of this section:

.facet-checkbox[for*=color] {
  background: none no-repeat 3px center;
  background-size: 2rem;
  border-radius: 0;
  padding-left: 3.5rem;
}

.facet-checkbox[for*=color] input:checked {
  width: calc(2rem + 6px);
  height: calc(2rem + 6px);
  border:2px solid var(--color-icon);
  border-radius: 7px;
}

[Netrovert]

Hi there, 

Thanks for the code, this does amend the boxes, it loads after launch. 

Would there be a global css file I could add this to or amend primary code for the item, so as to stop a 'coverup' and make it the primary status?

[tim]

You have assets/component-facets.css -- put the code at the bottom. That file covers the filters.

I usually add a comment above to remind what was done and why.