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.

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

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

Correct the line height in all browsers.
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

Add the correct box sizing in Firefox.
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

Correct the inheritance and scaling of font size in all browsers.
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

Remove the bottom border in Chrome 57-
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

Correct the inheritance and scaling of font size in all browsers.
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

Change the font styles in all browsers.
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.

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.

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

Correct the text wrapping in Edge and IE.
Correct the color inheritance from fieldset elements in IE.
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

Correct the odd appearance in Chrome and Safari.
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

Correct the inability to style clickable types in iOS and Safari.
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.

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

General

css

// Auro rule @if variable-exists(auro-asset-font-circular-family-name)

// Auro rule
@if variable-exists(auro-asset-font-circular-family-name) { ... }

Description

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

Example

import src file

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

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

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);
  }
}

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.

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);
  }
}

auro_focus-button

Deprecated!

please consult with Auro team designer to discontinue use

@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);
  }
}

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

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.

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 (auro_spacing)

.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 (auro_spacing)

.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 (auro_spacing)

.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 (auro_spacing)

.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 (auro_layoutPropertiesGenerator)

.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 (auro_layoutPropertiesGenerator)

.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 (auro_layoutPropertiesGenerator)

.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 (auro_layoutPropertiesGenerator)

.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";

.util_is-tabletOnly

Deprecated!

no new selector

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

.util_is-tabletOnly--inline

Deprecated!

no new selector

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

.util_is-tabletAppears

Deprecated!

no new selector

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

.util_is-tabletAppears--inline

Deprecated!

no new selector

.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";