accessibility

css

:focus

#{$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";

responsive

mixins

auro_breakpoint--lg

#{$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";

responsive

mixins

auro_breakpoint--xl

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

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

auro_breakpoint--lg

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

Description

Standard breakpoint to support resolutions greater than 1232px.

Parameters

None.

Example

import mixin file

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

Set breakpoint

.foo {
+ }" data-collapsed="@mixin auro_breakpoint--lg() { ... }">@mixin auro_breakpoint--lg() { ... }

Description

Standard breakpoint to support resolutions greater than 1024px.

Parameters

None.

Example

import mixin file

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

Set breakpoint

.foo {
     @include auro_breakpoint--lg {
       ...
     }
@@ -526,7 +534,7 @@
   @media screen and (min-width: $auro-breakpoint-md) {
     @content;
   }
- }" data-collapsed="@mixin auro_breakpoint--md() { ... }">@mixin auro_breakpoint--md() { ... }

Description

Standard breakpoint to support resolutions greater than 1024px.

Parameters

None.

Example

import mixin file

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

Set breakpoint

.foo {
+ }" data-collapsed="@mixin auro_breakpoint--md() { ... }">@mixin auro_breakpoint--md() { ... }

Description

Standard breakpoint to support resolutions greater than 768px.

Parameters

None.

Example

import mixin file

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

Set breakpoint

.foo {
     @include auro_breakpoint--md {
       ...
     }
@@ -534,10 +542,18 @@
   @media screen and (min-width: $auro-breakpoint-sm) {
     @content;
   }
- }" data-collapsed="@mixin auro_breakpoint--sm() { ... }">@mixin auro_breakpoint--sm() { ... }

Description

Standard breakpoint to support resolutions greater than 660px.

Parameters

None.

Example

import mixin file

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

Set breakpoint

.foo {
+ }" data-collapsed="@mixin auro_breakpoint--sm() { ... }">@mixin auro_breakpoint--sm() { ... }

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

auro_breakpoint--xs

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

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

auro_breakpoint

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

Description

Open format mixin to define any breakpoint.

See also: Media_features

Compatibility: css-mediaqueries

Parameters

NameDescriptionTypeDefault value
$min

sets min-width value

Stringnull
$max

sets max-width value

Stringnull
$polar

sets min-width and max-width values

Listnull
$cust

allows for 100% custom breakpoint options

Stringnull

Example

import mixin file

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

Auro breakpoint tokens

$auro-breakpoint-sm: 660px;
-$auro-breakpoint-md: 1024px;
-$auro-breakpoint-lg: 1232px;

Set breakpoint using $min argument

.foo {
+ }" data-collapsed="@mixin auro_breakpoint($min: null, $max: null, $polar: null, $cust: null) { ... }">@mixin auro_breakpoint($min: null, $max: null, $polar: null, $cust: null) { ... }

Description

Open format mixin to define any breakpoint.

See also: Media_features

Compatibility: css-mediaqueries

Parameters

NameDescriptionTypeDefault value
$min

sets min-width value

Stringnull
$max

sets max-width value

Stringnull
$polar

sets min-width and max-width values

Listnull
$cust

allows for 100% custom breakpoint options

Stringnull

Example

import mixin file

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

Auro breakpoint tokens

$auro-breakpoint-xs: 320px;
+$auro-breakpoint-sm: 576px;
+$auro-breakpoint-md: 768px;
+$auro-breakpoint-lg: 1024px;
+$auro-breakpoint-xl: 1232px;

Set breakpoint using $min argument

.foo {
   color: orange;
 
   @include auro_breakpoint($min: $auro-breakpoint-sm) {
@@ -1158,4 +1176,4 @@
   white-space: nowrap $important;
 }" data-collapsed="#{$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";
@aurodesignsystem/webcorestylesheets - v4.3.0 , under Apache-2.0
SassDoc Logo