@itcase/ui 1.1.8 → 1.1.10

package/dist/css/components/Button/Button.css

@@ -34,9 +34,9 @@
   &_shape {
     &_rounded {
       border-radius: var(--button-shape-rounded-default, 6px);
-      @each $size in xs, s, m, l, xl, xxl {
+      @each $size in xxs, xs, s, m, l, xl, xxl {
         &.button_size_$(size) {
-          border-radius: var(--button-size-$(size)-shape-rounded);
+          border-radius: var(--button-$(size)-shape-rounded);
         }
       }
     }
@@ -45,38 +45,33 @@
     }
   }
 }
-.button {
-  &_size {
-    @each $size in xxs, xs, s, m, l, xl, xxl {
-      &_$(size) {
-        ^^&__wrapper {
-          padding: var(--button-size-$(size)-label-padding);
-        }
-        &^^&_type_with-icon {
-          &_$(size) {
-            ^^^^&__wrapper {
-              gap: var(--button-size-$(size)-gap);
-              padding: var(--button-size-$(size)-label-icon-padding);
-            }
-          }
-        }
-      }
-    }
-  }
-}
 .button {
   &&_state {
     &_loading {
       ^^&__loader {
         display: flex;
         position: absolute;
-        padding: var(--button-size-$(size)-label-icon-padding);
       }
-      &.button_size {
-        @each $size in xxs, xs, s, m, l, xl, xxl {
-          &_$(size) {
-            & ^^^^&__wrapper {
-              padding: var(--button-size-$(size)-loader-padding);
+    }
+  }
+}
+.button {
+  &_type {
+    @each $type in label, with-icon, icon, loader {
+      &_$(type) {
+        @each $set in filled, outlined, ghost {
+          &.button_set_$(set) {
+            @each $size in xxs, xs, s, m, l, xl, xxl {
+              &.button_size_$(size) {
+                ^^^^&__wrapper {
+                  padding: var(--button-$(type)-$(set)-$(size)-padding);
+                }
+                &.button_type_with-icon {
+                  ^^^^^&__wrapper {
+                    gap: var(--button-with-icon-$(size)-gap);
+                  }
+                }
+              }
             }
           }
         }
@@ -124,6 +119,34 @@
     }
   }
 }
+.button {
+  &&_type {
+    &_badge {
+      position: relative;
+      & .badge {
+        position: absolute;
+        right: -4px;
+        top: -4px;
+      }
+    }
+  }
+}
+.button {
+  &_type {
+    &_icon {
+      align-self: flex-start;
+      &.button_size {
+        @each $size in xxs, xs, s, m, l, xl, xxl {
+          &_$(size) {
+            & ^^^^&__wrapper {
+              padding: var(--button-size-$(size)-icon-padding);
+            }
+          }
+        }
+      }
+    }
+  }
+}
 .button {
   &&_type {
     &_primary {
@@ -296,34 +319,6 @@
     }
   }
 }
-.button {
-  &&_type {
-    &_badge {
-      position: relative;
-      & .badge {
-        position: absolute;
-        right: -4px;
-        top: -4px;
-      }
-    }
-  }
-}
-.button {
-  &_type {
-    &_icon {
-      align-self: flex-start;
-      &.button_size {
-        @each $size in xxs, xs, s, m, l, xl, xxl {
-          &_$(size) {
-            & ^^^^&__wrapper {
-              padding: var(--button-size-$(size)-icon-padding);
-            }
-          }
-        }
-      }
-    }
-  }
-}
 .button {
   &&_width {
     &_fixed {

package/dist/css/components/Drawer/Drawer.css

@@ -1,25 +1,30 @@
 .EZDrawer .EZDrawer__checkbox {
-  display: none; }
-  .EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__overlay {
+    display: none;
+}
+.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__overlay {
     display: block;
-    opacity: 1; }
-  .EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__container {
+    opacity: 1;
+}
+.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__container {
     visibility: visible;
-    transform: translate3d(0, 0, 0) !important; }
-  .EZDrawer .EZDrawer__overlay {
-  display: none;
-  height: 100vh;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%; }
-  .EZDrawer .EZDrawer__container {
-  position: fixed;
-  visibility: hidden;
-  background: white;
-  transition: all;
-  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1); }
-  .drawer {
+    transform: translate3d(0, 0, 0) !important;
+}
+.EZDrawer .EZDrawer__overlay {
+    display: none;
+    height: 100vh;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+.EZDrawer .EZDrawer__container {
+    position: fixed;
+    visibility: hidden;
+    background: white;
+    transition: all;
+    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
+}
+.drawer {
   overflow-y: scroll;
   display: flex;
   flex-flow: column nowrap;

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

@@ -1,12 +1,29 @@
 .dropdown {
   position: relative;
   display: flex;
+}
+.dropdown {
+  &_animation {
+    &_close {
+      ^^&__wrapper {
+        animation-name: dropDownAnimationClose;
+      }
+    }
+    &_open {
+      ^^&__wrapper {
+        animation-name: dropDownAnimationOpen;
+      }
+    }
+  }
+}
+.dropdown {
   &_set {
     &_default {
       ^^&__wrapper {
         padding: var(--dropdown-default-padding, 0);
         display: flex;
         flex-direction: column;
+        gap: var(--dropdown-default-gap, 0);
       }
     }
     &_normal {
@@ -14,6 +31,7 @@
         padding: var(--dropdown-normal-padding, 12px 0);
         display: flex;
         flex-direction: column;
+        gap: var(--dropdown-normal-gap, 0);
       }
     }
     &_compact {
@@ -21,20 +39,7 @@
         padding: var(--dropdown-compact-padding, 8px 0);
         display: flex;
         flex-direction: column;
-      }
-    }
-  }
-}
-.dropdown {
-  &_animation {
-    &_close {
-      ^^&__wrapper {
-        animation-name: dropDownAnimationClose;
-      }
-    }
-    &_open {
-      ^^&__wrapper {
-        animation-name: dropDownAnimationOpen;
+        gap: var(--dropdown-compact-gap, 0);
       }
     }
   }
@@ -65,35 +70,22 @@
 .dropdown {
   &__item {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    gap: 8px;
-
-    &-label {
-      display: block;
+    &-link {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
-  }
-}
-.dropdown {
-  &__item {
-    &_set {
-      &_default {
-        min-width: 62px;
-        flex-direction: column;
-        justify-content: center;
-        gap: 0;
-        ^^&-label {
-          padding: var(--dropdown-item-default-padding, 10px);
-        }
-      }
-      &_normal {
-        min-width: 240px;
-        padding: var(--dropdown-item-normal-padding, 10px 12px 10px 16px);
-      }
-      &_compact {
-        min-width: 180px;
-        padding: var(--dropdown-item-compact-padding, 0 12px 0 16px);
-      }
+    &-wrapper {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &-label {
+      flex-grow: 1;
     }
   }
 }
@@ -109,14 +101,29 @@
 .dropdown {
   &__item {
     &_size {
-      @each $size in normal, compact {
+      @each $size in xs, l {
         &_$(size) {
-          gap: var(--dropdown-item-size-$(size)-gap);
-          ^^&-label {
-            gap: var(--dropdown-item-size-$(size)-label-gap);
+          ^^&-wrapper {
+            gap: var(--dropdown-item-size-$(size)-gap, 8px);
+            padding: var(--dropdown-item-size-$(size)-padding, 8px);
           }
         }
       }
     }
   }
 }
+.dropdown__item {
+  &_width {
+    &_fixed {
+      min-width: 240px;
+    }
+    &_hug {
+      min-width: 62px;
+      display: inline-flex;
+    }
+    &_fill {
+      width: 100%;
+      max-width: none !important;
+    }
+  }
+}

package/dist/css/components/Icon/Icon.css

@@ -81,40 +81,6 @@
     }
   }
 }
-.icon_stroke {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
-    &_$(type) {
-      &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {
-          &-$(color) {
-            & svg {
-              fill: none;
-              stroke: var(--color-$(type)-item-$(color));
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.icon_stroke_hover {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
-    &_$(type) {
-      &-item {
-        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {
-          &-$(color) {
-            &:hover {
-              & svg {
-                fill: none;
-                stroke: var(--color-$(type)-item-$(color));
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
 .icon_shape {
   &_rounded {
     border-radius: var(--icon-shape-rounded, 12px);
@@ -145,11 +111,15 @@
   }
 }
 .icon {
-  &__tooltip {
-    min-width: 200px;
-    padding: 8px;
-    border-radius: 8px;
-  }
+    &__tooltip {
+      &.tooltip {
+      min-width: 200px;
+      padding: 8px;
+      border-radius: 8px;
+      visibility: visible;
+      opacity: 100%;
+    }
+    }
 }
 :root {
   --icon-transition: all 0.2s ease 0s;

package/dist/css/components/Link/Link.css

@@ -8,3 +8,25 @@
     }
   }
 }
+.link {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    @each $val in row, row-reverse, column, column-reverse {
+      &_$(val) {
+        display: flex;
+        flex-direction: $(val);
+      }
+    }
+  }
+}

package/dist/css/components/Pagination/Pagination.css

@@ -21,6 +21,8 @@
     border-radius: 8px;
     position: relative;
     display: flex;
+    justify-content: center;
+    align-items: center;
     gap: 4px;
   }
 }

package/dist/css/components/Panel/Panel.css

@@ -0,0 +1,107 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  &__wrapper {
+    align-items: stretch;
+  }
+}
+.panel {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+    }
+    &_horizontal-reverse {
+      display: flex;
+      flex-direction: row-reverse;
+    }
+    &_vertical-reverse {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+    @each $val in row, row-reverse, column, column-reverse {
+      &_$(val) {
+        display: flex;
+        flex-direction: $(val);
+      }
+    }
+  }
+}
+.panel {
+  @each $val in flex-start, flex-end, center, space-between, space-around, stretch {
+    &_align-content_$(val) {
+      align-content: $(val);
+    }
+  }
+}
+.panel {
+  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
+    &_align-self_$(val) {
+      align-self: $(val);
+    }
+    &_align-items_$(val) {
+      align-items: $(val);
+    }
+  }
+}
+.panel {
+  @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: $(val);
+    }
+  }
+}
+.panel {
+  &_shape {
+    &_rounded {
+      border-radius: var(--panel-shape-rounded, 12px);
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.panel {
+  &_wrap {
+    &_wrap {
+      flex-wrap: wrap;
+    }
+    &_nowrap {
+      flex-wrap: nowrap;
+    }
+    &_wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+}
+.panel {
+  &_type {
+    &_scroll {
+      &_vertical {
+        /* ^^^&& {
+          max-height: 80%;
+        } */
+        ^^^&__wrapper {
+          max-height: 100%;
+          overflow: auto;
+          scrollbar-width: thin;
+        }
+      }
+      &_horizontal {
+        /* ^^^&& {
+          max-width: 80%;
+        } */
+        ^^^&__wrapper {
+          max-width: 100%;
+          overflow: auto;
+          scrollbar-width: thin;
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Swiper/Swiper.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.1.1
+ * Swiper 11.1.3
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: April 9, 2024
+ * Released on: May 13, 2024
  */
 
 /* FONT_START */