accessibility

css

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

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

Description

Selector set to enable use of focus visible polyfill.

.focus-visible

.focus-visible { ... }

Description

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

See npm focus-visible polyfill https://www.npmjs.com/package/focus-visible

See CSSWG spec https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo

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

Example

import mixin file

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

animation

mixins

transition

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

Description

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

Defaults are set by baseline Design Tokens

To override values, define in element/component shape JSON and address mixin arguments

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

Parameters

NameDescriptionTypeDefault 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

Stringnull

Example

import mixin file

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

Set animation using default properties

.button {
    @include transition;
}

Set animation using custom properties

.button {
    @include transition(color, 0.3s, ease);
}

Output

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

baseline

css

html

html { ... }

Description

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

body, .baseType

body,
.baseType { ... }

Description

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

.baseParagraph

.baseParagraph { ... }

Description

Sets standard margin-bottom for all paragraph style content

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

.hyperlink

.hyperlink { ... }

Description

Baseline hyperlink styles as mirrored in ods-hyperlink

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

small, .type--small

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 HTML - <small> ... </small> or <element class="type--small"> ... </element>

*

* { ... }

Description

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

display-utility

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

NameDescriptionTypeValue
$important

manage use of !important flag

Booleannull

Example

import mixin file

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

update value prior to import

$important: true;
@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/displayProperties";

css

.util_displayInline

.util_displayInline { ... }

Description

Utility class to display elements inline

See variable use for managing the !important flag.

Example

import mixin file

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

.util_displayInlineBlock

.util_displayInlineBlock { ... }

Description

Utility class to display elements inline-block

See variable use for managing the !important flag.

Example

import mixin file

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

.util_displayBlock

.util_displayBlock { ... }

Description

Utility class to display elements inline-block

See variable use for managing the !important flag.

Example

import mixin file

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

.util_displayFlex

.util_displayFlex { ... }

Description

Utility class to display elements flex

See variable use for managing the !important flag.

Example

import mixin file

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

.util_displayHidden

.util_displayHidden { ... }

Description

Utility class to display elements none

See variable use for managing the !important flag.

Example

import mixin file

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

.util_displayHiddenVisually

.util_displayHiddenVisually { ... }

Description

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

See variable use for managing the !important flag.

Example

import mixin file

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

experimental

css

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

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

Description

This is an expermintal feature and approved for use with caution

The following selectors will set a common baseline for <input /> elements within the context of a view. The selector's :focus state will remove the standard halo that appears on other components and simply updates the color of the <input /> element's border.

This is not official and consultation with your team's designer should be addressed prior to inclusion of your project.

DO NOT include Sass file without a parent wrapper as illustrated in the example below:

Example

import selector file with parent wrapper

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

font-utility

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

NameDescriptionTypeValue
$important

manage use of !important flag

Booleannull

Example

import mixin file

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

update value prior to import

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

css

.util_fontWeightBook

.util_fontWeightBook { ... }

Description

Utility class for font-weight book

See variable use for managing the !important flag.

Example

import mixin file

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

.util_fontWeightLight

.util_fontWeightLight { ... }

Description

Utility class for font-weight light

See variable use for managing the !important flag.

Example

import mixin file

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

.util_type--lg

.util_type--lg { ... }

Description

Utility class for font-size lg

See variable use for managing the !important flag.

Example

import mixin file

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

.util_type--xl

.util_type--xl { ... }

Description

Utility class for font-size xl

See variable use for managing the !important flag.

Example

import mixin file

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

.util_type--secondary

.util_type--secondary { ... }

Description

Utility class for color secondary

See variable use for managing the !important flag.

Example

import mixin file

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

heading

css

.heading

.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 HTML - <element class="heading"> ... </element>

.heading--flushLeft

.heading--flushLeft { ... }

Description

Heading utility

.heading--max

.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 HTML - <element class="heading heading--max"> ... </element>

.heading--xxl

.heading--xxl { ... }

Description

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

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

.heading--xl

.heading--xl { ... }

Description

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

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

.heading--lg

.heading--lg { ... }

Description

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

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

layout-utility

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

NameDescriptionTypeValue
$important

manage use of !important flag

Booleannull

Example

import mixin file

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

update value prior to import

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

css

.util_floatLeft

.util_floatLeft { ... }

Description

Utility class to float left

See variable use for managing the !important flag.

Example

import mixin file

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

.util_floatRight

.util_floatRight { ... }

Description

Utility class to float right

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginAuto

.util_marginAuto { ... }

Description

Utility class to center content

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginBottom--none

.util_marginBottom--none { ... }

Description

Utility class to remove any bottom margin from an element

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginBottom--sml

.util_marginBottom--sml { ... }

Description

Utility class to margin-bottom to sml

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginBottom--med

.util_marginBottom--med { ... }

Description

Utility class to margin-bottom to med

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginBottom--lg

.util_marginBottom--lg { ... }

Description

Utility class to margin-bottom to lg

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginBottom--xl

.util_marginBottom--xl { ... }

Description

Utility class to margin-bottom to xl

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginTop--none

.util_marginTop--none { ... }

Description

Utility class to remove any margin from the top of an element

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginTop--sml

.util_marginTop--sml { ... }

Description

Utility class to margin-top to sml

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginTop--med

.util_marginTop--med { ... }

Description

Utility class to margin-top to med

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginTop--lg

.util_marginTop--lg { ... }

Description

Utility class to margin-top to lg

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginTop--xl

.util_marginTop--xl { ... }

Description

Utility class to margin-top to xl

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginRight--sml

.util_marginRight--sml { ... }

Description

Utility class to margin-right to sml

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginRight--med

.util_marginRight--med { ... }

Description

Utility class to margin-right to med

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginRight--lg

.util_marginRight--lg { ... }

Description

Utility class to margin-right to lg

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginRight--xl

.util_marginRight--xl { ... }

Description

Utility class to margin-right to xl

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginLeft--sml

.util_marginLeft--sml { ... }

Description

Utility class to margin-left to sml

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginLeft--med

.util_marginLeft--med { ... }

Description

Utility class to margin-left to med

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginLeft--lg

.util_marginLeft--lg { ... }

Description

Utility class to margin-left to lg

See variable use for managing the !important flag.

Example

import mixin file

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

.util_marginLeft--xl

.util_marginLeft--xl { ... }

Description

Utility class to margin-left to xl

See variable use for managing the !important flag.

Example

import mixin file

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

ods-utility

css

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

.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

.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

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

responsive

css

img

img { ... }

Description

Default setting for all <img /> tags so that images will automatically adjust to fit the size of the screen.

Example HTML - <img src=" ... " alt="" />

mixins

phone-large

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

Description

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

Parameters

None.

Example

import mixin file

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

Set breakpoint

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

tablet

@mixin tablet() { ... }

Description

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

Parameters

None.

Example

import mixin file

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

Set breakpoint

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

breakpoint-max

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

Description

Standard breakpoint to support resolutions greater than 1440px.

Parameters

None.

Example

import mixin file

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

Set breakpoint

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

breakpoint-wide

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

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

breakpoint-medium

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

Description

Standard breakpoint to support resolutions greater than 840px.

Parameters

None.

Example

import mixin file

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

Set breakpoint

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

breakpoint-narrow

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

Description

Standard breakpoint to support resolutions greater than 480px.

Parameters

None.

Example

import mixin file

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

Set breakpoint

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

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

NameDescriptionTypeDefault value
$breakpointValue

sets value of media breakpoint

String—
$mediaFeature

sets feature value, defaults to

Stringmin-width

Example

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

responsive-utility

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

NameDescriptionTypeValue
$important

manage use of !important flag

Booleannull

Example

import mixin file

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

update value prior to import

$important: true;
@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";

css

.util_is-mobileOnly

.util_is-mobileOnly { ... }

Description

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

See variable use for managing the !important flag.

Example

import mixin 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

.util_is-narrowOnly { ... }

Description

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

See variable use for managing the !important flag.

Example

import mixin 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

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

Description

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

See variable use for managing the !important flag.

Example

import mixin 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

.util_is-narrowAppears { ... }

Description

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

See variable use for managing the !important flag.

Example

import mixin 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

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

Description

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

See variable use for managing the !important flag.

Example

import mixin 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

.util_is-tabletOnly { ... }

Description

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

See variable use for managing the !important flag.

Example

import mixin 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--inline

.util_is-tabletOnly--inline { ... }

Description

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

See variable use for managing the !important flag.

Example

import mixin 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-tabletAppears

.util_is-tabletAppears { ... }

Description

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

See variable use for managing the !important flag.

Example

import mixin 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-tabletAppears--inline

.util_is-tabletAppears--inline { ... }

Description

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

See variable use for managing the !important flag.

Example

import mixin 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

.util_is-desktopOnly { ... }

Description

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

See variable use for managing the !important flag.

Example

import mixin 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

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

Description

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

See variable use for managing the !important flag.

Example

import mixin file

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

utility-mixins

mixins

anchorButton

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

Description

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

Parameters

NameDescriptionTypeDefault value
$style

Specifies the style type (sass, css)

String—
$env

Specifies the style environment (component, noncomponent)

String—

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

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

Description

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

Parameters

NameDescriptionTypeDefault value
$style

Specifies the style type (sass, css)

String—
$env

Specifies the style environment (component, noncomponent)

String—

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

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

Description

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

Parameters

NameDescriptionTypeDefault value
$style

sets user's requst for style of variable return (css, sass)

String—

Example

import mixin file

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

Set properties for Sass output

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

Set properties for CSS output

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

focus-button

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

Description

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

Parameters

NameDescriptionTypeDefault value
$style

sets user's requst for style of variable return (css, sass)

String—

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