daily pastebin goal
27%
SHARE
TWEET

Untitled

a guest Mar 25th, 2019 67 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. :root, body {
  2.   --space-unit:  1em;
  3.   --space-xxxxs: calc(0.125 * var(--space-unit));
  4.   --space-xxxs:  calc(0.25 * var(--space-unit));
  5.   --space-xxs:   calc(0.375 * var(--space-unit));
  6.   --space-xs:    calc(0.5 * var(--space-unit));
  7.   --space-sm:    calc(0.75 * var(--space-unit));
  8.   --space-md:    calc(1.25 * var(--space-unit));
  9.   --space-lg:    calc(2 * var(--space-unit));
  10.   --space-xl:    calc(3.25 * var(--space-unit));
  11.   --space-xxl:   calc(5.25 * var(--space-unit));
  12.   --space-xxxl:  calc(8.5 * var(--space-unit));
  13.   --space-xxxxl: calc(13.75 * var(--space-unit));
  14. }
  15.  
  16. // alignment utility classes - based on Flexbox
  17. // TODO: layout
  18. .flex, flex--inline {
  19.   > * {
  20.     display: inline-block; // fallback
  21.   }
  22. }
  23.  
  24. .flex {
  25.   display: flex;
  26. }
  27.  
  28. .flex-inline {
  29.   display: inline-flex;
  30. }
  31.  
  32. .flex--wrap {
  33.   flex-wrap: wrap;
  34. }
  35.  
  36. .flex--column {
  37.   flex-direction: column;
  38. }
  39.  
  40. .flex--end-x {
  41.   justify-content: flex-end;
  42. }
  43.  
  44. .flex--end-y {
  45.   align-items: flex-end;
  46. }
  47.  
  48. .flex--center {
  49.   justify-content: center;
  50.   align-items: center;
  51. }
  52.  
  53. .flex--center-x {
  54.   justify-content: center;
  55. }
  56.  
  57. .flex--center-y {
  58.   align-items: center;
  59. }
  60.  
  61. .flex--space-between {
  62.   justify-content: space-between;
  63. }
  64.  
  65. .flex--space-around {
  66.   justify-content: space-around;
  67. }
  68.  
  69. .flex--space-evenly {
  70.   justify-content: space-evenly;
  71. }
  72.  
  73. .flex--grow > * {
  74.   flex-grow: 1;
  75. }
  76.  
  77. .flex--shrink-none > * {
  78.   flex-shrink: 0;
  79. }
  80.  
  81. // set margin for children
  82. .flex-gap, .flex-gap--md {
  83.   margin-left: calc(-1 * var(--space-md) / 2);
  84.   margin-right: calc(-1 * var(--space-md) / 2);
  85.  
  86.   > * {
  87.     padding-left: calc(var(--space-md) / 2);
  88.     padding-right: calc(var(--space-md) / 2);
  89.   }
  90. }
  91.  
  92. .flex--wrap.flex-gap, .flex--wrap.flex-gap--md {
  93.   margin-bottom: calc(-1 * var(--space-md));
  94.  
  95.   > * {
  96.     margin-bottom: var(--space-md);
  97.   }
  98. }
  99.  
  100. .flex-gap--xxs {
  101.   margin-left: calc(-1 * var(--space-xxs) / 2);
  102.   margin-right: calc(-1 * var(--space-xxs) / 2);
  103.  
  104.   > * {
  105.     padding-left: calc(var(--space-xxs) / 2);
  106.     padding-right: calc(var(--space-xxs) / 2);
  107.   }
  108. }
  109.  
  110. .flex--wrap.flex-gap--xxs {
  111.   margin-bottom: calc(-1 * var(--space-xxs));
  112.  
  113.   > * {
  114.     margin-bottom: var(--space-xxs);
  115.   }
  116. }
  117.  
  118. .flex-gap--xs {
  119.   margin-left: calc(-1 * var(--space-xs) / 2);
  120.   margin-right: calc(-1 * var(--space-xs) / 2);
  121.  
  122.   > * {
  123.     padding-left: calc(var(--space-xs) / 2);
  124.     padding-right: calc(var(--space-xs) / 2);
  125.   }
  126. }
  127.  
  128. .flex--wrap.flex-gap--xs {
  129.   margin-bottom: calc(-1 * var(--space-xs));
  130.  
  131.   > * {
  132.     margin-bottom: var(--space-xs);
  133.   }
  134. }
  135.  
  136. .flex-gap--sm {
  137.   margin-left: calc(-1 * var(--space-sm) / 2);
  138.   margin-right: calc(-1 * var(--space-sm) / 2);
  139.  
  140.   > * {
  141.     padding-left: calc(var(--space-sm) / 2);
  142.     padding-right: calc(var(--space-sm) / 2);
  143.   }
  144. }
  145.  
  146. .flex--wrap.flex-gap--sm {
  147.   margin-bottom: calc(-1 * var(--space-sm));
  148.  
  149.   > * {
  150.     margin-bottom: var(--space-sm);
  151.   }
  152. }
  153.  
  154. .flex-gap--lg {
  155.   margin-left: calc(-1 * var(--space-lg) / 2);
  156.   margin-right: calc(-1 * var(--space-lg) / 2);
  157.  
  158.   > * {
  159.     padding-left: calc(var(--space-lg) / 2);
  160.     padding-right: calc(var(--space-lg) / 2);
  161.   }
  162. }
  163.  
  164. .flex--wrap.flex-gap--lg {
  165.   margin-bottom: calc(-1 * var(--space-lg));
  166.  
  167.   > * {
  168.     margin-bottom: var(--space-lg);
  169.   }
  170. }
  171.  
  172. .flex-gap--xl {
  173.   margin-left: calc(-1 * var(--space-xl) / 2);
  174.   margin-right: calc(-1 * var(--space-xl) / 2);
  175.  
  176.   > * {
  177.     padding-left: calc(var(--space-xl) / 2);
  178.     padding-right: calc(var(--space-xl) / 2);
  179.   }
  180. }
  181.  
  182. .flex--wrap.flex-gap--xl {
  183.   margin-bottom: calc(-1 * var(--space-xl));
  184.  
  185.   > * {
  186.     margin-bottom: var(--space-xl);
  187.   }
  188. }
  189.  
  190. // children
  191. .flex-item--end {
  192.   align-self: flex-end;
  193. }
  194.  
  195. .flex-item--grow {
  196.   flex-grow: 1;
  197. }
  198.  
  199. .flex-item--shrink-none {
  200.   flex-shrink: 0;
  201. }
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