@itcase/ui 1.8.179 → 1.9.0

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

@@ -1,96 +0,0 @@
-.logo {
-  display: flex;
-  flex-flow: column nowrap;
-}
-.logo {
-    &_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 {
-    &_skeleton {
-      background-image: linear-gradient(
-        90deg,
-        var(--color-surface-secondary),
-        var(--color-surface-tertiary),
-        var(--color-surface-secondary)
-      );
-      background-size: 200%;
-      border-radius: 6px;
-      animation: logoSkeleton 3s infinite linear;
-      ^^&__image {
-        opacity: 0%;
-      }
-    }
-  }
-}
-@keyframes logoSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-.logo {
-  &_size {
-      &_xxl {
-        ^^&__image {
-          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);
-        }
-      }
-  }
-}

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

@@ -1,251 +0,0 @@
-.menu-item {
-  position: relative;
-  display: flex;
-  &:hover {
-    ^&__tooltip {
-      visibility: visible;
-      animation-duration: 0.2s;
-      animation-name: menuTooltipShowAnimation;
-      opacity: 100%;
-    }
-  }
-  &__wrapper {
-    width: 100%;
-    position: relative !important;
-    display: flex;
-    align-items: center;
-    align-content: center;
-    ^&__icon_before {
-      height: 100%;
-    }
-  }
-  &__label {
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-  }
-  &__tooltip {
-    position: absolute !important;
-    visibility: hidden;
-    animation-duration: 0.1s;
-    animation-name: menuTooltipHideAnimation;
-  }
-}
-
-@keyframes menuTooltipShowAnimation {
-  0% {
-    opacity: 0%;
-  }
-  100% {
-    opacity: 100%;
-  }
-}
-
-@keyframes menuTooltipHideAnimation {
-  0% {
-    opacity: 100%;
-  }
-  100% {
-    opacity: 0%;
-  }
-}
-
-.menu-item {
-  &_direction {
-    &_horizontal {
-      display: flex;
-    }
-    &_vertical {
-      display: flex;
-    }
-  }
-}
-
-.menu-item {
-    &_justify-content_flex-start {
-      ^&__wrapper {
-        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 {
-      &_xxl {
-        min-height: var(--menu-item-size-xxl-min-height);
-        padding: var(--menu-item-size-xxl-padding);
-        ^^&__icon_before {
-          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 {
-        &_xxl {
-          ^^^&__wrapper {
-            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);
-          }
-        }
-    }
-  }
-}
-
-.menu-item {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: menuItemSkeleton 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 menuItemSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-
-:root {
-  --menu-item-size-xxl-padding: 4px 14px;
-  --menu-item-size-xl-padding: 4px 10px;
-  --menu-item-size-l-padding: 2px 8px;
-  --menu-item-size-m-padding: 0 6px;
-  --menu-item-size-s-padding: 0 6px;
-  --menu-item-size-xs-padding: 0 4px;
-  --menu-item-size-xxs-padding: 0 2px;
-
-  --menu-item-size-xxl-gap: 1m;
-  --menu-item-size-xl-gap: 1m;
-  --menu-item-size-l-gap: 1m;
-  --menu-item-size-m-gap: 0.75m;
-  --menu-item-size-s-gap: 0.75m;
-  --menu-item-size-xs-gap: 0.5m;
-  --menu-item-size-xxs-gap: 0.5m;
-
-  --menu-item-size-xxl-min-height: 48px;
-  --menu-item-size-xl-min-height: 40px;
-  --menu-item-size-l-min-height: 32px;
-  --menu-item-size-m-min-height: 28px;
-  --menu-item-size-s-min-height: 24px;
-  --menu-item-size-xs-min-height: 20px;
-  --menu-item-size-xxs-min-height: 16px;
-
-  --menu-item-size-xxl-icon-padding: 4px 0;
-  --menu-item-size-xl-icon-padding: 4px 0;
-  --menu-item-size-l-icon-padding: 4px 0;
-  --menu-item-size-m-icon-padding: 4px 0;
-  --menu-item-size-s-icon-padding: 4px 0;
-  --menu-item-size-xs-icon-padding: 4px 0;
-  --menu-item-size-xxs-icon-padding: 4px 0;
-}

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

@@ -1,232 +0,0 @@
-.modal {
-  width: 100%;
-  min-height: 100%;
-  position: fixed;
-  display: none;
-  justify-content: center;
-  align-items: center;
-  left: 0;
-  top: 0;
-  z-index: 1000000;
-  &__content {
-    width: 100%;
-    min-width: 200px;
-    min-height: 200px;
-    max-width: var(--modal-max-width);
-    position: relative;
-    z-index: 100;
-    &:focus {
-      outline: 0;
-    }
-    &-absolute-header {
-      & .modal__header {
-        position: sticky;
-        top: 0;
-        z-index: 100;
-      }
-      & .modal__close {
-        position: absolute;
-      }
-    }
-    &-wrapper {
-      width: 100%;
-    }
-  }
-  &__header {
-    position: relative;
-    display: flex;
-    justify-content: flex-end;
-    ^&__title {
-      flex: 1;
-    }
-    ^&__close {
-      z-index: 1;
-      cursor: pointer;
-    }
-  }
-  &__overlay {
-    z-index: -1;
-  }
-  &&_state_visible {
-    display: flex;
-  }
-}
-.modal {
-    &_size_xxl {
-      min-width: var(--modal-xxl-min-width);
-      min-height: var(--modal-xxl-min-height);
-      ^&__header {
-        gap: var(--modal-xxl-gap);
-        padding: var(--modal-xxl-header-padding);
-      }
-      ^&__content-wrapper {
-        padding: var(--modal-xxl-content-padding);
-      }
-      &^&__content-no-header {
-        ^^&__content-wrapper {
-          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 {
-    &_header_sticky {
-      max-height: 80vh;
-      overflow: hidden auto;
-      ^^&__header {
-        position: sticky;
-        top: 0;
-        z-index: 100;
-      }
-      ^^&__content {
-        &-wrapper {
-          position: relative;
-          display: flex;
-          flex-direction: column;
-        }
-      }
-    }
-    &_true,
-    &_vertical {
-      max-height: 80vh;
-      position: relative;
-      overflow: hidden auto;
-      display: flex;
-      flex-direction: column;
-    }
-    &_horizontal {
-      position: relative;
-      overflow: auto hidden;
-      display: flex;
-      flex-direction: row;
-    }
-  }
-}
-:root {
-  --modal-max-width: 500px;
-
-  --modal-xl-gap: 24px;
-  --modal-xl-header-padding: 24px 24px 0 24px;
-  --modal-xl-content-padding: 0 24px 24px 24px;
-  --modal-xl-content-no-header-padding: 24px;
-  --modal-xl-min-width: 500px;
-  --modal-xl-min-height: 240px;
-
-  --modal-l-gap: 24px;
-  --modal-l-header-padding: 24px 24px 0 24px;
-  --modal-l-content-padding: 0 24px 24px 24px;
-  --modal-l-content-no-header-padding: 24px;
-  --modal-l-min-width: 500px;
-  --modal-l-min-height: 240px;
-
-  --modal-m-gap: 24px;
-  --modal-m-header-padding: 24px 24px 0 24px;
-  --modal-m-content-padding: 0 24px 24px 24px;
-  --modal-m-content-no-header-padding: 24px;
-  --modal-m-min-width: 500px;
-  --modal-m-min-height: 240px;
-
-  --modal-s-gap: 24px;
-  --modal-s-header-padding: 24px 24px 0 24px;
-  --modal-s-content-padding: 0 24px 24px 24px;
-  --modal-s-content-no-header-padding: 24px;
-  --modal-s-min-width: 320px;
-  --modal-s-min-height: 240px;
-}

package/dist/css/components/ModalSheetBottom/ModalSheetBottom.css

@@ -1,45 +0,0 @@
-.modal-sheet-bottom {
-  position: relative;
-  &__container {
-    background-color: var(--modal-sheet-bottom-container-background) !important;
-    border-radius: var(--modal-sheet-bottom-container-border-radius) !important;
-  }
-  &__header {
-    min-height: 32px;
-    padding: 0 16px;
-    & .react-modal-sheet-header {
-      max-height: 32px;
-    }
-    & .react-modal-sheet-drag-indicator {
-      background-color: var(
-        --modal-sheet-bottom-header-grabber,
-        #000
-      ) !important;
-    }
-  }
-  &__content {
-    &-reset-padding {
-      padding: 0;
-    }
-    &-wrapper {
-      padding: 0 16px;
-    }
-  }
-  &__backdrop {
-    background-color: var(
-      --modal-sheet-bottom-backdrop,
-      var(--color-surface-inverse-50)
-    ) !important;
-  }
-  &__close {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-  }
-}
-:root {
-  --modal-sheet-bottom-container-border-radius: 0;
-  --modal-sheet-bottom-header-grabber: none;
-  --modal-sheet-bottom-backdrop: 0;
-  --modal-sheet-bottom-container-background: var(--color-surface-fill-primary);
-}