_visual-grid.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. @mixin grid-column-gradient($values...) {
  2. background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values);
  3. background-image: -webkit-linear-gradient(left, $values);
  4. background-image: -moz-linear-gradient(left, $values);
  5. background-image: -ms-linear-gradient(left, $values);
  6. background-image: -o-linear-gradient(left, $values);
  7. background-image: unquote("linear-gradient(left, #{$values})");
  8. }
  9. @if $visual-grid == true or $visual-grid == yes {
  10. body:before {
  11. content: '';
  12. display: inline-block;
  13. @include grid-column-gradient(gradient-stops($grid-columns));
  14. height: 100%;
  15. left: 0;
  16. margin: 0 auto;
  17. max-width: $max-width;
  18. opacity: $visual-grid-opacity;
  19. position: fixed;
  20. right: 0;
  21. width: 100%;
  22. pointer-events: none;
  23. @if $visual-grid-index == back {
  24. z-index: -1;
  25. }
  26. @else if $visual-grid-index == front {
  27. z-index: 9999;
  28. }
  29. @each $breakpoint in $visual-grid-breakpoints {
  30. @if $breakpoint != nil {
  31. @include media($breakpoint) {
  32. @include grid-column-gradient(gradient-stops($grid-columns));
  33. }
  34. }
  35. }
  36. }
  37. }