Tools Module For CSS shadow.

sircus-tools-shadow | v1.0.0

box-shadow

border-radius

.t-shadowXs
.t-shadowSm
t-shadowMd
t-shadowLg
t-shadowXl
<div class="t-shadowXs">...</div>
<div class="t-shadowSm">...</div>
<div class="t-shadowMd">...</div>
<div class="t-shadowLg">...</div>
<div class="t-shadowXl">...</div>

Install

npm install sircus-tools-shadow sircus-variables

CSS import

@import "sircus-tools-shadow";
@import "sircus-tools-shadow/responsive";
@import "sircus-variables";

CSS

/*
 * sircus-tools-shadow
 ================================================== */
.t-shadow   { box-shadow: var(--shadow) var(--shadow-color) !important; }
.t-shadowXs { box-shadow: var(--shadow-xs) var(--shadow-color) !important; }
.t-shadowSm { box-shadow: var(--shadow-sm) var(--shadow-color) !important; }
.t-shadowMd { box-shadow: var(--shadow-md) var(--shadow-color) !important; }
.t-shadowLg { box-shadow: var(--shadow-lg) var(--shadow-color) !important; }
.t-shadowXl { box-shadow: var(--shadow-xl) var(--shadow-color) !important; }
.t-shadow0  { box-shadow: none !important; }

Responsive CSS

@media (--viewport-sm) {
  .t-sm-shadow   { box-shadow: var(--shadow) var(--shadow-color) !important; }
  .t-sm-shadowXs { box-shadow: var(--shadow-xs) var(--shadow-color) !important; }
  .t-sm-shadowSm { box-shadow: var(--shadow-sm) var(--shadow-color) !important; }
  .t-sm-shadowMd { box-shadow: var(--shadow-md) var(--shadow-color) !important; }
  .t-sm-shadowLg { box-shadow: var(--shadow-lg) var(--shadow-color) !important; }
  .t-sm-shadowXl { box-shadow: var(--shadow-xl) var(--shadow-color) !important; }
  .t-sm-shadow0  { box-shadow: none !important; }
}

@media (--viewport-md) {
  .t-md-shadow   { box-shadow: var(--shadow) var(--shadow-color) !important; }
  .t-md-shadowXs { box-shadow: var(--shadow-xs) var(--shadow-color) !important; }
  .t-md-shadowSm { box-shadow: var(--shadow-sm) var(--shadow-color) !important; }
  .t-md-shadowMd { box-shadow: var(--shadow-md) var(--shadow-color) !important; }
  .t-md-shadowLg { box-shadow: var(--shadow-lg) var(--shadow-color) !important; }
  .t-md-shadowXl { box-shadow: var(--shadow-xl) var(--shadow-color) !important; }
  .t-md-shadow0  { box-shadow: none !important; }
}

@media (--viewport-lg) {
  .t-lg-shadow   { box-shadow: var(--shadow) var(--shadow-color) !important; }
  .t-lg-shadowXs { box-shadow: var(--shadow-xs) var(--shadow-color) !important; }
  .t-lg-shadowSm { box-shadow: var(--shadow-sm) var(--shadow-color) !important; }
  .t-lg-shadowMd { box-shadow: var(--shadow-md) var(--shadow-color) !important;}
  .t-lg-shadowLg { box-shadow: var(--shadow-lg) var(--shadow-color) !important; }
  .t-lg-shadowXl { box-shadow: var(--shadow-xl) var(--shadow-color) !important; }
  .t-lg-shadow0  { box-shadow: none !important; }
}