@itcase/ui 1.8.179 → 1.9.1

package/dist/css/components/Title/Title.css

@@ -1,125 +0,0 @@
-.title {
-  &__wrapper {
-    display: inline-block;
-  }
-}
-.title {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: titleSkeleton 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 titleSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-.title {
-  &_size {
-      &_h1 {
-        padding: 0;
-        margin: 0;
-        display: flex;
-        gap: 8px;
-        @mixin h1;
-        ^^&__wrapper {
-          gap: var(--title-size-h1-gap);
-        }
-      }
-      &_h2 {
-        padding: 0;
-        margin: 0;
-        display: flex;
-        gap: 8px;
-        @mixin h2;
-        ^^&__wrapper {
-          gap: var(--title-size-h2-gap);
-        }
-      }
-      &_h3 {
-        padding: 0;
-        margin: 0;
-        display: flex;
-        gap: 8px;
-        @mixin h3;
-        ^^&__wrapper {
-          gap: var(--title-size-h3-gap);
-        }
-      }
-      &_h4 {
-        padding: 0;
-        margin: 0;
-        display: flex;
-        gap: 8px;
-        @mixin h4;
-        ^^&__wrapper {
-          gap: var(--title-size-h4-gap);
-        }
-      }
-      &_h5 {
-        padding: 0;
-        margin: 0;
-        display: flex;
-        gap: 8px;
-        @mixin h5;
-        ^^&__wrapper {
-          gap: var(--title-size-h5-gap);
-        }
-      }
-      &_h6 {
-        padding: 0;
-        margin: 0;
-        display: flex;
-        gap: 8px;
-        @mixin h6;
-        ^^&__wrapper {
-          gap: var(--title-size-h6-gap);
-        }
-      }
-  }
-}
-.title {
-  &_direction {
-    &_horizontal {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      ^^&__wrapper {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-    }
-    &_vertical {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      ^^&__wrapper {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-    }
-  }
-}
-:root {
-  --title-size-h1-gap: 8px;
-  --title-size-h2-gap: 8px;
-  --title-size-h3-gap: 8px;
-  --title-size-h4-gap: 8px;
-  --title-size-h5-gap: 8px;
-  --title-size-h6-gap: 8px;
-}

package/dist/css/components/Tooltip/Tooltip.css

@@ -1,236 +0,0 @@
-.tooltip {
-  width: fit-content;
-  min-width: 240px;
-  position: relative;
-  display: flex;
-  visibility: hidden;
-  opacity: 0%;
-  &__arrow {
-    width: var(--tooltip-arrow-width);
-    height: var(--tooltip-arrow-height);
-    border-radius: var(--tooltip-arrow-radius);
-    position: absolute;
-    content: '';
-    display: block;
-    z-index: 0;
-    background-color: var(--tooltip-arrow-color);
-  }
-  &__inner {
-    min-width: 100%;
-    position: relative;
-    background-color: inherit;
-    z-index: 1;
-  }
-}
-
-@keyframes tooltipShowAnimation {
-  0% {
-    visibility: hidden;
-    opacity: 0%;
-  }
-  100% {
-    visibility: visible;
-    opacity: 100%;
-  }
-}
-
-@keyframes tooltipHideAnimation {
-  0% {
-    visibility: visible;
-    opacity: 100%;
-  }
-  100% {
-    visibility: hidden;
-    opacity: 0%;
-  }
-}
-
-.tooltip {
-  &_size {
-      &_s {
-        max-width: 400px;
-        ^^&__inner {
-          padding: var(--tooltip-size-s-padding);
-          display: flex;
-          flex-flow: column nowrap;
-          gap: var(--tooltip-size-s-gap);
-        }
-      }
-      &_m {
-        max-width: 400px;
-        ^^&__inner {
-          padding: var(--tooltip-size-m-padding);
-          display: flex;
-          flex-flow: column nowrap;
-          gap: var(--tooltip-size-m-gap);
-        }
-      }
-      &_l {
-        max-width: 400px;
-        ^^&__inner {
-          padding: var(--tooltip-size-l-padding);
-          display: flex;
-          flex-flow: column nowrap;
-          gap: var(--tooltip-size-l-gap);
-        }
-      }
-  }
-}
-
-.tooltip {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: tooltipSkeleton 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 tooltipSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-
-.tooltip {
-  &__arrow_position {
-    &_top {
-      left: 50%;
-      top: 0;
-      transform: translate(
-          -50%,
-          calc(calc(var(--tooltip-arrow-width) / 2) * -1)
-        )
-        rotate(45deg);
-      &Left {
-        left: 0;
-        top: 0;
-        transform: translate(
-            -50%,
-            calc(calc(var(--tooltip-arrow-width) / 2) * -1)
-          )
-          rotate(45deg);
-      }
-      &Right {
-        top: 0;
-        right: 0;
-        transform: translate(
-            -50%,
-            calc(calc(var(--tooltip-arrow-width) / 2) * -1)
-          )
-          rotate(45deg);
-      }
-    }
-    &_left {
-      left: 0;
-      top: 50%;
-      transform: translate(
-          calc(calc(var(--tooltip-arrow-width) / 2) * -1),
-          -50%
-        )
-        rotate(45deg);
-      &Bottom {
-        top: 50%;
-        right: 0;
-        transform: translate(calc(var(--tooltip-arrow-width) / 2), -50%)
-          rotate(45deg);
-      }
-      &Top {
-        top: 50%;
-        right: 0;
-        transform: translate(calc(var(--tooltip-arrow-width) / 2), -50%)
-          rotate(45deg);
-      }
-    }
-    &_right {
-      top: 50%;
-      right: 0;
-      transform: translate(calc(var(--tooltip-arrow-width) / 2), -50%)
-        rotate(45deg);
-      &Bottom {
-        top: 50%;
-        right: 0;
-        transform: translate(calc(var(--tooltip-arrow-width) / 2), -50%)
-          rotate(45deg);
-      }
-      &Top {
-        top: 50%;
-        right: 0;
-        transform: translate(calc(var(--tooltip-arrow-width) / 2), -50%)
-          rotate(45deg);
-      }
-    }
-    &_bottom {
-      left: 50%;
-      bottom: 0;
-      transform: translate(-50%, calc(var(--tooltip-arrow-width) / 2))
-        rotate(45deg);
-    }
-  }
-}
-
-.tooltip {
-  &_align-position {
-    &_left {
-      position: absolute;
-      transform: translate(0, -50%);
-    }
-    &_center {
-      position: absolute;
-      left: 50%;
-      top: 100%;
-      transform: translate(-50%, 0%);
-    }
-    &_right {
-      position: absolute;
-      transform: translate(0, -50%);
-    }
-  }
-}
-
-.tooltip {
-  &&_state_close {
-    visibility: hidden;
-    animation-duration: 0.2s;
-    animation-name: tooltipHideAnimation;
-    opacity: 0%;
-  }
-}
-
-.tooltip {
-  &&_state_open {
-    visibility: visible;
-    animation-duration: 0.5s;
-    animation-name: tooltipShowAnimation;
-    opacity: 100%;
-  }
-}
-
-:root {
-  --tooltip-arrow-width: 14px;
-  --tooltip-arrow-height: 14px;
-  --tooltip-arrow-radius: 2px;
-
-  --tooltip-shape-rounded-default: 0;
-
-  /* Size */
-  --tooltip-size-l-padding: 16px;
-  --tooltip-size-l-gap: 0;
-
-  --tooltip-size-m-padding: 12px;
-  --tooltip-size-m-gap: 0;
-
-  --tooltip-size-s-padding: 8px;
-  --tooltip-size-s-gap: 0;
-}

package/dist/css/components/Video/Video.css

@@ -1,23 +0,0 @@
-.video {
-}
-.video {
-  &&_position {
-    &_center {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
-.video {
-  &_poster {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    ^&__wrapper {
-      min-width: 100%;
-      min-height: 100%;
-    }
-  }
-}

package/dist/css/components/Warning/Warning.css

@@ -1,50 +0,0 @@
-.warning {
-  display: flex;
-  &__content {
-    display: flex;
-    flex-direction: column;
-  }
-  &_shape {
-    &_rounded {
-      border-radius: var(--warning-shape-rounded);
-    }
-    &_circular {
-      border-radius: 50%;
-    }
-  }
-}
-.warning {
-    &_size_l {
-      min-width: var(--warning-l-min-width);
-      padding: var(--warning-l-padding);
-      gap: var(--warning-l-gap);
-      ^&__content {
-        gap: var(--warning-content-l-gap);
-        min-width: var(--warning-content-l-min-width);
-      }
-    }
-}
-.warning {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: warningSkeleton 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 warningSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}

package/dist/css/styles/align/align.css

@@ -1,25 +0,0 @@
-
-  .align,
-  div.align {
-    &_center {
-      margin: 0 auto;
-    }
-  }
-.align,
-  button.align {
-    &_center {
-      margin: 0 auto;
-    }
-  }
-.align,
-  input.align {
-    &_center {
-      margin: 0 auto;
-    }
-  }
-.align,
-  textarea.align {
-    &_center {
-      margin: 0 auto;
-    }
-  }

package/dist/css/styles/align/align_horizontal-reverse.css

@@ -1,252 +0,0 @@
-%align-horizontal-reverse {
-  display: flex;
-  flex-direction: row-reverse;
-}
-
-.align,
-  div.align {
-    &_horizontal-reverse {
-      display: flex;
-      flex-direction: row-reverse;
-      @extend %align-horizontal-reverse;
-      &-top {
-        &-left {
-          align-items: flex-start;
-          @extend %align-horizontal-reverse;
-        }
-        &-center {
-          text-align: center;
-          justify-content: center;
-          align-items: flex-start;
-          @extend %align-horizontal-reverse;
-        }
-        &-right {
-          text-align: right;
-          justify-content: flex-end;
-          align-items: flex-start;
-          @extend %align-horizontal-reverse;
-        }
-      }
-      &-left {
-        align-items: center;
-        @extend %align-horizontal-reverse;
-      }
-      &-center {
-        text-align: center;
-        justify-content: center;
-        align-items: center;
-        @extend %align-horizontal-reverse;
-      }
-      &-right {
-        text-align: right;
-        justify-content: flex-end;
-        align-items: center;
-        @extend %align-horizontal-reverse;
-      }
-      &-bottom {
-        &-left {
-          flex-direction: row;
-          align-items: flex-end;
-          @extend %align-horizontal-reverse;
-        }
-        &-center {
-          text-align: center;
-          justify-content: center;
-          align-items: flex-end;
-          @extend %align-horizontal-reverse;
-        }
-        &-right {
-          text-align: right;
-          justify-content: flex-end;
-          align-items: flex-end;
-          @extend %align-horizontal-reverse;
-        }
-      }
-    }
-  }
-
-.align,
-  button.align {
-    &_horizontal-reverse {
-      display: flex;
-      flex-direction: row-reverse;
-      @extend %align-horizontal-reverse;
-      &-top {
-        &-left {
-          align-items: flex-start;
-          @extend %align-horizontal-reverse;
-        }
-        &-center {
-          text-align: center;
-          justify-content: center;
-          align-items: flex-start;
-          @extend %align-horizontal-reverse;
-        }
-        &-right {
-          text-align: right;
-          justify-content: flex-end;
-          align-items: flex-start;
-          @extend %align-horizontal-reverse;
-        }
-      }
-      &-left {
-        align-items: center;
-        @extend %align-horizontal-reverse;
-      }
-      &-center {
-        text-align: center;
-        justify-content: center;
-        align-items: center;
-        @extend %align-horizontal-reverse;
-      }
-      &-right {
-        text-align: right;
-        justify-content: flex-end;
-        align-items: center;
-        @extend %align-horizontal-reverse;
-      }
-      &-bottom {
-        &-left {
-          flex-direction: row;
-          align-items: flex-end;
-          @extend %align-horizontal-reverse;
-        }
-        &-center {
-          text-align: center;
-          justify-content: center;
-          align-items: flex-end;
-          @extend %align-horizontal-reverse;
-        }
-        &-right {
-          text-align: right;
-          justify-content: flex-end;
-          align-items: flex-end;
-          @extend %align-horizontal-reverse;
-        }
-      }
-    }
-  }
-
-.align,
-  input.align {
-    &_horizontal-reverse {
-      display: flex;
-      flex-direction: row-reverse;
-      @extend %align-horizontal-reverse;
-      &-top {
-        &-left {
-          align-items: flex-start;
-          @extend %align-horizontal-reverse;
-        }
-        &-center {
-          text-align: center;
-          justify-content: center;
-          align-items: flex-start;
-          @extend %align-horizontal-reverse;
-        }
-        &-right {
-          text-align: right;
-          justify-content: flex-end;
-          align-items: flex-start;
-          @extend %align-horizontal-reverse;
-        }
-      }
-      &-left {
-        align-items: center;
-        @extend %align-horizontal-reverse;
-      }
-      &-center {
-        text-align: center;
-        justify-content: center;
-        align-items: center;
-        @extend %align-horizontal-reverse;
-      }
-      &-right {
-        text-align: right;
-        justify-content: flex-end;
-        align-items: center;
-        @extend %align-horizontal-reverse;
-      }
-      &-bottom {
-        &-left {
-          flex-direction: row;
-          align-items: flex-end;
-          @extend %align-horizontal-reverse;
-        }
-        &-center {
-          text-align: center;
-          justify-content: center;
-          align-items: flex-end;
-          @extend %align-horizontal-reverse;
-        }
-        &-right {
-          text-align: right;
-          justify-content: flex-end;
-          align-items: flex-end;
-          @extend %align-horizontal-reverse;
-        }
-      }
-    }
-  }
-
-.align,
-  textarea.align {
-    &_horizontal-reverse {
-      display: flex;
-      flex-direction: row-reverse;
-      @extend %align-horizontal-reverse;
-      &-top {
-        &-left {
-          align-items: flex-start;
-          @extend %align-horizontal-reverse;
-        }
-        &-center {
-          text-align: center;
-          justify-content: center;
-          align-items: flex-start;
-          @extend %align-horizontal-reverse;
-        }
-        &-right {
-          text-align: right;
-          justify-content: flex-end;
-          align-items: flex-start;
-          @extend %align-horizontal-reverse;
-        }
-      }
-      &-left {
-        align-items: center;
-        @extend %align-horizontal-reverse;
-      }
-      &-center {
-        text-align: center;
-        justify-content: center;
-        align-items: center;
-        @extend %align-horizontal-reverse;
-      }
-      &-right {
-        text-align: right;
-        justify-content: flex-end;
-        align-items: center;
-        @extend %align-horizontal-reverse;
-      }
-      &-bottom {
-        &-left {
-          flex-direction: row;
-          align-items: flex-end;
-          @extend %align-horizontal-reverse;
-        }
-        &-center {
-          text-align: center;
-          justify-content: center;
-          align-items: flex-end;
-          @extend %align-horizontal-reverse;
-        }
-        &-right {
-          text-align: right;
-          justify-content: flex-end;
-          align-items: flex-end;
-          @extend %align-horizontal-reverse;
-        }
-      }
-    }
-  }