@itcase/ui 1.8.158 → 1.8.160

package/dist/css/components/Loader/Loader.css

@@ -109,20 +109,90 @@
   }
 }
 .loader {
-  @each $size in xxl, xl, l, m, s, xs, xxs {
-    &_size_$(size) {
-      min-width: var(--loader-$(size)-min-width);
-      min-height: var(--loader-$(size)-min-height);
-      padding: var(--loader-$(size)-padding);
+    &_size_xxl {
+      min-width: var(--loader-xxl-min-width);
+      min-height: var(--loader-xxl-min-height);
+      padding: var(--loader-xxl-padding);
       ^&__inner {
-        gap: var(--loader-$(size)-gap);
+        gap: var(--loader-xxl-gap);
         ^^&__item {
-          width: var(--loader-$(size)-item);
-          height: var(--loader-$(size)-item);
+          width: var(--loader-xxl-item);
+          height: var(--loader-xxl-item);
+        }
+      }
+    }
+    &_size_xl {
+      min-width: var(--loader-xl-min-width);
+      min-height: var(--loader-xl-min-height);
+      padding: var(--loader-xl-padding);
+      ^&__inner {
+        gap: var(--loader-xl-gap);
+        ^^&__item {
+          width: var(--loader-xl-item);
+          height: var(--loader-xl-item);
+        }
+      }
+    }
+    &_size_l {
+      min-width: var(--loader-l-min-width);
+      min-height: var(--loader-l-min-height);
+      padding: var(--loader-l-padding);
+      ^&__inner {
+        gap: var(--loader-l-gap);
+        ^^&__item {
+          width: var(--loader-l-item);
+          height: var(--loader-l-item);
+        }
+      }
+    }
+    &_size_m {
+      min-width: var(--loader-m-min-width);
+      min-height: var(--loader-m-min-height);
+      padding: var(--loader-m-padding);
+      ^&__inner {
+        gap: var(--loader-m-gap);
+        ^^&__item {
+          width: var(--loader-m-item);
+          height: var(--loader-m-item);
+        }
+      }
+    }
+    &_size_s {
+      min-width: var(--loader-s-min-width);
+      min-height: var(--loader-s-min-height);
+      padding: var(--loader-s-padding);
+      ^&__inner {
+        gap: var(--loader-s-gap);
+        ^^&__item {
+          width: var(--loader-s-item);
+          height: var(--loader-s-item);
+        }
+      }
+    }
+    &_size_xs {
+      min-width: var(--loader-xs-min-width);
+      min-height: var(--loader-xs-min-height);
+      padding: var(--loader-xs-padding);
+      ^&__inner {
+        gap: var(--loader-xs-gap);
+        ^^&__item {
+          width: var(--loader-xs-item);
+          height: var(--loader-xs-item);
+        }
+      }
+    }
+    &_size_xxs {
+      min-width: var(--loader-xxs-min-width);
+      min-height: var(--loader-xxs-min-height);
+      padding: var(--loader-xxs-padding);
+      ^&__inner {
+        gap: var(--loader-xxs-gap);
+        ^^&__item {
+          width: var(--loader-xxs-item);
+          height: var(--loader-xxs-item);
         }
       }
     }
-  }
 }
 :root {
   --loader-l-min-width: 112px;

package/dist/css/components/Logo/Logo.css

@@ -3,11 +3,24 @@
   flex-flow: column nowrap;
 }
 .logo {
-  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
-    &_align-items_$(val) {
-      align-items: $(val);
+    &_align-items_stretch {
+      align-items: stretch;
+    }
+    &_align-items_flex-start {
+      align-items: flex-start;
+    }
+    &_align-items_flex-end {
+      align-items: flex-end;
+    }
+    &_align-items_center {
+      align-items: center;
+    }
+    &_align-items_baseline {
+      align-items: baseline;
+    }
+    &_align-items_auto {
+      align-items: auto;
     }
-  }
 }
 .logo {
   &&_mode {
@@ -37,20 +50,78 @@
 }
 .logo {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
+      &_xxl {
         ^^&__image {
-          width: var(--logo-size-$(size)-width);
-          height: var(--logo-size-$(size)-height);
+          width: var(--logo-size-xxl-width);
+          height: var(--logo-size-xxl-height);
+        }
+      }
+      &_xl {
+        ^^&__image {
+          width: var(--logo-size-xl-width);
+          height: var(--logo-size-xl-height);
+        }
+      }
+      &_l {
+        ^^&__image {
+          width: var(--logo-size-l-width);
+          height: var(--logo-size-l-height);
+        }
+      }
+      &_m {
+        ^^&__image {
+          width: var(--logo-size-m-width);
+          height: var(--logo-size-m-height);
+        }
+      }
+      &_s {
+        ^^&__image {
+          width: var(--logo-size-s-width);
+          height: var(--logo-size-s-height);
+        }
+      }
+      &_xs {
+        ^^&__image {
+          width: var(--logo-size-xs-width);
+          height: var(--logo-size-xs-height);
+        }
+      }
+      &_xxs {
+        ^^&__image {
+          width: var(--logo-size-xxs-width);
+          height: var(--logo-size-xxs-height);
         }
       }
-    }
   }
 }
 :root {
   /* Size */
-  @each $size, $value in (xxl, xl, l, m, s, xs, xxs) {
-    --logo-size-$(size)-width: $value;
-    --logo-size-$(size)-height: $value;
-  }
+    --logo-size-xxl-width: 0
+;
+    --logo-size-xxl-height: 0
+;
+    --logo-size-xl-width: 1
+;
+    --logo-size-xl-height: 1
+;
+    --logo-size-l-width: 2
+;
+    --logo-size-l-height: 2
+;
+    --logo-size-m-width: 3
+;
+    --logo-size-m-height: 3
+;
+    --logo-size-s-width: 4
+;
+    --logo-size-s-height: 4
+;
+    --logo-size-xs-width: 5
+;
+    --logo-size-xs-height: 5
+;
+    --logo-size-xxs-width: 6
+;
+    --logo-size-xxs-height: 6
+
 }

package/dist/css/components/MenuItem/MenuItem.css

@@ -62,40 +62,130 @@
 }
 
 .menu-item {
-  @each $val in flex-start, flex-end, center, space-between, space-around,
-    space-evenly {
-    &_justify-content_$(val) {
+    &_justify-content_flex-start {
       ^&__wrapper {
-        justify-content: $(val);
+        justify-content: flex-start;
+      }
+    }
+    &_justify-content_flex-end {
+      ^&__wrapper {
+        justify-content: flex-end;
+      }
+    }
+    &_justify-content_center {
+      ^&__wrapper {
+        justify-content: center;
+      }
+    }
+    &_justify-content_space-between {
+      ^&__wrapper {
+        justify-content: space-between;
+      }
+    }
+    &_justify-content_space-around {
+      ^&__wrapper {
+        justify-content: space-around;
+      }
+    }
+    &_justify-content_space-evenly {
+      ^&__wrapper {
+        justify-content: space-evenly;
       }
     }
-  }
 }
 
 .menu-item {
   &_size {
-    @each $size in xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
-        min-height: var(--menu-item-size-$(size)-min-height);
-        padding: var(--menu-item-size-$(size)-padding);
+      &_xxl {
+        min-height: var(--menu-item-size-xxl-min-height);
+        padding: var(--menu-item-size-xxl-padding);
         ^^&__icon_before {
-          padding: var(--menu-item-size-$(size)-icon-padding);
+          padding: var(--menu-item-size-xxl-icon-padding);
+        }
+      }
+      &_xl {
+        min-height: var(--menu-item-size-xl-min-height);
+        padding: var(--menu-item-size-xl-padding);
+        ^^&__icon_before {
+          padding: var(--menu-item-size-xl-icon-padding);
+        }
+      }
+      &_l {
+        min-height: var(--menu-item-size-l-min-height);
+        padding: var(--menu-item-size-l-padding);
+        ^^&__icon_before {
+          padding: var(--menu-item-size-l-icon-padding);
+        }
+      }
+      &_m {
+        min-height: var(--menu-item-size-m-min-height);
+        padding: var(--menu-item-size-m-padding);
+        ^^&__icon_before {
+          padding: var(--menu-item-size-m-icon-padding);
+        }
+      }
+      &_s {
+        min-height: var(--menu-item-size-s-min-height);
+        padding: var(--menu-item-size-s-padding);
+        ^^&__icon_before {
+          padding: var(--menu-item-size-s-icon-padding);
+        }
+      }
+      &_xs {
+        min-height: var(--menu-item-size-xs-min-height);
+        padding: var(--menu-item-size-xs-padding);
+        ^^&__icon_before {
+          padding: var(--menu-item-size-xs-icon-padding);
+        }
+      }
+      &_xxs {
+        min-height: var(--menu-item-size-xxs-min-height);
+        padding: var(--menu-item-size-xxs-padding);
+        ^^&__icon_before {
+          padding: var(--menu-item-size-xxs-icon-padding);
         }
       }
-    }
   }
 }
 
 .menu-item {
   &_label-icon {
     &^&_size {
-      @each $size in xxl, xl, l, m, s, xs, xxs {
-        &_$(size) {
+        &_xxl {
           ^^^&__wrapper {
-            gap: var(--menu-item-size-$(size)-gap);
+            gap: var(--menu-item-size-xxl-gap);
+          }
+        }
+        &_xl {
+          ^^^&__wrapper {
+            gap: var(--menu-item-size-xl-gap);
+          }
+        }
+        &_l {
+          ^^^&__wrapper {
+            gap: var(--menu-item-size-l-gap);
+          }
+        }
+        &_m {
+          ^^^&__wrapper {
+            gap: var(--menu-item-size-m-gap);
+          }
+        }
+        &_s {
+          ^^^&__wrapper {
+            gap: var(--menu-item-size-s-gap);
+          }
+        }
+        &_xs {
+          ^^^&__wrapper {
+            gap: var(--menu-item-size-xs-gap);
+          }
+        }
+        &_xxs {
+          ^^^&__wrapper {
+            gap: var(--menu-item-size-xxs-gap);
           }
         }
-      }
     }
   }
 }

package/dist/css/components/Modal/Modal.css

@@ -52,24 +52,118 @@
   }
 }
 .modal {
-  @each $size in xxl, xl, l, m, s, xs, xxs {
-    &_size_$(size) {
-      min-width: var(--modal-$(size)-min-width);
-      min-height: var(--modal-$(size)-min-height);
+    &_size_xxl {
+      min-width: var(--modal-xxl-min-width);
+      min-height: var(--modal-xxl-min-height);
       ^&__header {
-        gap: var(--modal-$(size)-gap);
-        padding: var(--modal-$(size)-header-padding);
+        gap: var(--modal-xxl-gap);
+        padding: var(--modal-xxl-header-padding);
       }
       ^&__content-wrapper {
-        padding: var(--modal-$(size)-content-padding);
+        padding: var(--modal-xxl-content-padding);
       }
       &^&__content-no-header {
         ^^&__content-wrapper {
-          padding: var(--modal-$(size)-content-no-header-padding);
+          padding: var(--modal-xxl-content-no-header-padding);
+        }
+      }
+    }
+    &_size_xl {
+      min-width: var(--modal-xl-min-width);
+      min-height: var(--modal-xl-min-height);
+      ^&__header {
+        gap: var(--modal-xl-gap);
+        padding: var(--modal-xl-header-padding);
+      }
+      ^&__content-wrapper {
+        padding: var(--modal-xl-content-padding);
+      }
+      &^&__content-no-header {
+        ^^&__content-wrapper {
+          padding: var(--modal-xl-content-no-header-padding);
+        }
+      }
+    }
+    &_size_l {
+      min-width: var(--modal-l-min-width);
+      min-height: var(--modal-l-min-height);
+      ^&__header {
+        gap: var(--modal-l-gap);
+        padding: var(--modal-l-header-padding);
+      }
+      ^&__content-wrapper {
+        padding: var(--modal-l-content-padding);
+      }
+      &^&__content-no-header {
+        ^^&__content-wrapper {
+          padding: var(--modal-l-content-no-header-padding);
+        }
+      }
+    }
+    &_size_m {
+      min-width: var(--modal-m-min-width);
+      min-height: var(--modal-m-min-height);
+      ^&__header {
+        gap: var(--modal-m-gap);
+        padding: var(--modal-m-header-padding);
+      }
+      ^&__content-wrapper {
+        padding: var(--modal-m-content-padding);
+      }
+      &^&__content-no-header {
+        ^^&__content-wrapper {
+          padding: var(--modal-m-content-no-header-padding);
+        }
+      }
+    }
+    &_size_s {
+      min-width: var(--modal-s-min-width);
+      min-height: var(--modal-s-min-height);
+      ^&__header {
+        gap: var(--modal-s-gap);
+        padding: var(--modal-s-header-padding);
+      }
+      ^&__content-wrapper {
+        padding: var(--modal-s-content-padding);
+      }
+      &^&__content-no-header {
+        ^^&__content-wrapper {
+          padding: var(--modal-s-content-no-header-padding);
+        }
+      }
+    }
+    &_size_xs {
+      min-width: var(--modal-xs-min-width);
+      min-height: var(--modal-xs-min-height);
+      ^&__header {
+        gap: var(--modal-xs-gap);
+        padding: var(--modal-xs-header-padding);
+      }
+      ^&__content-wrapper {
+        padding: var(--modal-xs-content-padding);
+      }
+      &^&__content-no-header {
+        ^^&__content-wrapper {
+          padding: var(--modal-xs-content-no-header-padding);
+        }
+      }
+    }
+    &_size_xxs {
+      min-width: var(--modal-xxs-min-width);
+      min-height: var(--modal-xxs-min-height);
+      ^&__header {
+        gap: var(--modal-xxs-gap);
+        padding: var(--modal-xxs-header-padding);
+      }
+      ^&__content-wrapper {
+        padding: var(--modal-xxs-content-padding);
+      }
+      &^&__content-no-header {
+        ^^&__content-wrapper {
+          padding: var(--modal-xxs-content-no-header-padding);
         }
       }
     }
-  }
 }
 .modal {
   &-scroll {

package/dist/css/components/Notification/Notification.css

@@ -54,14 +54,48 @@
   }
 }
 .notification__item {
-  @each $size in xxl, xl, l, m, s, xs, xxs {
-    &_size_$(size) {
-      padding: var(--notification-item-$(size)-padding);
+    &_size_xxl {
+      padding: var(--notification-item-xxl-padding);
       ^&-wrapper {
-        gap: var(--notification-item-$(size)-gap);
+        gap: var(--notification-item-xxl-gap);
+      }
+    }
+    &_size_xl {
+      padding: var(--notification-item-xl-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-xl-gap);
+      }
+    }
+    &_size_l {
+      padding: var(--notification-item-l-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-l-gap);
+      }
+    }
+    &_size_m {
+      padding: var(--notification-item-m-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-m-gap);
+      }
+    }
+    &_size_s {
+      padding: var(--notification-item-s-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-s-gap);
+      }
+    }
+    &_size_xs {
+      padding: var(--notification-item-xs-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-xs-gap);
+      }
+    }
+    &_size_xxs {
+      padding: var(--notification-item-xxs-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-xxs-gap);
       }
     }
-  }
 }
 .notification__item {
   &&_skeleton {

package/dist/css/components/Notification/css/__item/notification__item_size.css

@@ -1,10 +1,44 @@
 .notification__item {
-  @each $size in xxl, xl, l, m, s, xs, xxs {
-    &_size_$(size) {
-      padding: var(--notification-item-$(size)-padding);
+    &_size_xxl {
+      padding: var(--notification-item-xxl-padding);
       ^&-wrapper {
-        gap: var(--notification-item-$(size)-gap);
+        gap: var(--notification-item-xxl-gap);
+      }
+    }
+    &_size_xl {
+      padding: var(--notification-item-xl-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-xl-gap);
+      }
+    }
+    &_size_l {
+      padding: var(--notification-item-l-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-l-gap);
+      }
+    }
+    &_size_m {
+      padding: var(--notification-item-m-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-m-gap);
+      }
+    }
+    &_size_s {
+      padding: var(--notification-item-s-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-s-gap);
+      }
+    }
+    &_size_xs {
+      padding: var(--notification-item-xs-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-xs-gap);
+      }
+    }
+    &_size_xxs {
+      padding: var(--notification-item-xxs-padding);
+      ^&-wrapper {
+        gap: var(--notification-item-xxs-gap);
       }
     }
-  }
 }