@mapbox/assembly 1.12.2 → 1.13.0

package/dist/assembly.css

@@ -2763,18 +2763,10 @@ textarea {
  * <div class="inline-block bg-darken10">inline-block</div>
  * <div class="none bg-darken10">none</div>
  */
-.inline {
-  display: inline !important;
-}
-.block {
-  display: block !important;
-}
-.inline-block {
-  display: inline-block !important;
-}
-.none {
-  display: none !important;
-}
+.inline { display: inline !important; }
+.block { display: block !important; }
+.inline-block { display: inline-block !important; }
+.none { display: none !important; }
 /** @endgroup */
 
 /**
@@ -2801,21 +2793,11 @@ textarea {
  *   -->
  * </div>
  */
-.fixed {
-  position: fixed !important;
-}
-.absolute {
-  position: absolute !important;
-}
-.relative {
-  position: relative !important;
-}
-.static {
-  position: static !important;
-}
-.sticky {
-  position: sticky !important;
-}
+.fixed { position: fixed !important; }
+.absolute { position: absolute !important; }
+.relative { position: relative !important; }
+.static { position: static !important; }
+.sticky { position: sticky !important; }
 /** @endgroup */
 
 /**
@@ -2831,18 +2813,10 @@ textarea {
  *   <div class="absolute bg-darken10 top left right align-center">top left right</div>
  * </div>
  */
-.top {
-  top: 0 !important;
-}
-.right {
-  right: 0 !important;
-}
-.left {
-  left: 0 !important;
-}
-.bottom {
-  bottom: 0 !important;
-}
+.top { top: 0 !important; }
+.right { right: 0 !important; }
+.left { left: 0 !important; }
+.bottom { bottom: 0 !important; }
 /** @endgroup */
 
 /**
@@ -2858,27 +2832,13 @@ textarea {
  *   <div class="absolute z1-neg1 bg-blue px6 py6 mt24 ml60">z-neg1</div>
  * </div>
  */
-.z-neg1 {
-  z-index: -1 !important;
-}
-.z0 {
-  z-index: 0 !important;
-}
-.z1 {
-  z-index: 1 !important;
-}
-.z2 {
-  z-index: 2 !important;
-}
-.z3 {
-  z-index: 3 !important;
-}
-.z4 {
-  z-index: 4 !important;
-}
-.z5 {
-  z-index: 5 !important;
-}
+.z-neg1 { z-index: -1 !important; }
+.z0 { z-index: 0 !important; }
+.z1 { z-index: 1 !important; }
+.z2 { z-index: 2 !important; }
+.z3 { z-index: 3 !important; }
+.z4 { z-index: 4 !important; }
+.z5 { z-index: 5 !important; }
 /** @endgroup */
 
 /**
@@ -2894,7 +2854,7 @@ textarea {
  */
 
 /**
- * Set `auto` margins on left and right. This pattern is useful for horizontally centering block elements
+ * Set `auto` margins on left and right. This pattern is useful for horizontally centering block elements 
  * or aligning block elements to the start or end of their container.
  *
  * @example
@@ -2903,16 +2863,9 @@ textarea {
  * <div class='mr-auto w60 bg-darken10'>mr-auto</div>
  * @memberof Margins
  */
-.mx-auto {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-.ml-auto {
-  margin-left: auto !important;
-}
-.mr-auto {
-  margin-right: auto !important;
-}
+.mx-auto { margin-left: auto !important; margin-right: auto !important; }
+.ml-auto { margin-left: auto !important; }
+.mr-auto { margin-right: auto !important; }
 
 /**
  * All padding classes fit the following pattern: `m<side><size>`.
@@ -2952,12 +2905,8 @@ textarea {
  * <div class='bg-darken10 flex'>flex</div>
  * <div class='bg-darken10 inline-flex'>inline-flex</div>
  */
-.flex {
-  display: flex !important;
-}
-.inline-flex {
-  display: inline-flex !important;
-}
+.flex { display: flex !important; }
+.inline-flex { display: inline-flex !important; }
 /** @endgroup */
 
 /**
@@ -2971,9 +2920,7 @@ textarea {
  *  <span>3</span>
  * </div>
  */
-.flex--column {
-  flex-direction: column !important;
-}
+.flex--column { flex-direction: column !important; }
 
 /**
  * Set the direction of the main axis to bottom-to-top (default is left-to-right).
@@ -2986,9 +2933,7 @@ textarea {
  *  <span>3</span>
  * </div>
  */
-.flex--column-reverse {
-  flex-direction: column-reverse !important;
-}
+.flex--column-reverse { flex-direction: column-reverse !important; }
 
 /**
  * Set the direction of the main axis to left-to-right (the default value of `flex`).
@@ -3001,9 +2946,7 @@ textarea {
  *  <span>3</span>
  * </div>
  */
-.flex--row {
-  flex-direction: row !important;
-}
+.flex--row { flex-direction: row !important; }
 
 /**
  * Set the direction of the main axis to right-to-left (default is left-to-right).
@@ -3016,9 +2959,7 @@ textarea {
  *  <span>3</span>
  * </div>
  */
-.flex--row-reverse {
-  flex-direction: row-reverse !important;
-}
+.flex--row-reverse { flex-direction: row-reverse !important; }
 
 /**
  * Center an element's children on the main axis.
@@ -3029,9 +2970,7 @@ textarea {
  *  <div class='bg-darken10'>child</div>
  * </div>
  */
-.flex--center-main {
-  justify-content: center !important;
-}
+.flex--center-main { justify-content: center !important; }
 
 /**
  * Center an element's children on the cross axis.
@@ -3042,9 +2981,7 @@ textarea {
  *  <div class='bg-darken10'>child</div>
  * </div>
  */
-.flex--center-cross {
-  align-items: center !important;
-}
+.flex--center-cross { align-items: center !important; }
 
 /**
  * Align an element's children to the start of the cross axis.
@@ -3056,9 +2993,7 @@ textarea {
  *  <div class='bg-darken10'>child</div>
  * </div>
  */
-.flex--start-cross {
-  align-items: flex-start !important;
-}
+.flex--start-cross { align-items: flex-start !important; }
 
 /**
  * Align an element's children to the start of the main axis.
@@ -3069,9 +3004,7 @@ textarea {
  *  <div class='bg-darken10'>child</div>
  * </div>
  */
-.flex--start-main {
-  justify-content: flex-start !important;
-}
+.flex--start-main { justify-content: flex-start !important; }
 
 /**
  * Align an element's children to the end of the cross axis.
@@ -3083,9 +3016,7 @@ textarea {
  *  <div class='bg-darken10'>child</div>
  * </div>
  */
-.flex--end-cross {
-  align-items: flex-end !important;
-}
+.flex--end-cross { align-items: flex-end !important; }
 
 /**
  * Align an element's children to the end of the main axis.
@@ -3096,9 +3027,7 @@ textarea {
  *  <div class='bg-darken10'>child</div>
  * </div>
  */
-.flex--end-main {
-  justify-content: flex-end !important;
-}
+.flex--end-main { justify-content: flex-end !important; }
 
 /**
  * Allow children to wrap. By default, they are all forced onto one line.
@@ -3110,9 +3039,7 @@ textarea {
  *  <div class='bg-darken10 w600'>child</div>
  * </div>
  */
-.flex--wrap {
-  flex-wrap: wrap !important;
-}
+.flex--wrap { flex-wrap: wrap !important; }
 
 /**
  * Stretch children to fill the parent container along the cross axis.
@@ -3123,9 +3050,7 @@ textarea {
  *  <div class='bg-darken10'>child</div>
  * </div>
  */
-.flex--stretch-cross {
-  align-items: stretch !important;
-}
+.flex--stretch-cross { align-items: stretch !important; }
 
 /**
  * Evenly distribute children across the line, so first child is at the start
@@ -3138,9 +3063,7 @@ textarea {
  *  <div class='bg-darken10'>child</div>
  * </div>
  */
-.flex--space-between-main {
-  justify-content: space-between !important;
-}
+.flex--space-between-main { justify-content: space-between !important; }
 
 /**
  * Make a child to grow to fill whatever space is available in the main axis of the parent container.
@@ -3247,15 +3170,9 @@ textarea {
  * <div class='bg-darken10'> without .clearfix </div>
  * <div class='fl unfloat'>unfloat</div>
  */
-.fl {
-  float: left !important;
-}
-.fr {
-  float: right !important;
-}
-.unfloat {
-  float: none !important;
-}
+.fl { float: left !important; }
+.fr { float: right !important; }
+.unfloat { float: none !important; }
 .clearfix::after {
   content: '' !important;
   display: block !important;
@@ -15422,115 +15339,42 @@ input:checked + .switch--dot-transparent::after {
   flex: auto;
   flex-basis: 0;
 }
-.inline-mm {
-  display: inline !important;
-}
-.block-mm {
-  display: block !important;
-}
-.inline-block-mm {
-  display: inline-block !important;
-}
-.none-mm {
-  display: none !important;
-}
-.fixed-mm {
-  position: fixed !important;
-}
-.absolute-mm {
-  position: absolute !important;
-}
-.relative-mm {
-  position: relative !important;
-}
-.static-mm {
-  position: static !important;
-}
-.sticky-mm {
-  position: sticky !important;
-}
-.top-mm {
-  top: 0 !important;
-}
-.right-mm {
-  right: 0 !important;
-}
-.left-mm {
-  left: 0 !important;
-}
-.bottom-mm {
-  bottom: 0 !important;
-}
-.z-neg1-mm {
-  z-index: -1 !important;
-}
-.z0-mm {
-  z-index: 0 !important;
-}
-.z1-mm {
-  z-index: 1 !important;
-}
-.z2-mm {
-  z-index: 2 !important;
-}
-.z3-mm {
-  z-index: 3 !important;
-}
-.z4-mm {
-  z-index: 4 !important;
-}
-.z5-mm {
-  z-index: 5 !important;
-}
-.mx-auto-mm {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-.flex-mm {
-  display: flex !important;
-}
-.inline-flex-mm {
-  display: inline-flex !important;
-}
-.flex--column-mm {
-  flex-direction: column !important;
-}
-.flex--column-reverse-mm {
-  flex-direction: column-reverse !important;
-}
-.flex--row-mm {
-  flex-direction: row !important;
-}
-.flex--row-reverse-mm {
-  flex-direction: row-reverse !important;
-}
-.flex--wrap-mm {
-  flex-wrap: wrap !important;
-}
-.flex--start-cross-mm {
-  align-items: flex-start !important;
-}
-.flex--start-main-mm {
-  justify-content: flex-start !important;
-}
-.flex--end-cross-mm {
-  align-items: flex-end !important;
-}
-.flex--end-main-mm {
-  justify-content: flex-end !important;
-}
-.flex--center-main-mm {
-  justify-content: center !important;
-}
-.flex--center-cross-mm {
-  align-items: center !important;
-}
-.flex--stretch-cross-mm {
-  align-items: stretch !important;
-}
-.flex--space-between-main-mm {
-  justify-content: space-between !important;
-}
+.inline-mm { display: inline !important; }
+.block-mm { display: block !important; }
+.inline-block-mm { display: inline-block !important; }
+.none-mm { display: none !important; }
+.fixed-mm { position: fixed !important; }
+.absolute-mm { position: absolute !important; }
+.relative-mm { position: relative !important; }
+.static-mm { position: static !important; }
+.sticky-mm { position: sticky !important; }
+.top-mm { top: 0 !important; }
+.right-mm { right: 0 !important; }
+.left-mm { left: 0 !important; }
+.bottom-mm { bottom: 0 !important; }
+.z-neg1-mm { z-index: -1 !important; }
+.z0-mm { z-index: 0 !important; }
+.z1-mm { z-index: 1 !important; }
+.z2-mm { z-index: 2 !important; }
+.z3-mm { z-index: 3 !important; }
+.z4-mm { z-index: 4 !important; }
+.z5-mm { z-index: 5 !important; }
+.mx-auto-mm { margin-left: auto !important; margin-right: auto !important; }
+.flex-mm { display: flex !important; }
+.inline-flex-mm { display: inline-flex !important; }
+.flex--column-mm { flex-direction: column !important; }
+.flex--column-reverse-mm { flex-direction: column-reverse !important; }
+.flex--row-mm { flex-direction: row !important; }
+.flex--row-reverse-mm { flex-direction: row-reverse !important; }
+.flex--wrap-mm { flex-wrap: wrap !important; }
+.flex--start-cross-mm { align-items: flex-start !important; }
+.flex--start-main-mm { justify-content: flex-start !important; }
+.flex--end-cross-mm { align-items: flex-end !important; }
+.flex--end-main-mm { justify-content: flex-end !important; }
+.flex--center-main-mm { justify-content: center !important; }
+.flex--center-cross-mm { align-items: center !important; }
+.flex--stretch-cross-mm { align-items: stretch !important; }
+.flex--space-between-main-mm { justify-content: space-between !important; }
 .flex-child-grow-mm {
   flex-grow: 1 !important;
   min-width: 0;
@@ -15555,15 +15399,9 @@ input:checked + .switch--dot-transparent::after {
   margin-left: 0;
   margin-right: 0;
 }
-.fl-mm {
-  float: left !important;
-}
-.fr-mm {
-  float: right !important;
-}
-.unfloat-mm {
-  float: none !important;
-}
+.fl-mm { float: left !important; }
+.fr-mm { float: right !important; }
+.unfloat-mm { float: none !important; }
 .border-mm {
   border-style: solid;
   border-width: 1px;
@@ -15695,115 +15533,42 @@ input:checked + .switch--dot-transparent::after {
   flex: auto;
   flex-basis: 0;
 }
-.inline-ml {
-  display: inline !important;
-}
-.block-ml {
-  display: block !important;
-}
-.inline-block-ml {
-  display: inline-block !important;
-}
-.none-ml {
-  display: none !important;
-}
-.fixed-ml {
-  position: fixed !important;
-}
-.absolute-ml {
-  position: absolute !important;
-}
-.relative-ml {
-  position: relative !important;
-}
-.static-ml {
-  position: static !important;
-}
-.sticky-ml {
-  position: sticky !important;
-}
-.top-ml {
-  top: 0 !important;
-}
-.right-ml {
-  right: 0 !important;
-}
-.left-ml {
-  left: 0 !important;
-}
-.bottom-ml {
-  bottom: 0 !important;
-}
-.z-neg1-ml {
-  z-index: -1 !important;
-}
-.z0-ml {
-  z-index: 0 !important;
-}
-.z1-ml {
-  z-index: 1 !important;
-}
-.z2-ml {
-  z-index: 2 !important;
-}
-.z3-ml {
-  z-index: 3 !important;
-}
-.z4-ml {
-  z-index: 4 !important;
-}
-.z5-ml {
-  z-index: 5 !important;
-}
-.mx-auto-ml {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-.flex-ml {
-  display: flex !important;
-}
-.inline-flex-ml {
-  display: inline-flex !important;
-}
-.flex--column-ml {
-  flex-direction: column !important;
-}
-.flex--column-reverse-ml {
-  flex-direction: column-reverse !important;
-}
-.flex--row-ml {
-  flex-direction: row !important;
-}
-.flex--row-reverse-ml {
-  flex-direction: row-reverse !important;
-}
-.flex--wrap-ml {
-  flex-wrap: wrap !important;
-}
-.flex--start-cross-ml {
-  align-items: flex-start !important;
-}
-.flex--start-main-ml {
-  justify-content: flex-start !important;
-}
-.flex--end-cross-ml {
-  align-items: flex-end !important;
-}
-.flex--end-main-ml {
-  justify-content: flex-end !important;
-}
-.flex--center-main-ml {
-  justify-content: center !important;
-}
-.flex--center-cross-ml {
-  align-items: center !important;
-}
-.flex--stretch-cross-ml {
-  align-items: stretch !important;
-}
-.flex--space-between-main-ml {
-  justify-content: space-between !important;
-}
+.inline-ml { display: inline !important; }
+.block-ml { display: block !important; }
+.inline-block-ml { display: inline-block !important; }
+.none-ml { display: none !important; }
+.fixed-ml { position: fixed !important; }
+.absolute-ml { position: absolute !important; }
+.relative-ml { position: relative !important; }
+.static-ml { position: static !important; }
+.sticky-ml { position: sticky !important; }
+.top-ml { top: 0 !important; }
+.right-ml { right: 0 !important; }
+.left-ml { left: 0 !important; }
+.bottom-ml { bottom: 0 !important; }
+.z-neg1-ml { z-index: -1 !important; }
+.z0-ml { z-index: 0 !important; }
+.z1-ml { z-index: 1 !important; }
+.z2-ml { z-index: 2 !important; }
+.z3-ml { z-index: 3 !important; }
+.z4-ml { z-index: 4 !important; }
+.z5-ml { z-index: 5 !important; }
+.mx-auto-ml { margin-left: auto !important; margin-right: auto !important; }
+.flex-ml { display: flex !important; }
+.inline-flex-ml { display: inline-flex !important; }
+.flex--column-ml { flex-direction: column !important; }
+.flex--column-reverse-ml { flex-direction: column-reverse !important; }
+.flex--row-ml { flex-direction: row !important; }
+.flex--row-reverse-ml { flex-direction: row-reverse !important; }
+.flex--wrap-ml { flex-wrap: wrap !important; }
+.flex--start-cross-ml { align-items: flex-start !important; }
+.flex--start-main-ml { justify-content: flex-start !important; }
+.flex--end-cross-ml { align-items: flex-end !important; }
+.flex--end-main-ml { justify-content: flex-end !important; }
+.flex--center-main-ml { justify-content: center !important; }
+.flex--center-cross-ml { align-items: center !important; }
+.flex--stretch-cross-ml { align-items: stretch !important; }
+.flex--space-between-main-ml { justify-content: space-between !important; }
 .flex-child-grow-ml {
   flex-grow: 1 !important;
   min-width: 0;
@@ -15828,15 +15593,9 @@ input:checked + .switch--dot-transparent::after {
   margin-left: 0;
   margin-right: 0;
 }
-.fl-ml {
-  float: left !important;
-}
-.fr-ml {
-  float: right !important;
-}
-.unfloat-ml {
-  float: none !important;
-}
+.fl-ml { float: left !important; }
+.fr-ml { float: right !important; }
+.unfloat-ml { float: none !important; }
 .border-ml {
   border-style: solid;
   border-width: 1px;
@@ -15968,115 +15727,42 @@ input:checked + .switch--dot-transparent::after {
   flex: auto;
   flex-basis: 0;
 }
-.inline-mxl {
-  display: inline !important;
-}
-.block-mxl {
-  display: block !important;
-}
-.inline-block-mxl {
-  display: inline-block !important;
-}
-.none-mxl {
-  display: none !important;
-}
-.fixed-mxl {
-  position: fixed !important;
-}
-.absolute-mxl {
-  position: absolute !important;
-}
-.relative-mxl {
-  position: relative !important;
-}
-.static-mxl {
-  position: static !important;
-}
-.sticky-mxl {
-  position: sticky !important;
-}
-.top-mxl {
-  top: 0 !important;
-}
-.right-mxl {
-  right: 0 !important;
-}
-.left-mxl {
-  left: 0 !important;
-}
-.bottom-mxl {
-  bottom: 0 !important;
-}
-.z-neg1-mxl {
-  z-index: -1 !important;
-}
-.z0-mxl {
-  z-index: 0 !important;
-}
-.z1-mxl {
-  z-index: 1 !important;
-}
-.z2-mxl {
-  z-index: 2 !important;
-}
-.z3-mxl {
-  z-index: 3 !important;
-}
-.z4-mxl {
-  z-index: 4 !important;
-}
-.z5-mxl {
-  z-index: 5 !important;
-}
-.mx-auto-mxl {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-.flex-mxl {
-  display: flex !important;
-}
-.inline-flex-mxl {
-  display: inline-flex !important;
-}
-.flex--column-mxl {
-  flex-direction: column !important;
-}
-.flex--column-reverse-mxl {
-  flex-direction: column-reverse !important;
-}
-.flex--row-mxl {
-  flex-direction: row !important;
-}
-.flex--row-reverse-mxl {
-  flex-direction: row-reverse !important;
-}
-.flex--wrap-mxl {
-  flex-wrap: wrap !important;
-}
-.flex--start-cross-mxl {
-  align-items: flex-start !important;
-}
-.flex--start-main-mxl {
-  justify-content: flex-start !important;
-}
-.flex--end-cross-mxl {
-  align-items: flex-end !important;
-}
-.flex--end-main-mxl {
-  justify-content: flex-end !important;
-}
-.flex--center-main-mxl {
-  justify-content: center !important;
-}
-.flex--center-cross-mxl {
-  align-items: center !important;
-}
-.flex--stretch-cross-mxl {
-  align-items: stretch !important;
-}
-.flex--space-between-main-mxl {
-  justify-content: space-between !important;
-}
+.inline-mxl { display: inline !important; }
+.block-mxl { display: block !important; }
+.inline-block-mxl { display: inline-block !important; }
+.none-mxl { display: none !important; }
+.fixed-mxl { position: fixed !important; }
+.absolute-mxl { position: absolute !important; }
+.relative-mxl { position: relative !important; }
+.static-mxl { position: static !important; }
+.sticky-mxl { position: sticky !important; }
+.top-mxl { top: 0 !important; }
+.right-mxl { right: 0 !important; }
+.left-mxl { left: 0 !important; }
+.bottom-mxl { bottom: 0 !important; }
+.z-neg1-mxl { z-index: -1 !important; }
+.z0-mxl { z-index: 0 !important; }
+.z1-mxl { z-index: 1 !important; }
+.z2-mxl { z-index: 2 !important; }
+.z3-mxl { z-index: 3 !important; }
+.z4-mxl { z-index: 4 !important; }
+.z5-mxl { z-index: 5 !important; }
+.mx-auto-mxl { margin-left: auto !important; margin-right: auto !important; }
+.flex-mxl { display: flex !important; }
+.inline-flex-mxl { display: inline-flex !important; }
+.flex--column-mxl { flex-direction: column !important; }
+.flex--column-reverse-mxl { flex-direction: column-reverse !important; }
+.flex--row-mxl { flex-direction: row !important; }
+.flex--row-reverse-mxl { flex-direction: row-reverse !important; }
+.flex--wrap-mxl { flex-wrap: wrap !important; }
+.flex--start-cross-mxl { align-items: flex-start !important; }
+.flex--start-main-mxl { justify-content: flex-start !important; }
+.flex--end-cross-mxl { align-items: flex-end !important; }
+.flex--end-main-mxl { justify-content: flex-end !important; }
+.flex--center-main-mxl { justify-content: center !important; }
+.flex--center-cross-mxl { align-items: center !important; }
+.flex--stretch-cross-mxl { align-items: stretch !important; }
+.flex--space-between-main-mxl { justify-content: space-between !important; }
 .flex-child-grow-mxl {
   flex-grow: 1 !important;
   min-width: 0;
@@ -16101,15 +15787,9 @@ input:checked + .switch--dot-transparent::after {
   margin-left: 0;
   margin-right: 0;
 }
-.fl-mxl {
-  float: left !important;
-}
-.fr-mxl {
-  float: right !important;
-}
-.unfloat-mxl {
-  float: none !important;
-}
+.fl-mxl { float: left !important; }
+.fr-mxl { float: right !important; }
+.unfloat-mxl { float: none !important; }
 .border-mxl {
   border-style: solid;
   border-width: 1px;