artin/tachyons
1
0
Fork 0
mirror of https://github.com/tachyons-css/tachyons.git synced 2026-02-06 15:51:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

First pass at refactoring box shadows to use variables

Browse Source 
Still want to tweak a few things here around configuring and scale
structure.
This commit is contained in:
mrmrs 2023-07-12 13:41:43 -07:00
parent 2034ada76f
commit 57397aaa51
1 changed files with 101 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/_box-shadow.css
View File

@ -2,6 +2,8 @@
BOX-SHADOW
Docs: http://tachyons.io/docs/themes/box-shadow/
REF
Layered shadows: https://tobiasahlin.com/blog/layered-smooth-box-shadows/
Media Query Extensions:
@ -11,74 +13,109 @@
*/
.shadow-border { box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.125); }
.shadow-border-light { box-shadow: inset 0 0 1px 0 rgba(255,255,255,0.125); }
.shadow-border-solid { box-shadow: inset 0 0 1px 0 currentColor; }
.shadow-border-2 { box-shadow: inset 0 0 2px 0 rgba(255,255,255,.125); }
.shadow-border-light-2 { box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.125); }
.shadow-border-solid-2 { box-shadow: inset 0 0 2px 0 currentColor; }
.shadow-1 { box-shadow: 0 1px 1px rgba(0,0,0,0.125), 0 2px 2px rgba(0,0,0,0.125), 0 4px 4px rgba(0,0,0,0.125), 0 8px 8px rgba(0,0,0,0.125), 0 16px 16px rgba(0,0,0,0.125); }
.shadow-2 { box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.15); }
.shadow-3 { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); }
.shadow-4 { box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); }
.shadow-5 { box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20); }
.shadow-6 { box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); }
.shadow-7 { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }
.shadow-8 { box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09); }
@media (--breakpoint-small) {
.shadow-border-s { box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.125); }
.shadow-border-light-s { box-shadow: inset 0 0 1px 0 rgba(255,255,255,0.125); }
.shadow-border-solid-s { box-shadow: inset 0 0 1px 0 currentColor; }
.shadow-border-2-s { box-shadow: inset 0 0 2px 0 rgba(255,255,255,.125); }
.shadow-border-light-2-s { box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.125); }
.shadow-border-solid-2-s { box-shadow: inset 0 0 2px 0 currentColor; }
.shadow-1-s { box-shadow: 0 1px 1px rgba(0,0,0,0.125), 0 2px 2px rgba(0,0,0,0.125), 0 4px 4px rgba(0,0,0,0.125), 0 8px 8px rgba(0,0,0,0.125), 0 16px 16px rgba(0,0,0,0.125); }
.shadow-2-s { box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.15); }
.shadow-3-s { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); }
.shadow-4-s { box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); }
.shadow-5-s { box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20); }
.shadow-6-s { box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); }
.shadow-7-s { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }
.shadow-8-s { box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09); }
.shadow {
box-shadow: var(--shadow, inset 0 0 1px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .5)));
}
@media (--breakpoint-medium) {
.shadow-border-m { box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.125); }
.shadow-border-light-m { box-shadow: inset 0 0 1px 0 rgba(255,255,255,0.125); }
.shadow-border-solid-m { box-shadow: inset 0 0 1px 0 currentColor; }
.shadow-border-2-m { box-shadow: inset 0 0 2px 0 rgba(255,255,255,.125); }
.shadow-border-light-2-m { box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.125); }
.shadow-border-solid-2-m { box-shadow: inset 0 0 2px 0 currentColor; }
.shadow-1-m { box-shadow: 0 1px 1px rgba(0,0,0,0.125), 0 2px 2px rgba(0,0,0,0.125), 0 4px 4px rgba(0,0,0,0.125), 0 8px 8px rgba(0,0,0,0.125), 0 16px 16px rgba(0,0,0,0.125); }
.shadow-2-m { box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.15); }
.shadow-3-m { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); }
.shadow-4-m { box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); }
.shadow-5-m { box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20); }
.shadow-6-m { box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); }
.shadow-7-m { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }
.shadow-8-m { box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09); }
.shadow-hover:hover,
.shadow-hover:focus {
--shadow-opacity: .15;
}
@media (--breakpoint-large) {
.shadow-border-l { box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.125); }
.shadow-border-light-l { box-shadow: inset 0 0 1px 0 rgba(255,255,255,0.125); }
.shadow-border-solid-l { box-shadow: inset 0 0 1px 0 currentColor; }
.shadow-border-2-l { box-shadow: inset 0 0 2px 0 rgba(255,255,255,.125); }
.shadow-border-light-2-l { box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.125); }
.shadow-border-solid-2-l { box-shadow: inset 0 0 2px 0 currentColor; }
/*
* TODO: potential pattern
.shadow-hover:hover {
--shadow-opacity: .09;
--shadow-x: 1px;
--shadow-y: 1px;
--shadow-blur: 1px;
--shadow-spread: 1px;
--shadow-multiplier: 2;
}
*/
.shadow-1-l { box-shadow: 0 1px 1px rgba(0,0,0,0.125), 0 2px 2px rgba(0,0,0,0.125), 0 4px 4px rgba(0,0,0,0.125), 0 8px 8px rgba(0,0,0,0.125), 0 16px 16px rgba(0,0,0,0.125); }
.shadow-2-l { box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.15); }
.shadow-3-l { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 8px 8px rgba(0,0,0,0.11), 0 16px 16px rgba(0,0,0,0.11), 0 32px 32px rgba(0,0,0,0.11); }
.shadow-4-l { box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); }
.shadow-5-l { box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20); }
.shadow-6-l { box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.07), 0 8px 16px rgba(0,0,0,0.07), 0 16px 32px rgba(0,0,0,0.07), 0 32px 64px rgba(0,0,0,0.07); }
.shadow-7-l { box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); }
.shadow-8-l { box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09); }
/* Box shadow based borders */
.shadow-border-1 { box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); }
.shadow-border-2 { box-shadow: inset 0 0 var(--shadow-border-width) 0 currentColor; }
.shadow-border-3 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color-light, 255 255 255) / var(--shadow-opacity, .125)); }
.shadow-border-4 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125))}
.shadow-border-5 { box-shadow: inset 0 0 2px 0 currentColor; }
.shadow-1 {
box-shadow:
0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125));
}
.shadow-2 {
box-shadow:
0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125));
}
.shadow-3 {
--shadow-opacity: .11;
box-shadow:
0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
0 32px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11));
}
.shadow-4 {
--shadow-opacity: .05;
box-shadow:
0 1px 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.25) * 5)),
0 2px 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 4)),
0 4px 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.15) * 3)),
0 8px 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.10) * 2)),
0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.05));
}
.shadow-5 {
--shadow-opacity: .08;
box-shadow:
0 var(--shadow-y) 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.08) * 1)),
0 calc(var(--shadow-y) * 2) 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.12) * 1.5)),
0 calc(var(--shadow-y) * 4) 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.16) * 2)),
0 calc(var(--shadow-y) * 8) 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 2.5));
}
.shadow-6 {
--shadow-opacity: .07;
box-shadow:
0 1px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
0 2px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
0 4px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
0 16px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
0 32px 64px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7));
}
.shadow-7 {
--shadow-opacity: .11;
box-shadow:
0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)),
0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)),
0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)),
0 6px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)),
0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11));
}
.shadow-8 {
--shadow-opacity: .09;
box-shadow:
0 2px 1px rgb(var(--shadow-color, 0 0 0) / 0.09),
0 4px 2px rgb(var(--shadow-color, 0 0 0) / 0.09),
0 8px 4px rgb(var(--shadow-color, 0 0 0) / 0.09),
0 16px 8px rgb(var(--shadow-color, 0 0 0) / 0.09),
0 32px 16px rgb(var(--shadow-color, 0 0 0) / 0.09);
}