Example

Focus

Focus styling

This element always have the focus set

HTML: 
                    <span class="mixin-example-focus">This element always have the focus set</span>

SCSS: 

        .mixins-example-focus {
            @include focus();
        }

Focus remove default

Removes all focus stylings

This element never have a focused appearance

HTML: 
                    <span class="mixin-example-focus-remove-default mixin-example-focus">This element never have a focused appearance</span>

SCSS: 

        .mixin-example-focus-remove-default {
            @include focus-remove-default();
        }
        
        .mixin-example-focus-remove-default {
            @include focus();
        }

Focus inset

Adds focus appearance using an after element. Passing true as the second parameter will remove the default focus styling

Focused element

HTML: 
                    <span class="mixin-example-focus-inset">This element never have a focused appearance</span>

SCSS: 

        .mixin-example-focus-remove-default {
            @include focus-inset(4px, false);
        }

Classes

Mixin	Parameters	Values
focus	No parameters
focus-remove-default	No parameters
focus-inset	Border radius, Remove default focus	(number)(unit), Boolean