@itcase/ui 1.8.179 → 1.9.0

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/mediaqueries/mediaqueries.css

@@ -1,78 +0,0 @@
-:root {
-  --mobile-tiny: 15em; /* 240px */
-  --mobile-small: 20em; /* 320px */
-  --mobile-medium: 23.435em; /* 375px */
-  --mobile-large: 25.875em; /* 414px */
-  --mobile-extra-large: 30em; /* 480px */
-  --mobile-super-extra-large: 40em; /* 640px */
-  --tablet: 48em; /* 768px */
-  --desktop-small: 60em; /* 960px */
-  --desktop-medium: 64em; /* 1024px */
-  --desktop-normal: 72.5em; /* 1160px */
-  --desktop-large: 80em; /* 1280px */
-  --desktop-extra-large: 90em; /* 1441px */
-  --desktop-super-extra-large: 120em; /* 1920px */
-  --desktop-huge: 160em; /* 2560px */
-}
-
-@custom-media --warning (width <= 15em);
-
-@custom-media --mobile (width >= 15em) and (width < 48em);
-
-@custom-media --mobile-tiny (width >= 15em) and (width < 20em);
-
-@custom-media --mobile-small (width >= 20em) and (width < 23.435em);
-
-@custom-media --mobile-medium (width >= 23.435em) and (width < 25.875em);
-
-@custom-media --mobile-standart (width >= 25.875em) and (width < 30em);
-
-@custom-media --mobile-large (width >= 30em) and (width < 40em);
-
-@custom-media --mobile-huge (width >= 40em) and (width < 48em);
-
-@custom-media --tablet (width >= 48em) and (width < 60em);
-
-@custom-media --tablet-small (width >= 40em) and (width < 48em);
-
-@custom-media --tablet-large (width >= 48em) and (width < 60em);
-
-@custom-media --desktop (width >= 60em);
-
-@custom-media --desktop-small (width >= 60em) and (width < 64em);
-
-@custom-media --desktop-medium (width >= 64em) and (width < 72.5em);
-
-@custom-media --desktop-normal (width >= 72.5em) and (width < 80em);
-
-@custom-media --desktop-standart (width >= 80em) and (width < 90em);
-
-@custom-media --desktop-large (width >= 90em) and (width < 120em);
-
-@custom-media --desktop-huge (width >= 120em) and (width < 160em);
-
-@custom-media --desktop-super-huge (width >= 160em);
-
-@custom-media --landscape (orientation: landscape) and (width >= 15em) and (width < 60em);
-
-@custom-media --portrait (orientation: portrait) and (width >= 15em) and (width < 60em);
-
-@custom-media --touch (hover: none) and (pointer: coarse);
-
-@custom-media --stylus (hover: none) and (pointer: fine);
-
-@custom-media --console (hover: hover) and (pointer: coarse);
-
-@custom-media --mouse (hover: hover) and (pointer: fine);
-
-@custom-media --tiny-viewport (width <= 1366px) and (height <= 720px);
-
-@custom-media --small-viewport (width >= 1366px) and (height < 768px);
-
-@custom-media --medium-viewport (width >= 1440px) and (height < 900px);
-
-@custom-media --large-viewport (width >= 1440px) and (height < 900px);
-
-@custom-media --huge-viewport (width >= 1600px) and (height < 900px);
-
-@custom-media --super-huge-viewport (width >= 1920px) and (height >= 1080px);

package/dist/css/mixins/mixin_animation.css

@@ -1,8 +0,0 @@
-@define-mixin disableAnimation {
-  transform: translate(0, 0);
-  opacity: 100%;
-}
-
-@define-mixin easing $ease: easeInSine, $type: all, $time: 0.2s {
-  transition: $type $time $ease;
-}

package/dist/css/mixins/mixin_dark-light.css

@@ -1,16 +0,0 @@
-@define-mixin dark {
-  @media (prefers-color-scheme: dark) {
-    & {
-      @mixin-content;
-    }
-  }
-}
-
-@define-mixin light {
-  @media (prefers-color-scheme: light) {
-    & {
-      @mixin-content;
-    }
-  }
-  @mixin-content;
-}

package/dist/css/mixins/mixin_elevation.css

@@ -1,31 +0,0 @@
-@define-mixin elevation-1 {
-  box-shadow: var(--elevation-1);
-}
-
-@define-mixin elevation-2 {
-  box-shadow: var(--elevation-2);
-}
-
-@define-mixin elevation-4 {
-  box-shadow: var(--elevation-4);
-}
-
-@define-mixin elevation-6 {
-  box-shadow: var(--elevation-6);
-}
-
-@define-mixin elevation-8 {
-  box-shadow: var(--elevation-8);
-}
-
-@define-mixin elevation-12 {
-  box-shadow: var(--elevation-12);
-}
-
-@define-mixin elevation-16 {
-  box-shadow: var(--elevation-16);
-}
-
-@define-mixin elevation-24 {
-  box-shadow: var(--elevation-24);
-}

package/dist/css/mixins/mixin_fill-gradient.css

@@ -1,47 +0,0 @@
-@define-mixin fill-gradient_surface-primary-left {
-  background: linear-gradient(
-    to left,
-    hsl(0, 0%, 0%, 0) 0%,
-    hsl(0, 0%, 0%, 0.65) 100%
-  );
-}
-
-@define-mixin fill-gradient_surface-primary-top {
-  background: linear-gradient(
-    to top,
-    hsl(0, 0%, 0%, 0) 0%,
-    hsl(0, 0%, 0%, 0.65) 100%
-  );
-}
-
-@define-mixin fill-gradient_surface-primary-right {
-  background: linear-gradient(
-    to left,
-    hsl(0, 0%, 0%, 0.65) 0%,
-    hsl(0, 0%, 0%, 0) 100%
-  );
-}
-
-@define-mixin fill-gradient_surface-primary-bottom {
-  background: linear-gradient(
-    to top,
-    hsl(0, 0%, 0%, 0.65) 0%,
-    hsl(0, 0%, 0%, 0) 100%
-  );
-}
-
-@define-mixin fill-gradient_surface-primary-diagonal-left {
-  background: linear-gradient(
-    to bottom,
-    hsl(0, 0%, 0%, 0) 0%,
-    hsl(0, 0%, 0%, 0.65) 100%
-  );
-}
-
-@define-mixin fill-gradient_surface-primary-diagonal-right {
-  background: linear-gradient(
-    to bottom,
-    hsl(0, 0%, 0%, 0) 0%,
-    hsl(0, 0%, 0%, 0.65) 100%
-  );
-}