Search

#
accessibility

##
css

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

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

### Description

Selector set to enable use of focus visible polyfill.

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

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`

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

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

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

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

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

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

### 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 set elements 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 set elements 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 within a block 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--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 set 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 set 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 set 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 set 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 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 set 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 set 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 set 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 set 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 set 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 set 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 set 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 set 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 set 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 set 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 set 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 set 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

parameter Name | parameter Description | parameter Type | parameter Default value
--- | --- | --- | ---
`$breakpointValue` | sets value of media breakpoint | `String` | — none
`$mediaFeature` | sets feature value, defaults to | `String` | `min-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

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

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

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

    @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

    @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,
      &.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

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