Ignite UI for Angular
Components Get Started

elevations

#

function box-shadow public view code open_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
Name Type Default Description
$shadows *
List
- A list of shadow values.
Requires
#

function elevation public view code open_in_new

Gets a CSS elevation variable by name.

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

mixin elevations public view code open_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
Name Type Default Description
$elevations *
Map
- The elevations map to use to generate CSS variables.
Requires
#

mixin elevation public view code open_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
Name Type Default Description
$name *
String
- The name of the shadow.
#

mixin configure public view code open_in_new

Configures shadow colors for the elevations.

Parameters
Name Type Default Description
$color-1 *
Color
- The umbra shadow color.
$color-2 *
Color
- The penumbra shadow color.
$color-3 *
Color
- The ambiant shadow color.

Search Documentation