Search

#
accessibility

##
css

### :focus

    :focus { ... }

### Description

Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it.

Check current browser support for :focus-visible on Can I Use.

### Example

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/core";

### .js-focus-visible

    .js-focus-visible { ... }

### Description

Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it.

Check current browser support for :focus-visible on Can I Use.

### Example

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/core";

### #{$scope}.focus-visible

    #{$scope}.focus-visible { ... }

### Description

`.focus-visible` is a selector assigned to a DOM node as a user tabs through the UI.

See npm focus-visible polyfill

See CSSWG spec

The role of this selector is to apply the designed `:focus-visible` style to DOM nodes that ARE NOT Auro Web Components

Supports the following selectors with `$scope` and/or `$prefix` defined:

- .hyperlink
- .ods-roleButton / .wcs_roleButton
- .ods-roleTab / .wcs_roleButton

### Example

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/focusVisible";

#
animation

##
mixins

### auro_transition

    @mixin auro_transition($property: $auro-animation-default-property, $duration: $auro-animation-default-duration, $timing: $auro-animation-default-timing, $delay: null) { ... }

### Description

Provides a way to control animation speed when changing CSS properties.

Defaults are set by baseline Design Tokens

Compatibility: css-transitions

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$property` | Specifies the name of the CSS property the transition effect is for | `String` | `$auro-animation-default-property`
`$duration` | Specifies how many seconds or milliseconds a transition effect takes to complete | `String` | `$auro-animation-default-duration`
`$timing` | Specifies the speed curve of the transition effect (ease, linear, ease-in, ease-out, ease-in-out) | `String` | `$auro-animation-default-timing`
`$delay` | Specifies a delay (in seconds) for the transition effect | `String` | `null`

### Example

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/animation";

Using mixin with default values;

    .foo {
      @include auro_transition;
    }

#
component-support

##
css

### :host

    :host { ... }

### Description

Component a11y support for `:host`
For use with auroElement.js base class and web component development

### Example

Default selector

    :host {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/auroElement/auroElement";

### :host([hidden]:not(:focus):not(:active))

    :host([hidden]:not(:focus):not(:active)) { ... }

### Description

Component a11y support for `:host` selector with `hidden` attribute
For use with auroElement.js base class and web component development

### Example

Default selector

    :host([hidden]:not(:focus):not(:active)) {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/auroElement/auroElement";

### :host([hiddenVisually]:not(:focus):not(:active))

    :host([hiddenVisually]:not(:focus):not(:active)) { ... }

### Description

Component a11y support for `:host` selector with `hiddenVisually` attribute
For use with auroElement.js base class and web component development

### Example

Default selector

    :host([hiddenVisually]:not(:focus):not(:active)) {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/auroElement/auroElement";

#
core

##
css

### #{$sym}#{$prefix}#{$scope}blockquote

    #{$sym}#{$prefix}#{$scope}blockquote { ... }

### Description

Baseline HTML setting for blockquote element.

Manage `$scope` option.

### Example

Default selector(s)

    blockquote {}

Selector(s) when $scope: true;

    .auro blockquote {}

Selector(s) when $prefix: true;

    .auro_blockquote {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/blockquote";

### #{$scope} *

    #{$scope} * { ... }

### Description

Global selector to address box-model and default `:focus` pseudo elements.

Global media setting for a11y support of reduced-motion

Manage `$scope` option.

### Example

Default selector(s)

    *, *:before, *:after {}

Selector(s) when $scope: true;

    .auro *, .auro *:before, .auro *:after {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/core";

import file with `$focus` set to `true`

    $focus: true;
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/core";

### #{$sym}#{$prefix}picture#{$scope}

    #{$sym}#{$prefix}picture#{$scope} { ... }

### Description

Baseline HTML setting for picture element.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    picture img {}

Selector(s) when $scope: true;

    picture.auro img {}

Selector(s) when $prefix: true;

    .auro_picture img {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/picture";

#
essentials

##
css

### #{$sym}#{$prefix}html#{$scope}

    #{$sym}#{$prefix}html#{$scope} { ... }

### Description

Baseline HTML setting to establish box-model and default font size.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    html {}

Selector(s) when $scope: true;

    html.auro {}

Selector(s) when $prefix: true;

    .auro_html {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";

### #{$scope}#{$sym}#{$prefix}body, #{$scope}.#{$prefix}baseType

    #{$scope}#{$sym}#{$prefix}body,
    #{$scope}.#{$prefix}baseType { ... }

### Description

Set baseline type settings for `body` element or with the use of the `.baseType` selector.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    body,
    .baseType {}

Selector(s) when $scope: true;

    .auro body,
    .auro .baseType {}

Selector(s) when $prefix: true;

    .body,
    .auro_baseType {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";

### #{$scope}.#{$prefix}baseParagraph

    #{$scope}.#{$prefix}baseParagraph { ... }

### Description

Sets standard `margin` for all paragraph style content

Use of nested `.auro_hyperlink` defines underline text-decoration for anchor tags

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .baseParagraph {}
    .baseParagraph .hyperlink {}

Selector(s) when $scope: true;

    .auro .baseParagraph {}
    .auro .baseParagraph .hyperlink {}

Selector(s) when $prefix: true;

    .auro_baseParagraph {}
    .auro_baseParagraph .auro_hyperlink {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";

### #{$scope}.#{$prefix}hyperlink

    #{$scope}.#{$prefix}hyperlink { ... }

### Description

Baseline hyperlink styles as mirrored in auro-hyperlink web component

Support for: `.hyperlink--nav`, and `.hyperlink--ondark`

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .hyperlink {}
    .hyperlink--inline {}
    .hyperlink--darktheme {}

Selector(s) when $scope: true;

    .auro .hyperlink {}
    .auro .hyperlink--inline {}
    .auro .hyperlink--darktheme {}

Selector(s) when $prefix: true;

    .auro_hyperlink {}
    .auro_hyperlink--inline {}
    .auro_hyperlink--darktheme {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";

### #{$scope}#{$sym}#{$prefix}img

    #{$scope}#{$sym}#{$prefix}img { ... }

### Description

Default setting for all `<img />` tags so that images will automatically adjust to fit the size of the screen. If additional properties are needed to shape the img selector, please see the list of Utility classes including the .util_img-is-responsive selector to scale images with responsive aspects.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    img {}

Selector(s) when $scope: true;

    .auro img {}

Selector(s) when $prefix: true;

    .auro_img {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";

### #{$scope}#{$sym}#{$prefix}small, #{$scope}.#{$prefix}type--small

    #{$scope}#{$sym}#{$prefix}small,
    #{$scope}.#{$prefix}type--small { ... }

### Description

Legal copy, disclaimers, and footnotes below applicable content section. Above input as floating label, below input as help or error text.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    small,
    .type--small {}

Selector(s) when $scope: true;

    .auro small,
    .auro .type--small {}

Selector(s) when $prefix: true;

    .auro_small,
    .auro_type--small {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";

### #{$scope}#{$sym}#{$prefix}p

    #{$scope}#{$sym}#{$prefix}p { ... }

### Description

Set `<p>` element margin standard. This selector is not set by default, set the `$paragraph` flag to `true' prior to import.

Other options are to use the `<small>` element or the `.baseParagraph` selector.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    p {}

Selector(s) when $scope: true;

    .auro p {}

Selector(s) when $prefix: true;

    .auro_p {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";

import file with `$paragraph` flag set to true

    $paragraph: true;
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";

### #{$scope}.#{$prefix}fineprint

    #{$scope}.#{$prefix}fineprint { ... }

### Description

Defines the font size and color of fine print text

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .fineprint {}

Selector(s) when $scope: true;

    .auro .fineprint {}

Selector(s) when $prefix: true;

    .auro_fineprint {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";

#
headings

##
css

### #{$scope}.#{$prefix}heading

    #{$scope}.#{$prefix}heading { ... }

### Description

Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. `<h1>`, `<h2>`, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .heading {}

Selector(s) when $scope: true;

    .auro .heading {}

Selector(s) when $prefix: true;

    .auro_heading {}

Example HTML selector use

    <element class="heading"> ... </element>

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/headings";

### #{$scope}.#{$prefix}heading--display

    #{$scope}.#{$prefix}heading--display { ... }

### Description

Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. `<h1>`, `<h2>`, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .heading--display {}

Selector(s) when $scope: true;

    .auro .heading--display {}

Selector(s) when $prefix: true;

    .auro_heading--display {}

Example HTML selector use

    <element class="heading heading--display"> ... </element>

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/headings";

### #{$scope}.#{$prefix}heading--800

    #{$scope}.#{$prefix}heading--800 { ... }

### Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .heading--800 {}

Selector(s) when $scope: true;

    .auro .heading--800 {}

Selector(s) when $prefix: true;

    .auro_heading--800 {}

Example HTML selector use

    <element class="heading heading--800"> ... </element>

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/headings";

### #{$scope}.#{$prefix}heading--700

    #{$scope}.#{$prefix}heading--700 { ... }

### Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .heading--700 {}

Selector(s) when $scope: true;

    .auro .heading--700 {}

Selector(s) when $prefix: true;

    .auro_heading--700 {}

Example HTML selector use

    <element class="heading heading--700"> ... </element>

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/headings";

### #{$scope}.#{$prefix}heading--600

    #{$scope}.#{$prefix}heading--600 { ... }

### Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .heading--600 {}

Selector(s) when $scope: true;

    .auro .heading--600 {}

Selector(s) when $prefix: true;

    .auro_heading--600 {}

Example HTML selector use

    <element class="heading heading--600"> ... </element>

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/headings";

### #{$scope}.#{$prefix}heading--500

    #{$scope}.#{$prefix}heading--500 { ... }

### Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .heading--500 {}

Selector(s) when $scope: true;

    .auro .heading--500 {}

Selector(s) when $prefix: true;

    .auro_heading--500 {}

Example HTML selector use

    <element class="heading heading--500"> ... </element>

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/headings";

### #{$scope}.#{$prefix}heading--400

    #{$scope}.#{$prefix}heading--400 { ... }

### Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .heading--400 {}

Selector(s) when $scope: true;

    .auro .heading--400 {}

Selector(s) when $prefix: true;

    .auro_heading--400 {}

Example HTML selector use

    <element class="heading heading--400"> ... </element>

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/headings";

### #{$scope}.#{$prefix}heading--300

    #{$scope}.#{$prefix}heading--300 { ... }

### Description

Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .heading--300 {}

Selector(s) when $scope: true;

    .auro .heading--300 {}

Selector(s) when $prefix: true;

    .auro_heading--300 {}

Example HTML selector use

    <element class="heading heading--300"> ... </element>

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/headings";

#
normalize

##
css

### html#{$scope}

    html#{$scope} { ... }

### Description

1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.

Manage `$scope` option.

### Example

Default selector(s)

    html {}

Selector(s) when $scope: true;

    html.auro {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}body

    #{$scope}body { ... }

### Description

Remove the margin in all browsers.

Manage `$scope` option.

### Example

Default selector(s)

    body {}

Selector(s) when $scope: true;

    .auro body {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}main

    #{$scope}main { ... }

### Description

Render the `main` element consistently in IE.

Manage `$scope` option.

### Example

Default selector(s)

    main {}

Selector(s) when $scope: true;

    .auro main {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}hr

    #{$scope}hr { ... }

### Description

1. Show the overflow in Edge and IE.
2. Add the correct box sizing in Firefox.

Manage `$scope` option.

### Example

Default selector(s)

    hr {}

Selector(s) when $scope: true;

    .auro hr {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}pre

    #{$scope}pre { ... }

### Description

1. Correct the inheritance and scaling of font size in all browsers.
2. Correct the odd `em` font sizing in all browsers.

Manage `$scope` option.

### Example

Default selector(s)

    pre {}

Selector(s) when $scope: true;

    .auro pre {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}a

    #{$scope}a { ... }

### Description

Remove the gray background on active links in IE 10.

Manage `$scope` option.

### Example

Default selector(s)

    a {}

Selector(s) when $scope: true;

    .auro a {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}abbr

    #{$scope}abbr { ... }

### Description

1. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
2. Remove the bottom border in Chrome 57-

Manage `$scope` option.

### Example

Default selector(s)

    abbr[title] {}

Selector(s) when $scope: true;

    .auro abbr[title] {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}b, #{$scope}strong

    #{$scope}b,
    #{$scope}strong { ... }

### Description

Add the correct font weight in Chrome, Edge, and Safari.

Manage `$scope` option.

### Example

Default selector(s)

    b,
    strong {}

Selector(s) when $scope: true;

    .auro b,
    .auro strong {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}code, #{$scope}kbd, #{$scope}samp

    #{$scope}code,
    #{$scope}kbd,
    #{$scope}samp { ... }

### Description

1. Correct the inheritance and scaling of font size in all browsers.
2. Correct the odd `em` font sizing in all browsers.

Manage `$scope` option.

### Example

Default selector(s)

    code,
    kbd,
    samp {}

Selector(s) when $scope: true;

    .auro code,
    .auro kbd,
    .auro samp {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}sub, #{$scope}sup

    #{$scope}sub,
    #{$scope}sup { ... }

### Description

Prevent `sub` and `sup` elements from affecting the line height in all browsers.

Manage `$scope` option.

### Example

Default selector(s)

    sub,
    sup {}

Selector(s) when $scope: true;

    .auro sub,
    .auro sup {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}sub

    #{$scope}sub { ... }

### Description

Prevent `sub` element from affecting the line height in all browsers.

Manage `$scope` option.

### Example

Default selector(s)

    sub {}

Selector(s) when $scope: true;

    .auro sub {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}sup

    #{$scope}sup { ... }

### Description

Prevent `sup` element from affecting the line height in all browsers.

Manage `$scope` option.

### Example

Default selector(s)

    sup {}

Selector(s) when $scope: true;

    .auro sup {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}img

    #{$scope}img { ... }

### Description

Remove the border on images inside links in IE 10.

Manage `$scope` option.

### Example

Default selector(s)

    img {}

Selector(s) when $scope: true;

    .auro img {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}button, #{$scope}input, #{$scope}optgroup, #{$scope}select, #{$scope}textarea

    #{$scope}button,
    #{$scope}input,
    #{$scope}optgroup,
    #{$scope}select,
    #{$scope}textarea { ... }

### Description

1. Remove the margin in Firefox and Safari.
2. Change the font styles in all browsers.

Manage `$scope` option.

### Example

Default selector(s)

    button,
    input,
    optgroup,
    select,
    textarea {}

Selector(s) when $scope: true;

    .auro button,
    .auro input,
    .auro optgroup,
    .auro select,
    .auro textarea {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}button, #{$scope}input

    #{$scope}button,
    #{$scope}input { ... }

### Description

Show the overflow in IE.

1. Show the overflow in Edge.

Manage `$scope` option.

### Example

Default selector(s)

    button,
    input {}

Selector(s) when $scope: true;

    .auro button,
    .auro input {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}button, #{$scope}select

    #{$scope}button,
    #{$scope}select { ... }

### Description

Remove the inheritance of text transform in Edge, Firefox, and IE.

1. Remove the inheritance of text transform in Firefox.

Manage `$scope` option.

### Example

Default selector(s)

    button,
    select {}

Selector(s) when $scope: true;

    .auro button,
    .auro select {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}button, #{$scope}[type='button'], #{$scope}[type='reset'], #{$scope}[type='submit']

    #{$scope}button,
    #{$scope}[type='button'],
    #{$scope}[type='reset'],
    #{$scope}[type='submit'] { ... }

### Description

Correct the inability to style clickable types in iOS and Safari.

Manage `$scope` option.

### Example

Default selector(s)

    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {}

Selector(s) when $scope: true;

    .auro button,
    .auro [type="button"],
    .auro [type="reset"],
    .auro [type="submit"] {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}fieldset

    #{$scope}fieldset { ... }

### Description

Correct the padding in Firefox.

Manage `$scope` option.

### Example

Default selector(s)

    fieldset {}

Selector(s) when $scope: true;

    .auro fieldset {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}legend

    #{$scope}legend { ... }

### Description

1. Correct the text wrapping in Edge and IE.
2. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
3. Correct the color inheritance from `fieldset` elements in IE.

Manage `$scope` option.

### Example

Default selector(s)

    legend {}

Selector(s) when $scope: true;

    .auro legend {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}progress

    #{$scope}progress { ... }

### Description

Add the correct vertical alignment in Chrome, Firefox, and Opera.

Manage `$scope` option.

### Example

Default selector(s)

    progress {}

Selector(s) when $scope: true;

    .auro progress {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}textarea

    #{$scope}textarea { ... }

### Description

Remove the default vertical scrollbar in IE 10+.

Manage `$scope` option.

### Example

Default selector(s)

    textarea {}

Selector(s) when $scope: true;

    .auro textarea {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}[type='number']

    #{$scope}[type='number'] { ... }

### Description

Correct the cursor style of increment and decrement buttons in Chrome.

Manage `$scope` option.

### Example

Default selector(s)

    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {}

Selector(s) when $scope: true;

    .auro [type="number"]::-webkit-inner-spin-button,
    .auro [type="number"]::-webkit-outer-spin-button {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}[type='search']

    #{$scope}[type='search'] { ... }

### Description

1. Correct the outline style in Safari.
2. Correct the odd appearance in Chrome and Safari.

Manage `$scope` option.

### Example

Default selector(s)

    [type="search"] {}

Selector(s) when $scope: true;

    .auro [type="search"] {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}::-webkit-search-decoration

    #{$scope}::-webkit-search-decoration { ... }

### Description

Remove the inner padding in Chrome and Safari on macOS.

Manage `$scope` option.

### Example

Default selector(s)

    [type="search"]::-webkit-search-decoration {}

Selector(s) when $scope: true;

    .auro [type="search"]::-webkit-search-decoration {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}::-webkit-file-upload-button

    #{$scope}::-webkit-file-upload-button { ... }

### Description

!. Change font properties to `inherit` in Safari.

2. Correct the inability to style clickable types in iOS and Safari.

Manage `$scope` option.

### Example

Default selector(s)

    ::-webkit-file-upload-button {}

Selector(s) when $scope: true;

    .auro ::-webkit-file-upload-button {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}details

    #{$scope}details { ... }

### Description

Add the correct display in Edge, IE 10+, and Firefox.

Manage `$scope` option.

### Example

Default selector(s)

    details {}

Selector(s) when $scope: true;

    .auro details {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}summary

    #{$scope}summary { ... }

### Description

Add the correct display in all browsers.

Manage `$scope` option.

### Example

Default selector(s)

    summary {}

Selector(s) when $scope: true;

    .auro summary {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}template

    #{$scope}template { ... }

### Description

Add the correct display in IE 10+.

Manage `$scope` option.

### Example

Default selector(s)

    template {}

Selector(s) when $scope: true;

    .auro template {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

### #{$scope}[hidden]

    #{$scope}[hidden] { ... }

### Description

Add the correct display in IE 10.

Manage `$scope` option.

### Example

Default selector(s)

    [hidden] {}

Selector(s) when $scope: true;

    .auro [hidden] {}

import file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

#
responsive

##
mixins

### auro_breakpoint--lg

    @mixin auro_breakpoint--lg() { ... }

### Description

Standard breakpoint to support resolutions greater than 1232px.

### Parameters

None.

### Example

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";

Set breakpoint

    .foo {
        @include auro_breakpoint--lg {
          ...
        }
    }

### auro_breakpoint--md

    @mixin auro_breakpoint--md() { ... }

### Description

Standard breakpoint to support resolutions greater than 1024px.

### Parameters

None.

### Example

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";

Set breakpoint

    .foo {
        @include auro_breakpoint--md {
          ...
        }
    }

### auro_breakpoint--sm

    @mixin auro_breakpoint--sm() { ... }

### Description

Standard breakpoint to support resolutions greater than 660px.

### Parameters

None.

### Example

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";

Set breakpoint

    .foo {
        @include auro_breakpoint--sm {
          ...
        }
    }

### auro_breakpoint

    @mixin auro_breakpoint($min: null, $max: null, $polar: null, $cust: null) { ... }

### Description

Open format mixin to define any breakpoint.

See also: Media_features

Compatibility: css-mediaqueries

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$min` | sets `min-width` value | `String` | `null`
`$max` | sets `max-width` value | `String` | `null`
`$polar` | sets `min-width` and `max-width` values | `List` | `null`
`$cust` | allows for 100% custom breakpoint options | `String` | `null`

### Example

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";

Auro breakpoint tokens

    $auro-breakpoint-sm: 660px;
    $auro-breakpoint-md: 1024px;
    $auro-breakpoint-lg: 1232px;

Set breakpoint using `$min` argument

    .foo {
      color: orange;

      @include auro_breakpoint($min: $auro-breakpoint-sm) {
        color: blue;
      }
    }

Set breakpoint using `$max` argument

    .foo {
      color: orange;

      @include auro_breakpoint($max: $auro-breakpoint-lg) {
        color: blue;
      }
    }

Set breakpoint using `$polar` argument

    .foo {
      color: orange;

      @include auro_breakpoint($polar: $auro-breakpoint-sm $auro-breakpoint-lg) {
        color: blue;
      }
    }

Set breakpoint using `$cust` argument. Interpolation `#{}` is required if you intend to use a variable within a string.

    .foo {
      color: orange;

      @include auro_breakpoint($cust: '(min-width: 400px) and (max-width: #{$auro-breakpoint-sm})') {
        color: blue;
      }
    }

#
scope-prefix

##
variables

### scope

    $scope: null !default;

### Description

Variables to determine if `$scope` is to be displayed.

Set `true` value prior to importing file if scope selector output file is wanted

### Type

`Boolean`

### Example

import file

    $scope: true;
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/ ...

return example

    .auro [selector] { ... }

### Used by

- [mixin] `auro_inset`
- [mixin] `auro_inset`
- [mixin] `auro_layoutPropertiesGenerator`
- [mixin] `auro_spacing`
- [mixin] `auro_spacing`

### prefix

    $prefix: null !default;

### Description

Variables to determine if $prefix is to be displayed

Set `true` value prior to importing file if prefix selector output file is wanted

### Type

`Boolean`

### Example

import file

    $prefix: true;
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/ ...

return example

    .auro_[selector] { ... }

### Used by

- [mixin] `auro_inset`
- [mixin] `auro_inset`
- [mixin] `auro_layoutPropertiesGenerator`
- [mixin] `auro_spacing`
- [mixin] `auro_spacing`

#
General

##
css

### // Auro rule @font-face

    // Auro rule
    @font-face { ... }

### Description

Baseline font-face setting for using web based custom fonts - font weight light

### Example

import src file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/fonts";

#
utility

##
functions

### auro_capitalize

    @function auro_capitalize($string: null) { ... }

### Description

The purpose of this function is to take a string and capitalize the first letter on output

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$string` | pass in string to be capitolized | `String` | `null`

### Example

pass string into function

    capitalize('foo') => Foo

import dependency

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityFunctions/capitalize";

### Used by

- [mixin] `auro_inset`
- [mixin] `auro_inset`
- [mixin] `auro_spacing`
- [mixin] `auro_spacing`
- [mixin] `auro_spacing`
- [mixin] `auro_spacing`

### auro_contains

    @function auro_contains($list: null, $var) { ... }

### Description

The purpose of this function is to evaluate if a requested var is in the supplied array

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$list` | variable list to be evaluated | `Variable` | `null`
`$var` | item in list | `Item` | — none

### Example

pass string into function

    ods-contains($options, $value)

import dependency

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityFunctions/contains";

### Used by

- [mixin] `auro_inset`
- [mixin] `auro_spacing`

### auro_map-deep-get

    @function auro_map-deep-get($map: null, $keys: null) { ... }

### Description

This function is to be used to return nested key values within a nested map

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$map` | pass in map to be evaluated | `Variable` | `null`
`$keys` | pass in keys to be evaluated | `Variable` | `null`

### Example

pass map and strings/variables into function

    $tokens: (
      'size': (
        'eighth': $size-eighth,
        'quarter': $size-quarter
      )
    );
    $var: auro_map-deep-get($tokens, 'size', 'eighth'); => $size-eighth

import dependency

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityFunctions/map-deep-get";

### Used by

- [mixin] `auro_inset`
- [mixin] `auro_spacing`

### Links

- Article from CSS-Tricks

##
variables

### important

    $important: null !default;

### Description

The use of the `$important` variable allows the user to determine if they require the use of the `!important` flag with utility classes or not. By default the `!important` flag is NOT set on any CSS selector.

### Map structure

key Name | key Description | key Type | key Value
--- | --- | --- | ---
`$important` | manage use of `!important` flag | `Boolean` | `null`

### Example

update value prior to importing utility support file if `!important` flag is needed

    $important: true;
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/ ... ";

### Used by

- [mixin] `auro_inset`
- [mixin] `auro_inset`
- [mixin] `auro_inset`
- [mixin] `auro_inset`
- [mixin] `auro_inset`
- [mixin] `auro_inset`
- [mixin] `auro_inset`
- [mixin] `auro_inset`
- [mixin] `auro_layoutPropertiesGenerator`
- [mixin] `auro_spacing`
- [mixin] `auro_spacing`

### auro-spacing-options

    $auro-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl !default;

### Description

When using spacing mixins, it's required to import this variable list for use of options.

### Map structure

key Name | key Description | key Type | key Value
--- | --- | --- | ---
`$options` | list of available token options | `Variable` | `list`

### Example

import dependency variable list

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityVariables/spacing-options";

#
utility-auro

##
css

### #{$scope}.auro_roleButton

    #{$scope}.auro_roleButton { ... }

### Description

`.auro_roleButton` is a utility class to support the UI of a standard html hyperlink using the attribute `role="button"`. This utility will present the UI to mimic the UI of the auro-hyperlink component supporting the same attribute.

See for more information

Manage `$scope` options.

### Example

Default selector(s)

    .auro_roleButton {}

Selector(s) when $scope: true;

    .auro .auro_roleButton {}

import selector file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/componentSupport/anchor-roleButton";

### #{$scope}.auro_roleTab

    #{$scope}.auro_roleTab { ... }

### Description

`auro_roleTab` is a helper class to support the UI of a hyperlink using `role="tab"`

Manage `$scope` options.

### Example

Default selector(s)

    .auro_roleTab {}

Selector(s) when $scope: true;

    .auro .auro_roleTab {}

import selector file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/componentSupport/anchor-roleTab";

### #{$scope}.auro_containedButtons

    #{$scope}.auro_containedButtons { ... }

### Description

`.auro_containedButtons` is a helper class to support the use of multiple buttons and/or the use of ods-hyperlink `role="button"` in a parent container.

`.auro_containedButtons` has a dependency on WCSS breakpoints. See example below to import dependency.

Manage `$scope` options.

Place selector on outer parent element.

### Example

Default selector(s)

    .auro_containedButtons {}

Selector(s) when $scope: true;

    .auro .auro_containedButtons {}

import selector file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/componentSupport/containedButtons";

import dependency file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";

### #{$scope}.auro_table

    #{$scope}.auro_table { ... }

### Description

CSS selectors for easy reproduction of Auro Table UI.

Defaults are set by baseline Design Tokens

Manage `$scope` options.

### Example

import selector file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/componentSupport/table";

### #{$scope}.auro_tablist

    #{$scope}.auro_tablist { ... }

### Description

`.auro_tablist` is a helper class to support the UI of a hyperlink using `role="tab"`

Place selector on outer `div` or `section` container with the `role="tablist"` also applied.

Manage `$scope` options.

### Example

import selector file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/componentSupport/tablist";

#
utility-display

##
css

### #{$scope}.#{$prefix}util_displayInline

    #{$scope}.#{$prefix}util_displayInline { ... }

### Description

Utility class to display elements `inline`

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_displayInline {}

Selector(s) when $scope: true;

    .auro .util_displayInline {}

Selector(s) when $prefix: true;

    .auro_util_displayInline {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/displayProperties";

### #{$scope}.#{$prefix}util_displayInlineBlock

    #{$scope}.#{$prefix}util_displayInlineBlock { ... }

### Description

Utility class to display elements `inline-block`

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_displayInline {}

Selector(s) when $scope: true;

    .auro .util_displayInline {}

Selector(s) when $prefix: true;

    .auro_util_displayInline {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/displayProperties";

### #{$scope}.#{$prefix}util_displayBlock

    #{$scope}.#{$prefix}util_displayBlock { ... }

### Description

Utility class to display elements `block`

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_displayBlock {}

Selector(s) when $scope: true;

    .auro .util_displayBlock {}

Selector(s) when $prefix: true;

    .auro_util_displayBlock {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/displayProperties";

### #{$scope}.#{$prefix}util_displayFlex

    #{$scope}.#{$prefix}util_displayFlex { ... }

### Description

Utility class to display elements `flex`

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_displayFlex {}

Selector(s) when $scope: true;

    .auro .util_displayFlex {}

Selector(s) when $prefix: true;

    .auro_util_displayFlex {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/displayProperties";

### #{$scope}.#{$prefix}util_displayHidden

    #{$scope}.#{$prefix}util_displayHidden { ... }

### Description

Utility class to display elements `none`

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_displayHidden {}

Selector(s) when $scope: true;

    .auro .util_displayHidden {}

Selector(s) when $prefix: true;

    .auro_util_displayHidden {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/displayProperties";

### #{$scope}.#{$prefix}util_displayHiddenVisually

    #{$scope}.#{$prefix}util_displayHiddenVisually { ... }

### Description

Utility class to visually hide elements within the UI, but still be picked up by screen readers.

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_displayHiddenVisually {}

Selector(s) when $scope: true;

    .auro .util_displayHiddenVisually {}

Selector(s) when $prefix: true;

    .auro_util_displayHiddenVisually {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/displayProperties";

#
utility-font

##
css

### #{$scope}.#{$prefix}util_fontWeightDefault

    #{$scope}.#{$prefix}util_fontWeightDefault { ... }

### Description

Utility class for default font-weight

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_fontWeightDefault {}

Selector(s) when $scope: true;

    .auro .util_fontWeightDefault {}

Selector(s) when $prefix: true;

    .auro_util_fontWeightDefault {}

import Sass file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/fontStyles";

### #{$scope}.#{$prefix}util_fontWeightMedium

    #{$scope}.#{$prefix}util_fontWeightMedium { ... }

### Description

Utility class for font-weight `medium`

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_fontWeightMedium {}

Selector(s) when $scope: true;

    .auro .util_fontWeightMedium {}

Selector(s) when $prefix: true;

    .auro_util_fontWeightMedium {}

import Sass file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/fontStyles";

### #{$scope}.#{$prefix}util_fontWeightDisplay

    #{$scope}.#{$prefix}util_fontWeightDisplay { ... }

### Description

Utility class for display font-weight

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_fontWeightDisplay {}

Selector(s) when $scope: true;

    .auro .util_fontWeightDisplay {}

Selector(s) when $prefix: true;

    .auro_util_fontWeightDisplay {}

import Sass file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/fontStyles";

### #{$scope}.#{$prefix}util_body--lg

    #{$scope}.#{$prefix}util_body--lg { ... }

### Description

Utility class for font-size `lg`

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_body--lg {}

Selector(s) when $scope: true;

    .auro .util_body--lg {}

Selector(s) when $prefix: true;

    .auro_util_body--lg {}

import Sass file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/fontStyles";

### #{$scope}.#{$prefix}util_body--sm

    #{$scope}.#{$prefix}util_body--sm { ... }

### Description

Utility class for font-size `sm`

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_body--sm {}

Selector(s) when $scope: true;

    .auro .util_body--sm {}

Selector(s) when $prefix: true;

    .auro_util_body--sm {}

import Sass file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/fontStyles";

### #{$scope}.#{$prefix}util_body--xs

    #{$scope}.#{$prefix}util_body--xs { ... }

### Description

Utility class for font-size `xs`

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_body--xs {}

Selector(s) when $scope: true;

    .auro .util_body--xs {}

Selector(s) when $prefix: true;

    .auro_util_body--xs {}

import Sass file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/fontStyles";

#
utility-layout

##
css

### #{$scope}.#{$prefix}util_floatLeft

    #{$scope}.#{$prefix}util_floatLeft { ... }

### Description

Utility class to set elements to float `left`

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_floatLeft {}

Selector(s) when $scope: true;

    .auro .util_floatLeft {}

Selector(s) when $prefix: true;

    .auro_util_floatLeft {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/layoutProperties";

### #{$scope}.#{$prefix}util_floatRight

    #{$scope}.#{$prefix}util_floatRight { ... }

### Description

Utility class to set elements to float `right`

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_floatRight {}

Selector(s) when $scope: true;

    .auro .util_floatRight {}

Selector(s) when $prefix: true;

    .auro_util_floatRight {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/layoutProperties";

### #{$scope}.#{$prefix}util_margin--auto

    #{$scope}.#{$prefix}util_margin--auto { ... }

### Description

Utility class to center content within a block element

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_margin--auto {}

Selector(s) when $scope: true;

    .auro .util_margin--auto {}

Selector(s) when $prefix: true;

    .auro_util_margin--auto {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/layoutProperties";

##
mixins

### auro_inset

    @mixin auro_inset($auro-inset-directions: "", --stretch, --squish, $auro-inset-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl) { ... }

### Description

This mixin is designed to return a series of pre-defined selectors based on the inset spacing design spec

DO NOT execute mixin, this is already included with the import of the file dependency

Dependency: `$npm i alaskaairux/design-tokens`

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$auro-inset-directions` | defines value | `String` | `"", --stretch, --squish`
`$auro-inset-spacing-options` | defines value applied | `String` | `none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl`

### Example

Example output css

    .util_insetXxxs {
      padding: 0.125rem;
    }
    .util_insetXxxs--stretch {
      padding: calc(0.125rem * 2) 0.125rem;
    }
    .util_insetXxxs--squish {
      padding: 0 0.125rem;
    }

import dependencies

    @import "./node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariableMap";
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/insetUtility";

import with custom over-rides

    $auro-inset-spacing-options: xxxs;
    $auro-inset-directions:'';
    @import "./node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariableMap";
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/insetUtility";

### Throws

- INVALID, `#{$value}` is not known, please choose from options, [#{$values}]

### Requires

- [function] `auro_map-deep-get`
- [function] `auro_contains`
- [function] `auro_capitalize`
- [function] `auro_capitalize`
- [variable] `important`
- [variable] `important`
- [variable] `important`
- [variable] `important`
- [variable] `important`
- [variable] `important`
- [variable] `scope`
- [variable] `prefix`
- [variable] `important`
- [variable] `scope`
- [variable] `prefix`
- [variable] `important`

### auro_layoutPropertiesGenerator

    @mixin auro_layoutPropertiesGenerator() { ... }

### Description

Mixin auto-generates all available utility selectors. This mixin is NOT for general use and will produce selectors with the import of this Sass file. Output can be configured by redefining default values prior to import. See default value examples below.

DO NOT execute mixin, this is already included with the import of the file dependency

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Parameters

None.

### Example

Default values

    $layout-properties: margin padding !default;
    $layout-extensions: Top Left Bottom Right !default;
    $layout-modifiers: (
      "none": 0,
      "xs": $auro-size-xs,
      "md": $auro-size-md,
      "lg": $auro-size-lg,
      "xl": $auro-size-xl
    ) !default;

example default output selector

    .util_paddingLeft--none {}

example output selector when $scope: true;

    .auro .util_paddingLeft--none {}

example output selector when $prefix: true;

    .auro_util_paddingLeft--none {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator";

import mixin file with altered output values prior to import

    $layout-properties: margin;
    $layout-extensions: Right;
    $layout-modifiers: (
      "xxxs": $auro-size-xxxs,
      "xxs": $auro-size-xxs,
      "xxl": $auro-size-xxl,
      "xxxl": $auro-size-xxxl,
    );
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator";

### Requires

- [variable] `scope`
- [variable] `prefix`
- [variable] `important`

### auro_spacing

    @mixin auro_spacing($auro-spacing-types: inline, stack, $auro-spacing-options: none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl) { ... }

### Description

This mixin is designed to return a series of pre-defined selectors based on the stack or inline spacing design specs

DO NOT execute mixin, this is already included with the import of the file dependency

Dependency: `$npm i alaskaairux/design-tokens`

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$auro-spacing-types` | inline - L/R, stack - top/bottom | `String` | `inline, stack`
`$auro-spacing-options` | defines value applied | `String` | `none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl`

### Example

Example output css

    .util_stackPaddingXxxs--top {
      padding-top: 0.125rem;
    }
    .util_stackPaddingXxxs--bottom {
      padding-bottom: 0.125rem;
    }
    .util_stackMarginXxxs--top {
      margin-top: 0.125rem;
    }
    .util_stackMarginXxxs--bottom {
      margin-bottom: 0.125rem;
    }

import dependencies

    @import "./node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariableMap";
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/spacingUtility";

import with custom over-rides

    $auro-spacing-types: inline;
    $auro-spacing-options: xxxs;
    @import "./node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariableMap";
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/spacingUtility";

### Throws

- INVALID, \

### Requires

- [function] `auro_map-deep-get`
- [function] `auro_contains`
- [function] `auro_capitalize`
- [function] `auro_capitalize`
- [function] `auro_capitalize`
- [function] `auro_capitalize`
- [variable] `scope`
- [variable] `prefix`
- [variable] `important`
- [variable] `scope`
- [variable] `prefix`
- [variable] `important`

#
utility-mixins

##
mixins

### auro_anchorButton

    @mixin auro_anchorButton($style, $env, $display: inline-block) { ... }

### Description

Creates Sass variable or custom property output for multi-use button shape

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$style` | Specifies the style type (sass, css) | `String` | — none
`$env` | Specifies the style environment (component, noncomponent) | `String` | — none
`$display` | Specifies display type | `String` | `inline-block`

### Example

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/anchor-roleButton";

Set properties for Sass output that is NOT within a component

    .auro_roleButton {
        @include auro_anchorButton(sass, noncomponent);
    }

Set properties for CSS output that IS within a component

    .button {
        @include auro_anchorButton(css, component)
    }

### Throws

- Invalid $style option. Please use `css` or `sass`

- Invalid $env option. Please use `component` or `noncomponent`

### auro_anchorTab

    @mixin auro_anchorTab($style, $env) { ... }

### Description

Creates Sass variable or custom property output for multi-use tab shape

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$style` | Specifies the style type (sass, css) | `String` | — none
`$env` | Specifies the style environment (component, noncomponent) | `String` | — none

### Example

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/anchor-roleTab";

Set properties for Sass output that is NOT within a component

    .auro_roleTab {
       @include auro_anchorTab(sass, noncomponent);
    }

Set properties for CSS output that IS within a component

    .hyperlink--tab {
        @include auro_anchorTab(css, component)
    }

### Throws

- Invalid $style option. Please use `css` or `sass`

- Invalid $env option. Please use `component` or `noncomponent`

### auro_focus-hyperlink

    @mixin auro_focus-hyperlink($syntax) { ... }

### Description

Creates Sass variable or custom property output for multi-use focus-visible shape

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$syntax` | sets user's request for style of variable return (css, sass) | `String` | — none

### Example

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/focusVisible";

Set properties for Sass output

    .focus-visible {
      &.hyperlink {
        @include auro_focus-hyperlink(sass)
      }
    }

Set properties for CSS output

    :host(.focus-visible) {
      .hyperlink
        @include auro_focus-hyperlink(css);
      }
    }

#
utility-responsive

##
css

### #{$scope}.#{$prefix}util_is-smOnly

    #{$scope}.#{$prefix}util_is-smOnly { ... }

### Description

Utility class to restrain visibility of UI element to sm users only.

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

    .util_is-smOnly {}

Selector(s) when $scope: true;

    .auro .util_is-smOnly {}

Selector(s) when $prefix: true;

    .auro_util_is-smOnly {}

### #{$scope}.#{$prefix}util_is-mdOnly

    #{$scope}.#{$prefix}util_is-mdOnly { ... }

### Description

Utility class to restrain `block` visibility of UI element between sm and md screens.

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

    .util_is-mdOnly {}

Selector(s) when $scope: true;

    .auro .util_is-mdOnly {}

Selector(s) when $prefix: true;

    .auro_util_is-mdOnly {}

### #{$scope}.#{$prefix}util_is-mdOnly--inline

    #{$scope}.#{$prefix}util_is-mdOnly--inline { ... }

### Description

Utility class to restrain `inline-block` visibility of UI element between sm and md screens.

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

    .util_is-mdOnly--inline {}

Selector(s) when $scope: true;

    .auro .util_is-mdOnly--inline {}

Selector(s) when $prefix: true;

    .auro_util_is-mdOnly--inline {}

### #{$scope}.#{$prefix}util_is-mdAppears

    #{$scope}.#{$prefix}util_is-mdAppears { ... }

### Description

Utility class to restrain `block` visibility of UI element for md screens.

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

    .util_is-mdAppears {}

Selector(s) when $scope: true;

    .auro .util_is-mdAppears {}

Selector(s) when $prefix: true;

    .auro_util_is-mdAppears {}

### #{$scope}.#{$prefix}util_is-mdAppears--inline

    #{$scope}.#{$prefix}util_is-mdAppears--inline { ... }

### Description

Utility class to restrain `block` visibility of UI element for md screens.

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

    .util_is-mdAppears--inline {}

Selector(s) when $scope: true;

    .auro .util_is-mdAppears--inline {}

Selector(s) when $prefix: true;

    .auro_util_is-mdAppears--inline {}

### #{$scope}.#{$prefix}util_is-lgOnly

    #{$scope}.#{$prefix}util_is-lgOnly { ... }

### Description

Utility class to restrain `block` visibility of UI element for lg screens.

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

    .util_is-lgOnly {}

Selector(s) when $scope: true;

    .auro .util_is-lgOnly {}

Selector(s) when $prefix: true;

    .auro_util_is-lgOnly {}

### #{$scope}.#{$prefix}util_is-lgOnly--inline

    #{$scope}.#{$prefix}util_is-lgOnly--inline { ... }

### Description

Utility class to restrain `block` visibility of UI element for lg screens.

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

    .util_is-lgOnly--inline {}

Selector(s) when $scope: true;

    .auro .util_is-lgOnly--inline {}

Selector(s) when $prefix: true;

    .auro_util_is-lgOnly--inline {}

### #{$scope}.#{$prefix}util_img-is-responsive

    #{$scope}.#{$prefix}util_img-is-responsive { ... }

### Description

Utility class that will allow img src to fill 100% of space for responsive characteristics

See variable use for managing the `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

import selector partial file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

    .util_img-is-responsive {}

Selector(s) when $scope: true;

    .auro .util_img-is-responsive {}

Selector(s) when $prefix: true;

    .auro_util_img-is-responsive {}

Example HTML selector use

    <img class="util_img-is-responsive" src=" ... " alt="" />

#
utility-type

##
css

### #{$scope}.#{$prefix}util_nowrap

    #{$scope}.#{$prefix}util_nowrap { ... }

### Description

Utility class force no wrap on content

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_nowrap {}

Selector(s) when $scope: true;

    .auro .util_nowrap {}

Selector(s) when $prefix: true;

    .auro_util_nowrap {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/typeProperties";

### #{$scope}.#{$prefix}util_capitalize

    #{$scope}.#{$prefix}util_capitalize { ... }

### Description

Utility class to capitalize a string

Manage `!important` flag.

Manage `$scope` and `$prefix` options.

### Example

Default selector(s)

    .util_capitalize {}

Selector(s) when $scope: true;

    .auro .util_capitalize {}

Selector(s) when $prefix: true;

    .auro_util_capitalize {}

import mixin file

    @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityClasses/typeProperties";