Shadows

Three basic 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 default shadows property values can be customized in the properties.scss document, new values added must also be included with the shadows Sass map in the _maps.scss document for compiling.

$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;

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

The shadows styles can be customized in the _shadows.scss document in the [styles/utilities] directory, they're written as standard CSS with limited Sass functionality included for compiling purposes.

//  ------------------------------------------------------------
//  Shadows
//  ------------------------------------------------------------
@use "../../configuration" as *;

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