Infragistics
Start Free Trial
Ignite UISass API
ComponentsGet Started

elevations

#

functionbox-shadowpublicview codeopen_in_new

Sorts out a list of valid only box-shadows.

Example
.my-component {
  box-shadow: box-shadow((0 0 2px 3px black, 0 6px 9px orange));
}


// Output
.my-component {
  box-shadow:
      0 0 calc(--ig-elevation-factor * 2px) calc(--ig-elevation-factor * 3px) black,
      0 calc(--ig-elevation-factor * 6px) calc(--ig-elevation-factor * 9px) orange;
}
Parameters
NameTypeDefaultDescription
$shadows*
List
-A list of shadow values.
Requires
#

functionelevationpublicview codeopen_in_new

Gets a CSS elevation variable by name.

Example
.my-component {
  box-shadow: elevation(5); // var(--ig-elevation-5)
}
Parameters
NameTypeDefaultDescription
$name*
String
-The name of the shadow.
#

mixinelevationspublicview codeopen_in_new

Generates CSS variables for a given elevations map.

Example

Generate CSS variables for elevations.

$elevations: (
    small: box-shadow(0 .125rem .25rem rgba(0 0 0 / 75%)),
    medium: box-shadow(0 .25rem .5rem rgba(0 0 0 / 85%)),
    large: box-shadow(0 .75rem 1rem rgba(0 0 0 / 95%))
);
:root {
    @include elevations($elevations);
}
Parameters
NameTypeDefaultDescription
$elevations*
Map
-The elevations map to use to generate CSS variables.
Requires
#

mixinelevationpublicview codeopen_in_new

Includes box-shadow styles for an elevation by name

Example

Include a box shadow by its name.

.my-class {
  @include elevation(small);
}
Parameters
NameTypeDefaultDescription
$name*
String
-The name of the shadow.
#

mixinconfigurepublicview codeopen_in_new

Configures shadow colors for the elevations.

Parameters
NameTypeDefaultDescription
$color-1*
Color
-The umbra shadow color.
$color-2*
Color
-The penumbra shadow color.
$color-3*
Color
-The ambiant shadow color.

Search Documentation