@itcase/ui 1.8.178 → 1.9.0

package/dist/css/components/Swiper/css/__item/swiper-block__item.css

@@ -1,6 +0,0 @@
-div.swiper-block__item {
-  display: flex;
-  &_type_center {
-    height: auto !important;
-  }
-}

package/dist/css/components/Switch/Switch.css

@@ -1,154 +0,0 @@
-.switch {
-  display: flex;
-  flex-direction: row;
-  &__wrapper {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    ^&__title {
-      padding: 0 8px 0 0;
-    }
-    ^&__desc {
-      padding: 0 8px 0 0;
-    }
-  }
-  &__item {
-    border-radius: 50px;
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    transition: 0.4s;
-    cursor: pointer;
-  }
-  &__checkbox {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    border: 0;
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 2;
-    cursor: pointer;
-    appearance: none;
-    &:checked {
-      & ~ .switch__toggle {
-        margin: 0 0 0 -3px;
-        left: 100%;
-        transform: translate(-100%, -50%);
-      }
-    }
-    &:disabled {
-      & + .switch__bg {
-        background: var(--color-surface-disabled);
-      }
-    }
-  }
-  &__bg {
-    width: 100%;
-    flex: 1;
-    transition: all 0.25s;
-  }
-  &__toggle {
-    height: calc(100% - 6px);
-    aspect-ratio: 1/1;
-    border-radius: 50%;
-    position: absolute;
-    box-shadow: inset 0 0 5px rgb(0, 0, 0, 0.2);
-    box-shadow: 0 0 5px rgb(0, 0, 0, 0.2);
-    left: 0;
-    top: 50%;
-    transform: translate(3px, -50%);
-    transition: all 0.25s;
-  }
-}
-.switch {
-  &_align {
-    &_left {
-      width: 100%;
-      flex-direction: row-reverse;
-      ^^&__title,
-      ^^&__desc {
-        padding: 0 0 0 8px;
-      }
-    }
-    &_right {
-      width: 100%;
-      flex-direction: row;
-      ^^&__title,
-      ^^&__desc {
-        padding: 0 8px 0 0;
-      }
-    }
-  }
-}
-.switch {
-  &&_size {
-      &_xxl {
-        & .switch__item {
-          min-width: var(--switch-size-xxl-width);
-          min-height: var(--switch-size-xxl-height);
-          max-width: var(--switch-size-xxl-width);
-          max-height: var(--switch-size-xxl-height);
-        }
-      }
-      &_xl {
-        & .switch__item {
-          min-width: var(--switch-size-xl-width);
-          min-height: var(--switch-size-xl-height);
-          max-width: var(--switch-size-xl-width);
-          max-height: var(--switch-size-xl-height);
-        }
-      }
-      &_l {
-        & .switch__item {
-          min-width: var(--switch-size-l-width);
-          min-height: var(--switch-size-l-height);
-          max-width: var(--switch-size-l-width);
-          max-height: var(--switch-size-l-height);
-        }
-      }
-      &_m {
-        & .switch__item {
-          min-width: var(--switch-size-m-width);
-          min-height: var(--switch-size-m-height);
-          max-width: var(--switch-size-m-width);
-          max-height: var(--switch-size-m-height);
-        }
-      }
-      &_s {
-        & .switch__item {
-          min-width: var(--switch-size-s-width);
-          min-height: var(--switch-size-s-height);
-          max-width: var(--switch-size-s-width);
-          max-height: var(--switch-size-s-height);
-        }
-      }
-      &_xs {
-        & .switch__item {
-          min-width: var(--switch-size-xs-width);
-          min-height: var(--switch-size-xs-height);
-          max-width: var(--switch-size-xs-width);
-          max-height: var(--switch-size-xs-height);
-        }
-      }
-      &_xxs {
-        & .switch__item {
-          min-width: var(--switch-size-xxs-width);
-          min-height: var(--switch-size-xxs-height);
-          max-width: var(--switch-size-xxs-width);
-          max-height: var(--switch-size-xxs-height);
-        }
-      }
-  }
-}
-:root {
-  --switch-size-l-width: 48px;
-  --switch-size-l-height: 32px;
-
-  --switch-size-m-width: 40px;
-  --switch-size-m-height: 24px;
-
-  --switch-size-s-width: 28px;
-  --switch-size-s-height: 16px;
-}

package/dist/css/components/Tab/Tab.css

@@ -1,180 +0,0 @@
-.tab {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  &__wrapper {
-    display: flex;
-    ^&__label {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-  &__divider {
-    position: absolute;
-    left: 0;
-    bottom: -1px;
-  }
-  &_state_active {
-    position: relative;
-    z-index: 2;
-  }
-}
-.tab-group {
-  position: relative;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: stretch;
-  &__wrapper {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-    gap: 4px;
-  }
-}
-.tab {
-    &_justify-content_flex-start {
-      & > a {
-        justify-content: flex-start;
-      }
-    }
-    &_justify-content_flex-end {
-      & > a {
-        justify-content: flex-end;
-      }
-    }
-    &_justify-content_center {
-      & > a {
-        justify-content: center;
-      }
-    }
-    &_justify-content_space-between {
-      & > a {
-        justify-content: space-between;
-      }
-    }
-    &_justify-content_space-around {
-      & > a {
-        justify-content: space-around;
-      }
-    }
-    &_justify-content_space-evenly {
-      & > a {
-        justify-content: space-evenly;
-      }
-    }
-}
-.tab {
-  &_size {
-      &_xxl {
-        min-height: var(--tab-size-xxl-min-height);
-        ^^&__wrapper {
-          padding: var(--tab-size-xxl-padding);
-          align-items: center;
-          gap: var(--tab-size-xxl-gap);
-        }
-      }
-      &_xl {
-        min-height: var(--tab-size-xl-min-height);
-        ^^&__wrapper {
-          padding: var(--tab-size-xl-padding);
-          align-items: center;
-          gap: var(--tab-size-xl-gap);
-        }
-      }
-      &_l {
-        min-height: var(--tab-size-l-min-height);
-        ^^&__wrapper {
-          padding: var(--tab-size-l-padding);
-          align-items: center;
-          gap: var(--tab-size-l-gap);
-        }
-      }
-      &_m {
-        min-height: var(--tab-size-m-min-height);
-        ^^&__wrapper {
-          padding: var(--tab-size-m-padding);
-          align-items: center;
-          gap: var(--tab-size-m-gap);
-        }
-      }
-      &_s {
-        min-height: var(--tab-size-s-min-height);
-        ^^&__wrapper {
-          padding: var(--tab-size-s-padding);
-          align-items: center;
-          gap: var(--tab-size-s-gap);
-        }
-      }
-      &_xs {
-        min-height: var(--tab-size-xs-min-height);
-        ^^&__wrapper {
-          padding: var(--tab-size-xs-padding);
-          align-items: center;
-          gap: var(--tab-size-xs-gap);
-        }
-      }
-      &_xxs {
-        min-height: var(--tab-size-xxs-min-height);
-        ^^&__wrapper {
-          padding: var(--tab-size-xxs-padding);
-          align-items: center;
-          gap: var(--tab-size-xxs-gap);
-        }
-      }
-  }
-}
-.tab {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: tabSkeleton 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 tabSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-:root {
-  --tab-size-xxl-padding: 0 14px;
-  --tab-size-xxl-gap: 4px;
-  --tab-size-xxl-min-height: 56px;
-
-  --tab-size-xl-padding: 0 10px;
-  --tab-size-xl-gap: 4px;
-  --tab-size-xl-min-height: 40px;
-
-  --tab-size-l-padding: 0 12px;
-  --tab-size-l-gap: 4px;
-  --tab-size-l-min-height: 32px;
-
-  --tab-size-m-padding: 0 8px;
-  --tab-size-m-gap: 4px;
-  --tab-size-m-min-height: 28px;
-
-  --tab-size-s-padding: 0 6px;
-  --tab-size-s-gap: 4px;
-  --tab-size-s-min-height: 24px;
-
-  --tab-size-xs-padding: 0 4px;
-  --tab-size-xs-gap: 4px;
-  --tab-size-xs-min-height: 20px;
-
-  --tab-size-xxs-padding: 0px;
-  --tab-size-xxs-gap: 4px;
-  --tab-size-xxs-min-height: 16px;
-}

package/dist/css/components/Text/Text.css

@@ -1,103 +0,0 @@
-.text {
-}
-.text {
-  &&_skeleton {
-    color: transparent;
-    background-image: linear-gradient(
-      90deg,
-      var(--color-surface-fill-secondary),
-      var(--color-surface-fill-tertiary),
-      var(--color-surface-fill-secondary)
-    );
-    background-size: 200%;
-    border-radius: 6px;
-    animation: textSkeleton 3s infinite linear;
-    & * {
-      opacity: 0%;
-    }
-  }
-}
-@keyframes textSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-.text {
-  &_size {
-      &_xxl {
-        padding: 0;
-        margin: 0;
-        @mixin text-xxl;
-      }
-      &_xl {
-        padding: 0;
-        margin: 0;
-        @mixin text-xl;
-      }
-      &_l {
-        padding: 0;
-        margin: 0;
-        @mixin text-l;
-      }
-      &_m {
-        padding: 0;
-        margin: 0;
-        @mixin text-m;
-      }
-      &_s {
-        padding: 0;
-        margin: 0;
-        @mixin text-s;
-      }
-      &_xs {
-        padding: 0;
-        margin: 0;
-        @mixin text-xs;
-      }
-      &_xxs {
-        padding: 0;
-        margin: 0;
-        @mixin text-xxs;
-      }
-      &_h1 {
-        padding: 0;
-        margin: 0;
-        @mixin h1;
-      }
-      &_h2 {
-        padding: 0;
-        margin: 0;
-        @mixin h2;
-      }
-      &_h3 {
-        padding: 0;
-        margin: 0;
-        @mixin h3;
-      }
-      &_h4 {
-        padding: 0;
-        margin: 0;
-        @mixin h4;
-      }
-      &_h5 {
-        padding: 0;
-        margin: 0;
-        @mixin h5;
-      }
-      &_h6 {
-        padding: 0;
-        margin: 0;
-        @mixin h6;
-      }
-      &_p {
-        padding: 0;
-        margin: 0;
-        @mixin p;
-      }
-  }
-}
-:root {
-}

package/dist/css/components/Textarea/Textarea.css

@@ -1,86 +0,0 @@
-.textarea {
-  width: 100%;
-  min-width: 100%;
-  &__input {
-    width: 100%;
-    min-width: 100%;
-    min-height: var(--textarea-min-height, 160px);
-    max-height: var(--textarea-max-height, 160px);
-    padding: var(--textarea-padding);
-    padding: 0;
-    margin: 0;
-    border: none;
-    z-index: 1;
-    outline: 0;
-    resize: none;
-    appearance: none;
-    transition: var(--textarea-transition);
-    &:read-only {
-      color: var(--color-surface-text-tertiary);
-    }
-  }
-}
-.textarea {
-  &_shape {
-    &^&__input {
-      &_underline {
-        border-left: none !important;
-        border-top: none !important;
-        border-right: none !important;
-        position: relative;
-      }
-    }
-  }
-}
-.textarea {
-  &&_size {
-      &_xxl {
-        ^^&__input {
-          padding: var(--textarea-size-xxl-padding);
-        }
-      }
-      &_xl {
-        ^^&__input {
-          padding: var(--textarea-size-xl-padding);
-        }
-      }
-      &_l {
-        ^^&__input {
-          padding: var(--textarea-size-l-padding);
-        }
-      }
-      &_m {
-        ^^&__input {
-          padding: var(--textarea-size-m-padding);
-        }
-      }
-      &_s {
-        ^^&__input {
-          padding: var(--textarea-size-s-padding);
-        }
-      }
-      &_xs {
-        ^^&__input {
-          padding: var(--textarea-size-xs-padding);
-        }
-      }
-      &_xxs {
-        ^^&__input {
-          padding: var(--textarea-size-xxs-padding);
-        }
-      }
-  }
-}
-:root {
-  --textarea-min-height: 80px;
-  --textarea-max-height: 80px;
-  --textarea-success-border: var(--color-surface-border-tertiary);
-
-  --textarea-transition: all 0.3s ease 0s;
-
-  /* Size */
-  --textarea-size-xl-padding: 17px 25px;
-  --textarea-size-l-padding: 13px 20px;
-  --textarea-size-m-padding: 8px 12px;
-  --textarea-size-s-padding: 7px 12px;
-}

package/dist/css/components/Tile/Tile.css

@@ -1,141 +0,0 @@
-.tile {
-  &__wrapper {
-    min-height: 100%;
-    position: relative;
-  }
-  &__header {
-    display: flex;
-    flex-direction: row;
-    &-inner {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-    }
-    &-actions {
-      gap: 8px;
-      display: flex;
-      align-items: flex-start;
-    }
-  }
-}
-.tile {
-  &_size {
-      &_xl {
-        min-width: var(--tile-size-xl-min-width);
-        padding: var(--tile-size-xl-padding);
-        & ^^&__wrapper {
-          display: flex;
-          flex-flow: column;
-          gap: var(--tile-size-xl-gap);
-        }
-      }
-      &_l {
-        min-width: var(--tile-size-l-min-width);
-        padding: var(--tile-size-l-padding);
-        & ^^&__wrapper {
-          display: flex;
-          flex-flow: column;
-          gap: var(--tile-size-l-gap);
-        }
-      }
-      &_m {
-        min-width: var(--tile-size-m-min-width);
-        padding: var(--tile-size-m-padding);
-        & ^^&__wrapper {
-          display: flex;
-          flex-flow: column;
-          gap: var(--tile-size-m-gap);
-        }
-      }
-      &_s {
-        min-width: var(--tile-size-s-min-width);
-        padding: var(--tile-size-s-padding);
-        & ^^&__wrapper {
-          display: flex;
-          flex-flow: column;
-          gap: var(--tile-size-s-gap);
-        }
-      }
-      &_xs {
-        min-width: var(--tile-size-xs-min-width);
-        padding: var(--tile-size-xs-padding);
-        & ^^&__wrapper {
-          display: flex;
-          flex-flow: column;
-          gap: var(--tile-size-xs-gap);
-        }
-      }
-      &_xxs {
-        min-width: var(--tile-size-xxs-min-width);
-        padding: var(--tile-size-xxs-padding);
-        & ^^&__wrapper {
-          display: flex;
-          flex-flow: column;
-          gap: var(--tile-size-xxs-gap);
-        }
-      }
-  }
-}
-.tile {
-  &_type {
-    &_icon {
-      padding: var(--tile-type-icon-padding);
-      ^^&__icon {
-        margin: 0 0 16px 0;
-      }
-    }
-  }
-}
-.tile {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: tileSkeleton 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 tileSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-:root {
-  --tile-size-xxl-min-width: 240px;
-  --tile-size-xxl-padding: 24px;
-  --tile-size-xxl-gap: 24px;
-
-  --tile-size-xl-min-width: 240px;
-  --tile-size-xl-padding: 24px;
-  --tile-size-xl-gap: 24px;
-
-  --tile-size-l-min-width: 240px;
-  --tile-size-l-padding: 24px;
-  --tile-size-l-gap: 24px;
-
-  --tile-size-m-min-width: 240px;
-  --tile-size-m-padding: 16px;
-  --tile-size-m-gap: 16px;
-
-  --tile-size-s-min-width: 172px;
-  --tile-size-s-padding: 8px;
-  --tile-size-s-gap: 8px;
-
-  --tile-size-xs-min-width: 96px;
-  --tile-size-xs-padding: 8px;
-  --tile-size-xs-gap: 8px;
-
-  --tile-size-xxs-min-width: 80px;
-  --tile-size-xxs-padding: 4px;
-  --tile-size-xxs-gap: 4px;
-}