SHARE
TWEET

Untitled

a guest Dec 8th, 2019 81 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. body {
  2.     overflow-x: hidden;
  3. }
  4.  
  5. .container {
  6.     @include grid;
  7.  
  8.     &--left {
  9.         margin-left: 5%;
  10.  
  11.         @include media($gridWidth + 50, min) {
  12.             margin-left: calc(50% - (#{$gridWidth} / 2));
  13.         }
  14.     }
  15.  
  16.     &--right {
  17.         margin-right: 5%;
  18.  
  19.         @include media($gridWidth + 50, min) {
  20.             margin-right: calc(50% - (#{$gridWidth} / 2));
  21.         }
  22.     }
  23. }
  24.  
  25. .grid {
  26.     display: grid;
  27.     width: 100%;
  28.  
  29.     @for $i from 1 to 13 {
  30.         &--#{$i} {
  31.             @include media($colBreak, min) {
  32.                 grid-template-columns: repeat(#{$i}, auto);
  33.             }
  34.         }
  35.     }
  36.  
  37.     &-gap {
  38.         grid-row-gap: $gap;
  39.         grid-column-gap: $gap;
  40.  
  41.         padding-bottom: $gap;
  42.  
  43.         &--small {
  44.             padding-top: $gap;
  45.             grid-row-gap: $ps;
  46.             grid-column-gap: $ps;
  47.         }
  48.  
  49.         &--med {
  50.             padding-top: $gap;
  51.             grid-row-gap: $pm;
  52.             grid-column-gap: $pm;
  53.         }
  54.  
  55.         &--big {
  56.             padding-top: $gap;
  57.             grid-row-gap: $pb;
  58.             grid-column-gap: $pb;
  59.         }
  60.     }
  61. }
  62.  
  63. .flex {
  64.     display: flex;
  65.     flex-wrap: wrap;
  66.  
  67.     @include media($colBreak, min) {
  68.         @for $i from 1 to 12 {
  69.             &--#{$i} {
  70.                 width: calc(8.3333333% * #{$i});
  71.             }
  72.         }
  73.     }
  74. }
  75.  
  76. .align {
  77.  
  78.     &--start {
  79.         align-items: flex-start;
  80.     }
  81.  
  82.     &--center {
  83.         align-items: center;
  84.     }
  85.  
  86.     &--strech {
  87.         align-items: stretch;
  88.     }
  89.  
  90.     &--end {
  91.         align-items: flex-end;
  92.     }
  93. }
  94.  
  95. .justify {
  96.     &--start {
  97.         justify-content: flex-start;
  98.     }
  99.  
  100.     &--center {
  101.         justify-content: center;
  102.     }
  103.  
  104.     &--space {
  105.         justify-content: space-between;
  106.     }
  107.  
  108.     &--end {
  109.         justify-content: flex-end
  110.     }
  111. }
  112.  
  113. .grid__item {
  114.     background: #ccc;
  115.     padding: 15px 5px;
  116.     font-size: $small;
  117.     text-align: center;
  118. }
  119.  
  120.  
  121. .gap {
  122.     padding: $gap;
  123.  
  124.     &-r {
  125.         padding-right: $gap;
  126.  
  127.         &-s {
  128.             padding-right: $ps;
  129.         }
  130.  
  131.         &-m {
  132.             padding-right: $pm;
  133.         }
  134.     }
  135.  
  136.     &-l {
  137.         padding-left: $gap;
  138.  
  139.         &-s {
  140.             padding-left: $ps;
  141.         }
  142.  
  143.         &-m {
  144.             padding-left: $pm;
  145.         }
  146.     }
  147.  
  148.     &-b {
  149.         padding-bottom: $gap;
  150.  
  151.         &-s {
  152.             padding-bottom: $ps;
  153.         }
  154.  
  155.         &-m {
  156.             padding-bottom: $pm;
  157.         }
  158.     }
  159.  
  160.     &-t {
  161.         padding-top: $gap;
  162.  
  163.         &-s {
  164.             padding-top: $ps;
  165.         }
  166.  
  167.         &-m {
  168.             padding-top: $pm;
  169.         }
  170.     }
  171. }
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