accessibility

css

#{$scope} *

#{$scope} * { ... }

Description

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

DEPRECATED!! The use of the Sass variable $focus-visible has been deprecated. See &:focus-visible for preferred feature.

Global media setting for a11y support of reduced-motion. By setting the durations to almost 0, we prevent animation from playing for those with motion sensitivities without affecting transition or animation events (e.g. transitionend).

Manage $scope option.

Example

Default selector(s)

*, *:before, *:after {}

Selector(s) when $scope: true;

.auro *, .auro *:before, .auro *:after {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core";

import file with $focus set to true

$focus: true;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core";

:focus

:focus { ... }

Description

Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it.

Check current browser support for :focus-visible on Can I Use.

Example

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/core";

&:focus-visible

&:focus-visible { ... }

Description

Global setting for the display of focus-visible accessibility interaction. Can I Use.

This is a OPT-IN feature, support is NOT added by default. Users MUST subscribe to Sass import described below.

The focus-visible Sass file MUST be imported BEFORE the essentials Sass file. Sass load order is IMPORTANT. See example below.

Manage $scope option.

Example

Default selector(s)

*:focus-visible {}

Selector(s) when $scope: true;

.auro *:focus-visible {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible";

it's important to import focus-visible BEFORE essentials

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/focus-visible";
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";

animation

mixins

auro_transition

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

Description

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

Defaults are set by baseline Design Tokens

Compatibility: css-transitions

Parameters

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

Example

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/animation";

Using mixin with default values;

.foo {
  @include auro_transition;
}

component-support

css

:host

:host { ... }

Description

Component a11y support for :host
For use with auroElement.js base class and web component development

Example

Default selector

:host {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";

:host([hidden]:not(:focus):not(:active))

:host([hidden]:not(:focus):not(:active)) { ... }

Description

Component a11y support for :host selector with hidden attribute
For use with auroElement.js base class and web component development

Example

Default selector

:host([hidden]:not(:focus):not(:active)) {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";

:host([hiddenVisually]:not(:focus):not(:active))

:host([hiddenVisually]:not(:focus):not(:active)) { ... }

Description

Component a11y support for :host selector with hiddenVisually attribute
For use with auroElement.js base class and web component development

Example

Default selector

:host([hiddenVisually]:not(:focus):not(:active)) {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement";

container

css

#{$scope}.#{$prefix}container

#{$scope}.#{$prefix}container { ... }

Description

Container class

Manage $scope and $prefix options.

Example

Default selector(s)

.container {}

Selector(s) when $scope: true;

.auro .container {}

Selector(s) when $prefix: true;

.auro_container {}

Example HTML selector use

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

import file;

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

#{$scope}.#{$prefix}pagecontainer

#{$scope}.#{$prefix}pagecontainer { ... }

Description

Container class

Manage $scope and $prefix options.

Example

Default selector(s)

.container {}

Selector(s) when $scope: true;

.auro .container {}

Selector(s) when $prefix: true;

.auro_container {}

Example HTML selector use

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

import file;

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

core

css

#{$sym}#{$prefix}#{$scope}blockquote

#{$sym}#{$prefix}#{$scope}blockquote { ... }

Description

Baseline HTML setting for blockquote element.

Manage $scope option.

Example

Default selector(s)

blockquote {}

Selector(s) when $scope: true;

.auro blockquote {}

Selector(s) when $prefix: true;

.auro_blockquote {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/blockquote";

#{$sym}#{$prefix}picture#{$scope}

#{$sym}#{$prefix}picture#{$scope} { ... }

Description

Baseline HTML setting for picture element.

Manage $scope and $prefix options.

Example

Default selector(s)

picture img {}

Selector(s) when $scope: true;

picture.auro img {}

Selector(s) when $prefix: true;

.auro_picture img {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/picture";

essentials

css

#{$sym}#{$prefix}html#{$scope}

#{$sym}#{$prefix}html#{$scope} { ... }

Description

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

Manage $scope and $prefix options.

Example

Default selector(s)

html {}

Selector(s) when $scope: true;

html.auro {}

Selector(s) when $prefix: true;

.auro_html {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";

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

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

Description

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

Manage $scope and $prefix options.

Example

Default selector(s)

body,
.baseType {}

Selector(s) when $scope: true;

.auro body,
.auro .baseType {}

Selector(s) when $prefix: true;

.body,
.auro_baseType {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";

#{$scope}.#{$prefix}baseParagraph

#{$scope}.#{$prefix}baseParagraph { ... }

Description

Sets standard margin for all paragraph style content

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

Manage $scope and $prefix options.

Example

Default selector(s)

.baseParagraph {}
.baseParagraph .hyperlink {}

Selector(s) when $scope: true;

.auro .baseParagraph {}
.auro .baseParagraph .hyperlink {}

Selector(s) when $prefix: true;

.auro_baseParagraph {}
.auro_baseParagraph .auro_hyperlink {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";

#{$scope}.#{$prefix}hyperlink

#{$scope}.#{$prefix}hyperlink { ... }

Description

Baseline hyperlink styles as mirrored in auro-hyperlink web component

Support for: .hyperlink--nav, and .hyperlink--ondark

Manage $scope and $prefix options.

Example

Default selector(s)

.hyperlink {}
.hyperlink--inline {}
.hyperlink--darktheme {}

Selector(s) when $scope: true;

.auro .hyperlink {}
.auro .hyperlink--inline {}
.auro .hyperlink--darktheme {}

Selector(s) when $prefix: true;

.auro_hyperlink {}
.auro_hyperlink--inline {}
.auro_hyperlink--darktheme {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";

#{$scope}#{$sym}#{$prefix}img

#{$scope}#{$sym}#{$prefix}img { ... }

Description

Default setting for all <img /> tags so that images will automatically adjust to fit the size of the screen. If additional properties are needed to shape the img selector, please see the list of Utility classes including the .util_img-is-responsive selector to scale images with responsive aspects.

Manage $scope and $prefix options.

Example

Default selector(s)

img {}

Selector(s) when $scope: true;

.auro img {}

Selector(s) when $prefix: true;

.auro_img {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";

#{$scope}#{$sym}#{$prefix}small, #{$scope}.#{$prefix}type--small

#{$scope}#{$sym}#{$prefix}small,
#{$scope}.#{$prefix}type--small { ... }

Description

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

Manage $scope and $prefix options.

Example

Default selector(s)

small,
.type--small {}

Selector(s) when $scope: true;

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

Selector(s) when $prefix: true;

.auro_small,
.auro_type--small {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";

#{$scope}#{$sym}#{$prefix}p

#{$scope}#{$sym}#{$prefix}p { ... }

Description

Set <p> element margin standard. This selector is not set by default, set the $paragraph flag to `true' prior to import.

Other options are to use the <small> element or the .baseParagraph selector.

Manage $scope and $prefix options.

Example

Default selector(s)

p {}

Selector(s) when $scope: true;

.auro p {}

Selector(s) when $prefix: true;

.auro_p {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";

import file with $paragraph flag set to true

$paragraph: true;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";

#{$scope}.#{$prefix}fineprint

#{$scope}.#{$prefix}fineprint { ... }

Description

Defines the font size and color of fine print text

Manage $scope and $prefix options.

Example

Default selector(s)

.fineprint {}

Selector(s) when $scope: true;

.auro .fineprint {}

Selector(s) when $prefix: true;

.auro_fineprint {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";

grid

mixins

grid-stickycolumn--md

@mixin grid-stickycolumn--md() { ... }

Description

This mixin will set the element to be sticky on tablet and larger devices.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

import mixin file with altered output values prior to import

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

grid-stickycolumn--xs

@mixin grid-stickycolumn--xs() { ... }

Description

This mixin will set the element to be sticky on mobile devices.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

import mixin file with altered output values prior to import

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

grid_width

@mixin grid_width($maxWidth: 1232px) { ... }

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$maxWidth`	Specifies the max-width value of the grid.	`String`	`1232px`

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

import mixin file with altered output values prior to import

$maxWidth: $ds-grid-breakpoint-xl !default;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

grid_margin

@mixin grid_margin() { ... }

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

import mixin file with altered output values prior to import

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

grid_padding

@mixin grid_padding() { ... }

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

import mixin file with altered output values prior to import

$padding: $ds-grid-margin-xs !default;
  @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

grid_gutter

@mixin grid_gutter($gutter: 16px) { ... }

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$gutter`	Specifies the gutter/gap(horizontal & vertical spacing) value between each cell of the grid.	`String`	`16px`

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

import mixin file with altered output values prior to import

$gutter: $ds-grid-gutter-xs !default;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

css

#{$scope}.#{$prefix}grid

#{$scope}.#{$prefix}grid { ... }

Description

Grid class This class selector is to be deprecated during the next major release. Manage $scope and $prefix options.

Example

Default selector(s)

.grid {}

Selector(s) when $scope: true;

.auro .grid {}

Selector(s) when $prefix: true;

.auro_grid {}

Example HTML selector use

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

import file;

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

headings

css

#{$scope}.#{$prefix}heading

#{$scope}.#{$prefix}heading { ... }

Description

Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. <h1>, <h2>, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.

Manage $scope and $prefix options.

Example

Default selector(s)

.heading {}

Selector(s) when $scope: true;

.auro .heading {}

Selector(s) when $prefix: true;

.auro_heading {}

Example HTML selector use

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

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";

#{$scope}.#{$prefix}heading--display

#{$scope}.#{$prefix}heading--display { ... }

Description

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--display {}

Selector(s) when $scope: true;

.auro .heading--display {}

Selector(s) when $prefix: true;

.auro_heading--display {}

Example HTML selector use

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

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";

#{$scope}.#{$prefix}heading--800

#{$scope}.#{$prefix}heading--800 { ... }

Description

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

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--800 {}

Selector(s) when $scope: true;

.auro .heading--800 {}

Selector(s) when $prefix: true;

.auro_heading--800 {}

Example HTML selector use

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

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";

#{$scope}.#{$prefix}heading--700

#{$scope}.#{$prefix}heading--700 { ... }

Description

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

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--700 {}

Selector(s) when $scope: true;

.auro .heading--700 {}

Selector(s) when $prefix: true;

.auro_heading--700 {}

Example HTML selector use

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

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";

#{$scope}.#{$prefix}heading--600

#{$scope}.#{$prefix}heading--600 { ... }

Description

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

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--600 {}

Selector(s) when $scope: true;

.auro .heading--600 {}

Selector(s) when $prefix: true;

.auro_heading--600 {}

Example HTML selector use

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

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";

#{$scope}.#{$prefix}heading--500

#{$scope}.#{$prefix}heading--500 { ... }

Description

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

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--500 {}

Selector(s) when $scope: true;

.auro .heading--500 {}

Selector(s) when $prefix: true;

.auro_heading--500 {}

Example HTML selector use

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

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";

#{$scope}.#{$prefix}heading--400

#{$scope}.#{$prefix}heading--400 { ... }

Description

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

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--400 {}

Selector(s) when $scope: true;

.auro .heading--400 {}

Selector(s) when $prefix: true;

.auro_heading--400 {}

Example HTML selector use

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

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";

#{$scope}.#{$prefix}heading--300

#{$scope}.#{$prefix}heading--300 { ... }

Description

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

Manage $scope and $prefix options.

Example

Default selector(s)

.heading--300 {}

Selector(s) when $scope: true;

.auro .heading--300 {}

Selector(s) when $prefix: true;

.auro_heading--300 {}

Example HTML selector use

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

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings";

normalize

css

html#{$scope}

html#{$scope} { ... }

Description

Correct the line height in all browsers.
Prevent adjustments of font size after orientation changes in iOS.

Manage $scope option.

Example

Default selector(s)

html {}

Selector(s) when $scope: true;

html.auro {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}body

#{$scope}body { ... }

Description

Remove the margin in all browsers.

Manage $scope option.

Example

Default selector(s)

body {}

Selector(s) when $scope: true;

.auro body {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}main

#{$scope}main { ... }

Description

Render the main element consistently in IE.

Manage $scope option.

Example

Default selector(s)

main {}

Selector(s) when $scope: true;

.auro main {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}hr

#{$scope}hr { ... }

Description

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

Manage $scope option.

Example

Default selector(s)

hr {}

Selector(s) when $scope: true;

.auro hr {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}pre

#{$scope}pre { ... }

Description

Correct the inheritance and scaling of font size in all browsers.
Correct the odd em font sizing in all browsers.

Manage $scope option.

Example

Default selector(s)

pre {}

Selector(s) when $scope: true;

.auro pre {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}a

#{$scope}a { ... }

Description

Remove the gray background on active links in IE 10.

Manage $scope option.

Example

Default selector(s)

a {}

Selector(s) when $scope: true;

.auro a {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}abbr

#{$scope}abbr { ... }

Description

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

Manage $scope option.

Example

Default selector(s)

abbr[title] {}

Selector(s) when $scope: true;

.auro abbr[title] {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}b, #{$scope}strong

#{$scope}b,
#{$scope}strong { ... }

Description

Add the correct font weight in Chrome, Edge, and Safari.

Manage $scope option.

Example

Default selector(s)

b,
strong {}

Selector(s) when $scope: true;

.auro b,
.auro strong {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}code, #{$scope}kbd, #{$scope}samp

#{$scope}code,
#{$scope}kbd,
#{$scope}samp { ... }

Description

Correct the inheritance and scaling of font size in all browsers.
Correct the odd em font sizing in all browsers.

Manage $scope option.

Example

Default selector(s)

code,
kbd,
samp {}

Selector(s) when $scope: true;

.auro code,
.auro kbd,
.auro samp {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}sub, #{$scope}sup

#{$scope}sub,
#{$scope}sup { ... }

Description

Prevent sub and sup elements from affecting the line height in all browsers.

Manage $scope option.

Example

Default selector(s)

sub,
sup {}

Selector(s) when $scope: true;

.auro sub,
.auro sup {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}sub

#{$scope}sub { ... }

Description

Prevent sub element from affecting the line height in all browsers.

Manage $scope option.

Example

Default selector(s)

sub {}

Selector(s) when $scope: true;

.auro sub {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}sup

#{$scope}sup { ... }

Description

Prevent sup element from affecting the line height in all browsers.

Manage $scope option.

Example

Default selector(s)

sup {}

Selector(s) when $scope: true;

.auro sup {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}img

#{$scope}img { ... }

Description

Remove the border on images inside links in IE 10.

Manage $scope option.

Example

Default selector(s)

img {}

Selector(s) when $scope: true;

.auro img {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

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

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

Description

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

Manage $scope option.

Example

Default selector(s)

button,
input,
optgroup,
select,
textarea {}

Selector(s) when $scope: true;

.auro button,
.auro input,
.auro optgroup,
.auro select,
.auro textarea {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}button, #{$scope}input

#{$scope}button,
#{$scope}input { ... }

Description

Show the overflow in IE.

Show the overflow in Edge.

Manage $scope option.

Example

Default selector(s)

button,
input {}

Selector(s) when $scope: true;

.auro button,
.auro input {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}button, #{$scope}select

#{$scope}button,
#{$scope}select { ... }

Description

Remove the inheritance of text transform in Edge, Firefox, and IE.

Remove the inheritance of text transform in Firefox.

Manage $scope option.

Example

Default selector(s)

button,
select {}

Selector(s) when $scope: true;

.auro button,
.auro select {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}button, #{$scope}[type='button'], #{$scope}[type='reset'], #{$scope}[type='submit']

#{$scope}button,
#{$scope}[type='button'],
#{$scope}[type='reset'],
#{$scope}[type='submit'] { ... }

Description

Correct the inability to style clickable types in iOS and Safari.

Manage $scope option.

Example

Default selector(s)

button,
[type="button"],
[type="reset"],
[type="submit"] {}

Selector(s) when $scope: true;

.auro button,
.auro [type="button"],
.auro [type="reset"],
.auro [type="submit"] {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}fieldset

#{$scope}fieldset { ... }

Description

Correct the padding in Firefox.

Manage $scope option.

Example

Default selector(s)

fieldset {}

Selector(s) when $scope: true;

.auro fieldset {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}legend

#{$scope}legend { ... }

Description

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

Manage $scope option.

Example

Default selector(s)

legend {}

Selector(s) when $scope: true;

.auro legend {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}progress

#{$scope}progress { ... }

Description

Add the correct vertical alignment in Chrome, Firefox, and Opera.

Manage $scope option.

Example

Default selector(s)

progress {}

Selector(s) when $scope: true;

.auro progress {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}textarea

#{$scope}textarea { ... }

Description

Remove the default vertical scrollbar in IE 10+.

Manage $scope option.

Example

Default selector(s)

textarea {}

Selector(s) when $scope: true;

.auro textarea {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}[type='number']

#{$scope}[type='number'] { ... }

Description

Correct the cursor style of increment and decrement buttons in Chrome.

Manage $scope option.

Example

Default selector(s)

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

Selector(s) when $scope: true;

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

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

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

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

Description

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

Manage $scope option.

Example

Default selector(s)

[type="search"] {}

Selector(s) when $scope: true;

.auro [type="search"] {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}::-webkit-search-decoration

#{$scope}::-webkit-search-decoration { ... }

Description

Remove the inner padding in Chrome and Safari on macOS.

Manage $scope option.

Example

Default selector(s)

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

Selector(s) when $scope: true;

.auro [type="search"]::-webkit-search-decoration {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

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

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

Description

!. Change font properties to inherit in Safari.

Correct the inability to style clickable types in iOS and Safari.

Manage $scope option.

Example

Default selector(s)

::-webkit-file-upload-button {}

Selector(s) when $scope: true;

.auro ::-webkit-file-upload-button {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}details

#{$scope}details { ... }

Description

Add the correct display in Edge, IE 10+, and Firefox.

Manage $scope option.

Example

Default selector(s)

details {}

Selector(s) when $scope: true;

.auro details {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}summary

#{$scope}summary { ... }

Description

Add the correct display in all browsers.

Manage $scope option.

Example

Default selector(s)

summary {}

Selector(s) when $scope: true;

.auro summary {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}template

#{$scope}template { ... }

Description

Add the correct display in IE 10+.

Manage $scope option.

Example

Default selector(s)

template {}

Selector(s) when $scope: true;

.auro template {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

#{$scope}[hidden]

#{$scope}[hidden] { ... }

Description

Add the correct display in IE 10.

Manage $scope option.

Example

Default selector(s)

[hidden] {}

Selector(s) when $scope: true;

.auro [hidden] {}

import file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/normalize";

page layouts

css

#{$scope}.#{$prefix}pageLayout-2colAnchorNav

#{$scope}.#{$prefix}pageLayout-2colAnchorNav { ... }

Description

pageLayout-2colAnchorNav class

Manage $scope and $prefix options.

Example

Default selector(s)

.pageLayout-2colAnchorNav {}

Selector(s) when $scope: true;

.auro .pageLayout-2colAnchorNav {}

Selector(s) when $prefix: true;

.auro_pageLayout-2colAnchorNav {}

Example HTML selector use

<element class="pageLayout-2colAnchorNav"> ... </element>

import file;

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

#{$scope}.#{$prefix}pageLayout-2colSideNav

#{$scope}.#{$prefix}pageLayout-2colSideNav { ... }

Description

pageLayout-2colSideNav class

Manage $scope and $prefix options.

Example

Default selector(s)

.pageLayout-2colSideNav {}

Selector(s) when $scope: true;

.auro .pageLayout-2colSideNav {}

Selector(s) when $prefix: true;

.auro_pageLayout-2colSideNav {}

Example HTML selector use

<element class="pageLayout-2colSideNav"> ... </element>

import file;

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

#{$scope}.#{$prefix}pageLayout-3col

#{$scope}.#{$prefix}pageLayout-3col { ... }

Description

pageLayout-3col class

Manage $scope and $prefix options.

Example

Default selector(s)

.pageLayout-3col {}

Selector(s) when $scope: true;

.auro .pageLayout-3col {}

Selector(s) when $prefix: true;

.auro_pageLayout-3col {}

Example HTML selector use

<element class="pageLayout-3col"> ... </element>

import file;

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";

responsive

mixins

auro_breakpoint--lg

@mixin auro_breakpoint--lg() { ... }

Description

Standard breakpoint to support resolutions greater than 1232px. This mixin is to be deprecated during the next major release.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

Set breakpoint

.foo {
    @include auro_breakpoint--lg {
      ...
    }
}

auro_breakpoint--md

@mixin auro_breakpoint--md() { ... }

Description

Standard breakpoint to support resolutions greater than 1024px. This mixin is to be deprecated during the next major release.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

Set breakpoint

.foo {
    @include auro_breakpoint--md {
      ...
    }
}

auro_breakpoint--sm

@mixin auro_breakpoint--sm() { ... }

Description

Standard breakpoint to support resolutions greater than 660px. This mixin is to be deprecated during the next major release.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

Set breakpoint

.foo {
    @include auro_breakpoint--sm {
      ...
    }
}

auro_breakpoint--desktopLg

@mixin auro_breakpoint--desktopLg() { ... }

Description

Standard breakpoint to support resolutions greater than 1232px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

Set breakpoint

.foo {
    @include auro_breakpoint--desktopLg {
      ...
    }
}

auro_breakpoint--desktop

@mixin auro_breakpoint--desktop() { ... }

Description

Standard breakpoint to support resolutions greater than 1024px. This mixin is to be deprecated during the next major release.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

Set breakpoint

.foo {
    @include auro_breakpoint--desktop {
      ...
    }
}

auro_breakpoint--tabletLg

@mixin auro_breakpoint--tabletLg() { ... }

Description

Standard breakpoint to support resolutions greater than 768px. This mixin is to be deprecated during the next major release.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

Set breakpoint

.foo {
    @include auro_breakpoint--tabletLg {
      ...
    }
}

auro_breakpoint--tablet

@mixin auro_breakpoint--tablet() { ... }

Description

Standard breakpoint to support resolutions greater than 576px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

Set breakpoint

.foo {
    @include auro_breakpoint--tablet {
      ...
    }
}

auro_breakpoint--mobile

@mixin auro_breakpoint--mobile() { ... }

Description

Standard breakpoint to support resolutions greater than 320px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

Set breakpoint

.foo {
    @include auro_breakpoint--mobile {
      ...
    }
}

auro_breakpoint

@mixin auro_breakpoint($min: null, $max: null, $polar: null, $cust: null) { ... }

Description

Open format mixin to define any breakpoint.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$min`	sets `min-width` value	`String`	`null`
`$max`	sets `max-width` value	`String`	`null`
`$polar`	sets `min-width` and `max-width` values	`List`	`null`
`$cust`	allows for 100% custom breakpoint options	`String`	`null`

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

Auro breakpoint tokens

$ds-grid-breakpoint-sm: 576px;
$ds-grid-breakpoint-md: 768px;
$ds-grid-breakpoint-lg: 1024px;

Set breakpoint using $min argument

.foo {
  color: orange;

  @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
    color: blue;
  }
}

Set breakpoint using $max argument

.foo {
  color: orange;

  @include auro_breakpoint($max: $ds-grid-breakpoint-lg) {
    color: blue;
  }
}

Set breakpoint using $polar argument

.foo {
  color: orange;

  @include auro_breakpoint($polar: $ds-grid-breakpoint-sm $ds-grid-breakpoint-lg) {
    color: blue;
  }
}

Set breakpoint using $cust argument. Interpolation #{} is required if you intend to use a variable within a string.

.foo {
  color: orange;

  @include auro_breakpoint($cust: '(min-width: 400px) and (max-width: #{$ds-grid-breakpoint-sm})') {
    color: blue;
  }
}

auro_grid-breakpoint--xl

@mixin auro_grid-breakpoint--xl() { ... }

Description

Standard breakpoint to support resolutions greater than 1232px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints";

Set grid-breakpoint

.foo {
    @include auro_grid-breakpoint--xl {
      ...
    }
}

auro_grid-breakpoint--lg

@mixin auro_grid-breakpoint--lg() { ... }

Description

Standard breakpoint to support resolutions greater than 1024px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints";

Set grid-breakpoint

.foo {
    @include auro_grid-breakpoint--lg {
      ...
    }
}

auro_grid-breakpoint--md

@mixin auro_grid-breakpoint--md() { ... }

Description

Standard breakpoint to support resolutions greater than 768px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints";

Set grid-breakpoint

.foo {
    @include auro_grid-breakpoint--md {
      ...
    }
}

auro_grid-breakpoint--sm

@mixin auro_grid-breakpoint--sm() { ... }

Description

Standard breakpoint to support resolutions greater than 576px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints";

Set grid-breakpoint

.foo {
    @include auro_grid-breakpoint--sm {
      ...
    }
}

auro_grid-breakpoint--xs

@mixin auro_grid-breakpoint--xs() { ... }

Description

Standard breakpoint to support resolutions greater than 320px.

Parameters

None.

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grid-breakpoints";

Set grid-breakpoint

.foo {
    @include auro_grid-breakpoint--xs {
      ...
    }
}

scope-prefix

variables

scope

$scope: null !default;

Description

Variables to determine if $scope is to be displayed.

Set true value prior to importing file if scope selector output file is wanted

Type

Boolean

Example

import file

$scope: true;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/ ...

return example

.auro [selector] { ... }

Used by

[mixin] auro_layoutPropertiesGenerator
[mixin] auro_spacing
[mixin] auro_spacing

prefix

$prefix: null !default;

Description

Variables to determine if $prefix is to be displayed

Set true value prior to importing file if prefix selector output file is wanted

Type

Boolean

Example

import file

$prefix: true;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/ ...

return example

.auro_[selector] { ... }

Used by

[mixin] auro_layoutPropertiesGenerator
[mixin] auro_spacing
[mixin] auro_spacing

General

css

// Auro rule @font-face

// Auro rule
@font-face { ... }

Description

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

Example

import src file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/fonts";

utility

functions

auro_capitalize

@function auro_capitalize($string: null) { ... }

Description

The purpose of this function is to take a string and capitalize the first letter on output

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$string`	pass in string to be capitolized	`String`	`null`

Example

pass string into function

capitalize('foo') => Foo

import dependency

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/capitalize";

Used by

[mixin] auro_spacing
[mixin] auro_spacing
[mixin] auro_spacing
[mixin] auro_spacing

auro_contains

@function auro_contains($list: null, $var) { ... }

Description

The purpose of this function is to evaluate if a requested var is in the supplied array

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$list`	variable list to be evaluated	`Variable`	`null`
`$var`	item in list	`Item`	— none

Example

pass string into function

ods-contains($options, $value)

import dependency

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/contains";

Used by

[mixin] auro_spacing

auro_map-deep-get

@function auro_map-deep-get($map: null, $keys: null) { ... }

Description

This function is to be used to return nested key values within a nested map

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	pass in map to be evaluated	`Variable`	`null`
`$keys`	pass in keys to be evaluated	`Variable`	`null`

Example

pass map and strings/variables into function

$tokens: (
  'size': (
    'eighth': $size-eighth,
    'quarter': $size-quarter
  )
);
$var: auro_map-deep-get($tokens, 'size', 'eighth'); => $size-eighth

import dependency

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/map-deep-get";

Used by

[mixin] auro_spacing

variables

important

$important: null !default;

Description

The use of the $important variable allows the user to determine if they require the use of the !important flag with utility classes or not. By default the !important flag is NOT set on any CSS selector.

Map structure

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

Example

update value prior to importing utility support file if !important flag is needed

$important: true;
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/ ... ";

Used by

[mixin] auro_layoutPropertiesGenerator
[mixin] auro_spacing
[mixin] auro_spacing

ds-spacing-options

$ds-spacing-options: none, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 !default;

Description

When using spacing mixins, it's required to import this variable list for use of options.

Map structure

key Name	key Description	key Type	key Value
`$options`	list of available token options	`Variable`	`list`

Example

import dependency variable list

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityVariables/spacing-options";

utility-auro

css

#{$scope}.auro_roleButton

#{$scope}.auro_roleButton { ... }

Description

.auro_roleButton is a utility class to support the UI of a standard html hyperlink using the attribute role="button". This utility will present the UI to mimic the UI of the auro-hyperlink component supporting the same attribute.

See for more information

Manage $scope options.

Example

Default selector(s)

.auro_roleButton {}

Selector(s) when $scope: true;

.auro .auro_roleButton {}

import selector file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleButton";

#{$scope}.auro_roleTab

#{$scope}.auro_roleTab { ... }

Description

auro_roleTab is a helper class to support the UI of a hyperlink using role="tab"

Manage $scope options.

Example

Default selector(s)

.auro_roleTab {}

Selector(s) when $scope: true;

.auro .auro_roleTab {}

import selector file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/anchor-roleTab";

#{$scope}.auro_containedButtons

#{$scope}.auro_containedButtons { ... }

Description

.auro_containedButtons is a helper class to support the use of multiple buttons and/or the use of ods-hyperlink role="button" in a parent container.

.auro_containedButtons has a dependency on WCSS breakpoints. See example below to import dependency.

Manage $scope options.

Place selector on outer parent element.

Example

Default selector(s)

.auro_containedButtons {}

Selector(s) when $scope: true;

.auro .auro_containedButtons {}

import selector file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/containedButtons";

import dependency file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";

#{$scope}.auro_table

#{$scope}.auro_table { ... }

Description

CSS selectors for easy reproduction of Auro Table UI.

Defaults are set by baseline Design Tokens

Manage $scope options.

Example

import selector file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/table";

#{$scope}.auro_tablist

#{$scope}.auro_tablist { ... }

Description

.auro_tablist is a helper class to support the UI of a hyperlink using role="tab"

Place selector on outer div or section container with the role="tablist" also applied.

Manage $scope options.

Example

import selector file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/componentSupport/tablist";

utility-display

css

#{$scope}.#{$prefix}util_displayInline

#{$scope}.#{$prefix}util_displayInline { ... }

Description

Utility class to display elements inline

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_displayInline {}

Selector(s) when $scope: true;

.auro .util_displayInline {}

Selector(s) when $prefix: true;

.auro_util_displayInline {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";

#{$scope}.#{$prefix}util_displayInlineBlock

#{$scope}.#{$prefix}util_displayInlineBlock { ... }

Description

Utility class to display elements inline-block

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_displayInline {}

Selector(s) when $scope: true;

.auro .util_displayInline {}

Selector(s) when $prefix: true;

.auro_util_displayInline {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";

#{$scope}.#{$prefix}util_displayBlock

#{$scope}.#{$prefix}util_displayBlock { ... }

Description

Utility class to display elements block

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_displayBlock {}

Selector(s) when $scope: true;

.auro .util_displayBlock {}

Selector(s) when $prefix: true;

.auro_util_displayBlock {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";

#{$scope}.#{$prefix}util_displayFlex

#{$scope}.#{$prefix}util_displayFlex { ... }

Description

Utility class to display elements flex

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_displayFlex {}

Selector(s) when $scope: true;

.auro .util_displayFlex {}

Selector(s) when $prefix: true;

.auro_util_displayFlex {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";

#{$scope}.#{$prefix}util_displayHidden

#{$scope}.#{$prefix}util_displayHidden { ... }

Description

Utility class to display elements none

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_displayHidden {}

Selector(s) when $scope: true;

.auro .util_displayHidden {}

Selector(s) when $prefix: true;

.auro_util_displayHidden {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";

#{$scope}.#{$prefix}util_displayHiddenVisually

#{$scope}.#{$prefix}util_displayHiddenVisually { ... }

Description

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

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_displayHiddenVisually {}

Selector(s) when $scope: true;

.auro .util_displayHiddenVisually {}

Selector(s) when $prefix: true;

.auro_util_displayHiddenVisually {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";

utility-font

css

#{$scope}.#{$prefix}util_fontWeightDefault

#{$scope}.#{$prefix}util_fontWeightDefault { ... }

Description

Utility class for default font-weight

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_fontWeightDefault {}

Selector(s) when $scope: true;

.auro .util_fontWeightDefault {}

Selector(s) when $prefix: true;

.auro_util_fontWeightDefault {}

import Sass file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";

#{$scope}.#{$prefix}util_fontWeightMedium

#{$scope}.#{$prefix}util_fontWeightMedium { ... }

Description

Utility class for font-weight medium

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_fontWeightMedium {}

Selector(s) when $scope: true;

.auro .util_fontWeightMedium {}

Selector(s) when $prefix: true;

.auro_util_fontWeightMedium {}

import Sass file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";

#{$scope}.#{$prefix}util_fontWeightDisplay

#{$scope}.#{$prefix}util_fontWeightDisplay { ... }

Description

Utility class for display font-weight

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_fontWeightDisplay {}

Selector(s) when $scope: true;

.auro .util_fontWeightDisplay {}

Selector(s) when $prefix: true;

.auro_util_fontWeightDisplay {}

import Sass file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";

#{$scope}.#{$prefix}util_body--lg

#{$scope}.#{$prefix}util_body--lg { ... }

Description

Utility class for font-size lg

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_body--lg {}

Selector(s) when $scope: true;

.auro .util_body--lg {}

Selector(s) when $prefix: true;

.auro_util_body--lg {}

import Sass file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";

#{$scope}.#{$prefix}util_body--sm

#{$scope}.#{$prefix}util_body--sm { ... }

Description

Utility class for font-size sm

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_body--sm {}

Selector(s) when $scope: true;

.auro .util_body--sm {}

Selector(s) when $prefix: true;

.auro_util_body--sm {}

import Sass file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";

#{$scope}.#{$prefix}util_body--xs

#{$scope}.#{$prefix}util_body--xs { ... }

Description

Utility class for font-size xs

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_body--xs {}

Selector(s) when $scope: true;

.auro .util_body--xs {}

Selector(s) when $prefix: true;

.auro_util_body--xs {}

import Sass file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/fontStyles";

utility-inset

css

#{$scope}.#{$prefix}util_insetNone

#{$scope}.#{$prefix}util_insetNone { ... }

Description

Manage $scope and $prefix options.

Example

Default selector(s)

.util_insetNone {}

Selector(s) when $scope: true;

.auro .util_insetNone {}

Selector(s) when $prefix: true;

.auro_util_insetNone {}

#{$scope}.#{$prefix}util_insetXxxs

#{$scope}.#{$prefix}util_insetXxxs { ... }

Description

Manage !important flag.

Manage $scope and $prefix options.

Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl

Example

Default selector(s)

.util_insetXxxs {}

Selector(s) when $scope: true;

.auro .util_insetXxxs {}

Selector(s) when $prefix: true;

.auro_util_insetXxxs {}

#{$scope}.#{$prefix}util_insetXxxs--stretch

#{$scope}.#{$prefix}util_insetXxxs--stretch { ... }

Description

Manage !important flag.

Manage $scope and $prefix options.

Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl

Example

Default selector(s)

.util_insetXxxs--stretch {}

Selector(s) when $scope: true;

.auro .util_insetXxxs--stretch {}

Selector(s) when $prefix: true;

.auro_util_insetXxxs--stretch {}

#{$scope}.#{$prefix}util_insetXxxs--squish

#{$scope}.#{$prefix}util_insetXxxs--squish { ... }

Description

Manage !important flag.

Manage $scope and $prefix options.

Not all options are illustrated in documentation. Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl

Example

Default selector(s)

.util_insetXxxs--squish {}

Selector(s) when $scope: true;

.auro .util_insetXxxs--squish {}

Selector(s) when $prefix: true;

.auro_util_insetXxxs--squish {}

utility-layout

css

#{$scope}.#{$prefix}util_floatLeft

#{$scope}.#{$prefix}util_floatLeft { ... }

Description

Utility class to set elements to float left

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_floatLeft {}

Selector(s) when $scope: true;

.auro .util_floatLeft {}

Selector(s) when $prefix: true;

.auro_util_floatLeft {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";

#{$scope}.#{$prefix}util_floatRight

#{$scope}.#{$prefix}util_floatRight { ... }

Description

Utility class to set elements to float right

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_floatRight {}

Selector(s) when $scope: true;

.auro .util_floatRight {}

Selector(s) when $prefix: true;

.auro_util_floatRight {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";

#{$scope}.#{$prefix}util_margin--auto

#{$scope}.#{$prefix}util_margin--auto { ... }

Description

Utility class to center content within a block element

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_margin--auto {}

Selector(s) when $scope: true;

.auro .util_margin--auto {}

Selector(s) when $prefix: true;

.auro_util_margin--auto {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/layoutProperties";

mixins

auro_layoutPropertiesGenerator

@mixin auro_layoutPropertiesGenerator() { ... }

Description

Mixin auto-generates all available utility selectors. This mixin is NOT for general use and will produce selectors with the import of this Sass file. Output can be configured by redefining default values prior to import. See default value examples below.

DO NOT execute mixin, this is already included with the import of the file dependency

Manage !important flag.

Manage $scope and $prefix options.

Parameters

None.

Example

Default values

$layout-properties: margin padding !default;
$layout-extensions: Top Left Bottom Right !default;
$layout-modifiers: (
  "none": 0,
  "100": $ds-size-100,
  "200": $ds-size-200,
  "300": $ds-size-300,
  "400": $ds-size-400
) !default;

example default output selector

.util_paddingLeft--none {}

example output selector when $scope: true;

.auro .util_paddingLeft--none {}

example output selector when $prefix: true;

.auro_util_paddingLeft--none {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator";

import mixin file with altered output values prior to import

$layout-properties: margin;
$layout-extensions: Right;
$layout-modifiers: (
  "25": $ds-size-25,
  "50": $ds-size-50,
  "600": $ds-size-600,
  "800": $ds-size-800,
);
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/layoutPropertiesGenerator";

Requires

[variable] scope
[variable] prefix
[variable] important

auro_spacing

@mixin auro_spacing($ds-spacing-types: inline, stack, $ds-spacing-options: none, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000) { ... }

Description

This mixin is designed to return a series of pre-defined selectors based on the stack or inline spacing design specs

DO NOT execute mixin, this is already included with the import of the file dependency

Dependency: $npm i @aurodesignsystem/design-tokens

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$ds-spacing-types`	inline - L/R, stack - top/bottom	`String`	`inline, stack`
`$ds-spacing-options`	defines value applied.	`String`	`none, 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000`

Example

Example output css

.util_inlinePadding25--left {
  padding-left: 0.125rem;
}
.util_inlinePadding25--right {
  padding-right: 0.125rem;
}
.util_inlineMargin25--left {
  margin-left: 0.125rem;
}
.util_inlineMargin25--right {
  margin-right: 0.125rem;
}

import dependencies

@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariableMap";
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/spacingUtility";

import with custom over-rides

$ds-spacing-types: inline;
$ds-spacing-options: 200;
@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariableMap";
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/spacingUtility";

Throws

INVALID, \

Requires

[function] auro_map-deep-get
[function] auro_contains
[function] auro_capitalize
[function] auro_capitalize
[function] auro_capitalize
[function] auro_capitalize
[variable] scope
[variable] prefix
[variable] important
[variable] scope
[variable] prefix
[variable] important

utility-list

css

#{$scope}.#{$prefix}util_listUnstyled

#{$scope}.#{$prefix}util_listUnstyled { ... }

Description

Utility class to display unordered lists without bulleting

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_listUnstyled {}

Selector(s) when $scope: true;

.auro .util_listUnstyled {}

Selector(s) when $prefix: true;

.auro_util_listUnstyled {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";

#{$scope}.#{$prefix}util_listNoIndent

#{$scope}.#{$prefix}util_listNoIndent { ... }

Description

Utility class to display unordered lists with non-indented bullets

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_listNoIndent {}

Selector(s) when $scope: true;

.auro .util_listNoIndent {}

Selector(s) when $prefix: true;

.auro_util_listNoIndent {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";

#{$scope}.#{$prefix}util_listIndented

#{$scope}.#{$prefix}util_listIndented { ... }

Description

Utility class to display unordered lists with non-indented bullets

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_listIndented {}

Selector(s) when $scope: true;

.auro .util_listIndented {}

Selector(s) when $prefix: true;

.auro_util_listIndented {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";

#{$scope}.#{$prefix}util_listNoIndentOrdered

#{$scope}.#{$prefix}util_listNoIndentOrdered { ... }

Description

Utility class to display ordered lists with non-indented numbering

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_listNoIndentOrdered {}

Selector(s) when $scope: true;

.auro .util_listNoIndentOrdered {}

Selector(s) when $prefix: true;

.auro_util_listNoIndentOrdered {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";

#{$scope}.#{$prefix}util_listIndentedOrdered

#{$scope}.#{$prefix}util_listIndentedOrdered { ... }

Description

Utility class to display ordered lists with non-indented numbering

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_listIndentedOrdered {}

Selector(s) when $scope: true;

.auro .util_listIndentedOrdered {}

Selector(s) when $prefix: true;

.auro_util_listIndentedOrdered {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";

#{$scope}.#{$prefix}util_listAuroIcon

#{$scope}.#{$prefix}util_listAuroIcon { ... }

Description

Utility class to display unordered lists with auro icons

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_listAuroIcon {}

Selector(s) when $scope: true;

.auro .util_listAuroIcon {}

Selector(s) when $prefix: true;

.auro_util_listAuroIcon {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/listProperties";

utility-mixins

mixins

auro_anchorButton

@mixin auro_anchorButton($style, $env, $display: inline-block) { ... }

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
`$display`	Specifies display type	`String`	`inline-block`

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleButton";

Set properties for Sass output that is NOT within a component

.auro_roleButton {
    @include auro_anchorButton(sass, noncomponent);
}

Set properties for CSS output that IS within a component

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

Throws

Invalid $style option. Please use css or sass
Invalid $env option. Please use component or noncomponent

auro_anchorTab

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

Description

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

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$style`	Specifies the style type (sass, css)	`String`	— none
`$env`	Specifies the style environment (component, noncomponent)	`String`	— none

Example

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleTab";

Set properties for Sass output that is NOT within a component

.auro_roleTab {
   @include auro_anchorTab(sass, noncomponent);
}

Set properties for CSS output that IS within a component

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

Throws

Invalid $style option. Please use css or sass
Invalid $env option. Please use component or noncomponent

utility-responsive

css

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

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

Description

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

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-smOnly {}

Selector(s) when $scope: true;

.auro .util_is-smOnly {}

Selector(s) when $prefix: true;

.auro_util_is-smOnly {}

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

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

Description

Utility class to restrain block visibility of UI element between sm and md screens.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-mdOnly {}

Selector(s) when $scope: true;

.auro .util_is-mdOnly {}

Selector(s) when $prefix: true;

.auro_util_is-mdOnly {}

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

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

Description

Utility class to restrain inline-block visibility of UI element between sm and md screens.

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-mdOnly--inline {}

Selector(s) when $scope: true;

.auro .util_is-mdOnly--inline {}

Selector(s) when $prefix: true;

.auro_util_is-mdOnly--inline {}

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

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

Description

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

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-mdAppears {}

Selector(s) when $scope: true;

.auro .util_is-mdAppears {}

Selector(s) when $prefix: true;

.auro_util_is-mdAppears {}

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

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

Description

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

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-mdAppears--inline {}

Selector(s) when $scope: true;

.auro .util_is-mdAppears--inline {}

Selector(s) when $prefix: true;

.auro_util_is-mdAppears--inline {}

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

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

Description

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

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-lgOnly {}

Selector(s) when $scope: true;

.auro .util_is-lgOnly {}

Selector(s) when $prefix: true;

.auro_util_is-lgOnly {}

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

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

Description

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

Manage !important flag.

Manage $scope and $prefix options.

Example

import mixin file and selector partial file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

.util_is-lgOnly--inline {}

Selector(s) when $scope: true;

.auro .util_is-lgOnly--inline {}

Selector(s) when $prefix: true;

.auro_util_is-lgOnly--inline {}

#{$scope}.#{$prefix}util_img-is-responsive

#{$scope}.#{$prefix}util_img-is-responsive { ... }

Description

Utility class that will allow img src to fill 100% of space for responsive characteristics

See variable use for managing the !important flag.

Manage $scope and $prefix options.

Example

import selector partial file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";

Default selector(s)

.util_img-is-responsive {}

Selector(s) when $scope: true;

.auro .util_img-is-responsive {}

Selector(s) when $prefix: true;

.auro_util_img-is-responsive {}

Example HTML selector use

<img class="util_img-is-responsive" src=" ... " alt="" />

utility-type

css

#{$scope}.#{$prefix}util_nowrap

#{$scope}.#{$prefix}util_nowrap { ... }

Description

Utility class force no wrap on content

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_nowrap {}

Selector(s) when $scope: true;

.auro .util_nowrap {}

Selector(s) when $prefix: true;

.auro_util_nowrap {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties";

#{$scope}.#{$prefix}util_capitalize

#{$scope}.#{$prefix}util_capitalize { ... }

Description

Utility class to capitalize a string

Manage !important flag.

Manage $scope and $prefix options.

Example

Default selector(s)

.util_capitalize {}

Selector(s) when $scope: true;

.auro .util_capitalize {}

Selector(s) when $prefix: true;

.auro_util_capitalize {}

import mixin file

@import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties";