@itcase/ui 1.8.179 → 1.9.0

package/dist/css/components/Divider/Divider.css

@@ -1,105 +0,0 @@
-.divider {
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-.divider {
-  &_size {
-      &_l {
-        height: var(--divider-l-height);
-        min-height: var(--divider-l-height);
-      }
-      &_m {
-        height: var(--divider-m-height);
-        min-height: var(--divider-m-height);
-      }
-      &_s {
-        height: var(--divider-s-height);
-        min-height: var(--divider-s-height);
-      }
-  }
-  &_direction {
-    &_horizontal {
-      &^^&_size {
-          &_l {
-            height: var(--divider-l-height);
-            min-height: var(--divider-l-height);
-          }
-          &_m {
-            height: var(--divider-m-height);
-            min-height: var(--divider-m-height);
-          }
-          &_s {
-            height: var(--divider-s-height);
-            min-height: var(--divider-s-height);
-          }
-      }
-    }
-    &_vertical {
-      &^^&_size {
-          &_l {
-            width: var(--divider-l-width);
-            height: auto;
-            min-width: var(--divider-l-height);
-          }
-          &_m {
-            width: var(--divider-m-width);
-            height: auto;
-            min-width: var(--divider-m-height);
-          }
-          &_s {
-            width: var(--divider-s-width);
-            height: auto;
-            min-width: var(--divider-s-height);
-          }
-      }
-    }
-  }
-}
-.divider {
-  &_direction {
-    &_horizontal {
-      min-width: 100%;
-      display: flex;
-      flex-direction: row;
-    }
-    &_vertical {
-      min-height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}
-.divider {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: dividerSkeleton 3s infinite linear !important;
-    background-image: linear-gradient(
-      90deg,
-      var(--color-surface-fill-secondary),
-      var(--color-surface-fill-tertiary),
-      var(--color-surface-fill-secondary)
-    ) !important;
-    & * {
-      opacity: 0%;
-    }
-  }
-}
-@keyframes dividerSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-:root {
-  --divider-l-height: 3px;
-  --divider-m-height: 2px;
-  --divider-s-height: 1px;
-
-  --divider-l-width: 3px;
-  --divider-m-width: 2px;
-  --divider-s-width: 1px;
-}

package/dist/css/components/Dot/Dot.css

@@ -1,72 +0,0 @@
-.dot {
-}
-.dot {
-  &_size {
-      &_xxl {
-        min-width: var(--dot-size-xxl-width);
-        min-height: var(--dot-size-xxl-height);
-        max-width: var(--dot-size-xxl-width);
-        max-height: var(--dot-size-xxl-height);
-      }
-      &_xl {
-        min-width: var(--dot-size-xl-width);
-        min-height: var(--dot-size-xl-height);
-        max-width: var(--dot-size-xl-width);
-        max-height: var(--dot-size-xl-height);
-      }
-      &_l {
-        min-width: var(--dot-size-l-width);
-        min-height: var(--dot-size-l-height);
-        max-width: var(--dot-size-l-width);
-        max-height: var(--dot-size-l-height);
-      }
-      &_m {
-        min-width: var(--dot-size-m-width);
-        min-height: var(--dot-size-m-height);
-        max-width: var(--dot-size-m-width);
-        max-height: var(--dot-size-m-height);
-      }
-      &_s {
-        min-width: var(--dot-size-s-width);
-        min-height: var(--dot-size-s-height);
-        max-width: var(--dot-size-s-width);
-        max-height: var(--dot-size-s-height);
-      }
-      &_xs {
-        min-width: var(--dot-size-xs-width);
-        min-height: var(--dot-size-xs-height);
-        max-width: var(--dot-size-xs-width);
-        max-height: var(--dot-size-xs-height);
-      }
-      &_xxs {
-        min-width: var(--dot-size-xxs-width);
-        min-height: var(--dot-size-xxs-height);
-        max-width: var(--dot-size-xxs-width);
-        max-height: var(--dot-size-xxs-height);
-      }
-  }
-}
-.dot {
-  &_shape {
-    &_rounded {
-      border-radius: var(--dot-shape-rounded);
-    }
-    &_circular {
-      border-radius: 50%;
-    }
-    &_geometric {
-      border-radius: 0;
-    }
-  }
-}
-:root {
-  --dot-shape-rounded: 0;
-  --dot-size-s-width: 12px;
-  --dot-size-s-height: 12px;
-
-  --dot-size-m-width: 16px;
-  --dot-size-m-height: 16px;
-
-  --dot-size-l-width: 20px;
-  --dot-size-l-height: 20px;
-}

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

@@ -1,80 +0,0 @@
-.EZDrawer .EZDrawer__checkbox {
-    display: none;
-}
-.EZDrawer .EZDrawer__checkbox:checked ~ .EZDrawer__overlay {
-    display: block;
-    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 {
-  overflow-y: scroll;
-  display: flex;
-  flex-flow: column nowrap;
-  &__overlay {
-    background: var(--drawer-overlay-background) !important;
-    opacity: 100% !important;
-    backdrop-filter: var(--drawer-overlay-filter) !important;
-  }
-  &__close {
-    padding: 3m 3m 0 3m;
-    position: relative;
-    display: flex;
-    justify-content: flex-end;
-  }
-  &__header {
-    padding: 0 3m 3m 3m;
-    display: flex;
-    flex-direction: column;
-  }
-  &__wrapper {
-    padding: 3m;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-  }
-  &__after {
-    z-index: 10;
-  }
-}
-.drawer {
-  &_reset-padding {
-    ^&__wrapper {
-      padding: 0;
-    }
-  }
-}
-.drawer {
-  &_sticky-button {
-    ^&__wrapper {
-      padding-bottom: 0;
-    }
-    ^&__after {
-      width: 100%;
-      position: sticky;
-      left: 0;
-      bottom: 0;
-    }
-  }
-}
-:root {
-  --drawer-overlay-background: rgb(116, 116, 116, 0.5);
-  --drawer-overlay-filter: blur(10px);
-}

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

@@ -1,221 +0,0 @@
-.dropdown {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  &__wrapper {
-    width: 100%;
-  }
-}
-.dropdown {
-  &_animation {
-    &_close {
-      ^^&__wrapper {
-        animation-name: dropDownAnimationClose;
-      }
-    }
-    &_open {
-      ^^&__wrapper {
-        animation-name: dropDownAnimationOpen;
-      }
-    }
-  }
-}
-.dropdown {
-  &_size {
-      &_xxl {
-        ^^&__wrapper {
-          padding: var(--dropdown-xxl-padding);
-          display: flex;
-          flex-direction: column;
-          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 {
-  &_state_close {
-    /* visibility: hidden; */
-    display: none;
-    opacity: 0%;
-  }
-}
-.dropdown {
-  &&_state_open {
-    /* visibility: visible; */
-    opacity: 100%;
-  }
-}
-.dropdown {
-  &__item {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    transition: var(--dropdown-item-transition);
-    &-link {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    &-wrapper {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    &-label {
-      text-align: left;
-      flex-grow: 1;
-    }
-  }
-}
-.dropdown {
-  &__item {
-    &_size {
-        &_l {
-          ^^&-wrapper {
-            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);
-          }
-        }
-    }
-  }
-}
-.dropdown__item {
-  &_width {
-    &_fixed {
-      min-width: var(--dropdown-item-width-fixed);
-    }
-    &_hug {
-      min-width: 100px;
-      display: inline-flex;
-    }
-    &_fill {
-      width: 100%;
-      max-width: none !important;
-    }
-  }
-}
-.dropdown__item {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: dropdownItemSkeleton 3s infinite linear !important;
-    background-image: linear-gradient(
-      90deg,
-      var(--color-surface-fill-secondary),
-      var(--color-surface-fill-tertiary),
-      var(--color-surface-fill-secondary)
-    ) !important;
-    & * {
-      opacity: 0%;
-    }
-  }
-}
-@keyframes dropdownItemSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-:root {
-  --dropdown-item-transition: all 0.2s ease 0s;
-
-  /* Size L */
-  --dropdown-item-size-l-padding: 8px 12px;
-  --dropdown-item-size-l-gap: 12px;
-
-  /* Size M */
-  --dropdown-item-size-s-padding: 6px 8px;
-  --dropdown-item-size-s-gap: 0px;
-
-  /* Size XS */
-  --dropdown-item-size-xs-padding: 4px 8px;
-  --dropdown-item-size-xs-gap: 8px;
-}
-@keyframes dropDownAnimationOpen {
-  0% {
-    visibility: hidden;
-    transform: translate3d(0, 8px, 0);
-    opacity: 0%;
-  }
-  100% {
-    visibility: visible;
-    transform: translate3d(0, 0, 0);
-    opacity: 100%;
-  }
-}
-@keyframes dropDownAnimationClose {
-  0% {
-    visibility: visible;
-    transform: translate3d(0, 0, 0);
-    opacity: 100%;
-  }
-  100% {
-    visibility: hidden;
-    transform: translate3d(0, 8px, 0);
-    opacity: 0%;
-  }
-}