62 lines
1.5 KiB
SCSS
62 lines
1.5 KiB
SCSS
/** Box Shadow */
|
|
@use 'sass:map';
|
|
|
|
@use 'common/var' as *;
|
|
@use 'mixins/mixins' as *;
|
|
@use 'mixins/function' as *;
|
|
|
|
@include b('shadow') {
|
|
@each $size in ('default', 'sm', 'md', lg) {
|
|
$box-shadow-sizes: map.get($box-shadow, $size);
|
|
$box-shadow-color: map.get($box-shadow-colors, $size);
|
|
$color-attr-value: '';
|
|
@each $box-shadow-size in $box-shadow-sizes {
|
|
$color-attr-value: $color-attr-value +
|
|
$box-shadow-size +
|
|
' var(--tn-shadow-color),';
|
|
}
|
|
// 移除最后一个逗号
|
|
$color-attr-value: str-slice(
|
|
$color-attr-value,
|
|
1,
|
|
str-length($color-attr-value) - 1
|
|
);
|
|
$default-attr-value: str-replace(
|
|
$color-attr-value,
|
|
'var(--tn-shadow-color)',
|
|
$box-shadow-color
|
|
);
|
|
|
|
$prefix: if($size == 'default', '', '-' + $size);
|
|
|
|
&#{$prefix} {
|
|
#{getCssVarName('shadow')}: #{$default-attr-value};
|
|
#{getCssVarName('shadow-colored')}: #{$color-attr-value};
|
|
}
|
|
&#{$prefix} {
|
|
box-shadow: #{getCssVar('shadow')};
|
|
}
|
|
}
|
|
&-blur {
|
|
position: relative;
|
|
&::before {
|
|
content: ' ';
|
|
display: block;
|
|
background: inherit;
|
|
background-color: inherit;
|
|
background-image: inherit;
|
|
filter: blur(5px);
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 5px;
|
|
left: 5px;
|
|
z-index: inherit;
|
|
opacity: 0.4;
|
|
transform-origin: 0 0;
|
|
border-radius: inherit;
|
|
transform: scale(1, 1);
|
|
}
|
|
}
|
|
}
|