Focus Outline

Apply the Skyline default focus outline in your SCSS

• How to
  • SCSS Example:
• SCSS

How to

To pull the focus styling into your SCSS, include the mixin like this:

SCSS Example:

.your-element-that-needs-focus-state {
  &:focus {
    @include focus-outline;
  }
}

SCSS

SCSS file imports

To use these styles in a Vue component SCSS, you’ll need:

@import '~@skyline/scss/src/core/UI.required';

@include focus-outline($pixels, $color, $outerColor, $inset);

Output

Parameters

$pixels: <number>

Default value:1px

$color: <color>

Default value:#fff

$outerColor: <color>

Default value:get-gray(800)

$inset: <'inset'|''>

Default value:''

SCSS file imports

To use these styles in a Vue component SCSS, you’ll need:

@import '~@skyline/scss/src/core/UI.required';

@include skyline-apply-focus-outline($child-selector, $inset);

Output

Parameters

$child-selector: <string>

Default value:''

$inset: <string>

Default value:''