mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-21 00:56: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) { @function shadow($color) {
$box-shadow-elevation: 1rem; $box-shadow-elevation: 1rem;
$box-shadow-blur-strengh: 6rem; $box-shadow-blur-strengh: 6rem;
$box-shadow-opacity: 0.06; $box-shadow-opacity: 0.06;
@return #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{( @return shadow-layer(
$box-shadow-blur-strengh * 0.029 $box-shadow-elevation * 0.029,
)} #{rgba($color, ($box-shadow-opacity * 0.283))}, $box-shadow-blur-strengh * 0.029,
#{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{( $box-shadow-opacity * 0.283,
$box-shadow-blur-strengh * 0.067 $color
)} #{rgba($color, ($box-shadow-opacity * 0.4))}, ),
#{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{( shadow-layer(
$box-shadow-blur-strengh * 0.125 $box-shadow-elevation * 0.067,
)} #{rgba($color, ($box-shadow-opacity * 0.5))}, $box-shadow-blur-strengh * 0.067,
#{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{( $box-shadow-opacity * 0.4,
$box-shadow-blur-strengh * 0.225 $color
)} #{rgba($color, ($box-shadow-opacity * 0.6))}, ),
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{( shadow-layer(
$box-shadow-blur-strengh * 0.417 $box-shadow-elevation * 0.125,
)} #{rgba($color, ($box-shadow-opacity * 0.717))}, $box-shadow-blur-strengh * 0.125,
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba( $box-shadow-opacity * 0.5,
$color, $color
$box-shadow-opacity ),
)}, 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))}; 0 0 0 0.0625rem #{rgba($color, ($box-shadow-opacity * 0.25))};
} }