Shadow
A series of thematic classes that adjust the box-shadow property of a selector.
Install
npm install seed-shadow --save
Dependencies
Usage
Class | Box shadow |
---|---|
.t-shadow-0 |
0 1px 1px transparent |
.t-shadow-1 |
0 1px 1px rgba(0, 0, 0, 0.1) |
.t-shadow-2 |
0 2px 4px rgba(0, 0, 0, 0.1) |
.t-shadow-3 |
0 4px 6px rgba(0, 0, 0, 0.12) |
.t-shadow-4 |
0 8px 10px rgba(0, 0, 0, 0.12) |
.t-shadow-5 |
0 12px 16px rgba(0, 0, 0, 0.12) |
Example
Shadow: 0
Shadow: 1
Shadow: 2
Shadow: 3
Shadow: 4
Shadow: 5
<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.
Class | Box shadow |
---|---|
.t-shadow-hover-0 |
0 1px 1px transparent |
.t-shadow-hover-1 |
0 1px 1px rgba(0, 0, 0, 0.1) |
.t-shadow-hover-2 |
0 2px 4px rgba(0, 0, 0, 0.1) |
.t-shadow-hover-3 |
0 4px 6px rgba(0, 0, 0, 0.12) |
.t-shadow-hover-4 |
0 8px 10px rgba(0, 0, 0, 0.12) |
.t-shadow-hover-5 |
0 12px 16px rgba(0, 0, 0, 0.12) |
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!
Default shadow of 1. Hover shadow of 5.
<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;