Fill Colour utility classes

Fill Colour utility classes to change any components fill colour property.

Usage

Place the fill colour utility class on an element that you want to change the fill colour property for.

Adding -hover to any of the below modifiers will change the colour on the hover state only, for example slb-fill-black-hover.

Each fill colour has a breakpoint variation of small, medium, large, extra large, this is used to remove or change the fill at different breakpoints, e.g. slb-fill-blue slb-fill-md-blue-alt will display fill blue for screens up to the medium breakpoint and blue alt for screen sizes above the medium breakpoint.

Adding slb-fill-inherit will inherit the value from its parent element. This is useful when nesting icons, text, buttons, etc.

Modifier selectors