Shadow

A series of thematic classes that adjust the box-shadow property of a selector.

Install

npm install seed-shadow --save

Dependencies

• seed-dash
• seed-props
• seed-publish

Usage

Example

<div class="c-card u-pad-2 t-bdr t-shadow-0">
  Shadow: 0
</div>
<div class="c-card u-pad-2 t-bdr t-shadow-1">
  Shadow: 1
</div>
<div class="c-card u-pad-2 t-bdr t-shadow-2">
  Shadow: 2
</div>
<div class="c-card u-pad-2 t-bdr t-shadow-3">
  Shadow: 3
</div>
<div class="c-card u-pad-2 t-bdr t-shadow-4">
  Shadow: 4
</div>
<div class="c-card u-pad-2 t-bdr t-shadow-5">
  Shadow: 5
</div>

Hover transition

seed-shadow provides the ability to add a subtle box-shadow adjustment upon hovering. The box-shadow amount is the same as the default, ranging from 0-5. However, these box-shadows only get applied when a selector is in a :hover state.

Example

In the example below, the card starts off with a default box shadow amount of 1. However, it transitions to an amount of 5 when hovered. Give it a shot!

<div class="c-card u-pad-2 t-bdr t-shadow-1 t-shadow-hover-5">
  Default shadow of 1. Hover shadow of 5.
</div>

Configurations

Below are the default Sass configuration variables for seed-shadow. The variables can be found in the pack’s _config.scss file.

seed-shadow/_config.scss

// Namespaces
$seed-shadow-namespace: "t-shadow" !default;
$seed-shadow-hover-namespace: #{$seed-shadow-namespace}-hover !default;

// Shadow color
$seed-shadow-color: #000 !default;

// Shadow hover animation
$seed-shadow-hover-transition: box-shadow 0.2s ease !default;

// Shadow sizes
$seed-shadow-sizes: (
  0: 0 1px 1px rgba($seed-shadow-color, 0),
  1: 0 1px 1px rgba($seed-shadow-color, 0.10),
  2: 0 2px 4px rgba($seed-shadow-color, 0.10),
  3: 0 4px 6px rgba($seed-shadow-color, 0.12),
  4: 0 8px 10px rgba($seed-shadow-color, 0.12),
  5: 0 12px 16px rgba($seed-shadow-color, 0.12)
) !default;