@itcase/ui 1.8.178 → 1.9.0

package/dist/css/components/Scrollbar/Scrollbar.css

@@ -1,58 +0,0 @@
-.scrollbar {
-  width: 100%;
-  height: 200px;
-  position: relative;
-  &__wrapper {
-    position: absolute;
-    inset: 0 10px 0 0;
-    overflow: hidden;
-    ^&__scroll {
-      min-width: 100%;
-      min-height: 100%;
-      padding: 0.05px;
-      &-content {
-        min-width: 100%;
-        min-height: 100%;
-        padding: 0.05px;
-      }
-    }
-  }
-  &__track {
-    &-y {
-      width: 8px;
-      height: 100%;
-      border-radius: 4px;
-      position: absolute;
-      overflow: hidden;
-      top: 0;
-      right: 0;
-      user-select: none;
-      &-item {
-        width: 100%;
-        background: rgba(0, 0, 0, 0.4);
-        border-radius: 4px;
-        cursor: pointer;
-      }
-    }
-    &-x {
-      width: calc(100% - 20px);
-      height: 10px;
-      background: rgba(0, 0, 0, 0.1);
-      border-radius: 4px;
-      position: absolute;
-      overflow: hidden;
-      display: none;
-      left: 10px;
-      bottom: 0;
-      user-select: none;
-      &-item {
-        width: 0;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.4);
-        border-radius: 4px;
-        display: none;
-        cursor: pointer;
-      }
-    }
-  }
-}

package/dist/css/components/Search/Search.css

@@ -1,162 +0,0 @@
-.search {
-}
-
-.search-input {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  &__icon {
-    &-before {
-      display: flex;
-      align-items: center;
-    }
-    &-after {
-      display: flex;
-      align-items: center;
-    }
-  }
-  &__wrapper {
-    width: 100%;
-    position: relative;
-    display: grid;
-    align-items: center;
-    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
-    grid-template-columns: 1fr 1fr;
-  }
-  &__value {
-    background: none;
-    padding: 0 38px 0 0 !important;
-    border: none;
-    position: relative;
-    display: block;
-    z-index: 2;
-    grid-column: 1/3;
-    grid-row-start: 1;
-    &:focus {
-      outline: 0;
-    }
-    &:not([value='']) {
-      & ~ .search-input__placeholder {
-        display: none;
-      }
-    }
-  }
-  &__placeholder {
-    background: none;
-    border: none;
-    position: relative;
-    display: grid;
-    grid-column: 1/3;
-    grid-row-start: 1;
-    &:focus {
-      outline: 0;
-    }
-  }
-  &__clear {
-    margin: 0 4px 0 0;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    z-index: 2;
-    transform: translate(0, -50%);
-  }
-}
-
-.search-input {
-  &_size {
-      &_xxl {
-        min-height: var(--search-input-xxl-min-height);
-        padding: var(--search-input-xxl-padding);
-        gap: var(--search-input-xxl-gap);
-      }
-      &_xl {
-        min-height: var(--search-input-xl-min-height);
-        padding: var(--search-input-xl-padding);
-        gap: var(--search-input-xl-gap);
-      }
-      &_l {
-        min-height: var(--search-input-l-min-height);
-        padding: var(--search-input-l-padding);
-        gap: var(--search-input-l-gap);
-      }
-      &_m {
-        min-height: var(--search-input-m-min-height);
-        padding: var(--search-input-m-padding);
-        gap: var(--search-input-m-gap);
-      }
-      &_s {
-        min-height: var(--search-input-s-min-height);
-        padding: var(--search-input-s-padding);
-        gap: var(--search-input-s-gap);
-      }
-      &_xs {
-        min-height: var(--search-input-xs-min-height);
-        padding: var(--search-input-xs-padding);
-        gap: var(--search-input-xs-gap);
-      }
-      &_xxs {
-        min-height: var(--search-input-xxs-min-height);
-        padding: var(--search-input-xxs-padding);
-        gap: var(--search-input-xxs-gap);
-      }
-  }
-}
-
-.search-input {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: searchInput 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 searchInput {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-
-.search-result {
-  width: 100%;
-  &__wrapper {
-    width: 100%;
-  }
-}
-
-:root {
-  --search-input-xxl-padding: 16px 12px;
-  --search-input-xxl-gap: 4px;
-
-  --search-input-xl-padding: 12px;
-  --search-input-xl-gap: 4px;
-
-  --search-input-l-padding: 8px;
-  --search-input-l-gap: 4px;
-
-  --search-input-m-padding: 6px 8px;
-  --search-input-m-gap: 4px;
-
-  --search-input-s-padding: 2px 8px;
-  --search-input-s-gap: 4px;
-  --search-input-s-min-height: 32px;
-
-  --search-input-xs-padding: 0 4px;
-  --search-input-xs-gap: 4px;
-  --search-input-xs-min-height: 24px;
-
-  --search-shape-rounded: 8px;
-  --search-input-shape-rounded: 0;
-}

package/dist/css/components/Search/css/search-input/search-input.css

@@ -1,61 +0,0 @@
-.search-input {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  &__icon {
-    &-before {
-      display: flex;
-      align-items: center;
-    }
-    &-after {
-      display: flex;
-      align-items: center;
-    }
-  }
-  &__wrapper {
-    width: 100%;
-    position: relative;
-    display: grid;
-    align-items: center;
-    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
-    grid-template-columns: 1fr 1fr;
-  }
-  &__value {
-    background: none;
-    padding: 0 38px 0 0 !important;
-    border: none;
-    position: relative;
-    display: block;
-    z-index: 2;
-    grid-column: 1/3;
-    grid-row-start: 1;
-    &:focus {
-      outline: 0;
-    }
-    &:not([value='']) {
-      & ~ .search-input__placeholder {
-        display: none;
-      }
-    }
-  }
-  &__placeholder {
-    background: none;
-    border: none;
-    position: relative;
-    display: grid;
-    grid-column: 1/3;
-    grid-row-start: 1;
-    &:focus {
-      outline: 0;
-    }
-  }
-  &__clear {
-    margin: 0 4px 0 0;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    z-index: 2;
-    transform: translate(0, -50%);
-  }
-}

package/dist/css/components/Search/css/search-input/search-input_size.css

@@ -1,39 +0,0 @@
-.search-input {
-  &_size {
-      &_xxl {
-        min-height: var(--search-input-xxl-min-height);
-        padding: var(--search-input-xxl-padding);
-        gap: var(--search-input-xxl-gap);
-      }
-      &_xl {
-        min-height: var(--search-input-xl-min-height);
-        padding: var(--search-input-xl-padding);
-        gap: var(--search-input-xl-gap);
-      }
-      &_l {
-        min-height: var(--search-input-l-min-height);
-        padding: var(--search-input-l-padding);
-        gap: var(--search-input-l-gap);
-      }
-      &_m {
-        min-height: var(--search-input-m-min-height);
-        padding: var(--search-input-m-padding);
-        gap: var(--search-input-m-gap);
-      }
-      &_s {
-        min-height: var(--search-input-s-min-height);
-        padding: var(--search-input-s-padding);
-        gap: var(--search-input-s-gap);
-      }
-      &_xs {
-        min-height: var(--search-input-xs-min-height);
-        padding: var(--search-input-xs-padding);
-        gap: var(--search-input-xs-gap);
-      }
-      &_xxs {
-        min-height: var(--search-input-xxs-min-height);
-        padding: var(--search-input-xxs-padding);
-        gap: var(--search-input-xxs-gap);
-      }
-  }
-}

package/dist/css/components/Search/css/search-input/search-input_skeleton.css

@@ -1,25 +0,0 @@
-.search-input {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: searchInput 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 searchInput {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}

package/dist/css/components/Search/css/search-result/search-result.css

@@ -1,6 +0,0 @@
-.search-result {
-  width: 100%;
-  &__wrapper {
-    width: 100%;
-  }
-}

package/dist/css/components/Segmented/Segmented.css

@@ -1,244 +0,0 @@
-.segmented {
-  display: flex;
-  align-items: center;
-  &__wrapper {
-    &-inner {
-      margin: 2px;
-      position: relative;
-      display: flex;
-      ^^&__indicator {
-        width: var(--segmented-active-width);
-        height: 100%;
-        border-radius: 8px;
-        position: absolute;
-        content: '';
-        display: block;
-        box-shadow:
-          0 3px 8px rgb(0, 0, 0, 0.12),
-          0 3px 1px rgb(0, 0, 0, 0.04);
-        left: var(--segmented-active-x-pos);
-        top: 0;
-        z-index: 1;
-        transition:
-          left 0.3s ease,
-          width 0.3s ease;
-      }
-      ^^&__item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        &::after {
-          /* width: 1px; */
-          height: 100%;
-          background: var(--color-surface-border-tertiary);
-          content: '';
-          display: block;
-          top: 0;
-          right: 0;
-        }
-        &:nth-last-child(-n + 2) {
-          &::after {
-            display: none;
-          }
-        }
-        &_state_active {
-          & label {
-            color: #fff;
-          }
-        }
-        & input {
-          width: 100%;
-          height: 100%;
-          margin: 0;
-          border: 0;
-          position: absolute;
-          inset: 0 0 0 0;
-          z-index: 2;
-          opacity: 0%;
-          cursor: pointer;
-        }
-        &-label {
-          width: 100%;
-          text-align: center;
-          position: relative;
-          display: flex;
-          justify-content: center;
-          z-index: 3;
-          transition: color 0.5s ease;
-          cursor: pointer;
-          &-text {
-          }
-        }
-      }
-    }
-  }
-}
-.segmented {
-  &_width {
-    &_fill {
-      width: 100%;
-      ^^&__wrapper {
-        flex: 1;
-        &-inner {
-          flex: 1;
-          ^^^^&__item {
-            flex: 1;
-          }
-        }
-      }
-    }
-  }
-}
-.segmented {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: segmentedSkeleton 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 segmentedSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-.segmented__item {
-  position: relative;
-  display: flex;
-  transition: var(--select-item-transition);
-    &_size_xxl {
-      min-width: var(--segmented-item-size-xxl-min-width);
-      border-radius: var(--segmented-item-size-xxl-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-xxl-min-height);
-        padding: var(--segmented-item-size-xxl-padding);
-        gap: var(--segmented-item-size-xxl-gap);
-      }
-    }
-    &_size_xl {
-      min-width: var(--segmented-item-size-xl-min-width);
-      border-radius: var(--segmented-item-size-xl-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-xl-min-height);
-        padding: var(--segmented-item-size-xl-padding);
-        gap: var(--segmented-item-size-xl-gap);
-      }
-    }
-    &_size_l {
-      min-width: var(--segmented-item-size-l-min-width);
-      border-radius: var(--segmented-item-size-l-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-l-min-height);
-        padding: var(--segmented-item-size-l-padding);
-        gap: var(--segmented-item-size-l-gap);
-      }
-    }
-    &_size_m {
-      min-width: var(--segmented-item-size-m-min-width);
-      border-radius: var(--segmented-item-size-m-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-m-min-height);
-        padding: var(--segmented-item-size-m-padding);
-        gap: var(--segmented-item-size-m-gap);
-      }
-    }
-    &_size_s {
-      min-width: var(--segmented-item-size-s-min-width);
-      border-radius: var(--segmented-item-size-s-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-s-min-height);
-        padding: var(--segmented-item-size-s-padding);
-        gap: var(--segmented-item-size-s-gap);
-      }
-    }
-    &_size_xs {
-      min-width: var(--segmented-item-size-xs-min-width);
-      border-radius: var(--segmented-item-size-xs-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-xs-min-height);
-        padding: var(--segmented-item-size-xs-padding);
-        gap: var(--segmented-item-size-xs-gap);
-      }
-    }
-    &_size_xxs {
-      min-width: var(--segmented-item-size-xxs-min-width);
-      border-radius: var(--segmented-item-size-xxs-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-xxs-min-height);
-        padding: var(--segmented-item-size-xxs-padding);
-        gap: var(--segmented-item-size-xxs-gap);
-      }
-    }
-  &_icon {
-    min-width: auto;
-  }
-  & input {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    border: 0;
-    position: absolute;
-    inset: 0 0 0 0;
-    z-index: 2;
-    opacity: 0%;
-    cursor: pointer;
-  }
-  &-label {
-    width: 100%;
-    text-align: center;
-    position: relative;
-    display: flex;
-    align-items: center;
-    z-index: 3;
-    transition: color 0.5s ease;
-    cursor: pointer;
-  }
-}
-:root {
-  --segmented-item-size-l-padding: 0 12px;
-  --segmented-item-size-m-padding: 0 10px;
-  --segmented-item-size-s-padding: 0 8px;
-  --segmented-item-size-xs-padding: 0 8px;
-  --segmented-item-size-xxs-padding: 0 4px;
-
-  --segmented-item-size-l-min-width: 120px;
-  --segmented-item-size-m-min-width: 120px;
-  --segmented-item-size-s-min-width: 80px;
-  --segmented-item-size-xs-min-width: 80px;
-  --segmented-item-size-xxs-min-width: 60px;
-
-  --segmented-item-size-l-border-radius: 6px;
-  --segmented-item-size-m-border-radius: 6px;
-  --segmented-item-size-s-border-radius: 6px;
-  --segmented-item-size-xs-border-radius: 6px;
-  --segmented-item-size-xxs-border-radius: 6px;
-
-  --segmented-item-size-l-gap: 12px;
-  --segmented-item-size-m-gap: 8px;
-  --segmented-item-size-s-gap: 8px;
-  --segmented-item-size-xs-gap: 4px;
-  --segmented-item-size-xxs-gap: 4px;
-
-
-  --select-item-transition: all 0.3s ease 0s;
-
-  --segmented-active-width: 0;
-  --segmented-active-x-pos: 0;
-
-  --segmented-item-size-l-min-height: 40px;
-  --segmented-item-size-m-min-height: 36px;
-  --segmented-item-size-s-min-height: 28px;
-  --segmented-item-size-xs-min-height: 20px;
-  --segmented-item-size-xxs-min-height: 16px;
-}

package/dist/css/components/Segmented/css/__item/segmaented__item.css

@@ -1,92 +0,0 @@
-.segmented__item {
-  position: relative;
-  display: flex;
-  transition: var(--select-item-transition);
-    &_size_xxl {
-      min-width: var(--segmented-item-size-xxl-min-width);
-      border-radius: var(--segmented-item-size-xxl-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-xxl-min-height);
-        padding: var(--segmented-item-size-xxl-padding);
-        gap: var(--segmented-item-size-xxl-gap);
-      }
-    }
-    &_size_xl {
-      min-width: var(--segmented-item-size-xl-min-width);
-      border-radius: var(--segmented-item-size-xl-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-xl-min-height);
-        padding: var(--segmented-item-size-xl-padding);
-        gap: var(--segmented-item-size-xl-gap);
-      }
-    }
-    &_size_l {
-      min-width: var(--segmented-item-size-l-min-width);
-      border-radius: var(--segmented-item-size-l-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-l-min-height);
-        padding: var(--segmented-item-size-l-padding);
-        gap: var(--segmented-item-size-l-gap);
-      }
-    }
-    &_size_m {
-      min-width: var(--segmented-item-size-m-min-width);
-      border-radius: var(--segmented-item-size-m-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-m-min-height);
-        padding: var(--segmented-item-size-m-padding);
-        gap: var(--segmented-item-size-m-gap);
-      }
-    }
-    &_size_s {
-      min-width: var(--segmented-item-size-s-min-width);
-      border-radius: var(--segmented-item-size-s-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-s-min-height);
-        padding: var(--segmented-item-size-s-padding);
-        gap: var(--segmented-item-size-s-gap);
-      }
-    }
-    &_size_xs {
-      min-width: var(--segmented-item-size-xs-min-width);
-      border-radius: var(--segmented-item-size-xs-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-xs-min-height);
-        padding: var(--segmented-item-size-xs-padding);
-        gap: var(--segmented-item-size-xs-gap);
-      }
-    }
-    &_size_xxs {
-      min-width: var(--segmented-item-size-xxs-min-width);
-      border-radius: var(--segmented-item-size-xxs-border-radius);
-      ^&-label {
-        min-height: var(--segmented-item-size-xxs-min-height);
-        padding: var(--segmented-item-size-xxs-padding);
-        gap: var(--segmented-item-size-xxs-gap);
-      }
-    }
-  &_icon {
-    min-width: auto;
-  }
-  & input {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    border: 0;
-    position: absolute;
-    inset: 0 0 0 0;
-    z-index: 2;
-    opacity: 0%;
-    cursor: pointer;
-  }
-  &-label {
-    width: 100%;
-    text-align: center;
-    position: relative;
-    display: flex;
-    align-items: center;
-    z-index: 3;
-    transition: color 0.5s ease;
-    cursor: pointer;
-  }
-}