@itcase/ui 1.8.179 → 1.9.0

package/dist/css/components/Checkmark/Checkmark.css

@@ -1,103 +0,0 @@
-.checkmark {
-  border-radius: 100px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  &__icon {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-.checkmark {
-  &_size {
-      &_xxl {
-        width: var(--checkmark-xxl-width);
-        height: var(--checkmark-xxl-height);
-        min-width: var(--checkmark-xxl-width);
-        min-height: var(--checkmark-xxl-height);
-        & svg {
-          transform: scale(1.2);
-        }
-      }
-      &_xl {
-        width: var(--checkmark-xl-width);
-        height: var(--checkmark-xl-height);
-        min-width: var(--checkmark-xl-width);
-        min-height: var(--checkmark-xl-height);
-        & svg {
-          transform: scale(1);
-        }
-      }
-      &_l {
-        width: var(--checkmark-l-width);
-        height: var(--checkmark-l-height);
-        min-width: var(--checkmark-l-width);
-        min-height: var(--checkmark-l-height);
-        & svg {
-          transform: scale(0.8);
-        }
-      }
-      &_m {
-        width: var(--checkmark-m-width);
-        height: var(--checkmark-m-height);
-        min-width: var(--checkmark-m-width);
-        min-height: var(--checkmark-m-height);
-        & svg {
-          transform: scale(0.7);
-        }
-      }
-      &_s {
-        width: var(--checkmark-s-width);
-        height: var(--checkmark-s-height);
-        min-width: var(--checkmark-s-width);
-        min-height: var(--checkmark-s-height);
-        & svg {
-          transform: scale(0.7);
-        }
-      }
-      &_xs {
-        width: var(--checkmark-xs-width);
-        height: var(--checkmark-xs-height);
-        min-width: var(--checkmark-xs-width);
-        min-height: var(--checkmark-xs-height);
-        & svg {
-          transform: scale(0.7);
-        }
-      }
-      &_xxs {
-        width: var(--checkmark-xxs-width);
-        height: var(--checkmark-xxs-height);
-        min-width: var(--checkmark-xxs-width);
-        min-height: var(--checkmark-xxs-height);
-        & svg {
-          transform: scale(0.8);
-        }
-      }
-  }
-}
-:root {
-  --checkmark-xxl-width: 64px;
-  --checkmark-xxl-height: 64px;
-
-  --checkmark-xl-width: 56px;
-  --checkmark-xl-height: 56px;
-
-  --checkmark-l-width: 48px;
-  --checkmark-l-height: 48px;
-
-  --checkmark-m-width: 40px;
-  --checkmark-m-height: 40px;
-
-  --checkmark-s-width: 32px;
-  --checkmark-s-height: 32px;
-
-  --checkmark-xs-width: 24px;
-  --checkmark-xs-height: 24px;
-
-  --checkmark-xxs-width: 16px;
-  --checkmark-xxs-height: 16px;
-}

package/dist/css/components/Chips/Chips.css

@@ -1,139 +0,0 @@
-.chips {
-  display: inline-flex;
-  &__inner {
-    display: flex;
-    align-items: center;
-  }
-}
-.chips {
-    &_size_xxl {
-      ^&__inner {
-        min-width: var(--chips-xxl-min-width);
-        min-height: var(--chips-xxl-min-height);
-        padding: var(--chips-xxl-padding);
-        gap: var(--chips-xxl-gap);
-      }
-    }
-    &_size_xl {
-      ^&__inner {
-        min-width: var(--chips-xl-min-width);
-        min-height: var(--chips-xl-min-height);
-        padding: var(--chips-xl-padding);
-        gap: var(--chips-xl-gap);
-      }
-    }
-    &_size_l {
-      ^&__inner {
-        min-width: var(--chips-l-min-width);
-        min-height: var(--chips-l-min-height);
-        padding: var(--chips-l-padding);
-        gap: var(--chips-l-gap);
-      }
-    }
-    &_size_m {
-      ^&__inner {
-        min-width: var(--chips-m-min-width);
-        min-height: var(--chips-m-min-height);
-        padding: var(--chips-m-padding);
-        gap: var(--chips-m-gap);
-      }
-    }
-    &_size_s {
-      ^&__inner {
-        min-width: var(--chips-s-min-width);
-        min-height: var(--chips-s-min-height);
-        padding: var(--chips-s-padding);
-        gap: var(--chips-s-gap);
-      }
-    }
-    &_size_xs {
-      ^&__inner {
-        min-width: var(--chips-xs-min-width);
-        min-height: var(--chips-xs-min-height);
-        padding: var(--chips-xs-padding);
-        gap: var(--chips-xs-gap);
-      }
-    }
-    &_size_xxs {
-      ^&__inner {
-        min-width: var(--chips-xxs-min-width);
-        min-height: var(--chips-xxs-min-height);
-        padding: var(--chips-xxs-padding);
-        gap: var(--chips-xxs-gap);
-      }
-    }
-}
-.chips {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: chipsSkeleton 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 chipsSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-:root {
-  /* Size XXL */
-  --chips-xxl-gap: 4px;
-  --chips-xxl-padding: 12px 16px;
-  --chips-xxl-min-width: 48px;
-  --chips-xxl-min-height: 48px;
-  --chips-xxl-shape-rounded: 8px;
-
-  /* Size XL */
-  --chips-xl-gap: 4px;
-  --chips-xl-padding: 10px 16px;
-  --chips-xl-min-width: 40px;
-  --chips-xl-min-height: 40px;
-  --chips-xl-shape-rounded: 8px;
-
-  /* Size L */
-  --chips-l-gap: 4px;
-  --chips-l-padding: 6px 12px;
-  --chips-l-min-width: 32px;
-  --chips-l-min-height: 32px;
-  --chips-l-shape-rounded: 8px;
-
-  /* Size M */
-  --chips-m-gap: 4px;
-  --chips-m-padding: 6px 10px;
-  --chips-m-min-width: 28px;
-  --chips-m-min-height: 28px;
-  --chips-m-shape-rounded: 8px;
-
-  /* Size S */
-  --chips-s-gap: 4px;
-  --chips-s-padding: 4px 8px;
-  --chips-s-min-width: 24px;
-  --chips-s-min-height: 24px;
-  --chips-s-shape-rounded: 8px;
-
-  /* Size XS */
-  --chips-xs-gap: 4px;
-  --chips-xs-padding: 2px 6px;
-  --chips-xs-min-width: 20px;
-  --chips-xs-min-height: 20px;
-  --chips-xs-shape-rounded: 8px;
-
-  /* Size XXS */
-  --chips-xxs-gap: 4px;
-  --chips-xxs-padding: 2px 4px;
-  --chips-xxs-min-width: 16px;
-  --chips-xxs-min-height: 16px;
-  --chips-xxs-shape-rounded: 8px;
-}

package/dist/css/components/Choice/Choice.css

@@ -1,288 +0,0 @@
-.choice__item {
-  margin: 2px 0;
-  position: relative;
-  display: flex;
-  /*
-  &:not(:last-child) {
-    border-right: var(--chioce-item-border-right);
-  }
-  */
-  & input {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    border: 0;
-    position: absolute;
-    inset: 0 0 0 0;
-    z-index: 2;
-    opacity: 0%;
-    cursor: pointer;
-  }
-  &-label {
-    width: 100%;
-    text-align: center;
-    position: relative;
-    justify-content: center;
-    display: flex;
-    align-items: center;
-    z-index: 3;
-    transition: color 0.5s ease;
-    cursor: pointer;
-  }
-}
-.choice__item {
-  &_shape {
-    &_rounded {
-      border-radius: var(--choice-item-shape-rounded);
-      overflow: hidden;
-    }
-    &_circular {
-      border-radius: 50%;
-    }
-  }
-}
-.choice__item {
-  &_size {
-      &_xxl {
-        min-height: var(--choice-item-xxl-min-height);
-        padding: var(--choice-item-xxl-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-xxl-width);
-          height: var(--choice-item-icon-xxl-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-xxl-gap);
-        }
-      }
-      &_xl {
-        min-height: var(--choice-item-xl-min-height);
-        padding: var(--choice-item-xl-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-xl-width);
-          height: var(--choice-item-icon-xl-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-xl-gap);
-        }
-      }
-      &_l {
-        min-height: var(--choice-item-l-min-height);
-        padding: var(--choice-item-l-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-l-width);
-          height: var(--choice-item-icon-l-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-l-gap);
-        }
-      }
-      &_m {
-        min-height: var(--choice-item-m-min-height);
-        padding: var(--choice-item-m-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-m-width);
-          height: var(--choice-item-icon-m-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-m-gap);
-        }
-      }
-      &_s {
-        min-height: var(--choice-item-s-min-height);
-        padding: var(--choice-item-s-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-s-width);
-          height: var(--choice-item-icon-s-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-s-gap);
-        }
-      }
-      &_xs {
-        min-height: var(--choice-item-xs-min-height);
-        padding: var(--choice-item-xs-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-xs-width);
-          height: var(--choice-item-icon-xs-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-xs-gap);
-        }
-      }
-      &_xxs {
-        min-height: var(--choice-item-xxs-min-height);
-        padding: var(--choice-item-xxs-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-xxs-width);
-          height: var(--choice-item-icon-xxs-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-xxs-gap);
-        }
-      }
-  }
-}
-.choice {
-  padding: 0 2px;
-  position: relative;
-  display: flex;
-  &__before {
-    margin: 2px 0;
-    display: flex;
-    align-items: center;
-  }
-  &__after {
-    margin: 2px 0;
-    display: flex;
-    align-items: center;
-  }
-}
-.choice {
-  &_shape {
-    &_rounded {
-      border-radius: var(--choice-shape-rounded);
-    }
-    &_circular {
-      border-radius: 50%;
-    }
-  }
-}
-.choice {
-  &_size {
-    /* @each $size in xxl, xl, l, m, s, xs, xxs {
-      &_$(size) {
-        gap: var(--choice-size-$(size)-row-gap)
-          var(--choice-size-$(size)-column-gap);
-      }
-    } */
-  }
-}
-.choice {
-  &_wrap {
-    &_wrap {
-      flex-wrap: wrap;
-      &^^&_size {
-          &_xxl {
-            gap: var(--choice-size-xxl-row-gap)
-              var(--choice-size-xxl-column-gap);
-            & .choice__item {
-              margin: 0;
-            }
-          }
-          &_xl {
-            gap: var(--choice-size-xl-row-gap)
-              var(--choice-size-xl-column-gap);
-            & .choice__item {
-              margin: 0;
-            }
-          }
-          &_l {
-            gap: var(--choice-size-l-row-gap)
-              var(--choice-size-l-column-gap);
-            & .choice__item {
-              margin: 0;
-            }
-          }
-          &_m {
-            gap: var(--choice-size-m-row-gap)
-              var(--choice-size-m-column-gap);
-            & .choice__item {
-              margin: 0;
-            }
-          }
-          &_s {
-            gap: var(--choice-size-s-row-gap)
-              var(--choice-size-s-column-gap);
-            & .choice__item {
-              margin: 0;
-            }
-          }
-          &_xs {
-            gap: var(--choice-size-xs-row-gap)
-              var(--choice-size-xs-column-gap);
-            & .choice__item {
-              margin: 0;
-            }
-          }
-          &_xxs {
-            gap: var(--choice-size-xxs-row-gap)
-              var(--choice-size-xxs-column-gap);
-            & .choice__item {
-              margin: 0;
-            }
-          }
-      }
-    }
-    &_nowrap {
-      flex-wrap: nowrap;
-    }
-    &_wrap-reverse {
-      flex-wrap: wrap-reverse;
-    }
-  }
-}
-.choice {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: choiceSkeleton 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 choiceSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-:root {
-  --choice-size-l-height: 48px;
-  --choice-size-l-min-height: 48px;
-  --choice-size-l-row-gap: 12px;
-  --choice-size-l-column-gap: 12px;
-
-  --choice-size-m-row-gap: 12px;
-  --choice-size-m-column-gap: 12px;
-  --choice-size-m-height: 40px;
-  --choice-size-m-min-height: 40px;
-
-  --choice-size-s-height: 28px;
-  --choice-size-s-min-height: 28px;
-  --choice-size-s-row-gap: 12px;
-  --choice-size-s-column-gap: 12px;
-
-  --choice-item-l-padding: 0px 12px;
-  --choice-item-l-min-height: 44px;
-  --choice-item-l-gap: 8px;
-  --choice-item-icon-l-width: 44px;
-  --choice-item-icon-l-height: 44px;
-
-  --choice-item-m-padding: 0px 12px;
-  --choice-item-m-min-height: 36px;
-  --choice-item-m-gap: 8px;
-  --choice-item-icon-m-width: 36px;
-  --choice-item-icon-m-height: 36px;
-
-  --choice-item-s-padding: 0px 6px;
-  --choice-item-s-min-height: 24px;
-  --choice-item-s-gap: 8px;
-  --choice-item-icon-s-width: 24px;
-  --choice-item-icon-s-height: 24px;
-}

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -1,32 +0,0 @@
-.choice__item {
-  margin: 2px 0;
-  position: relative;
-  display: flex;
-  /*
-  &:not(:last-child) {
-    border-right: var(--chioce-item-border-right);
-  }
-  */
-  & input {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    border: 0;
-    position: absolute;
-    inset: 0 0 0 0;
-    z-index: 2;
-    opacity: 0%;
-    cursor: pointer;
-  }
-  &-label {
-    width: 100%;
-    text-align: center;
-    position: relative;
-    justify-content: center;
-    display: flex;
-    align-items: center;
-    z-index: 3;
-    transition: color 0.5s ease;
-    cursor: pointer;
-  }
-}

package/dist/css/components/Choice/css/__item/choice__item_shape.css

@@ -1,11 +0,0 @@
-.choice__item {
-  &_shape {
-    &_rounded {
-      border-radius: var(--choice-item-shape-rounded);
-      overflow: hidden;
-    }
-    &_circular {
-      border-radius: 50%;
-    }
-  }
-}

package/dist/css/components/Choice/css/__item/choice__item_size.css

@@ -1,88 +0,0 @@
-.choice__item {
-  &_size {
-      &_xxl {
-        min-height: var(--choice-item-xxl-min-height);
-        padding: var(--choice-item-xxl-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-xxl-width);
-          height: var(--choice-item-icon-xxl-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-xxl-gap);
-        }
-      }
-      &_xl {
-        min-height: var(--choice-item-xl-min-height);
-        padding: var(--choice-item-xl-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-xl-width);
-          height: var(--choice-item-icon-xl-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-xl-gap);
-        }
-      }
-      &_l {
-        min-height: var(--choice-item-l-min-height);
-        padding: var(--choice-item-l-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-l-width);
-          height: var(--choice-item-icon-l-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-l-gap);
-        }
-      }
-      &_m {
-        min-height: var(--choice-item-m-min-height);
-        padding: var(--choice-item-m-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-m-width);
-          height: var(--choice-item-icon-m-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-m-gap);
-        }
-      }
-      &_s {
-        min-height: var(--choice-item-s-min-height);
-        padding: var(--choice-item-s-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-s-width);
-          height: var(--choice-item-icon-s-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-s-gap);
-        }
-      }
-      &_xs {
-        min-height: var(--choice-item-xs-min-height);
-        padding: var(--choice-item-xs-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-xs-width);
-          height: var(--choice-item-icon-xs-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-xs-gap);
-        }
-      }
-      &_xxs {
-        min-height: var(--choice-item-xxs-min-height);
-        padding: var(--choice-item-xxs-padding);
-        &^^&_icon {
-          width: var(--choice-item-icon-xxs-width);
-          height: var(--choice-item-icon-xxs-height);
-          padding: 0;
-        }
-        ^^&-label {
-          gap: var(--choice-item-xxs-gap);
-        }
-      }
-  }
-}