@mapbox/assembly 1.13.0 → 1.14.0

package/dist/assembly.css

@@ -2763,10 +2763,18 @@ 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 */
 
 /**
@@ -2793,11 +2801,21 @@ 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 */
 
 /**
@@ -2813,10 +2831,18 @@ 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 */
 
 /**
@@ -2832,13 +2858,27 @@ 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 */
 
 /**
@@ -2854,7 +2894,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
@@ -2863,9 +2903,16 @@ 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>`.
@@ -2905,8 +2952,12 @@ 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 */
 
 /**
@@ -2920,7 +2971,9 @@ 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).
@@ -2933,7 +2986,9 @@ 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`).
@@ -2946,7 +3001,9 @@ 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).
@@ -2959,7 +3016,9 @@ 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.
@@ -2970,7 +3029,9 @@ 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.
@@ -2981,7 +3042,9 @@ 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.
@@ -2993,7 +3056,9 @@ 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.
@@ -3004,7 +3069,9 @@ 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.
@@ -3016,7 +3083,9 @@ 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.
@@ -3027,7 +3096,9 @@ 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.
@@ -3039,7 +3110,9 @@ 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.
@@ -3050,7 +3123,9 @@ 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
@@ -3063,7 +3138,9 @@ 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.
@@ -3170,9 +3247,15 @@ 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;
@@ -15339,42 +15422,115 @@ 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;
@@ -15399,9 +15555,15 @@ 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;
@@ -15533,42 +15695,115 @@ 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;
@@ -15593,9 +15828,15 @@ 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;
@@ -15727,42 +15968,115 @@ 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;
@@ -15787,9 +16101,15 @@ 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;