@itcase/ui 1.8.179 → 1.9.0

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

@@ -1,182 +0,0 @@
-.notification {
-}
-.notification {
-  &&_global {
-    background: none;
-    padding: 0;
-    position: fixed;
-    z-index: 1000;
-    pointer-events: none;
-    @media (--mobile) {
-      left: 0;
-      top: inherit;
-      right: 0;
-      bottom: 0;
-    }
-    &_left_bottom {
-      left: 0;
-      bottom: 0;
-      ^^&__wrapper {
-        left: 24px;
-        bottom: 56px;
-      }
-    }
-    &_right_top {
-      top: 0;
-      right: 0;
-      ^^&__wrapper {
-        top: 56px;
-        right: 48px;
-      }
-    }
-    ^&__wrapper {
-      width: 100%;
-      position: relative;
-      display: flex;
-      gap: 24px;
-      flex-flow: column nowrap;
-      align-items: flex-end;
-      @media (--mobile) {
-        align-items: center;
-        left: 0;
-        top: inherit;
-        right: 0;
-        bottom: 72px;
-      }
-    }
-  }
-}
-.notification__item {
-  width: 340px;
-  pointer-events: auto;
-  @media print {
-    display: none;
-  }
-  &-wrapper {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    ^&-title {
-      padding: 0 24px 0 0;
-    }
-    ^&-text {
-      padding: 0 24px 0 0;
-    }
-    ^&-button {
-    }
-    ^&-close {
-      position: absolute;
-      top: 0;
-      right: 0;
-    }
-  }
-}
-.notification__item {
-    &_size_xxl {
-      padding: var(--notification-item-xxl-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-xxl-gap);
-      }
-    }
-    &_size_xl {
-      padding: var(--notification-item-xl-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-xl-gap);
-      }
-    }
-    &_size_l {
-      padding: var(--notification-item-l-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-l-gap);
-      }
-    }
-    &_size_m {
-      padding: var(--notification-item-m-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-m-gap);
-      }
-    }
-    &_size_s {
-      padding: var(--notification-item-s-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-s-gap);
-      }
-    }
-    &_size_xs {
-      padding: var(--notification-item-xs-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-xs-gap);
-      }
-    }
-    &_size_xxs {
-      padding: var(--notification-item-xxs-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-xxs-gap);
-      }
-    }
-}
-.notification__item {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: notificationSkeleton 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 notificationSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-.notification__item {
-  &&_type {
-    &_float {
-      ^^&-wrapper {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-    &_toast {
-      ^^&-wrapper {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-    &_global {
-      width: 100%;
-      ^^&-wrapper {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-  }
-}
-:root {
-  --notification-item-set-float-border-radius: 10px;
-  --notification-item-set-float-padding: 20px;
-  --notification-item-set-form-padding: 0;
-  --notification-item-set-form-border-radius: 0;
-  --notification-item-set-form-gap: 0;
-  --notification-item-set-form-wrapper-padding: 0;
-  --notification-item-set-form-wrapper-gap: 0;
-  --notification-item-set-top-padding: 10px;
-  --notification-item-set-toast-border-radius: 0;
-  --notification-item-set-toast-padding: 0;
-
-  --notification-item-m-padding: 12px;
-  --notification-item-s-padding: 12px;
-  --notification-item-m-gap: 8px;
-  --notification-item-s-gap: 8px;
-}

package/dist/css/components/Notification/css/__item/notification__item.css

@@ -1,26 +0,0 @@
-.notification__item {
-  width: 340px;
-  pointer-events: auto;
-  @media print {
-    display: none;
-  }
-  &-wrapper {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    ^&-title {
-      padding: 0 24px 0 0;
-    }
-    ^&-text {
-      padding: 0 24px 0 0;
-    }
-    ^&-button {
-    }
-    ^&-close {
-      position: absolute;
-      top: 0;
-      right: 0;
-    }
-  }
-}

package/dist/css/components/Notification/css/__item/notification__item_size.css

@@ -1,44 +0,0 @@
-.notification__item {
-    &_size_xxl {
-      padding: var(--notification-item-xxl-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-xxl-gap);
-      }
-    }
-    &_size_xl {
-      padding: var(--notification-item-xl-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-xl-gap);
-      }
-    }
-    &_size_l {
-      padding: var(--notification-item-l-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-l-gap);
-      }
-    }
-    &_size_m {
-      padding: var(--notification-item-m-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-m-gap);
-      }
-    }
-    &_size_s {
-      padding: var(--notification-item-s-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-s-gap);
-      }
-    }
-    &_size_xs {
-      padding: var(--notification-item-xs-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-xs-gap);
-      }
-    }
-    &_size_xxs {
-      padding: var(--notification-item-xxs-padding);
-      ^&-wrapper {
-        gap: var(--notification-item-xxs-gap);
-      }
-    }
-}

package/dist/css/components/Notification/css/__item/notification__item_skeleton.css

@@ -1,25 +0,0 @@
-.notification__item {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: notificationSkeleton 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 notificationSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}

package/dist/css/components/Notification/css/__item/notification__item_type.css

@@ -1,23 +0,0 @@
-.notification__item {
-  &&_type {
-    &_float {
-      ^^&-wrapper {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-    &_toast {
-      ^^&-wrapper {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-    &_global {
-      width: 100%;
-      ^^&-wrapper {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-  }
-}

package/dist/css/components/Overlay/Overlay.css

@@ -1,42 +0,0 @@
-.overlay {
-  width: 100%;
-  height: 100%;
-  background: var(--overlay-fill);
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 1;
-  backdrop-filter: blur(var(--overlay-blur));
-}
-.overlay {
-  &&_state {
-    &_visible {
-      position: fixed;
-      visibility: visible !important;
-      animation-name: overlayFadeIn;
-    }
-    &_hidden {
-      animation-name: overlayFaderOut;
-    }
-  }
-}
-@keyframes overlayFadeIn {
-  from {
-    opacity: 0%;
-  }
-  to {
-    opacity: 100%;
-  }
-}
-@keyframes overlayFaderOut {
-  from {
-    opacity: 100%;
-  }
-  to {
-    opacity: 0%;
-  }
-}
-:root {
-  --overlay-fill: hsla(0, 0%, 0%, 0.4);
-  --overlay-blur: 20px;
-}

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

@@ -1,279 +0,0 @@
-.pagination {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  @media (--mobile) {
-    flex-direction: column;
-  }
-  &__container {
-    padding: 0;
-    display: flex;
-    list-style: none;
-    gap: 12px;
-  }
-  &__count {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    &-text {
-      display: block;
-    }
-  }
-  &__input {
-    position: relative;
-    display: flex;
-    transition: var(--paginator-input-transition);
-    justify-content: center;
-    align-items: center;
-  }
-  &__dropdown {
-  }
-}
-.pagination {
-    &_size_xxl {
-      ^&__input {
-        padding: var(--pagination-input-size-xxl-padding);
-        gap: var(--pagination-input-size-xxl-gap);
-      }
-    }
-    &_size_xl {
-      ^&__input {
-        padding: var(--pagination-input-size-xl-padding);
-        gap: var(--pagination-input-size-xl-gap);
-      }
-    }
-    &_size_l {
-      ^&__input {
-        padding: var(--pagination-input-size-l-padding);
-        gap: var(--pagination-input-size-l-gap);
-      }
-    }
-    &_size_m {
-      ^&__input {
-        padding: var(--pagination-input-size-m-padding);
-        gap: var(--pagination-input-size-m-gap);
-      }
-    }
-    &_size_s {
-      ^&__input {
-        padding: var(--pagination-input-size-s-padding);
-        gap: var(--pagination-input-size-s-gap);
-      }
-    }
-    &_size_xs {
-      ^&__input {
-        padding: var(--pagination-input-size-xs-padding);
-        gap: var(--pagination-input-size-xs-gap);
-      }
-    }
-    &_size_xxs {
-      ^&__input {
-        padding: var(--pagination-input-size-xxs-padding);
-        gap: var(--pagination-input-size-xxs-gap);
-      }
-    }
-}
-.pagination {
-  &__container {
-      &_justify-content_flex-start {
-        justify-content: flex-start;
-      }
-      &_justify-content_flex-end {
-        justify-content: flex-end;
-      }
-      &_justify-content_center {
-        justify-content: center;
-      }
-      &_justify-content_space-between {
-        justify-content: space-between;
-      }
-      &_justify-content_space-around {
-        justify-content: space-around;
-      }
-      &_justify-content_space-evenly {
-        justify-content: space-evenly;
-      }
-  }
-}
-.pagination {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: paginationSkeleton 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 paginationSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-.pagination {
-  &__container {
-    margin: var(--paginator-margin);
-    ^&__item {
-      border: var(
-        --paginator-item-border,
-        solid 1px var(--paginator-item-default-border)
-      );
-      border-radius: var(--paginator-item-border-radius);
-      display: flex;
-      transition: var(--paginator-item-transition);
-      cursor: pointer;
-      &_break {
-        display: flex;
-        ^&-link {
-          display: flex;
-          align-items: flex-end;
-        }
-      }
-      &-link {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &_size {
-            &_xs {
-              @mixin text-xs;
-            }
-            &_s {
-              @mixin text-s;
-            }
-            &_m {
-              @mixin text-m;
-            }
-            &_l {
-              @mixin text-l;
-            }
-        }
-      }
-    }
-  }
-}
-/* .pagination { */
-/*  &__item { */
-/*    border: solid 1px var(--paginator-item-active-border); */
-/*    &&_state { */
-/*      &_active { */
-/*        background: var(--paginator-item-active-fill); */
-/*        &:hover { */
-/*          background: var(--paginator-item-active-fill-hover); */
-/*        } */
-/*        ^^&-link { */
-/*          color: var(--paginator-item-active-text); */
-/*        } */
-/*      } */
-/*    } */
-/*  } */
-/* } */
-.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);
-        }
-        display: var(--pagination-item-state-disabled-display);
-      }
-    }
-  }
-}
-.pagination__item {
-    &_size_l {
-      width: var(--paginator-item-l-width) !important;
-      height: var(--paginator-item-l-height) !important;
-    }
-    &_size_m {
-      width: var(--paginator-item-m-width) !important;
-      height: var(--paginator-item-m-height) !important;
-    }
-    &_size_s {
-      width: var(--paginator-item-s-width) !important;
-      height: var(--paginator-item-s-height) !important;
-    }
-    &_size_xs {
-      width: var(--paginator-item-xs-width) !important;
-      height: var(--paginator-item-xs-height) !important;
-    }
-}
-:root {
-  --paginator-margin: 0;
-
-  --paginator-item-l-width: 40px;
-  --paginator-item-l-height: 40px;
-
-  --paginator-item-m-width: 32px;
-  --paginator-item-m-height: 32px;
-
-  --paginator-item-s-width: 24px;
-  --paginator-item-s-height: 24px;
-
-  --paginator-item-xs-width: 20px;
-  --paginator-item-xs-height: 20px;
-
-  --paginator-item-l-padding: 0 12px;
-  --paginator-item-m-padding: 0 12px;
-  --paginator-item-s-padding: 0 8px;
-  --paginator-item-xs-padding: 0 6px;
-
-  --paginator-item-border: none;
-  --paginator-item-border-radius: 50%;
-  --pagination-input-color: none;
-  --paginator-item-default-border: none;
-  --paginator-item-active-border: none;
-  --paginator-item-active-background: none;
-  --paginator-item-disabled-border: none;
-
-  --pagination-item-state-disabled-display: none;
-
-  --paginator-item-transition: all 0.2s ease 0s;
-
-  --paginator-item-default-fill: var(--color-surface-fill-primary);
-  --paginator-item-default-fill-hover: var(--color-surface-fill-hover);
-  --paginator-item-default-text: var(--color-surface-text-primary);
-
-  --paginator-item-active-fill: var(--color-accent-fill-primary);
-  --paginator-item-active-fill-hover: var(--color-accent-fill-primary);
-  --paginator-item-active-text: var(--color-accent-text-primary);
-
-  --paginator-item-disabled-fill: none;
-  --paginator-item-disabled-fill-hover: none;
-  --paginator-item-disabled-text: var(--color-surface-text-primary);
-  --paginator-item-disabled-icon: var(--color-surface-item-disabled);
-
-  --paginator-input-transition: all 0.2s ease 0s;
-
-  --pagination-input-size-l-padding: 10px 12px;
-  --pagination-input-size-l-gap: 4px;
-
-  --pagination-input-size-m-padding: 7px 12px;
-  --pagination-input-size-m-gap: 4px;
-
-  --pagination-input-size-s-padding: 4px 8px;
-  --pagination-input-size-s-gap: 2px;
-
-  --pagination-input-size-xs-padding: 2px 6px;
-  --pagination-input-size-xs-gap: 2px;
-}

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

@@ -1,44 +0,0 @@
-.pagination {
-  &__container {
-    margin: var(--paginator-margin);
-    ^&__item {
-      border: var(
-        --paginator-item-border,
-        solid 1px var(--paginator-item-default-border)
-      );
-      border-radius: var(--paginator-item-border-radius);
-      display: flex;
-      transition: var(--paginator-item-transition);
-      cursor: pointer;
-      &_break {
-        display: flex;
-        ^&-link {
-          display: flex;
-          align-items: flex-end;
-        }
-      }
-      &-link {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &_size {
-            &_xs {
-              @mixin text-xs;
-            }
-            &_s {
-              @mixin text-s;
-            }
-            &_m {
-              @mixin text-m;
-            }
-            &_l {
-              @mixin text-l;
-            }
-        }
-      }
-    }
-  }
-}

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

@@ -1,18 +0,0 @@
-.pagination__item {
-    &_size_l {
-      width: var(--paginator-item-l-width) !important;
-      height: var(--paginator-item-l-height) !important;
-    }
-    &_size_m {
-      width: var(--paginator-item-m-width) !important;
-      height: var(--paginator-item-m-height) !important;
-    }
-    &_size_s {
-      width: var(--paginator-item-s-width) !important;
-      height: var(--paginator-item-s-height) !important;
-    }
-    &_size_xs {
-      width: var(--paginator-item-xs-width) !important;
-      height: var(--paginator-item-xs-height) !important;
-    }
-}

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

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