@itcase/ui 1.0.1

package/dist/css/components/CookiesWarning/CookiesWarning.css

@@ -0,0 +1,37 @@
+.cookies-warning {
+  width: 100%;
+  max-width: 320px;
+  position: fixed;
+  right: 40px;
+  bottom: 20px;
+  z-index: 10000;
+  @media (--mobile) {
+    left: 50%;
+    right: 0;
+    transform: translate(-50%, 0);
+  }
+  &_state_hidden {
+    max-height: 1000px;
+    overflow: hidden;
+    animation-duration: 0.5s;
+    animation-fill-mode: both;
+    animation-name: cookieMessageClose;
+  }
+  &__inner {
+    background: var(--color-surface-primary);
+    padding: 32px;
+    position: relative;
+    @media (--mobile) {
+      min-width: auto;
+    }
+  }
+}
+
+@keyframes cookieMessageClose {
+  from {
+    max-height: 500px;
+  }
+  to {
+    max-height: 0;
+  }
+}

package/dist/css/components/Counter/Counter.css

@@ -0,0 +1,55 @@
+.counter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+}
+.counter {
+  &_size {
+    @each $size in xxs, xs, s, m, l, xl, xxl {
+      &_$(size) {
+        min-width: var(--counter-width-size-$(size));
+        min-height: var(--counter-height-size-$(size));
+        max-height: var(--counter-height-size-$(size));
+      }
+    }
+  }
+}
+.counter {
+  &&_type {
+    &_accent {
+      background: var(--color-accent-primary);
+      color: var(--color-accent-text-primary);
+    }
+  }
+}
+.counter {
+  &&_type {
+    &_primary {
+      background: var(--color-primary);
+      color: var(--color-primary-text-primary);
+    }
+  }
+}
+:root {
+  --counter-width-size-xxs: 16px;
+  --counter-height-size-xxs: 16px;
+
+  --counter-width-size-xs: 18px;
+  --counter-height-size-xs: 18px;
+
+  --counter-width-size-s: 20px;
+  --counter-height-size-s: 20px;
+
+  --counter-width-size-m: 24px;
+  --counter-height-size-m: 24px;
+
+  --counter-width-size-l: 32px;
+  --counter-height-size-l: 32px;
+
+  --counter-width-size-xl: 40px;
+  --counter-height-size-xl: 40px;
+
+  --counter-width-size-xxl: 48px;
+  --counter-height-size-xxl: 48px;
+}

package/dist/css/components/Divider/Divider.css

@@ -0,0 +1,78 @@
+.divider {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+.divider {
+  &_size {
+    &_xs {
+      height: 1px;
+    }
+    &_s {
+      height: 2px;
+    }
+    &_m {
+      height: 3px;
+    }
+    &_l {
+      height: 4px;
+    }
+    &_xl {
+      height: 5px;
+    }
+  }
+  &_direction {
+    &_horizontal {
+      &^^&_size {
+        &_xs {
+          height: 1px;
+        }
+        &_s {
+          height: 2px;
+        }
+        &_m {
+          height: 3px;
+        }
+        &_l {
+          height: 4px;
+        }
+        &_xl {
+          height: 5px;
+        }
+      }
+    }
+    &_vertical {
+      &^^&_size {
+        &_xs {
+          width: 1px;
+        }
+        &_s {
+          width: 2px;
+        }
+        &_m {
+          width: 3px;
+        }
+        &_l {
+          width: 4px;
+        }
+        &_xl {
+          width: 5px;
+        }
+      }
+    }
+  }
+}
+.divider {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      min-width: 100%;
+      flex-direction: row;
+    }
+    &_vertical {
+      display: flex;
+      min-height: 100%;
+      flex-direction: column;
+    }
+  }
+}

package/dist/css/components/Dropdown/Dropdown.css

@@ -0,0 +1,58 @@
+.dropdown {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+  &__wrapper {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin: 16px 0 0 0;
+  }
+}
+.dropdown {
+  &_animation {
+    &_close {
+      ^^&__wrapper {
+        animation-name: dropDownAnimationClose;
+      }
+      ^^&__button {
+        & .button__icon {
+          animation-name: dropDownButtonAnimationClose;
+        }
+      }
+    }
+    &_open {
+      ^^&__wrapper {
+        animation-name: dropDownAnimationOpen;
+      }
+      ^^&__button {
+        & .button__icon {
+          animation-name: dropDownButtonAnimationOpen;
+        }
+      }
+    }
+  }
+}
+.dropdown {
+  &_shape {
+    &_rounded {
+      border-radius: 4px;
+      position: relative;
+    }
+  }
+}
+.dropdown {
+  &&_state_close {
+    ^&__wrapper {
+
+    }
+  }
+}
+.dropdown {
+  &&_state_open {
+    ^&__wrapper {
+
+    }
+  }
+}

package/dist/css/components/Emoji/Emoji.css

@@ -0,0 +1,104 @@
+.emoji {
+  position: relative;
+}
+.emoji {
+  &_direction {
+    @each $val in row, row-reverse, column, column-reverse {
+      &_$(val) {
+        display: flex;
+        flex-direction: $(val);
+      }
+    }
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+.emoji {
+  &_shape {
+    &_rounded {
+      border-radius: 12px;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.emoji_size {
+  &_40 {
+    height: 40px;
+    width: 40px;
+    min-height: 40px;
+    min-width: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+  }
+
+  &_50 {
+    height: 50px;
+    width: 50px;
+    min-height: 50px;
+    min-width: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 35px;
+  }
+
+  &_56 {
+    height: 56px;
+    width: 56px;
+    min-height: 56px;
+    min-width: 56px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 40px;
+  }
+
+  &_60 {
+    height: 60px;
+    width: 60px;
+    min-height: 60px;
+    min-width: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 35px;
+  }
+
+  &_76 {
+    height: 76px;
+    width: 76px;
+    min-height: 76px;
+    min-width: 76px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 40px;
+  }
+}
+.emoji {
+  &__icon {
+    &-shape {
+      &_rounded {
+        border-radius: 12px;
+      }
+      &_circular {
+        border-radius: 50%;
+      }
+    }
+  }
+}
+.emoji {
+  &__icon {
+    position: relative;
+  }
+}

package/dist/css/components/Emoji/css/__icon/emoji__icon-shape.css

@@ -0,0 +1,12 @@
+.emoji {
+  &__icon {
+    &-shape {
+      &_rounded {
+        border-radius: 12px;
+      }
+      &_circular {
+        border-radius: 50%;
+      }
+    }
+  }
+}

package/dist/css/components/Emoji/css/__icon/emoji__icon.css

@@ -0,0 +1,5 @@
+.emoji {
+  &__icon {
+    position: relative;
+  }
+}

package/dist/css/components/Fader/Fader.css

@@ -0,0 +1,55 @@
+.fader {
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  position: absolute;
+  background: red;
+}
+.fader {
+  &&_state {
+    &_visible {
+      position: fixed;
+      display: block;
+      visibility: visible !important;
+      animation-name: faderFadeIn;
+    }
+    &_hidden {
+      animation-name: faderFaderOut;
+    }
+  }
+}
+@keyframes faderFadeIn {
+  from {
+    opacity: 0%;
+  }
+  to {
+    opacity: 100%;
+  }
+}
+@keyframes faderFaderOut {
+  from {
+    opacity: 100%;
+  }
+  to {
+    opacity: 0%;
+  }
+}
+.fader {
+  &&_type_click {
+    opacity: 0;
+  }
+}
+.fader {
+  &&_type_modal {
+    opacity: 0;
+    display: none;
+    background: var(--color-fader);
+    backdrop-filter: blur(10px);
+    transition: opacity 1s ease-in-out;
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    visibility: hidden;
+  }
+}

package/dist/css/components/Flex/Flex.css

@@ -0,0 +1,179 @@
+.flex {
+  width: 100%;
+  display: flex;
+  &__wrapper {
+    width: 100%;
+    display: flex;
+    max-width: var(--max);
+    margin: 0 auto;
+  }
+}
+.flex {
+  @each $val in flex-start, flex-end, center, space-between, space-around, stretch {
+    &_align-content_$(val) {
+      & > div {
+        align-content: $(val);
+      }
+    }
+  }
+}
+.flex {
+  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
+    &_align-self_$(val) {
+      & > div {
+        align-self: $(val);
+      }
+    }
+    &_align-items_$(val) {
+      & > div {
+        align-items: $(val);
+      }
+    }
+  }
+}
+.flex {
+  &_direction {
+    &_horizontal {
+      & > div {
+        flex-direction: row;
+      }
+    }
+    &_vertical {
+      & > div {
+        flex-direction: column;
+      }
+    }
+    &_horizontal-reverse {
+      & > div {
+        flex-direction: row-reverse;
+      }
+    }
+    &_vertical-reverse {
+      & > div {
+        flex-direction: column-reverse;
+      }
+    }
+  }
+  @each $val in row, row-reverse, column, column-reverse {
+    &&_direction_$(val) {
+      & > div {
+        flex-direction: $(val);
+      }
+    }
+  }
+}
+.flex {
+  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
+    &_justify-content_$(val) {
+      & > div {
+        justify-content: $(val);
+      }
+    }
+  }
+}
+.flex {
+  &_shape {
+    &_rounded {
+      border-radius: 12px;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.flex {
+  &_wrap {
+    &_wrap {
+      ^^&__wrapper {
+        flex-wrap: wrap;
+      }
+    }
+    &_nowrap {
+      ^^&__wrapper {
+        flex-wrap: nowrap;
+      }
+    }
+    &_wrap-reverse {
+      ^^&__wrapper {
+        flex-wrap: wrap-reverse;
+      }
+    }
+  }
+}
+.flex {
+  &__item {
+    display: flex;
+  }
+}
+.flex {
+  &__item {
+    @each $val in stretch, flex-start, flex-end, center, baseline, auto {
+      &_align-self_$(val) {
+        align-self: $(val);
+      }
+      &_align-items_$(val) {
+        align-items: $(val);
+      }
+      &_align-content_$(val) {
+        align-content: $(val);
+      }
+    }
+  }
+}
+.flex {
+  &__item {
+    &_direction {
+      &_horizontal {
+        flex-direction: row;
+      }
+      &_vertical {
+        flex-direction: column;
+      }
+      @each $val in row, row-reverse, column, column-reverse {
+        &_$(val) {
+          flex-direction: $(val);
+        }
+      }
+    }
+  }
+}
+.flex {
+  &__item {
+    @each $val in 0, 1 {
+      &_grow_$(val) {
+        flex-grow: $(val);
+      }
+    }
+  }
+}
+.flex {
+  &__item {
+    @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
+      &_justify-content_$(val) {
+        justify-content: $(val);
+      }
+    }
+  }
+}
+.flex {
+  &__item {
+    &_shape {
+      &_rounded {
+        border-radius: 12px;
+      }
+      &_circular {
+        border-radius: 50%;
+      }
+    }
+  }
+}
+.flex {
+  &__item {
+    &_wrap {
+      &_wrap {
+        flex-wrap: wrap;
+      }
+    }
+  }
+}
+

package/dist/css/components/Flex/css/__item/flex__item.css

@@ -0,0 +1,5 @@
+.flex {
+  &__item {
+    display: flex;
+  }
+}

package/dist/css/components/Flex/css/__item/flex__item_align.css

@@ -0,0 +1,15 @@
+.flex {
+  &__item {
+    @each $val in stretch, flex-start, flex-end, center, baseline, auto {
+      &_align-self_$(val) {
+        align-self: $(val);
+      }
+      &_align-items_$(val) {
+        align-items: $(val);
+      }
+      &_align-content_$(val) {
+        align-content: $(val);
+      }
+    }
+  }
+}

package/dist/css/components/Flex/css/__item/flex__item_direction.css

@@ -0,0 +1,17 @@
+.flex {
+  &__item {
+    &_direction {
+      &_horizontal {
+        flex-direction: row;
+      }
+      &_vertical {
+        flex-direction: column;
+      }
+      @each $val in row, row-reverse, column, column-reverse {
+        &_$(val) {
+          flex-direction: $(val);
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Flex/css/__item/flex__item_grow.css

@@ -0,0 +1,9 @@
+.flex {
+  &__item {
+    @each $val in 0, 1 {
+      &_grow_$(val) {
+        flex-grow: $(val);
+      }
+    }
+  }
+}

package/dist/css/components/Flex/css/__item/flex__item_justify-content.css

@@ -0,0 +1,9 @@
+.flex {
+  &__item {
+    @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
+      &_justify-content_$(val) {
+        justify-content: $(val);
+      }
+    }
+  }
+}

package/dist/css/components/Flex/css/__item/flex__item_shape.css

@@ -0,0 +1,12 @@
+.flex {
+  &__item {
+    &_shape {
+      &_rounded {
+        border-radius: 12px;
+      }
+      &_circular {
+        border-radius: 50%;
+      }
+    }
+  }
+}

package/dist/css/components/Flex/css/__item/flex__item_wrap.css

@@ -0,0 +1,9 @@
+.flex {
+  &__item {
+    &_wrap {
+      &_wrap {
+        flex-wrap: wrap;
+      }
+    }
+  }
+}