@matteusan/himig 1.7.3 → 1.8.0

package/ms-utils/_layout-utils.scss

@@ -11,7 +11,16 @@
 $_breakpoints: consts.$breakpoints;
 $_displays: ('none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid');
 $_positions: ('static', 'relative', 'absolute', 'fixed', 'sticky');
-$_alignments: ('start', 'center', 'end', 'stretch', 'baseline', 'space-between', 'space-around', 'space-evenly');
+$_alignments: (
+  'start': 'flex-start',
+  'center': 'center',
+  'end': 'flex-end',
+  'stretch': 'stretch',
+  'baseline': 'baseline',
+  'space-between': 'space-between',
+  'space-around': 'space-around',
+  'space-evenly': 'space-evenly'
+);
 $_flows: ('row', 'column', 'row-reverse', 'column-reverse');
 $_wraps: ('none': 'nowrap', 'default': 'wrap','reverse': 'wrap-reverse');
 $_max-columns: 12;
@@ -49,238 +58,240 @@ $_gaps: (
     'gap',
   ), $include, $exclude);
 
-  @if list.index($utils-to-render, 'display') {
-    @each $display in $_displays {
-      .#{$display} {
-        display: string.unquote($display);
-      }
+  @layer utils {
+    @if list.index($utils-to-render, 'display') {
+      @each $display in $_displays {
+        .#{$display} {
+          display: string.unquote($display);
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:#{$display} {
-          @include pintig.breakpoint-create($breakpoint) {
-            display: string.unquote($display) !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:#{$display} {
+            @include pintig.breakpoint-create($breakpoint) {
+              display: string.unquote($display) !important;
+            }
           }
         }
       }
     }
-  }
 
-  @if list.index($utils-to-render, 'position') {
-    @each $position in $_positions {
-      .#{$position} {
-        position: string.unquote($position);
-      }
+    @if list.index($utils-to-render, 'position') {
+      @each $position in $_positions {
+        .#{$position} {
+          position: string.unquote($position);
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:#{$position} {
-          @include pintig.breakpoint-create($breakpoint) {
-            position: string.unquote($position) !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:#{$position} {
+            @include pintig.breakpoint-create($breakpoint) {
+              position: string.unquote($position) !important;
+            }
           }
         }
       }
     }
-  }
 
-  @if list.index($utils-to-render, 'flow') {
-    @each $flow in $_flows {
-      .flow-#{$flow} {
-        flex-flow: string.unquote($flow);
-      }
+    @if list.index($utils-to-render, 'flow') {
+      @each $flow in $_flows {
+        .flow-#{$flow} {
+          flex-flow: string.unquote($flow);
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:flow-#{$flow} {
-          @include pintig.breakpoint-create($breakpoint) {
-            flex-flow: string.unquote($flow) !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:flow-#{$flow} {
+            @include pintig.breakpoint-create($breakpoint) {
+              flex-flow: string.unquote($flow) !important;
+            }
           }
         }
       }
     }
-  }
 
-  @if list.index($utils-to-render, 'wrap') {
-    @each $wrap, $value in $_wraps {
-      @if $wrap == 'default' {
-        .wrap {
-          flex-wrap: string.unquote($value);
-        }
-      } @else {
-        .wrap-#{$wrap} {
-          flex-wrap: string.unquote($value);
-        }
-      }
-
-      @each $breakpoint in $_breakpoints {
+    @if list.index($utils-to-render, 'wrap') {
+      @each $wrap, $value in $_wraps {
         @if $wrap == 'default' {
-          .\@#{$breakpoint}\:wrap {
-            @include pintig.breakpoint-create($breakpoint) {
-              flex-wrap: string.unquote($value) !important;
-            }
+          .wrap {
+            flex-wrap: string.unquote($value);
           }
         } @else {
-          .\@#{$breakpoint}\:wrap-#{$wrap} {
-            @include pintig.breakpoint-create($breakpoint) {
-              flex-wrap: string.unquote($value) !important;
+          .wrap-#{$wrap} {
+            flex-wrap: string.unquote($value);
+          }
+        }
+
+        @each $breakpoint in $_breakpoints {
+          @if $wrap == 'default' {
+            .\@#{$breakpoint}\:wrap {
+              @include pintig.breakpoint-create($breakpoint) {
+                flex-wrap: string.unquote($value) !important;
+              }
+            }
+          } @else {
+            .\@#{$breakpoint}\:wrap-#{$wrap} {
+              @include pintig.breakpoint-create($breakpoint) {
+                flex-wrap: string.unquote($value) !important;
+              }
             }
           }
         }
       }
     }
-  }
 
-  @each $alignment in $_alignments {
-    @if list.index($utils-to-render, 'jc') {
-      .jc-#{$alignment} {
-        justify-content: string.unquote($alignment);
-      }
+    @each $alignment, $alignment-val in $_alignments {
+      @if list.index($utils-to-render, 'jc') {
+        .jc-#{$alignment} {
+          justify-content: string.unquote($alignment-val);
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:jc-#{$alignment} {
-          @include pintig.breakpoint-create($breakpoint) {
-            justify-content: string.unquote($alignment) !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:jc-#{$alignment} {
+            @include pintig.breakpoint-create($breakpoint) {
+              justify-content: string.unquote($alignment-val) !important;
+            }
           }
         }
       }
-    }
 
-    @if list.index($utils-to-render, 'ji') {
-      .ji-#{$alignment} {
-        justify-items: string.unquote($alignment);
-      }
+      @if list.index($utils-to-render, 'ji') {
+        .ji-#{$alignment} {
+          justify-items: string.unquote($alignment);
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:ji-#{$alignment} {
-          @include pintig.breakpoint-create($breakpoint) {
-            justify-items: string.unquote($alignment) !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:ji-#{$alignment} {
+            @include pintig.breakpoint-create($breakpoint) {
+              justify-items: string.unquote($alignment) !important;
+            }
           }
         }
       }
-    }
 
-    @if list.index($utils-to-render, 'ac') {
-      .ac-#{$alignment} {
-        align-content: string.unquote($alignment);
-      }
+      @if list.index($utils-to-render, 'ac') {
+        .ac-#{$alignment} {
+          align-content: string.unquote($alignment);
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:ac-#{$alignment} {
-          @include pintig.breakpoint-create($breakpoint) {
-            align-content: string.unquote($alignment) !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:ac-#{$alignment} {
+            @include pintig.breakpoint-create($breakpoint) {
+              align-content: string.unquote($alignment) !important;
+            }
           }
         }
       }
-    }
 
-    @if list.index($utils-to-render, 'ai') {
-      .ai-#{$alignment} {
-        align-items: string.unquote($alignment);
-      }
+      @if list.index($utils-to-render, 'ai') {
+        .ai-#{$alignment} {
+          align-items: string.unquote($alignment);
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:ai-#{$alignment} {
-          @include pintig.breakpoint-create($breakpoint) {
-            align-items: string.unquote($alignment) !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:ai-#{$alignment} {
+            @include pintig.breakpoint-create($breakpoint) {
+              align-items: string.unquote($alignment) !important;
+            }
           }
         }
       }
-    }
 
-    @if list.index($utils-to-render, 'pc') {
-      .pc-#{$alignment} {
-        place-content: string.unquote($alignment);
-      }
+      @if list.index($utils-to-render, 'pc') {
+        .pc-#{$alignment} {
+          place-content: string.unquote($alignment);
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:pc-#{$alignment} {
-          @include pintig.breakpoint-create($breakpoint) {
-            place-content: string.unquote($alignment) !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:pc-#{$alignment} {
+            @include pintig.breakpoint-create($breakpoint) {
+              place-content: string.unquote($alignment) !important;
+            }
           }
         }
       }
-    }
 
-    @if list.index($utils-to-render, 'pi') {
-      .pi-#{$alignment} {
-        place-items: string.unquote($alignment);
-      }
+      @if list.index($utils-to-render, 'pi') {
+        .pi-#{$alignment} {
+          place-items: string.unquote($alignment);
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:pi-#{$alignment} {
-          @include pintig.breakpoint-create($breakpoint) {
-            place-items: string.unquote($alignment) !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:pi-#{$alignment} {
+            @include pintig.breakpoint-create($breakpoint) {
+              place-items: string.unquote($alignment) !important;
+            }
           }
         }
       }
     }
-  }
 
-  @for $i from 1 through $_max-columns {
-    @if list.index($utils-to-render, 'cols') {
-      .cols-#{$i} {
-        grid-template-columns: repeat($i, 1fr);
-      }
+    @for $i from 1 through $_max-columns {
+      @if list.index($utils-to-render, 'cols') {
+        .cols-#{$i} {
+          grid-template-columns: repeat($i, 1fr);
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:cols-#{$i} {
-          @include pintig.breakpoint-create($breakpoint) {
-            grid-template-columns: repeat($i, 1fr) !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:cols-#{$i} {
+            @include pintig.breakpoint-create($breakpoint) {
+              grid-template-columns: repeat($i, 1fr) !important;
+            }
           }
         }
       }
-    }
 
-    @if list.index($utils-to-render, 'rows') {
-      .rows-#{$i} {
-        grid-template-rows: repeat($i, 1fr);
-      }
+      @if list.index($utils-to-render, 'rows') {
+        .rows-#{$i} {
+          grid-template-rows: repeat($i, 1fr);
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:rows-#{$i} {
-          @include pintig.breakpoint-create($breakpoint) {
-            grid-template-rows: repeat($i, 1fr) !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:rows-#{$i} {
+            @include pintig.breakpoint-create($breakpoint) {
+              grid-template-rows: repeat($i, 1fr) !important;
+            }
           }
         }
       }
-    }
 
-    @if list.index($utils-to-render, 'start') {
-      .start-#{$i} {
-        grid-column-start: $i;
-      }
+      @if list.index($utils-to-render, 'start') {
+        .start-#{$i} {
+          grid-column-start: $i;
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:start-#{$i} {
-          @include pintig.breakpoint-create($breakpoint) {
-            grid-column-start: $i !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:start-#{$i} {
+            @include pintig.breakpoint-create($breakpoint) {
+              grid-column-start: $i !important;
+            }
           }
         }
       }
-    }
 
-    @if list.index($utils-to-render, 'end') {
-      .end-#{$i} {
-        grid-column-end: $i + 1;
-      }
+      @if list.index($utils-to-render, 'end') {
+        .end-#{$i} {
+          grid-column-end: $i + 1;
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:end-#{$i} {
-          @include pintig.breakpoint-create($breakpoint) {
-            grid-column-end: $i + 1 !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:end-#{$i} {
+            @include pintig.breakpoint-create($breakpoint) {
+              grid-column-end: $i + 1 !important;
+            }
           }
         }
       }
     }
-  }
 
-  @if list.index($utils-to-render, 'gap') {
-    @each $gap in $_gaps {
-      .gap-#{$gap} {
-        gap: pintig.primitive-token-get('gap.#{$gap}');
-      }
+    @if list.index($utils-to-render, 'gap') {
+      @each $gap in $_gaps {
+        .gap-#{$gap} {
+          gap: pintig.primitive-token-get('gap.#{$gap}');
+        }
 
-      @each $breakpoint in $_breakpoints {
-        .\@#{$breakpoint}\:gap-#{$gap} {
-          @include pintig.breakpoint-create($breakpoint) {
-            gap: pintig.primitive-token-get('gap.#{$gap}') !important;
+        @each $breakpoint in $_breakpoints {
+          .\@#{$breakpoint}\:gap-#{$gap} {
+            @include pintig.breakpoint-create($breakpoint) {
+              gap: pintig.primitive-token-get('gap.#{$gap}') !important;
+            }
           }
         }
       }