Focus
Examples for focus states.
Reading requirement
Please read the following page first: Utility Configuration.
Text Focus Effects
Use .f:c-{color} to change the text color on focus.
Focus me to see me turn blue
Focus me to see me turn white
Background Focus Effects
Use .f:bg-{color} to change the background color on focus.
Focus me to change background color
Focus me me to change background color
Custom focus effects
In 5-components/_custom-focus.scss you can create your own focus effects.
Icon Focus Effects
Use .f:move-icon-right and .f:move-icon-left to change the position of an icon on focus.
Image Scale Effect
Use .f:scale-image to scale an image on focus.
