BoxShadow.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334
  1. // 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};}}
  2. .shadow-sm{
  3. --shadow-color: rgba(0,0,0,0.05);
  4. box-shadow:0 1rpx 4rpx 0 var(--shadow-color);
  5. }
  6. .shadow{
  7. --shadow-color: rgba(0,0,0,0.1);
  8. box-shadow:0 1rpx 6rpx 0 var(--shadow-color),0 1rpx 4rpx -1rpx var(--shadow-color);
  9. }
  10. .shadow-md{
  11. --shadow-color: rgba(0,0,0,0.1);
  12. box-shadow:0 8rpx 6px -1rpx var(--shadow-color),0 4rpx 8rpx -4rpx var(--shadow-color);
  13. }
  14. .shadow-lg{
  15. --shadow-color: rgba(0,0,0,0.1);
  16. box-shadow:0 10px 15px -6rpx var(--shadow-color),0 8rpx 6px -8rpx var(--shadow-color);
  17. }
  18. .shadow-xl{
  19. --shadow-color: rgba(0,0,0,0.1);
  20. box-shadow:0 20px 25px -5px var(--shadow-color),0 8px 10px -6px var(--shadow-color);
  21. }
  22. .shadow-2xl{
  23. --shadow-color: rgba(0,0,0,0.25);
  24. box-shadow:0 25px 50px -24rpx var(--shadow-color);
  25. }
  26. .shadow-inner{
  27. --shadow-color: rgba(0,0,0,0.05);
  28. box-shadow:inset 0 4rpx 8rpx 0 var(--shadow-color);
  29. }
  30. .shadow-none{
  31. --shadow-color: #000;
  32. box-shadow:0 0 var(--shadow-color);
  33. }