shadows.scss 1.1 KB

1234567891011121314151617181920212223242526272829
  1. // shadows are slightly shifted left and down, this is a fix for toolbars that are next to each other horizontally
  2. // or on top of each other vertically
  3. // So the shadow from the bar on the left/bottom will not overlap the one on the right/top
  4. $material-shadow-1: dynamic(2px 2px 5px 0 rgba(0, 0, 0, 0.12), 2px 2px 5px 0 rgba(0, 0, 0, 0.08));
  5. $material-shadow-2: dynamic(2px 2px 5px 0 rgba(0, 0, 0, 0.18), 2px 2px 5px 0 rgba(0, 0, 0, 0.12));
  6. $material-shadow-3: dynamic(2px 2px 5px 0 rgba(0, 0, 0, 0.21), 2px 2px 6px 0 rgba(0, 0, 0, 0.18));
  7. $material-shadow-4: dynamic(2px 2px 6px 0 rgba(0, 0, 0, 0.25), 2px 2px 7px 0 rgba(0, 0, 0, 0.21));
  8. @mixin material-shadow($level: 1, $index: null) {
  9. @if $level == 1 {
  10. box-shadow: $material-shadow-1;
  11. } @else if $level == 2 {
  12. box-shadow: $material-shadow-2;
  13. } @else if $level == 3 {
  14. box-shadow: $material-shadow-3;
  15. } @else if $level == 4 {
  16. box-shadow: $material-shadow-4;
  17. } @else {
  18. box-shadow: none;
  19. }
  20. @if ($level >= 1) {
  21. @if ($index) {
  22. z-index: #{$index};
  23. } @else {
  24. z-index: #{$level};
  25. }
  26. }
  27. }