Shadows

Three rudimentary box shadow styles available as utility classes and CSS variables for custom style sheet or inline design. Disabled by default, enable with $enable-shadows: true; in the configuration.scss document.

<div class="shadow-sm">Small</div>
<div class="shadow">Default</div>
<div class="shadow-lg">Large</div>

Customizing (anchor)

The property values for the shadows can be customized in the properties.scss document..

$shadow:        0 0.25rem 0.75rem rgba(0, 0, 0, 0.15) !default;
$shadow-sm:     0 0.125rem 0.25rem rgba(0, 0, 0, 0.1) !default;
$shadow-lg:     0 0.5rem 1.25rem rgba(0, 0, 0, 0.15) !default;

Any new shadows added also need to be included with the Sass shadow maps [_maps.scss] for compiling.

$shadows: (
  "shadow": #{$shadow},
  "shadow-sm": #{$shadow-sm},
  "shadow-lg": #{$shadow-lg},
) !default;

The shadow utility classes are compiled from the _shadows.scss document within the [styles/utilities] directory. The Sass @if rule controls compiling depending on settings in the configuration.scss document.

@if $enable-shadows {
  
.shadow {
  box-shadow: var(--shadow);
}
  
.shadow-sm {
  box-shadow: var(--shadow-sm);
}
  
.shadow-lg {
  box-shadow: var(--shadow-lg);
}
  
} // END [@if]