daily pastebin goal
43%
SHARE
TWEET

Untitled

a guest Mar 19th, 2019 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // sass-lint:disable no-important no-vendor-prefixes
  2.  
  3. // Grid Variables
  4. $cols: 12 !default;
  5. $gutter: 50px !default;
  6. $margins: 50px !default;
  7.  
  8. // Breakpoints
  9. $breakpoints: (
  10.   (l, 1199.98px, 100%, 1),
  11.   (m, 991.98px, 100%, 1),
  12.   (s, 767.98px, 100%, 2),
  13.   (x, 575.98px, 100%, 3),
  14.   (no, 0, 100%, 3)
  15. ) !default;
  16.  
  17. // Animation
  18. $grid-animation: all 1s;
  19.  
  20. // Globals
  21. html {
  22.   box-sizing: border-box;
  23.   margin: 0;
  24.   padding: 0;
  25. }
  26.  
  27. body {
  28.   box-sizing: inherit;
  29.   margin: 0;
  30.   padding: 0;
  31. }
  32.  
  33. *,
  34. *::after,
  35. *::before {
  36.   box-sizing: inherit;
  37. }
  38.  
  39. * {
  40.   -moz-osx-font-smoothing: grayscale;
  41.   -webkit-font-smoothing: antialiased;
  42.   font: inherit;
  43.   font-kerning: normal;
  44. }
  45.  
  46. // Grid
  47. .container {
  48.   background-color: #0ff;
  49.   display: block;
  50.   max-width: 100%;
  51.   padding: 0 $margins;
  52.   position: relative;
  53.   width: 100%;
  54. }
  55.  
  56. .fluid {
  57.   max-width: 100% !important;
  58.   width: 100% !important;
  59. }
  60.  
  61. .r {
  62.   background-color: #eff;
  63.   display: grid !important;
  64.   grid-gap: $gutter;
  65.   grid-template-columns: repeat($cols, 1fr);
  66.   position: relative;
  67.   transition: $grid-animation;
  68. }
  69.  
  70. .nest {
  71.   background-color: #0ff;
  72.   display: grid !important;
  73.   grid-gap: $gutter;
  74.   grid-template-columns: repeat($cols, 1fr);
  75.   position: relative;
  76.   transition: $grid-animation;
  77. }
  78.  
  79. [class*='c-'] {
  80.   background-color: #faebd7;
  81.   grid-column: span $cols;
  82.   position: relative;
  83. }
  84.  
  85. @for $i from 1 through $cols {
  86.   .c-#{$i} {
  87.     grid-column: span $i;
  88.   }
  89. }
  90.  
  91. .top {
  92.   align-items: start;
  93. }
  94.  
  95. .middle {
  96.   align-items: center;
  97. }
  98.  
  99. .bottom {
  100.   align-items: end;
  101. }
  102.  
  103. .left {
  104.   justify-items: start;
  105. }
  106.  
  107. .center {
  108.   justify-items: center;
  109. }
  110.  
  111. .right {
  112.   justify-items: end;
  113. }
  114.  
  115. .stretch {
  116.   align-items: stretch;
  117.   justify-items: stretch;
  118. }
  119.  
  120. .gap-no {
  121.   grid-gap: 0;
  122.   margin-bottom: 0;
  123. }
  124.  
  125. .gap-c-no {
  126.   grid-column-gap: 0;
  127. }
  128.  
  129. .gap-r-no {
  130.   grid-row-gap: 0;
  131.   margin-bottom: 0;
  132. }
  133.  
  134. .first {
  135.   order: 1;
  136. }
  137.  
  138. .last {
  139.   order: $cols;
  140. }
  141.  
  142. .hide {
  143.   display: none !important;
  144. }
  145.  
  146. .show {
  147.   display: initial !important;
  148. }
  149.  
  150. @each $name, $size, $container, $divide in $breakpoints {
  151.   @media only screen and (max-width: $size) {
  152.     .container {
  153.       max-width: $container;
  154.       padding: 0 $margins / $divide;
  155.       width: $container;
  156.     }
  157.  
  158.     .full {
  159.       max-width: 100% !important;
  160.       width: 100% !important;
  161.     }
  162.  
  163.     .r {
  164.       grid-gap: $gutter / $divide;
  165.     }
  166.  
  167.     .nest {
  168.       grid-gap: $gutter / $divide;
  169.     }
  170.  
  171.     @for $i from 1 through $cols {
  172.       .#{$name}#{$i} {
  173.         grid-column: span $i;
  174.       }
  175.     }
  176.  
  177.     .left-#{$name} {
  178.       justify-items: start;
  179.     }
  180.  
  181.     .center-#{$name} {
  182.       justify-items: center;
  183.     }
  184.  
  185.     .right-#{$name} {
  186.       justify-items: end;
  187.     }
  188.  
  189.     .first-#{$name} {
  190.       order: 1;
  191.     }
  192.  
  193.     .last-#{$name} {
  194.       order: $cols;
  195.     }
  196.  
  197.     .hide-#{$name} {
  198.       display: none !important;
  199.     }
  200.  
  201.     .show-#{$name} {
  202.       display: initial !important;
  203.     }
  204.   }
  205. }
  206.      
  207. // sass-lint:disable no-important no-vendor-prefixes
  208.  
  209. // Grid Variables
  210. $cols: 12 !default;
  211. $gutter: 50px !default;
  212. $margins: 50px !default;
  213.  
  214. // Breakpoints
  215. $breakpoints: (
  216.   (l, 1199.98px, 100%, 1),
  217.   (m, 991.98px, 100%, 1),
  218.   (s, 767.98px, 100%, 2),
  219.   (x, 575.98px, 100%, 3),
  220.   (no, 0, 100%, 3)
  221. ) !default;
  222.  
  223. @for $i from 1 through $cols {
  224.   .c-#{$i} {
  225.     width: calc(#{percentage($i / $cols)} - #{$gutter / 2}) !important;
  226.   }
  227. }
  228.  
  229. @mixin blueprint-fallback {
  230.   .r,
  231.   .nest {
  232.     display: block !important;
  233.  
  234.     &::after {
  235.       content: ' ';
  236.       display: block;
  237.       width: 100%;
  238.     }
  239.   }
  240.  
  241.   .r,
  242.   .next {
  243.     display: block !important;
  244.     width: 100% !important;
  245.   }
  246.  
  247.   .r > *,
  248.   .nest > * {
  249.     display: block !important;
  250.     float: left !important;
  251.     margin: 0 #{$gutter / 2} #{$gutter / 2} 0;
  252.  
  253.     &:last-child {
  254.       margin-right: 0;
  255.     }
  256.   }
  257.  
  258.   @for $i from 1 through $cols {
  259.  
  260.     .r > .c-#{$i},
  261.     .r .c-#{$i} > *,
  262.     .nest > .c-#{$i},
  263.     .nest .c-#{$i} > * {
  264.       width: calc(#{percentage($i / $cols)} - #{$gutter / 2}) !important;
  265.     }
  266.   }
  267.  
  268.   @each $name, $size, $container, $divide in $breakpoints {
  269.     @media only screen and (max-width: $size) {
  270.       .show-#{$name} {
  271.         display: block !important;
  272.       }
  273.     }
  274.   }
  275. }
  276.  
  277. // ie11
  278. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  279.   @include blueprint-fallback()
  280. }
  281.  
  282. @supports not (display: grid) {
  283.   @include blueprint-fallback()
  284. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top