Web Toolkit

image/svg+xml GitHub

Shadows 

<div class="u-borderShadow-xxs u-border-all-xxs u-padding-all-xxl u-margin-all-xxl u-md-size1of3 u-lg-size1of4">
    <p>u-borderShadow-xxs</p>
</div>

<div class="u-borderShadow-xs u-border-all-xxs u-padding-all-xxl u-margin-all-xxl u-md-size1of3 u-lg-size1of4">
    <p>u-borderShadow-xs</p>
</div>

<div class="u-borderShadow-m u-border-all-xxs u-padding-all-xxl u-margin-all-xxl u-md-size1of3 u-lg-size1of4">
    <p>u-borderShadow-m</p>
</div>

<div class="u-borderShadow-xxl u-border-all-xxs u-padding-all-xxl u-margin-all-xxl u-md-size1of3 u-lg-size1of4">
    <p>u-borderShadow-xxl</p>
</div>
  • Content: 
    /** @define utilities; */

.u-borderShadow-xxs {
  box-shadow: 0 1px 2px 0 rgba(50, 50, 50, 0.35) !important;
}

.u-borderShadow-xs {
  box-shadow: 1px 1px 2px #aaa !important;
}

.u-borderShadow-m {
  box-shadow: 0 8px 24px 0 rgba(50, 50, 50, 0.15) !important;
}

.u-borderShadow-l {
  box-shadow: 0 10px 40px -5px rgba(133, 133, 133, 1);
}

.u-borderShadow-xxl {
  box-shadow: 1px 1px 80px 1px rgba(0, 0, 0, 0.35) !important;
}

.u-bottomShadow-xxl {
  box-shadow: 1px 80px 80px -80px rgba(0, 0, 0, 0.85) !important;
}

.u-hasScrollHint::after {
  background: linear-gradient(to left, currentColor, rgba(0, 0, 0, 0));
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.3s 0s, visibility 0s 0s;
  width: 1em;
}

@media (--xs-viewport) {

  .u-xs-borderShadow-none { box-shadow: none !important; }

}
  • URL: /components/raw/shadows/index.css
  • Filesystem Path: src/utils/shadows/index.css
  • Size: 818 Bytes

There are no notes for this item.