12345678910111213141516171819202122232425262728293031323334 |
- // boxShadow
// $boxShadows: 'shadow-sm' '0 1rpx 4rpx 0 rgba(0, 0, 0, 0.05)','shadow' '0 1rpx 6rpx 0 rgba(0, 0, 0, 0.1), 0 1rpx 4rpx -1rpx rgba(0, 0, 0, 0.1)','shadow-md' '0 8rpx 6px -1rpx rgba(0, 0, 0, 0.1), 0 4rpx 8rpx -4rpx rgba(0, 0, 0, 0.1)','shadow-lg' '0 10px 15px -6rpx rgba(0, 0, 0, 0.1), 0 8rpx 6px -8rpx rgba(0, 0, 0, 0.1)','shadow-xl' '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)','shadow-2xl' '0 25px 50px -24rpx rgba(0, 0, 0, 0.25)','shadow-inner' 'inset 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05)','shadow-none' '0 0 #000';
// @each $name, $val in $boxShadows { .#{$name} {box-shadow: #{$val};}}
- .shadow-sm{
- --shadow-color: rgba(0,0,0,0.05);
- box-shadow:0 1rpx 4rpx 0 var(--shadow-color);
- }
- .shadow{
- --shadow-color: rgba(0,0,0,0.1);
- box-shadow:0 1rpx 6rpx 0 var(--shadow-color),0 1rpx 4rpx -1rpx var(--shadow-color);
- }
- .shadow-md{
- --shadow-color: rgba(0,0,0,0.1);
- box-shadow:0 8rpx 6px -1rpx var(--shadow-color),0 4rpx 8rpx -4rpx var(--shadow-color);
- }
- .shadow-lg{
- --shadow-color: rgba(0,0,0,0.1);
- box-shadow:0 10px 15px -6rpx var(--shadow-color),0 8rpx 6px -8rpx var(--shadow-color);
- }
- .shadow-xl{
- --shadow-color: rgba(0,0,0,0.1);
- box-shadow:0 20px 25px -5px var(--shadow-color),0 8px 10px -6px var(--shadow-color);
- }
- .shadow-2xl{
- --shadow-color: rgba(0,0,0,0.25);
- box-shadow:0 25px 50px -24rpx var(--shadow-color);
- }
- .shadow-inner{
- --shadow-color: rgba(0,0,0,0.05);
- box-shadow:inset 0 4rpx 8rpx 0 var(--shadow-color);
- }
- .shadow-none{
- --shadow-color: #000;
- box-shadow:0 0 var(--shadow-color);
- }
|