indian flagGovernment of India
|
GitHub GitHub

Powered by NeGD | MeitY Government of India® UX4G

Shadows

Add or remove shadows to elements with box-shadow utilities.

Examples #

While UX4G by default disables shadows on components, developer may activate them with the $enable-shadows function, and developer can also rapidly add or remove shadows with the box-shadow utility classes. support for .shadow-none and three default sizes (each with corresponding variables). 

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-xs p-3 mb-5 bg-light rounded">shadow-xs shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow-md p-3 mb-5 bg-body rounded">shadow-md shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">shadow-lg shadow</div>
<div class="shadow-xl p-3 mb-5 bg-body rounded">shadow-xl shadow</div>
<div class="shadow-xxl p-3 mb-5 bg-body rounded">shadow-xxl shadow</div>
RESULT
No shadow
xs-shadow
s-shadow
md-shadow
l-shadow
xl-shadow
2xl-shadow

Sass #

Variables #

$box-shadow-xs: 0 2px 3px 1px rgba(33, 33, 33, 0.12);
$box-shadow-sm: 0 4px 4px 0 rgba(33, 33, 33, 0.12), 0 1px 3px 1px rgba(33, 33, 33, 0.10);
$box-shadow-md: 0 6px 8px -2px rgba(33, 33, 33, 0.20), 0 2px 8px -2px rgba(33, 33, 33, 0.04);
$box-shadow-lg: 0 4px 6px -2px rgba(33, 33, 33, 0.03), 0 12px 16px -4px rgba(33, 33, 33, 0.08);
$box-shadow-xl: 0 24px 48px -12px rgba(33, 33, 33, 0.18);
$box-shadow-xxl: 0 32px 64px -12px rgba(33, 33, 33, 0.14);
$box-shadow-inset:  inset 0 1px 2px rgba($black, .075);

Utilities API #

Shadow utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

"shadow": (
    property: box-shadow,
    class: shadow,
    values: (
      xs: var(--#{$prefix}box-shadow-xs),
      sm: var(--#{$prefix}box-shadow-sm),
      md: var(--#{$prefix}box-shadow-md),
      lg: var(--#{$prefix}box-shadow-lg),
      xl: var(--#{$prefix}box-shadow-xl),
      xxl: var(--#{$prefix}box-shadow-xxl),
      none: none,
    )
  ),