@itcase/ui 1.8.159 → 1.8.161

package/dist/css/components/Dropdown/Dropdown.css

@@ -22,16 +22,62 @@
 }
 .dropdown {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
+      &_xxl {
         ^^&__wrapper {
-          padding: var(--dropdown-$(size)-padding);
+          padding: var(--dropdown-xxl-padding);
           display: flex;
           flex-direction: column;
-          gap: var(--dropdown-$(size)-gap);
+          gap: var(--dropdown-xxl-gap);
+        }
+      }
+      &_xl {
+        ^^&__wrapper {
+          padding: var(--dropdown-xl-padding);
+          display: flex;
+          flex-direction: column;
+          gap: var(--dropdown-xl-gap);
+        }
+      }
+      &_l {
+        ^^&__wrapper {
+          padding: var(--dropdown-l-padding);
+          display: flex;
+          flex-direction: column;
+          gap: var(--dropdown-l-gap);
+        }
+      }
+      &_m {
+        ^^&__wrapper {
+          padding: var(--dropdown-m-padding);
+          display: flex;
+          flex-direction: column;
+          gap: var(--dropdown-m-gap);
+        }
+      }
+      &_s {
+        ^^&__wrapper {
+          padding: var(--dropdown-s-padding);
+          display: flex;
+          flex-direction: column;
+          gap: var(--dropdown-s-gap);
+        }
+      }
+      &_xs {
+        ^^&__wrapper {
+          padding: var(--dropdown-xs-padding);
+          display: flex;
+          flex-direction: column;
+          gap: var(--dropdown-xs-gap);
+        }
+      }
+      &_xxs {
+        ^^&__wrapper {
+          padding: var(--dropdown-xxs-padding);
+          display: flex;
+          flex-direction: column;
+          gap: var(--dropdown-xxs-gap);
         }
       }
-    }
   }
 }
 .dropdown {
@@ -74,14 +120,24 @@
 .dropdown {
   &__item {
     &_size {
-      @each $size in l, s, xs {
-        &_$(size) {
+        &_l {
           ^^&-wrapper {
-            gap: var(--dropdown-item-size-$(size)-gap);
-            padding: var(--dropdown-item-size-$(size)-padding);
+            gap: var(--dropdown-item-size-l-gap);
+            padding: var(--dropdown-item-size-l-padding);
+          }
+        }
+        &_s {
+          ^^&-wrapper {
+            gap: var(--dropdown-item-size-s-gap);
+            padding: var(--dropdown-item-size-s-padding);
+          }
+        }
+        &_xs {
+          ^^&-wrapper {
+            gap: var(--dropdown-item-size-xs-gap);
+            padding: var(--dropdown-item-size-xs-padding);
           }
         }
-      }
     }
   }
 }

package/dist/css/components/Flex/Flex.css

@@ -9,27 +9,98 @@
   }
 }
 .flex {
-  @each $val in flex-start, flex-end, center, space-between, space-around, stretch {
-    &_align-content_$(val) {
+    &_align-content_flex-start {
       & > div {
-        align-content: $(val);
+        align-content: flex-start;
+      }
+    }
+    &_align-content_flex-end {
+      & > div {
+        align-content: flex-end;
+      }
+    }
+    &_align-content_center {
+      & > div {
+        align-content: center;
+      }
+    }
+    &_align-content_space-between {
+      & > div {
+        align-content: space-between;
+      }
+    }
+    &_align-content_space-around {
+      & > div {
+        align-content: space-around;
+      }
+    }
+    &_align-content_stretch {
+      & > div {
+        align-content: stretch;
       }
     }
-  }
 }
 .flex {
-  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
-    &_align-self_$(val) {
+    &_align-self_stretch {
       & > div {
-        align-self: $(val);
+        align-self: stretch;
       }
     }
-    &_align-items_$(val) {
+    &_align-items_stretch {
       & > div {
-        align-items: $(val);
+        align-items: stretch;
+      }
+    }
+    &_align-self_flex-start {
+      & > div {
+        align-self: flex-start;
+      }
+    }
+    &_align-items_flex-start {
+      & > div {
+        align-items: flex-start;
+      }
+    }
+    &_align-self_flex-end {
+      & > div {
+        align-self: flex-end;
+      }
+    }
+    &_align-items_flex-end {
+      & > div {
+        align-items: flex-end;
+      }
+    }
+    &_align-self_center {
+      & > div {
+        align-self: center;
+      }
+    }
+    &_align-items_center {
+      & > div {
+        align-items: center;
+      }
+    }
+    &_align-self_baseline {
+      & > div {
+        align-self: baseline;
+      }
+    }
+    &_align-items_baseline {
+      & > div {
+        align-items: baseline;
+      }
+    }
+    &_align-self_auto {
+      & > div {
+        align-self: auto;
+      }
+    }
+    &_align-items_auto {
+      & > div {
+        align-items: auto;
       }
     }
-  }
 }
 .flex {
   &_direction {
@@ -54,24 +125,88 @@
       }
     }
   }
-  @each $val in row, row-reverse, column, column-reverse {
-    &&_direction_$(val) {
+    &&_direction_row {
       & > div {
-        flex-direction: $(val);
+        flex-direction: row;
+      }
+    }
+    &&_direction_row-reverse {
+      & > div {
+        flex-direction: row-reverse;
+      }
+    }
+    &&_direction_column {
+      & > div {
+        flex-direction: column;
+      }
+    }
+    &&_direction_column-reverse {
+      & > div {
+        flex-direction: column-reverse;
       }
     }
-  }
 }
 .flex {
-  @each $val in flex-start, flex-end, center, space-between, space-around,
-    space-evenly, flexStart, flexEnd, center, spaceBetween, spaceAround,
-    spaceEvenly {
-    &_justify-content_$(val) {
+    &_justify-content_flex-start {
       & > div {
-        justify-content: $(val);
+        justify-content: flex-start;
+      }
+    }
+    &_justify-content_flex-end {
+      & > div {
+        justify-content: flex-end;
+      }
+    }
+    &_justify-content_center {
+      & > div {
+        justify-content: center;
+      }
+    }
+    &_justify-content_space-between {
+      & > div {
+        justify-content: space-between;
+      }
+    }
+    &_justify-content_space-around {
+      & > div {
+        justify-content: space-around;
+      }
+    }
+    &_justify-content_space-evenly {
+      & > div {
+        justify-content: space-evenly;
+      }
+    }
+    &_justify-content_flexStart {
+      & > div {
+        justify-content: flexStart;
+      }
+    }
+    &_justify-content_flexEnd {
+      & > div {
+        justify-content: flexEnd;
+      }
+    }
+    &_justify-content_center {
+      & > div {
+        justify-content: center;
+      }
+    }
+    &_justify-content_spaceBetween {
+      & > div {
+        justify-content: spaceBetween;
+      }
+    }
+    &_justify-content_spaceAround {
+      & > div {
+        justify-content: spaceAround;
+      }
+    }
+    &_justify-content_spaceEvenly {
+      & > div {
+        justify-content: spaceEvenly;
       }
     }
-  }
 }
 .flex {
   &_shape {
@@ -109,17 +244,60 @@
 }
 .flex {
   &__item {
-    @each $val in stretch, flex-start, flex-end, center, baseline, auto {
-      &_align-self_$(val) {
-        align-self: $(val);
+      &_align-self_stretch {
+        align-self: stretch;
       }
-      &_align-items_$(val) {
-        align-items: $(val);
+      &_align-items_stretch {
+        align-items: stretch;
       }
-      &_align-content_$(val) {
-        align-content: $(val);
+      &_align-content_stretch {
+        align-content: stretch;
+      }
+      &_align-self_flex-start {
+        align-self: flex-start;
+      }
+      &_align-items_flex-start {
+        align-items: flex-start;
+      }
+      &_align-content_flex-start {
+        align-content: flex-start;
+      }
+      &_align-self_flex-end {
+        align-self: flex-end;
+      }
+      &_align-items_flex-end {
+        align-items: flex-end;
+      }
+      &_align-content_flex-end {
+        align-content: flex-end;
+      }
+      &_align-self_center {
+        align-self: center;
+      }
+      &_align-items_center {
+        align-items: center;
+      }
+      &_align-content_center {
+        align-content: center;
+      }
+      &_align-self_baseline {
+        align-self: baseline;
+      }
+      &_align-items_baseline {
+        align-items: baseline;
+      }
+      &_align-content_baseline {
+        align-content: baseline;
+      }
+      &_align-self_auto {
+        align-self: auto;
+      }
+      &_align-items_auto {
+        align-items: auto;
+      }
+      &_align-content_auto {
+        align-content: auto;
       }
-    }
   }
 }
 .flex {
@@ -131,30 +309,51 @@
       &_vertical {
         flex-direction: column;
       }
-      @each $val in row, row-reverse, column, column-reverse {
-        &_$(val) {
-          flex-direction: $(val);
+        &_row {
+          flex-direction: row;
+        }
+        &_row-reverse {
+          flex-direction: row-reverse;
+        }
+        &_column {
+          flex-direction: column;
+        }
+        &_column-reverse {
+          flex-direction: column-reverse;
         }
-      }
     }
   }
 }
 .flex {
   &__item {
-    @each $val in 0, 1 {
-      &_grow_$(val) {
-        flex-grow: $(val);
+      &_grow_0 {
+        flex-grow: 0;
+      }
+      &_grow_1 {
+        flex-grow: 1;
       }
-    }
   }
 }
 .flex {
   &__item {
-    @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
-      &_justify-content_$(val) {
-        justify-content: $(val);
+      &_justify-content_flex-start {
+        justify-content: flex-start;
+      }
+      &_justify-content_flex-end {
+        justify-content: flex-end;
+      }
+      &_justify-content_center {
+        justify-content: center;
+      }
+      &_justify-content_space-between {
+        justify-content: space-between;
+      }
+      &_justify-content_space-around {
+        justify-content: space-around;
+      }
+      &_justify-content_space-evenly {
+        justify-content: space-evenly;
       }
-    }
   }
 }
 .flex {

package/dist/css/components/Flex/css/__item/flex__item_align.css

@@ -1,15 +1,58 @@
 .flex {
   &__item {
-    @each $val in stretch, flex-start, flex-end, center, baseline, auto {
-      &_align-self_$(val) {
-        align-self: $(val);
+      &_align-self_stretch {
+        align-self: stretch;
       }
-      &_align-items_$(val) {
-        align-items: $(val);
+      &_align-items_stretch {
+        align-items: stretch;
       }
-      &_align-content_$(val) {
-        align-content: $(val);
+      &_align-content_stretch {
+        align-content: stretch;
+      }
+      &_align-self_flex-start {
+        align-self: flex-start;
+      }
+      &_align-items_flex-start {
+        align-items: flex-start;
+      }
+      &_align-content_flex-start {
+        align-content: flex-start;
+      }
+      &_align-self_flex-end {
+        align-self: flex-end;
+      }
+      &_align-items_flex-end {
+        align-items: flex-end;
+      }
+      &_align-content_flex-end {
+        align-content: flex-end;
+      }
+      &_align-self_center {
+        align-self: center;
+      }
+      &_align-items_center {
+        align-items: center;
+      }
+      &_align-content_center {
+        align-content: center;
+      }
+      &_align-self_baseline {
+        align-self: baseline;
+      }
+      &_align-items_baseline {
+        align-items: baseline;
+      }
+      &_align-content_baseline {
+        align-content: baseline;
+      }
+      &_align-self_auto {
+        align-self: auto;
+      }
+      &_align-items_auto {
+        align-items: auto;
+      }
+      &_align-content_auto {
+        align-content: auto;
       }
-    }
   }
 }

package/dist/css/components/Flex/css/__item/flex__item_direction.css

@@ -7,11 +7,18 @@
       &_vertical {
         flex-direction: column;
       }
-      @each $val in row, row-reverse, column, column-reverse {
-        &_$(val) {
-          flex-direction: $(val);
+        &_row {
+          flex-direction: row;
+        }
+        &_row-reverse {
+          flex-direction: row-reverse;
+        }
+        &_column {
+          flex-direction: column;
+        }
+        &_column-reverse {
+          flex-direction: column-reverse;
         }
-      }
     }
   }
 }

package/dist/css/components/Flex/css/__item/flex__item_grow.css

@@ -1,9 +1,10 @@
 .flex {
   &__item {
-    @each $val in 0, 1 {
-      &_grow_$(val) {
-        flex-grow: $(val);
+      &_grow_0 {
+        flex-grow: 0;
+      }
+      &_grow_1 {
+        flex-grow: 1;
       }
-    }
   }
 }

package/dist/css/components/Flex/css/__item/flex__item_justify-content.css

@@ -1,9 +1,22 @@
 .flex {
   &__item {
-    @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
-      &_justify-content_$(val) {
-        justify-content: $(val);
+      &_justify-content_flex-start {
+        justify-content: flex-start;
+      }
+      &_justify-content_flex-end {
+        justify-content: flex-end;
+      }
+      &_justify-content_center {
+        justify-content: center;
+      }
+      &_justify-content_space-between {
+        justify-content: space-between;
+      }
+      &_justify-content_space-around {
+        justify-content: space-around;
+      }
+      &_justify-content_space-evenly {
+        justify-content: space-evenly;
       }
-    }
   }
 }