@itcase/ui 1.0.1

package/dist/css/components/Link/Link.css

@@ -0,0 +1,10 @@
+.link {
+  color: inherit;
+}
+.link {
+  &_underline {
+    &_none {
+      text-decoration: none;
+    }
+  }
+}

package/dist/css/components/List/List.css

@@ -0,0 +1,112 @@
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  &__item {
+    margin: 0;
+    padding: 0;
+  }
+}
+.list {
+  &_bullet {
+    &-fill {
+      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+        &_$(type) {
+          &-item {
+            @each $color in primary, secondary, tertiary, quaternary, accent {
+              &-$(color) {
+                & .list__item {
+                  &::before {
+                    background: var(--color-$(type)-text-$(color));
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.list {
+  &_bullet {
+    @each $size in h1, h2, h3, h4, h5, h6 {
+      &-size_$(size) {
+        @mixin $(size);
+      }
+    }
+  }
+}
+.list {
+  &_bullet {
+    &-text-color {
+      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+        &_$(type) {
+          &-text {
+            @each $color in primary, secondary, tertiary, quaternary, accent {
+              &-$(color) {
+                color: var(--color-$(type)-text-$(color));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.list {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  @each $val in row, row-reverse, column, column-reverse {
+    &_direction_$(val) {
+      display: flex;
+      flex-direction: $(val);
+    }
+  }
+}
+.list {
+  &_style_dot {
+    & li {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 16px;
+      &::before {
+        content: '';
+        display: flex;
+        min-width: 6px;
+        max-width: 6px;
+        min-height: 6px;
+        max-height: 6px;
+        background: inherit;
+        border-radius: 100%;
+      }
+    }
+  }
+}
+.list {
+  &_style_number {
+    counter-reset: number-counter;
+    & li {
+      position: relative;
+      counter-increment: number-counter;
+      padding: 0 0 0 1.5em;
+      &::before {
+        content: counter(number-counter) '. ';
+        position: absolute;
+        left: 0;
+        top: 0;
+        text-color: inherit;
+      }
+    }
+  }
+}

package/dist/css/components/Loader/Loader.css

@@ -0,0 +1,42 @@
+.loader {
+  position: relative;
+  display: flex;
+  flex-flow: column wrap;
+  align-items: center;
+  &__inner {
+    position: relative;
+  }
+  &__text {
+  }
+}
+.loader {
+  &_set {
+    &_simple {
+      ^^&__inner {
+        width: auto;
+        height: auto;
+      }
+      ^^&__item {
+        width: 12px;
+        height: 12px;
+        border-radius: 100%;
+        display: inline-block;
+        margin: 4px;
+        animation: loaderFilter 1.4s infinite ease-in-out both;
+        &:first-child {
+          animation-delay: -0.32s;
+        }
+        &:nth-child(2) {
+          animation-delay: -0.16s;
+        }
+      }
+    }
+  }
+}
+@keyframes loaderFilter {
+  0%, 80%, 100% {
+    transform: scale(0);
+  } 40% {
+    transform: scale(1.0);
+  }
+}

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

@@ -0,0 +1,17 @@
+.logo {
+  display: flex;
+  flex-flow: column nowrap;
+  &__link {
+    font-size: 0;
+    &-second {
+      font-size: 0;
+    }
+  }
+}
+.logo {
+  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
+    &_align-items_$(val) {
+      align-items: $(val);
+    }
+  }
+}

package/dist/css/components/Menu/Menu.css

@@ -0,0 +1,56 @@
+.menu {
+  &__wrapper {
+    display: flex;
+  }
+}
+.menu {
+  &_columns {
+    @each $val in 1,2,3,4,5,6,7,8,9,10 {
+      &_$(val) {
+        & ^^^& {
+          display: block;
+          & ^^^&__wrapper {
+            display: grid;
+            box-decoration-break: clone;
+            grid-template-columns: repeat($(val), max-content);
+          }
+        }
+      }
+    }
+  }
+}
+.menu {
+  &_direction {
+    @each $val in row, row-reverse, column, column-reverse {
+      &_$(val) {
+        ^^&__wrapper {
+          display: flex;
+          flex-direction: $(val);
+        }
+      }
+    }
+    &_horizontal {
+      ^^&__wrapper {
+        flex-flow: row wrap;
+      }
+    }
+    &_vertical {
+      ^^&__wrapper {
+        flex-flow: column wrap;
+      }
+    }
+  }
+}
+.menu {
+  &_type {
+    @each $type in accent, primary, secondary, tertiary, surface {
+      &_$(type) {
+        @each $color in primary, secondary, tertiary, quaternary, accent {
+          & .menu-item__label {
+            color: var(--color-$(type)-text-$(color));
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/components/MenuItem/MenuItem.css

@@ -0,0 +1,56 @@
+.menu-item {
+  &__label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    align-content: center;
+  }
+}
+
+.menu-item {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      ^^&__label {
+        width: 100%;
+      }
+    }
+    &_vertical {
+      display: flex;
+      ^^&__label {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.menu-item {
+  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
+    &_justify-content_$(val) {
+      & > a {
+        justify-content: $(val);
+      }
+    }
+  }
+}
+
+.menu-item {
+  &_shape {
+    &_rounded {
+      border-radius: 12px;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+
+.menu-item {
+  &_size {
+    @each $size in xs, s, m, l, xl, xxl {
+      &_$(size) {
+        padding: var(--menu-item-size-$(size)-padding);
+      }
+    }
+  }
+}

package/dist/css/components/Notification/Notification.css

@@ -0,0 +1,18 @@
+.notification {
+  &__item {
+    padding: 12px;
+    &-text {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+  }
+}
+.notification {
+  &&_type_global {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}

package/dist/css/components/Pagination/Pagination.css

@@ -0,0 +1,80 @@
+.pagination {
+  display: flex;
+  padding: 0;
+  margin: 60px 0;
+  list-style: none;
+  gap: 16px;
+}
+.pagination {
+  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly {
+    &_justify-content_$(val) {
+      justify-content: $(val);
+    }
+  }
+}
+.pagination {
+  &__item {
+    border: solid 1px var(--paginator-item-default-border);
+    height: 40px;
+    width: 40px;
+    display: flex;
+    border-radius: 6px;
+    background: var(--paginator-item-default-fill);
+    cursor: pointer;
+    transition: var(--paginator-item-transition);
+    &:hover {
+      background: var(--paginator-item-default-fill-hover);
+    }
+    &-link {
+      width: 100%;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      @mixin text-l;
+      color: var(--paginator-item-default-text);
+    }
+    &_break {
+      display: flex;
+      ^&-link {
+        display: flex;
+        align-items: flex-end;
+      }
+    }
+  }
+}
+.pagination {
+  &__item {
+    border: solid 1px var(--paginator-item-active-border);
+    &&_state {
+      &_active {
+        ^^&-link {
+          color: var(--paginator-item-active-text);
+        }
+        background: var(--color-accent-primary);
+        &:hover {
+          background: var(--paginator-item-active-fill-hover);
+        }
+      }
+    }
+  }
+}
+.pagination {
+  &__item {
+    &&_state {
+      &_disabled {
+        border: solid 1px var(--paginator-item-disabled-border);
+        background: var(--paginator-item-disabled-fill);
+        &:hover {
+          background: var(--paginator-item-disabled-fill-hover);
+        }
+        ^^&-link {
+          color: var(--paginator-item-disabled-text);
+        }
+        & svg {
+          fill: var(--paginator-item-disabled-icon);
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Pagination/css/__item/pagination__item.css

@@ -0,0 +1,31 @@
+.pagination {
+  &__item {
+    border: solid 1px var(--paginator-item-default-border);
+    height: 40px;
+    width: 40px;
+    display: flex;
+    border-radius: 6px;
+    background: var(--paginator-item-default-fill);
+    cursor: pointer;
+    transition: var(--paginator-item-transition);
+    &:hover {
+      background: var(--paginator-item-default-fill-hover);
+    }
+    &-link {
+      width: 100%;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      @mixin text-l;
+      color: var(--paginator-item-default-text);
+    }
+    &_break {
+      display: flex;
+      ^&-link {
+        display: flex;
+        align-items: flex-end;
+      }
+    }
+  }
+}

package/dist/css/components/Pagination/css/__item/pagination__item_state_active.css

@@ -0,0 +1,16 @@
+.pagination {
+  &__item {
+    border: solid 1px var(--paginator-item-active-border);
+    &&_state {
+      &_active {
+        ^^&-link {
+          color: var(--paginator-item-active-text);
+        }
+        background: var(--color-accent-primary);
+        &:hover {
+          background: var(--paginator-item-active-fill-hover);
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Pagination/css/__item/pagination__item_state_disabled.css

@@ -0,0 +1,19 @@
+.pagination {
+  &__item {
+    &&_state {
+      &_disabled {
+        border: solid 1px var(--paginator-item-disabled-border);
+        background: var(--paginator-item-disabled-fill);
+        &:hover {
+          background: var(--paginator-item-disabled-fill-hover);
+        }
+        ^^&-link {
+          color: var(--paginator-item-disabled-text);
+        }
+        & svg {
+          fill: var(--paginator-item-disabled-icon);
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Popup/Popup.css

@@ -0,0 +1,49 @@
+.popup {
+  width: 100%;
+  min-height: 100%;
+  position: fixed;
+  display: none;
+  top: 0;
+  left: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000000;
+  &__fader {
+    z-index: -1;
+  }
+  &&_state_visible {
+    display: flex;
+  }
+}
+.popup-content {
+  width: 100%;
+  max-width: var(--popup-max-width);
+  border-radius: 8px;
+  position: relative;
+  @mixin elevation-8;
+  &__close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    cursor: pointer;
+  }
+  &__title {
+    text-align: center;
+    padding: 0 0 20px 0;
+    margin: 0;
+    @mixin h3 600;
+  }
+  &__inner {
+    width: 100%;
+  }
+  &__desc {
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    @mixin p;
+  }
+  &__button {
+    width: 100%;
+    margin: 24px 0 0 0;
+  }
+}

package/dist/css/components/Profile/Profile.css

@@ -0,0 +1,19 @@
+.profile {
+  display: flex;
+  &__avatar {
+    margin: 0 12px 0 0;
+  }
+}
+.profile {
+  &_shape {
+    &_rounded {
+      border-radius: 8px;
+      position: relative;
+      overflow: hidden;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+

package/dist/css/components/RadioButton/RadioButton.css

@@ -0,0 +1,98 @@
+.radio-button {
+  position: relative;
+  cursor: pointer;
+  font-size: 0;
+  line-height: 0;
+  display: flex;
+  min-height: 16px;
+  min-width: 16px;
+  &__button {
+    cursor: pointer;
+    appearance: none;
+    border: 0;
+    margin: 0;
+    font-size: 0;
+    line-height: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 3;
+  }
+  &__bg {
+    flex: 1;
+    display: flex;
+    z-index: 1;
+  }
+  &__mark {
+    height: calc(100% - 6px);
+    width: calc(100% - 6px);
+    position: absolute;
+    z-index: 2;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+    border-radius: 50%;
+  }
+}
+.radio-button {
+  &_shape {
+    &_rounded {
+      border-radius: 4px;
+      position: relative;
+      overflow: hidden;
+    }
+    &_circular {
+      border-radius: 50%;
+      position: relative;
+      overflow: hidden;
+    }
+  }
+}
+.radio-button {
+  &_fill {
+    &_checked {
+      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+        &_$(type) {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+            &-$(color) {
+              & ^^^^&__button {
+                &:checked {
+                  & + ^^^^^^&__bg {
+                    background: var(--color-$(type)-$(color));
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.radio-button {
+  &_fill {
+    &_checkmark {
+      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+        &_$(type) {
+          &-item {
+            @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+              &-$(color) {
+                & ^^^^^&__button {
+                  &:checked {
+                    & ~ ^^^^^^^&__mark {
+                      display: block;
+                      background: var(--color-$(type)-item-$(color));
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}