@itcase/ui 1.8.179 → 1.9.1

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

@@ -1,515 +0,0 @@
-.list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  &__item {
-    padding: 0;
-    margin: 0;
-  }
-}
-.list {
-  &_bullet {
-    &-fill {
-        &_accent {
-          &-item {
-              &-primary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-accent-text-primary);
-                  }
-                }
-              }
-              &-secondary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-accent-text-secondary);
-                  }
-                }
-              }
-              &-tertiary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-accent-text-tertiary);
-                  }
-                }
-              }
-              &-quaternary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-accent-text-quaternary);
-                  }
-                }
-              }
-              &-accent {
-                & .list__item {
-                  &::before {
-                    background: var(--color-accent-text-accent);
-                  }
-                }
-              }
-          }
-        }
-        &_primary {
-          &-item {
-              &-primary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-primary-text-primary);
-                  }
-                }
-              }
-              &-secondary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-primary-text-secondary);
-                  }
-                }
-              }
-              &-tertiary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-primary-text-tertiary);
-                  }
-                }
-              }
-              &-quaternary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-primary-text-quaternary);
-                  }
-                }
-              }
-              &-accent {
-                & .list__item {
-                  &::before {
-                    background: var(--color-primary-text-accent);
-                  }
-                }
-              }
-          }
-        }
-        &_secondary {
-          &-item {
-              &-primary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-secondary-text-primary);
-                  }
-                }
-              }
-              &-secondary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-secondary-text-secondary);
-                  }
-                }
-              }
-              &-tertiary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-secondary-text-tertiary);
-                  }
-                }
-              }
-              &-quaternary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-secondary-text-quaternary);
-                  }
-                }
-              }
-              &-accent {
-                & .list__item {
-                  &::before {
-                    background: var(--color-secondary-text-accent);
-                  }
-                }
-              }
-          }
-        }
-        &_tertiary {
-          &-item {
-              &-primary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-tertiary-text-primary);
-                  }
-                }
-              }
-              &-secondary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-tertiary-text-secondary);
-                  }
-                }
-              }
-              &-tertiary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-tertiary-text-tertiary);
-                  }
-                }
-              }
-              &-quaternary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-tertiary-text-quaternary);
-                  }
-                }
-              }
-              &-accent {
-                & .list__item {
-                  &::before {
-                    background: var(--color-tertiary-text-accent);
-                  }
-                }
-              }
-          }
-        }
-        &_surface {
-          &-item {
-              &-primary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-surface-text-primary);
-                  }
-                }
-              }
-              &-secondary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-surface-text-secondary);
-                  }
-                }
-              }
-              &-tertiary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-surface-text-tertiary);
-                  }
-                }
-              }
-              &-quaternary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-surface-text-quaternary);
-                  }
-                }
-              }
-              &-accent {
-                & .list__item {
-                  &::before {
-                    background: var(--color-surface-text-accent);
-                  }
-                }
-              }
-          }
-        }
-        &_success {
-          &-item {
-              &-primary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-success-text-primary);
-                  }
-                }
-              }
-              &-secondary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-success-text-secondary);
-                  }
-                }
-              }
-              &-tertiary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-success-text-tertiary);
-                  }
-                }
-              }
-              &-quaternary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-success-text-quaternary);
-                  }
-                }
-              }
-              &-accent {
-                & .list__item {
-                  &::before {
-                    background: var(--color-success-text-accent);
-                  }
-                }
-              }
-          }
-        }
-        &_error {
-          &-item {
-              &-primary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-error-text-primary);
-                  }
-                }
-              }
-              &-secondary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-error-text-secondary);
-                  }
-                }
-              }
-              &-tertiary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-error-text-tertiary);
-                  }
-                }
-              }
-              &-quaternary {
-                & .list__item {
-                  &::before {
-                    background: var(--color-error-text-quaternary);
-                  }
-                }
-              }
-              &-accent {
-                & .list__item {
-                  &::before {
-                    background: var(--color-error-text-accent);
-                  }
-                }
-              }
-          }
-        }
-    }
-  }
-}
-.list {
-  &_bullet {
-      &-size_h1 {
-        @mixin h1;
-      }
-      &-size_h2 {
-        @mixin h2;
-      }
-      &-size_h3 {
-        @mixin h3;
-      }
-      &-size_h4 {
-        @mixin h4;
-      }
-      &-size_h5 {
-        @mixin h5;
-      }
-      &-size_h6 {
-        @mixin h6;
-      }
-  }
-}
-.list {
-  &_bullet {
-    &-text-color {
-        &_accent {
-          &-text {
-              &-primary {
-                color: var(--color-accent-text-primary);
-              }
-              &-secondary {
-                color: var(--color-accent-text-secondary);
-              }
-              &-tertiary {
-                color: var(--color-accent-text-tertiary);
-              }
-              &-quaternary {
-                color: var(--color-accent-text-quaternary);
-              }
-              &-accent {
-                color: var(--color-accent-text-accent);
-              }
-          }
-        }
-        &_primary {
-          &-text {
-              &-primary {
-                color: var(--color-primary-text-primary);
-              }
-              &-secondary {
-                color: var(--color-primary-text-secondary);
-              }
-              &-tertiary {
-                color: var(--color-primary-text-tertiary);
-              }
-              &-quaternary {
-                color: var(--color-primary-text-quaternary);
-              }
-              &-accent {
-                color: var(--color-primary-text-accent);
-              }
-          }
-        }
-        &_secondary {
-          &-text {
-              &-primary {
-                color: var(--color-secondary-text-primary);
-              }
-              &-secondary {
-                color: var(--color-secondary-text-secondary);
-              }
-              &-tertiary {
-                color: var(--color-secondary-text-tertiary);
-              }
-              &-quaternary {
-                color: var(--color-secondary-text-quaternary);
-              }
-              &-accent {
-                color: var(--color-secondary-text-accent);
-              }
-          }
-        }
-        &_tertiary {
-          &-text {
-              &-primary {
-                color: var(--color-tertiary-text-primary);
-              }
-              &-secondary {
-                color: var(--color-tertiary-text-secondary);
-              }
-              &-tertiary {
-                color: var(--color-tertiary-text-tertiary);
-              }
-              &-quaternary {
-                color: var(--color-tertiary-text-quaternary);
-              }
-              &-accent {
-                color: var(--color-tertiary-text-accent);
-              }
-          }
-        }
-        &_surface {
-          &-text {
-              &-primary {
-                color: var(--color-surface-text-primary);
-              }
-              &-secondary {
-                color: var(--color-surface-text-secondary);
-              }
-              &-tertiary {
-                color: var(--color-surface-text-tertiary);
-              }
-              &-quaternary {
-                color: var(--color-surface-text-quaternary);
-              }
-              &-accent {
-                color: var(--color-surface-text-accent);
-              }
-          }
-        }
-        &_success {
-          &-text {
-              &-primary {
-                color: var(--color-success-text-primary);
-              }
-              &-secondary {
-                color: var(--color-success-text-secondary);
-              }
-              &-tertiary {
-                color: var(--color-success-text-tertiary);
-              }
-              &-quaternary {
-                color: var(--color-success-text-quaternary);
-              }
-              &-accent {
-                color: var(--color-success-text-accent);
-              }
-          }
-        }
-        &_error {
-          &-text {
-              &-primary {
-                color: var(--color-error-text-primary);
-              }
-              &-secondary {
-                color: var(--color-error-text-secondary);
-              }
-              &-tertiary {
-                color: var(--color-error-text-tertiary);
-              }
-              &-quaternary {
-                color: var(--color-error-text-quaternary);
-              }
-              &-accent {
-                color: var(--color-error-text-accent);
-              }
-          }
-        }
-    }
-  }
-}
-.list {
-  &_direction {
-    &_horizontal {
-      display: flex;
-      flex-direction: row;
-    }
-    &_vertical {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-    &_direction_row {
-      display: flex;
-      flex-direction: row;
-    }
-    &_direction_row-reverse {
-      display: flex;
-      flex-direction: row-reverse;
-    }
-    &_direction_column {
-      display: flex;
-      flex-direction: column;
-    }
-    &_direction_column-reverse {
-      display: flex;
-      flex-direction: column-reverse;
-    }
-}
-.list {
-  &_style_dot {
-    & li {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
-      gap: 16px;
-      &::before {
-        min-width: 6px;
-        min-height: 6px;
-        max-width: 6px;
-        max-height: 6px;
-        background: inherit;
-        border-radius: 100%;
-        content: '';
-        display: flex;
-      }
-    }
-  }
-}
-.list {
-  &_style_number {
-    badge-reset: number-badge;
-    & li {
-      position: relative;
-      badge-increment: number-badge;
-      padding: 0 0 0 1.5em;
-      &::before {
-        content: badge(number-badge) '. ';
-        position: absolute;
-        left: 0;
-        top: 0;
-        text-color: inherit;
-      }
-    }
-  }
-}

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

@@ -1,212 +0,0 @@
-.loader {
-  position: relative;
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: center;
-  align-items: center;
-  &__inner {
-    position: relative;
-    display: flex;
-  }
-  &__text {
-  }
-}
-.loader {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: loaderSkeleton 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 loaderSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-.loader {
-  &_type {
-    &_simple {
-      ^^&__inner {
-        width: auto;
-        height: auto;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        display: flex;
-        transform: translate(-50%, -50%);
-      }
-      ^^&__item {
-        border-radius: 100%;
-        display: inline-block;
-        border-radius: 50%;
-        animation: loaderSimple 1.4s infinite ease-in-out both;
-        &:first-child {
-          animation-delay: -0.32s;
-        }
-        &:nth-child(2) {
-          animation-delay: -0.16s;
-        }
-      }
-    }
-  }
-}
-@keyframes loaderSimple {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
-  }
-}
-.loader {
-  &_type {
-    &_hug {
-      ^^&__inner {
-        width: auto;
-        height: auto;
-        position: absolute;
-        display: flex;
-        left: 12px;
-        top: 50%;
-        transform: translate(0%, -50%);
-      }
-      ^^&__item {
-        border-radius: 50%;
-        display: inline-block;
-        animation: loaderHug 1.4s infinite ease-in-out both;
-        &:first-child {
-          animation-delay: -0.32s;
-        }
-        &:nth-child(2) {
-          animation-delay: -0.16s;
-        }
-      }
-    }
-  }
-}
-@keyframes loaderHug {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
-  }
-}
-.loader {
-    &_size_xxl {
-      min-width: var(--loader-xxl-min-width);
-      min-height: var(--loader-xxl-min-height);
-      padding: var(--loader-xxl-padding);
-      ^&__inner {
-        gap: var(--loader-xxl-gap);
-        ^^&__item {
-          width: var(--loader-xxl-item);
-          height: var(--loader-xxl-item);
-        }
-      }
-    }
-    &_size_xl {
-      min-width: var(--loader-xl-min-width);
-      min-height: var(--loader-xl-min-height);
-      padding: var(--loader-xl-padding);
-      ^&__inner {
-        gap: var(--loader-xl-gap);
-        ^^&__item {
-          width: var(--loader-xl-item);
-          height: var(--loader-xl-item);
-        }
-      }
-    }
-    &_size_l {
-      min-width: var(--loader-l-min-width);
-      min-height: var(--loader-l-min-height);
-      padding: var(--loader-l-padding);
-      ^&__inner {
-        gap: var(--loader-l-gap);
-        ^^&__item {
-          width: var(--loader-l-item);
-          height: var(--loader-l-item);
-        }
-      }
-    }
-    &_size_m {
-      min-width: var(--loader-m-min-width);
-      min-height: var(--loader-m-min-height);
-      padding: var(--loader-m-padding);
-      ^&__inner {
-        gap: var(--loader-m-gap);
-        ^^&__item {
-          width: var(--loader-m-item);
-          height: var(--loader-m-item);
-        }
-      }
-    }
-    &_size_s {
-      min-width: var(--loader-s-min-width);
-      min-height: var(--loader-s-min-height);
-      padding: var(--loader-s-padding);
-      ^&__inner {
-        gap: var(--loader-s-gap);
-        ^^&__item {
-          width: var(--loader-s-item);
-          height: var(--loader-s-item);
-        }
-      }
-    }
-    &_size_xs {
-      min-width: var(--loader-xs-min-width);
-      min-height: var(--loader-xs-min-height);
-      padding: var(--loader-xs-padding);
-      ^&__inner {
-        gap: var(--loader-xs-gap);
-        ^^&__item {
-          width: var(--loader-xs-item);
-          height: var(--loader-xs-item);
-        }
-      }
-    }
-    &_size_xxs {
-      min-width: var(--loader-xxs-min-width);
-      min-height: var(--loader-xxs-min-height);
-      padding: var(--loader-xxs-padding);
-      ^&__inner {
-        gap: var(--loader-xxs-gap);
-        ^^&__item {
-          width: var(--loader-xxs-item);
-          height: var(--loader-xxs-item);
-        }
-      }
-    }
-}
-:root {
-  --loader-l-min-width: 112px;
-  --loader-l-min-height: 56px;
-  --loader-l-item: 16px;
-  --loader-l-gap: 16px;
-
-  --loader-m-min-width: 88px;
-  --loader-m-min-height: 40px;
-  --loader-m-item: 12px;
-  --loader-m-gap: 12px;
-
-  --loader-s-min-width: 60px;
-  --loader-s-min-height: 24px;
-  --loader-s-item: 6px;
-  --loader-s-gap: 8px;
-}