mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 10:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: shadow function

Browse source
This commit is contained in:
Lucas Larroche 2024-01-29 23:16:47 +07:00
parent 020182a7e0
commit bcac2dca3f
1 changed files with 35 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

54
scss/utils/_box-shadow.scss
View file

@ -1,26 +1,42 @@
@function shadow-layer($elevation, $blur, $opacity, $color) {
@return #{($elevation * 0.5)} #{$elevation} #{$blur} #{rgba($color, $opacity)};
}
@function shadow($color) {
$box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06;
@return #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{(
$box-shadow-blur-strengh * 0.029
)} #{rgba($color, ($box-shadow-opacity * 0.283))},
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(
$box-shadow-blur-strengh * 0.067
)} #{rgba($color, ($box-shadow-opacity * 0.4))},
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(
$box-shadow-blur-strengh * 0.125
)} #{rgba($color, ($box-shadow-opacity * 0.5))},
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(
$box-shadow-blur-strengh * 0.225
)} #{rgba($color, ($box-shadow-opacity * 0.6))},
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(
$box-shadow-blur-strengh * 0.417
)} #{rgba($color, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(
$color,
$box-shadow-opacity
)},
@return shadow-layer(
$box-shadow-elevation * 0.029,
$box-shadow-blur-strengh * 0.029,
$box-shadow-opacity * 0.283,
$color
),
shadow-layer(
$box-shadow-elevation * 0.067,
$box-shadow-blur-strengh * 0.067,
$box-shadow-opacity * 0.4,
$color
),
shadow-layer(
$box-shadow-elevation * 0.125,
$box-shadow-blur-strengh * 0.125,
$box-shadow-opacity * 0.5,
$color
),
shadow-layer(
$box-shadow-elevation * 0.225,
$box-shadow-blur-strengh * 0.225,
$box-shadow-opacity * 0.6,
$color
),
shadow-layer(
$box-shadow-elevation * 0.417,
$box-shadow-blur-strengh * 0.417,
$box-shadow-opacity * 0.717,
$color
),
shadow-layer($box-shadow-elevation, $box-shadow-blur-strengh, $box-shadow-opacity, $color),
0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
}