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 | 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 | 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 | 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--none
.util_marginRight--none { ... }Description
Utility class to set margin-right to none
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--none
.util_marginLeft--none { ... }Description
Utility class to set margin-left to none
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";.util_paddingTop--none
.util_paddingTop--none { ... }Description
Utility class to set padding-top to none
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_paddingRight--none
.util_paddingRight--none { ... }Description
Utility class to set padding-right to none
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_paddingBottom--none
.util_paddingBottom--none { ... }Description
Utility class to set padding-bottom to none
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_paddingLeft--none
.util_paddingLeft--none { ... }Description
Utility class to set padding-left to none
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 | 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
cssorsassInvalid $env option. Please use
componentornoncomponent
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
cssorsassInvalid $env option. Please use
componentornoncomponent
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);
}
}