Search

#
accessibility

##
css

### .focus-visible :focus:not(.focus-visible)

    .focus-visible :focus:not(.focus-visible) { ... }

### Description

Selector set to enable use of focus visible polyfill.

Based on the proposed CSS `:focus-visible` pseudo-selector, this prototype adds a `focus-visible` class to the focused element, in situations in which the `:focus-visible` pseudo-selector should match.

### Example

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/animation";

Using mixin with default values;

    .foo {
      @include auro_transition;
    }

#
core

##
css

### #{$scope} *

    #{$scope} * { ... }

### Description

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

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/orion-web-core-style-sheets/dist/core";

#
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/orion-web-core-style-sheets/dist/essentials";

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

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

### Description

Set baseline type settings for `body` elment 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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/essentials";

import file with `$paragraph` flag set to true

    $paragraph: true;
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/normalize";

### #{$scope}hr

    #{$scope}hr { ... }

### Description

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

Manage `$scope` option.

### Example

Default selector(s)

    hr {}

Selector(s) when $scope: true;

    .auro hr {}

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/normalize";

### #{$scope}abbr[title]

    #{$scope}abbr[title] { ... }

### Description

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

Manage `$scope` option.

### Example

Default selector(s)

    abbr[title] {}

Selector(s) when $scope: true;

    .auro abbr[title] {}

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/normalize";

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

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

### Description

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

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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/normalize";

### #{$scope}button::-moz-focus-inner, #{$scope}[type="button"]::-moz-focus-inner, #{$scope}[type="reset"]::-moz-focus-inner, #{$scope}[type="submit"]::-moz-focus-inner

    #{$scope}button::-moz-focus-inner,
    #{$scope}[type="button"]::-moz-focus-inner,
    #{$scope}[type="reset"]::-moz-focus-inner,
    #{$scope}[type="submit"]::-moz-focus-inner { ... }

### Description

Remove the inner border and padding in Firefox.

Manage `$scope` option.

### Example

Default selector(s)

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {}

Selector(s) when $scope: true;

    .auro button::-moz-focus-inner,
    .auro [type="button"]::-moz-focus-inner,
    .auro [type="reset"]::-moz-focus-inner,
    .auro [type="submit"]::-moz-focus-inner {}

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

### #{$scope}button:-moz-focusring, #{$scope}[type="button"]:-moz-focusring, #{$scope}[type="reset"]:-moz-focusring, #{$scope}[type="submit"]:-moz-focusring

    #{$scope}button:-moz-focusring,
    #{$scope}[type="button"]:-moz-focusring,
    #{$scope}[type="reset"]:-moz-focusring,
    #{$scope}[type="submit"]:-moz-focusring { ... }

### Description

Restore the focus styles unset by the previous rule.

Manage `$scope` option.

### Example

Default selector(s)

    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {}

Selector(s) when $scope: true;

    .auro button:-moz-focusring,
    .auro [type="button"]:-moz-focusring,
    .auro [type="reset"]:-moz-focusring,
    .auro [type="submit"]:-moz-focusring {}

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/normalize";

### #{$scope}legend

    #{$scope}legend { ... }

### Description

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

Manage `$scope` option.

### Example

Default selector(s)

    legend {}

Selector(s) when $scope: true;

    .auro legend {}

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/normalize";

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

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

### 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/orion-web-core-style-sheets/dist/normalize";

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

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

### Description

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

Manage `$scope` option.

### Example

Default selector(s)

    [type="search"] {}

Selector(s) when $scope: true;

    .auro [type="search"] {}

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/normalize";

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

    #{$scope}[type="search"]::-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/orion-web-core-style-sheets/dist/normalize";

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

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

### Description

1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in 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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/ ...

return example

    .auro_[selector] { ... }

### Used by

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

#
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/orion-web-core-style-sheets/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 take a string and capitalize the first letter on output

### 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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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 OWCSS 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/orion-web-core-style-sheets/dist/componentSupport/containedButtons";

import dependency file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

### #{$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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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/orion-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/orion-design-tokens/dist/tokens/SCSSVariableMap";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/insetUtility";

import with custom over-rides

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

### Throws

- INVALID,

### 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/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

### 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/orion-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/orion-design-tokens/dist/tokens/SCSSVariableMap";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/spacingUtility";

import with custom over-rides

    $auro-spacing-types: inline;
    $auro-spacing-options: xxxs;
    @import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SCSSVariableMap";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/insetUtility";

### 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) { ... }

### 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

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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 requst for style of variable return (css, sass) | `String` | — none

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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);
      }
    }

### auro_focus-button

    @mixin auro_focus-button($style) { ... }

### Description

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

### Parameters

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

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible";

Set properties for CSS output

    :host(.focus-visible) {
      .button {
        @include auro_focus-button(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/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/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/orion-web-core-style-sheets/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="" />

#
†deprecated

##
mixins

### transition

Deprecated!

See `auro_transition`

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

### Description

Will be removed with upcoming MAJOR release

### Parameters

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

### Output

Simple method of animating certain properties of an element, with ability to define property, duration, delay and timing function.

### phone-large

Deprecated!

see responsive > mixins > `auro_breakpoint`

    @mixin phone-large() { ... }

### Description

Standard breakpoint to support handheld resolutions that specifically fall between 480px - 840px.

This Orion breakpoint mixin preset does not have a direct Auro replacement.

### Parameters

None.

### Example

Deprecated tokens w/optional replacements

    $breakpoint-width-narrow: 480px; // deprecated
    $breakpoint-width-medium: 840px; // deprecated
    $breakpoint-width-wide:  1024px; // deprecated
    $breakpoint-width-max:   1440px; // deprecated

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

Deprecated mixin replacement option

    @include auro_breakpoint($cust: '(min-width: #{$breakpoint-width-narrow}) and (max-width: #{$breakpoint-width-medium - 1px})') { ... }

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

    .foo {
        @include phone-large {
          ...
        }
    }

### tablet

Deprecated!

see responsive > mixins > `auro_breakpoint`

    @mixin tablet() { ... }

### Description

Standard breakpoint to support tablet sized devices that specifically fall between 840px - 1024px.

This Orion breakpoint mixin does not have a direct Auro replacement.

### Parameters

None.

### Example

Deprecated tokens w/optional replacements

    $breakpoint-width-narrow: 480px; // deprecated
    $breakpoint-width-medium: 840px; // deprecated
    $breakpoint-width-wide:  1024px; // deprecated
    $breakpoint-width-max:   1440px; // deprecated

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

Deprecated mixin replacement option

    @include auro_breakpoint($cust: '(min-width: #{$breakpoint-width-medium}) and (max-width: #{$breakpoint-width-wide - 1px})') { ... }

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

    .foo {
        @include tablet {
          ...
        }
    }

### breakpoint-max

Deprecated!

see responsive > mixins > `auro_breakpoint`

    @mixin breakpoint-max() { ... }

### Description

Standard breakpoint to support resolutions greater than 1440px.

This Orion breakpoint mixin does not have a direct Auro replacement.

### Parameters

None.

### Example

Deprecated tokens w/optional replacements

    $breakpoint-width-narrow: 480px; // deprecated
    $breakpoint-width-medium: 840px; // deprecated
    $breakpoint-width-wide:  1024px; // deprecated
    $breakpoint-width-max:   1440px; // deprecated

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

Deprecated mixin replacement option

    @include auro_breakpoint($min: $breakpoint-width-max) { ... }

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

    .foo {
        @include breakpoint-max {
          ...
        }
    }

### breakpoint-wide

Deprecated!

see responsive > mixins > `auro_breakpoint`

    @mixin breakpoint-wide() { ... }

### Description

Standard breakpoint to support resolutions greater than 1024px.

This Orion breakpoint mixin does not have a direct Auro replacement.

### Parameters

None.

### Example

Deprecated tokens w/optional replacements

    $breakpoint-width-narrow: 480px; // deprecated
    $breakpoint-width-medium: 840px; // deprecated
    $breakpoint-width-wide:  1024px; // deprecated
    $breakpoint-width-max:   1440px; // deprecated

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

Deprecated mixin replacement option

    @include auro_breakpoint($min: $breakpoint-width-wide) { ... }

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

    .foo {
        @include breakpoint-wide {
          ...
        }
    }

### breakpoint-medium

Deprecated!

see responsive > mixins > `auro_breakpoint`

    @mixin breakpoint-medium() { ... }

### Description

Standard breakpoint to support resolutions greater than 840px.

This Orion breakpoint mixin does not have a direct Auro replacement.

### Parameters

None.

### Example

Deprecated tokens w/optional replacements

    $breakpoint-width-narrow: 480px; // deprecated
    $breakpoint-width-medium: 840px; // deprecated
    $breakpoint-width-wide:  1024px; // deprecated
    $breakpoint-width-max:   1440px; // deprecated

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

Deprecated mixin replacement option

    @include auro_breakpoint($min: $breakpoint-width-medium) { ... }

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

    .foo {
        @include breakpoint-medium {
          ...
        }
    }

### breakpoint-narrow

Deprecated!

see responsive > mixins > `auro_breakpoint`

    @mixin breakpoint-narrow() { ... }

### Description

Standard breakpoint to support resolutions greater than 480px.

This Orion breakpoint mixin does not have a direct Auro replacement.

### Parameters

None.

### Example

Deprecated tokens w/optional replacements

    $breakpoint-width-narrow: 480px; // deprecated
    $breakpoint-width-medium: 840px; // deprecated
    $breakpoint-width-wide:  1024px; // deprecated
    $breakpoint-width-max:   1440px; // deprecated

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

Deprecated mixin replacement option

    @include auro_breakpoint($min: $breakpoint-width-narrow) { ... }

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint

    .foo {
        @include breakpoint-narrow {
          ...
        }
    }

### breakpoint

Deprecated!

see responsive > mixins > `auro_breakpoint`

    @mixin breakpoint($breakpointValue, $mediaFeature: min-width) { ... }

### Description

Open format mixin to define any breakpoint.

See also: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

Compatibility: https://caniuse.com/#feat=css-mediaqueries\

### Parameters

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$breakpointValue` | sets value of media breakpoint | `String` | — none
`$mediaFeature` | sets feature value | `String` | `min-width`

### Example

Deprecated tokens w/optional replacements

    $breakpoint-width-narrow: 480px; // deprecated
    $breakpoint-width-medium: 840px; // deprecated
    $breakpoint-width-wide:  1024px; // deprecated
    $breakpoint-width-max:   1440px; // deprecated

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

Deprecated mixin replacement option

    @include auro_breakpoint($min: $breakpoint-width-narrow) { ... }
    @include auro_breakpoint($max: $breakpoint-width-wide) { ... }

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

Set breakpoint using manually entered properties

    .foo {
      color: orange;

      @include breakpoint(400px) {
        color: green;
      }
    }

### anchorButton

Deprecated!

See `auro_anchorButton`

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

### 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

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/anchor-roleButton";

Set properties for Sass output that is NOT within a component

    .ods-roleButton {
        @include anchorButton(sass, noncomponent);
    }

Set properties for CSS output that IS within a component

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

### Throws

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

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

### anchorTab

Deprecated!

see `auro_anchorTab`

    @mixin 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/orion-web-core-style-sheets/dist/utilityMixins/anchor-roleTab";

Set properties for Sass output that is NOT within a component

    .ods-roleTab {
       @include anchorTab(sass, noncomponent);
    }

Set properties for CSS output that IS within a component

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

### Throws

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

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

### focus-hyperlink

Deprecated!

see `auro_focus-hyperlink`

    @mixin focus-hyperlink($style) { ... }

### Description

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

### Parameters

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

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible";

Set properties for Sass output

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

Set properties for CSS output

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

### focus-button

Deprecated!

see `auro_focus-button`

    @mixin focus-button($style) { ... }

### Description

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

### Parameters

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

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible";

Set properties for CSS output

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

##
css

### html

Deprecated!

see `essentials.scss`

    html { ... }

### Description

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

### Example

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

### body, .baseType

Deprecated!

see `essentials.scss`

    body,
    .baseType { ... }

### Description

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

### Example

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

### .baseParagraph

Deprecated!

see `essentials.scss`

    .baseParagraph { ... }

### Description

Sets standard `margin-bottom` for all paragraph style content

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

### Example

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

### .hyperlink

Deprecated!

see `essentials.scss`

    .hyperlink { ... }

### Description

Baseline hyperlink styles as mirrored in ods-hyperlink

Support for: `.hyperlink--inline`, and `.hyperlink--darktheme`

### Example

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

### img

Deprecated!

see `essentials.scss`

    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.

### Example

Example HTML selector use

    <img src=" ... " alt="" />

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

### small, .type--small

Deprecated!

see `essentials.scss`

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

### Description

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

### Example

Example HTML selector use

    <small> ... </small>` or `<element class="type--small"> ... </element>

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

### .heading

Deprecated!

see `.heading` in new `_headings.scss` file

    .heading { ... }

### Description

Baseline block 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.

### Example

Example HTML selector use

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

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

### .heading--max

Deprecated!

see `.heading--display`

    .heading--max { ... }

### Description

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

### Example

Example HTML selector use

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

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

### .heading--xxl

Deprecated!

see `.heading--800`

    .heading--xxl { ... }

### Description

Section title for content relating to the main title. Secondary Headings or titles. Used in conjunction with `.heading` selector

### Example

Example HTML selector use

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

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

### .heading--xl

Deprecated!

see `.heading--700`

    .heading--xl { ... }

### Description

Subtitle for main title or specific sub-section content relating to a section. Used in conjunction with `.heading` selector

### Example

Example HTML selector use

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

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

### .heading--lg

Deprecated!

see `.heading--600`

    .heading--lg { ... }

### Description

Label for content relating to a specific sub-section. Can follow any title. Used in conjunction with `.heading` selector

### Example

Example HTML selector use

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

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

### *

Deprecated!

see `core.scss`

    * { ... }

### Description

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

Manage `$scope` option.

### Example

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

### .focus-visible :focus:not(.focus-visible)

Deprecated!

see `core.scss`

    .focus-visible :focus:not(.focus-visible) { ... }

### Description

Selector set to enable use of focus visible polyfill.

Based on the proposed CSS `:focus-visible` pseudo-selector, this prototype adds a `focus-visible` class to the focused element, in situations in which the `:focus-visible` pseudo-selector should match.

### Example

import file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

### .ods-roleButton

Deprecated!

See `.auro_roleButton`

    .ods-roleButton { ... }

### Description

`.ods-roleButton` is a helper class to support the UI of a hyperlink using `role="button"`

### Example

import selector file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleButton";

### .ods-roleTab

Deprecated!

see `.auro_roleTab`

    .ods-roleTab { ... }

### Description

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

### Example

import selector file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/anchor-roleTab";

### .ods-containedButtons

Deprecated!

see `.auro_containedButtons`

    .ods-containedButtons { ... }

### Description

`.ods-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.

`.ods-containedButtons` has a dependency on OWCSS breakpoints. See example below to import dependency.

Place selector on outer parent element.

### Example

import selector file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/containedButtons";

import dependency file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";

### .ods-tablist

Deprecated!

see `.auro_tablist`

    .ods-tablist { ... }

### Description

`.ods-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.

### Example

import selector file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/componentSupport/tablist";

### input[type=text], input[type=password], input[type=email]

Deprecated!

Will be removed with upcoming MAJOR release, please reference the inputtext element for more information

    input[type=text],
    input[type=password],
    input[type=email] { ... }

### Example

import selector file with parent wrapper

    .[parent-selector] {
      @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/formElements/inputTypeText";
    }

### .focus-visible

Deprecated!

    .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/orion-web-core-style-sheets/dist/utilityClasses/focusVisible";

### .util_fontWeightBook

Deprecated!

see `.util_fontWeightDefault`

    .util_fontWeightBook { ... }

### Description

Utility class for font-weight `book`

Manage `!important` flag.

### Example

import Sass file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

### .util_fontWeightLight

Deprecated!

see `.util_fontWeightDisplay`

    .util_fontWeightLight { ... }

### Description

Utility class for font-weight `light`

Manage `!important` flag.

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

### Example

import Sass file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

### .util_type--lg

Deprecated!

discontinue use, see heading styles

    .util_type--lg { ... }

### Description

Utility class for font-size `lg`

Manage `!important` flag.

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

### Example

import Sass file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

### .util_type--xl

Deprecated!

discontinue use, see heading styles

    .util_type--xl { ... }

### Description

Utility class for font-size `xl`

Manage `!important` flag.

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

### Example

import Sass file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

### .util_type--secondary

Deprecated!

discontinue use, see body styles

    .util_type--secondary { ... }

### Description

Utility class for color `secondary`

Manage `!important` flag.

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

### Example

import Sass file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/fontStyles";

### .util_marginAuto

Deprecated!

see `util_margin--auto`

    .util_marginAuto { ... }

### Description

Utility class to center content within a block element

Manage `!important` flag.

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

### .util_marginBottom--sml

Deprecated!

see `.util_stackMarginXs--bottom`

    .util_marginBottom--sml { ... }

### Description

Utility class to set margin-bottom to `sml`

Manage `!important` flag.

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

### .util_marginBottom--med

Deprecated!

see `.util_stackMarginMd--bottom`

    .util_marginBottom--med { ... }

### Description

Utility class to set margin-bottom to `med`

Manage `!important` flag.

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

### .util_marginTop--sml

Deprecated!

see `.util_stackMarginXs--top`

    .util_marginTop--sml { ... }

### Description

Utility class to set margin-top to `sml`

Manage `!important` flag.

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

### .util_marginTop--med

Deprecated!

see `.util_stackMarginMd--top`

    .util_marginTop--med { ... }

### Description

Utility class to set margin-top to `med`

Manage `!important` flag.

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

### .util_marginRight--sml

Deprecated!

see `.util_inlineMarginXs--right`

    .util_marginRight--sml { ... }

### Description

Utility class to set margin-right to `sml`

Manage `!important` flag.

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

### .util_marginRight--med

Deprecated!

see `.util_inlineMarginMd--right`

    .util_marginRight--med { ... }

### Description

Utility class to set margin-right to `med`

Manage `!important` flag.

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

### .util_marginLeft--sml

Deprecated!

see `.util_inlineMarginXs--left`

    .util_marginLeft--sml { ... }

### Description

Utility class to set margin-left to `sml`

Manage `!important` flag.

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

### .util_marginLeft--med

Deprecated!

see `.util_inlineMarginMd--left`

    .util_marginLeft--med { ... }

### Description

Utility class to set margin-left to `med`

Manage `!important` flag.

### Example

import mixin file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/layoutProperties";

### .util_is-mobileOnly

Deprecated!

see `.util_is-smOnly`

    .util_is-mobileOnly { ... }

### Description

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

Manage `!important` flag.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

### .util_is-narrowOnly

Deprecated!

see `.util_is-mdOnly`

    .util_is-narrowOnly { ... }

### Description

Utility class to restrain `block` visibility of UI element between narrow and medium screens.

Manage `!important` flag.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

### .util_is-narrowOnly--inline

Deprecated!

see `.util_is-mdOnly--inline`

    .util_is-narrowOnly--inline { ... }

### Description

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

Manage `!important` flag.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

### .util_is-narrowAppears

Deprecated!

see `.util_is-mdAppears`

    .util_is-narrowAppears { ... }

### Description

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

Manage `!important` flag.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

### .util_is-narrowAppears--inline

Deprecated!

see `.util_is-mdAppears--inline`

    .util_is-narrowAppears--inline { ... }

### Description

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

Manage `!important` flag.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

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

Deprecated!

no new selector

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

### Description

Utility class to restrain `block` visibility of UI element between medium and wide screens.

Manage `!important` flag.

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

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

    .util_is-tabletOnly {}

Selector(s) when $scope: true;

    .auro .util_is-tabletOnly {}

Selector(s) when $prefix: true;

    .auro_util_is-tabletOnly {}

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

Deprecated!

no new selector

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

### Description

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

Manage `!important` flag.

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

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

    .util_is-tabletOnly--inline {}

Selector(s) when $scope: true;

    .auro .util_is-tabletOnly--inline {}

Selector(s) when $prefix: true;

    .auro_util_is-tabletOnly--inline {}

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

Deprecated!

no new selector

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

### Description

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

Manage `!important` flag.

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

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

    .util_is-tabletAppears {}

Selector(s) when $scope: true;

    .auro .util_is-tabletAppears {}

Selector(s) when $prefix: true;

    .auro_util_is-tabletAppears {}

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

Deprecated!

no new selector

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

### Description

Utility class to restrain `inline-block` visibility of UI element for medium screens.

Manage `!important` flag.

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

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

Default selector(s)

    .util_is-tabletAppears--inline {}

Selector(s) when $scope: true;

    .auro .util_is-tabletAppears--inline {}

Selector(s) when $prefix: true;

    .auro_util_is-tabletAppears--inline {}

### .util_is-desktopOnly

Deprecated!

see `.util_is-lgOnly`

    .util_is-desktopOnly { ... }

### Description

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

Manage `!important` flag.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

### .util_is-desktopOnly--inline

Deprecated!

see `.util_is-lgOnly--inline`

    .util_is-desktopOnly--inline { ... }

### Description

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

Manage `!important` flag.

### Example

import mixin file and selector partial file

    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
    @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";