@itcase/ui 1.0.92 → 1.0.94

package/dist/css/components/Label/Label.css

@@ -8,19 +8,32 @@
     line-height: 0;
   }
 }
-
 .label {
-  &_size {
-    @each $size in xxs, xs, s, m, l, xl, xxl {
-      &_$(size) {
-        ^^&__inner {
-          padding: var(--label-size-$(size)-padding);
-        }
+  &&_mode {
+    &_skeleton {
+      background-image: linear-gradient(
+        90deg,
+        var(--color-surface-secondary),
+        var(--color-surface-tertiary),
+        var(--color-surface-secondary)
+      );
+      background-size: 200%;
+      animation: label-skeleton 3s infinite linear;
+      ^^&__label {
+        color: transparent;
       }
     }
   }
 }
-
+@keyframes label-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
+/* mode && `avatar_mode_${mode}`, */
 .label {
   &_shape {
     &_rounded {
@@ -36,7 +49,17 @@
     }
   }
 }
-
+.label {
+  &_size {
+    @each $size in xxs, xs, s, m, l, xl, xxl {
+      &_$(size) {
+        ^^&__inner {
+          padding: var(--label-size-$(size)-padding);
+        }
+      }
+    }
+  }
+}
 .label {
   &&_text-align {
     &_left {
@@ -56,7 +79,6 @@
     }
   }
 }
-
 .label {
   &&_width {
     &_fixed {

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

@@ -8,6 +8,39 @@
     }
   }
 }
+.logo {
+  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
+    &_align-items_$(val) {
+      align-items: $(val);
+    }
+  }
+}
+.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: logo-skeleton 3s infinite linear;
+      ^^&__image {
+        opacity: 0;
+      }
+    }
+  }
+}
+@keyframes logo-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 .logo {
   &_size {
     @each $size in s, m, l {
@@ -20,13 +53,6 @@
     }
   }
 }
-.logo {
-  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
-    &_align-items_$(val) {
-      align-items: $(val);
-    }
-  }
-}
 :root {
   --logo-size-l-width: 240px;
   --logo-size-l-height: 90px;
@@ -37,4 +63,3 @@
   --logo-size-s-width: 140px;
   --logo-size-s-height: 52px;
 }
-

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

@@ -70,7 +70,6 @@
           transition: color 0.5s ease;
           cursor: pointer;
           &-text {
-            @mixin word-wrap;
           }
         }
       }

package/dist/css/components/Select/Select.css

@@ -142,6 +142,7 @@
       display: flex;
       align-items: center;
       align-self: center;
+      gap: 8px;
       cursor: pointer;
       @media (--mobile) {
         align-items: flex-start;

package/dist/css/components/Select/css/__indicators/select__indicators.css

@@ -4,6 +4,7 @@
       display: flex;
       align-items: center;
       align-self: center;
+      gap: 8px;
       cursor: pointer;
       @media (--mobile) {
         align-items: flex-start;

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

@@ -1,4 +1,28 @@
 .text {}
+.text {
+  &&&&_mode {
+    &_skeleton {
+      color: transparent;
+      background-image: linear-gradient(
+        90deg,
+        var(--color-surface-secondary),
+        var(--color-surface-tertiary),
+        var(--color-surface-secondary)
+      );
+      background-size: 200%;
+      border-radius: 6px;
+      animation: text-skeleton 3s infinite linear;
+    }
+  }
+}
+@keyframes text-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 .text_size {
   @each $sizeText in xxs, xs, s, m, l, xl, xxl {
     &_$(sizeText) {

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

@@ -41,6 +41,30 @@
     margin: 0;
   }
 }
+.title.title {
+  &_mode {
+    &_skeleton {
+      color: transparent;
+      background-image: linear-gradient(
+        90deg,
+        var(--color-surface-secondary),
+        var(--color-surface-tertiary),
+        var(--color-surface-secondary)
+      );
+      background-size: 200%;
+      border-radius: 6px;
+      animation: title-skeleton 3s infinite linear;
+    }
+  }
+}
+@keyframes title-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 .title {
   &&_type {
     &_accent {

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

@@ -1,4 +1,104 @@
-/* @import './css/tooltip.css';
+.tooltip {
+  position: relative;
+  display: flex;
+  animation: 0.5s tooltipShowAnimation ease;
+}
 
-@import './css/tooltip_size.css';
-@import './css/tooltip_shape.css'; */
+@keyframes tooltipShowAnimation {
+  0% {
+    visibility: hidden;
+    opacity: 0%;
+  }
+  100% {
+    visibility: visible;
+    opacity: 100%;
+  }
+}
+
+.tooltip {
+  &_size {
+    @each $size in s, m, l {
+      &_$(size) {
+        max-width: 400px;
+        padding: var(--tooltip-size-$(size)-padding);
+        ^^&__inner {
+          display: flex;
+          flex-flow: column nowrap;
+          gap: var(--tooltip-size-$(size)-gap);
+        }
+      }
+    }
+  }
+}
+
+.tooltip {
+  &_shape {
+    &_rounded {
+      border-radius: var(--tooltip-shape-rounded-default, 12px);
+    }
+  }
+}
+
+.tooltip {
+  &_type_arrow {
+    ^&__inner {
+      position: relative;
+      background-color: inherit;
+    }
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      background-color: inherit;
+      width: var(--tooltip-arrow-width);
+      height: var(--tooltip-arrow-height);
+      border-radius: var(--tooltip-arrow-radius);
+      z-index: -1;
+    }
+  }
+}
+
+.tooltip {
+  &_arrow_position {
+    &_top {
+      &::after {
+        top: 0;
+        left: 50%;
+        transform: translate(-50%, calc(calc(var(--tooltip-arrow-width) / 2) * -1)) rotate(45deg);
+      }
+    }
+    &_left {
+      &::after {
+        top: 50%;
+        left: 0;
+        transform: translate(calc(calc(var(--tooltip-arrow-width) / 2) * -1), -50%) rotate(45deg);
+      }
+    }
+    &_right {
+      &::after {
+        top: 50%;
+        right: 0;
+        transform: translate(calc(var(--tooltip-arrow-width) / 2), -50%) rotate(45deg);
+      }
+    }
+    &_bottom {
+      &::after {
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%, calc(var(--tooltip-arrow-width) / 2)) rotate(45deg);
+      }
+    }
+  }
+}
+
+:root {
+  --tooltip-size-m-padding: 0;
+  --tooltip-size-s-padding: 0;
+
+  --tooltip-size-m-gap: 0;
+  --tooltip-size-s-gap: 0;
+
+  --tooltip-arrow-width: 14px;
+  --tooltip-arrow-height: 14px;
+  --tooltip-arrow-radius: 2px;
+}

package/dist/css/styles/alignment/alignment.css

@@ -0,0 +1,54 @@
+.alignment {
+  &_top {
+    &-left {
+      position: absolute;
+      right: 100%;
+      bottom: 100%;
+      transform: translate(calc(0% - 12px), calc(0% - 12px));
+    }
+    &-center {
+      position: absolute;
+      left: 50%;
+      bottom: 100%;
+      transform: translate(-50%, calc(0% - 12px));
+    }
+    &-right {
+      position: absolute;
+      left: 100%;
+      bottom: 100%;
+      transform: translate(calc(0% + 12px), calc(0% - 12px));
+    }
+  }
+  &_bottom {
+    &-left {
+      position: absolute;
+      top: 100%;
+      right: 100%;
+      transform: translate(calc(0% - 12px), calc(0% + 12px));
+    }
+    &-center {
+      position: absolute;
+      left: 50%;
+      top: 100%;
+      transform: translate(-50%, calc(0% + 12px));
+    }
+    &-right {
+      position: absolute;
+      left: 100%;
+      top: 100%;
+      transform: translate(calc(0% + 12px), calc(0% + 12px));
+    }
+  }
+  &_left-center {
+    position: absolute;
+    top: 50%;
+    right: 100%;
+    transform: translate(calc(0% - 12px), -50%);
+  }
+  &_right-center {
+    position: absolute;
+    left: 100%;
+    top: 50%;
+    transform: translate(calc(0% + 12px), -50%);
+  }
+}

package/dist/css/styles/mediaqueries.css

@@ -1,23 +1,37 @@
 :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; /* 560px */
 }
 
 @custom-media --warning (width <= 15em);
 
-@custom-media --mobile (width >= 15em) and (width <  48em);
+@custom-media --mobile (width >= 15em) and (width < 48em);
 
 @custom-media --mobile-tiny (width >= 15em) and (width < 20em);
 
@@ -25,17 +39,17 @@
 
 @custom-media --mobile-medium (width >= 23.435em) and (width < 25.875em);
 
-@custom-media --mobile-standart (width >=  25.875em)) and (width < 30em);
+@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 --mobile-huge (width >= 40em) and (width < 48em);
 
-@custom-media --tablet (width >=  48em) and (width < 60em);
+@custom-media --tablet (width >= 48em) and (width < 60em);
 
-@custom-media --tablet-small (width >= 40em) and (width <   48em);
+@custom-media --tablet-small (width >= 40em) and (width < 48em);
 
-@custom-media --tablet-large (width >=  48em) and (width < 60em);
+@custom-media --tablet-large (width >= 48em) and (width < 60em);
 
 @custom-media --desktop (width >= 60em);
 
@@ -49,13 +63,13 @@
 
 @custom-media --desktop-large (width >= 90em) and (width < 120em);
 
-@custom-media --desktop-huge (width >=  120em) and (width < 160em);
+@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 --landscape (orientation: landscape) and (width >= 15em) and (width < 60em);
 
-@custom-media --portrait (orientation:portrait) 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);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.92",
+  "version": "1.0.94",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",