@itcase/ui 1.8.179 → 1.9.1

package/dist/css/components/Image/Image.css

@@ -1,163 +0,0 @@
-.image {
-  font-size: 0;
-  &__wrapper {
-    width: 100%;
-    font-size: 0;
-    position: relative;
-  }
-}
-.image {
-  &_horizontal-align {
-    &_left {
-      ^^&__wrapper {
-        width: 100%;
-        display: flex;
-        justify-content: flex-start;
-      }
-    }
-    &_center {
-      ^^&__wrapper {
-        width: 100%;
-        display: flex;
-        justify-content: center;
-      }
-    }
-    &_right {
-      ^^&__wrapper {
-        width: 100%;
-        display: flex;
-        justify-content: flex-end;
-      }
-    }
-  }
-}
-.image {
-  &_skeleton {
-    background-image: linear-gradient(
-      90deg,
-      x var(--color-surface-secondary),
-      var(--color-surface-tertiary),
-      var(--color-surface-secondary)
-    );
-    background-size: 200%;
-    animation: imageSkeleton 3s infinite linear;
-    ^^&__item {
-      opacity: 0%;
-    }
-  }
-}
-@keyframes imageSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-.image {
-  &_resize-mode {
-    &_cover {
-      > ^^&__wrapper {
-        height: 100%;
-        & > ^^^&__item {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-      }
-    }
-    &_contain {
-      > ^^&__wrapper {
-        height: 100%;
-        & > ^^^&__item {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-        }
-      }
-    }
-  }
-}
-.image {
-  &_shape {
-    &_rounded {
-      border-radius: var(--image-shape-rounded);
-      > ^^&__wrapper {
-        width: 100%;
-        height: 100%;
-        border-radius: var(--image-shape-rounded);
-        position: relative;
-        overflow: hidden;
-        & > ^^^&__item {
-          width: 100%;
-          height: 100%;
-          border-radius: var(--image-shape-rounded);
-        }
-      }
-    }
-    &_circular {
-      border-radius: 50%;
-      > ^^&__wrapper {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        & > ^^^&__item {
-          width: 100%;
-          height: 100%;
-          border-radius: 50%;
-        }
-      }
-    }
-    &_geometric {
-      > ^^&__wrapper {
-        width: 100%;
-        height: 100%;
-        & > ^^^&__item {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-}
-.image {
-  &&_type_cover {
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    ^&__wrapper {
-      height: 100%;
-      & img {
-        width: 100%;
-      }
-    }
-  }
-}
-.image {
-  &_vertical-align {
-    &_top {
-      ^^&__wrapper {
-        height: 100%;
-        display: flex;
-        align-items: flex-start;
-      }
-    }
-    &_center {
-      ^^&__wrapper {
-        height: 100%;
-        display: flex;
-        align-items: center;
-      }
-    }
-    &_bottom {
-      ^^&__wrapper {
-        height: 100%;
-        display: flex;
-        align-items: flex-end;
-      }
-    }
-  }
-}
-:root {
-  --image-shape-rounded: 6px;
-}

package/dist/css/components/Input/Input.css

@@ -1,135 +0,0 @@
-.input {
-  min-width: unset;
-  padding: 0;
-  margin: 0;
-  border: none;
-  border: solid 1px none;
-  position: relative;
-  box-shadow: none;
-  appearance: none;
-  outline: 0;
-  caret-color: var(--input-caret-color);
-  transition: var(--input-transition);
-  &:focus {
-    outline: none;
-  }
-}
-.input {
-  &_shape {
-    &_underline {
-      border-left: none !important;
-      border-top: none !important;
-      border-right: none !important;
-      position: relative;
-    }
-  }
-}
-.input {
-  &&_size {
-      &_xl {
-        min-height: var(--input-xl-min-height);
-        padding: var(--input-xl-padding);
-      }
-      &_l {
-        min-height: var(--input-l-min-height);
-        padding: var(--input-l-padding);
-      }
-      &_m {
-        min-height: var(--input-m-min-height);
-        padding: var(--input-m-padding);
-      }
-      &_s {
-        min-height: var(--input-s-min-height);
-        padding: var(--input-s-padding);
-      }
-  }
-}
-.input {
-  &&_state {
-      &_error {
-        & .input {
-          background: var(--input-state-error-background);
-          border: solid 1px var(--input-state-error-border);
-        }
-      }
-      &_success {
-        & .input {
-          background: var(--input-state-success-background);
-          border: solid 1px var(--input-state-success-border);
-        }
-      }
-      &_require {
-        & .input {
-          background: var(--input-state-require-background);
-          border: solid 1px var(--input-state-require-border);
-        }
-      }
-      &_disabled {
-        & .input {
-          background: var(--input-state-disabled-background);
-          border: solid 1px var(--input-state-disabled-border);
-        }
-      }
-      &_focus {
-        & .input {
-          background: var(--input-state-focus-background);
-          border: solid 1px var(--input-state-focus-border);
-        }
-      }
-  }
-}
-.input {
-  &_type {
-    &_number {
-      appearance: none;
-      &[type='number'] {
-        appearance: textfield;
-      }
-      &::-webkit-outer-spin-button,
-      &::-webkit-inner-spin-button {
-        appearance: none;
-      }
-    }
-  }
-}
-:root {
-  --input-shape-rounded: 8px;
-
-  /* Size */
-  --input-xl-min-height: 56px;
-  --input-xl-padding: 12px 16px;
-  --input-l-min-height: 48px;
-  --input-l-padding: 12px 12px;
-  --input-m-min-height: 40px;
-  --input-m-padding: 8px 12px;
-  --input-s-min-height: 28px;
-  --input-s-padding: 2px 6px;
-
-  --input-caret-color: var(--color-accent-fill-primary);
-
-  --input-transition: all 0.3s ease 0s;
-
-  /* State */
-  --input-state-success-background: none;
-  --input-state-success-border: var(--color-success-border-primary);
-  --input-state-focus-border: var(--color-surface-border-quaternary);
-  --input-state-focus-background: none;
-  --input-state-error-border: var(--color-error-border-primary);
-  --input-state-error-background: none;
-  --input-state-required-border: var(--color-warning-text-primary);
-  --input-state-required-background: none;
-  --input-state-custom-border: var(--color-info-primary);
-  --input-state-custom-background: none;
-  --input-state-hover-border: var(--color-surface-border-quaternary);
-  --input-state-hover-background: none;
-
-  --input-success-border: var(--color-success-border-primary);
-  --input-success-border-hover: var(--color-surface-border-quaternary);
-  --input-error-border: var(--color-error-border-primary);
-  --input-focus-background: var(--color-surface-primary);
-  --input-focus-border: var(--color-surface-border-quaternary);
-
-  /* Disabled */
-  --input-state-disabled-background: none;
-  --input-state-disabled-border: none;
-}

package/dist/css/components/InputPassword/InputPassword.css

@@ -1,115 +0,0 @@
-.input-password {
-  width: 100%;
-  position: relative;
-  &__icon {
-    position: absolute;
-    top: 50%;
-    right: 8px;
-    transform: translate(0, -50%);
-  }
-  &__input {
-    width: 100%;
-    min-width: unset;
-    padding: 0;
-    margin: 0;
-    border: none;
-    border: solid 1px none;
-    position: relative;
-    box-shadow: none;
-    appearance: none;
-    outline: 0;
-    caret-color: var(--input-password-caret-color);
-    transition: var(--input-password-transition);
-    &:focus {
-      outline: none;
-    }
-  }
-}
-.input-password {
-  &__input {
-    &_shape {
-      &_underline {
-        border-left: none !important;
-        border-top: none !important;
-        border-right: none !important;
-        position: relative;
-      }
-    }
-  }
-}
-.input-password {
-  &__input {
-    &&_size {
-        &_xl {
-          min-height: var(--input-password-xl-min-height);
-          padding: var(--input-password-xl-padding);
-        }
-        &_l {
-          min-height: var(--input-password-l-min-height);
-          padding: var(--input-password-l-padding);
-        }
-        &_m {
-          min-height: var(--input-password-m-min-height);
-          padding: var(--input-password-m-padding);
-        }
-        &_s {
-          min-height: var(--input-password-s-min-height);
-          padding: var(--input-password-s-padding);
-        }
-    }
-  }
-}
-.input-password {
-  &&_state {
-      &_error {
-        & .input {
-          background: var(--input-state-error-background);
-          border: solid 1px var(--input-state-error-border);
-        }
-      }
-      &_success {
-        & .input {
-          background: var(--input-state-success-background);
-          border: solid 1px var(--input-state-success-border);
-        }
-      }
-      &_require {
-        & .input {
-          background: var(--input-state-require-background);
-          border: solid 1px var(--input-state-require-border);
-        }
-      }
-      &_disabled {
-        & .input {
-          background: var(--input-state-disabled-background);
-          border: solid 1px var(--input-state-disabled-border);
-        }
-      }
-      &_focus {
-        & .input {
-          background: var(--input-state-focus-background);
-          border: solid 1px var(--input-state-focus-border);
-        }
-      }
-  }
-}
-:root {
-  --input-password-xl-min-height: 56px;
-  --input-password-xl-padding: 12px 16px;
-  --input-password-l-min-height: 48px;
-  --input-password-l-padding: 12px 12px;
-  --input-password-m-min-height: 40px;
-  --input-password-m-padding: 8px 12px;
-  --input-password-s-min-height: 28px;
-  --input-password-s-padding: 2px 6px;
-
-  --input-password-state-focus-border: var(--color-active-border-primary);
-  --input-password-state-focus-background: none;
-  --input-password-state-error-border: var(--color-error-border-primary);
-  --input-password-state-error-background: none;
-  --input-password-state-success-border: var(--color-success-border-primary);
-  --input-password-state-success-background: none;
-  --input-password-state-hover-border: var(--color-surface-border-quaternary);
-  --input-password-state-hover-background: none;
-  --input-password-caret-color: var(--color-accent-fill-primary);
-}

package/dist/css/components/Label/Label.css

@@ -1,118 +0,0 @@
-.label {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  &__inner {
-    width: 100%;
-    font-size: 0;
-    line-height: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-.label {
-  &&_skeleton {
-    background-size: 200% !important;
-    border: none;
-    animation: badgeSkeleton 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 labelSkeleton {
-  0% {
-    background-position: 200%;
-  }
-  100% {
-    background-position: -200%;
-  }
-}
-.label {
-  &_size {
-      &_xxl {
-        padding: var(--label-size-xxl-padding);
-        gap: var(--label-size-xxl-gap);
-        min-height: var(--label-size-xxl-min-height);
-      }
-      &_xl {
-        padding: var(--label-size-xl-padding);
-        gap: var(--label-size-xl-gap);
-        min-height: var(--label-size-xl-min-height);
-      }
-      &_l {
-        padding: var(--label-size-l-padding);
-        gap: var(--label-size-l-gap);
-        min-height: var(--label-size-l-min-height);
-      }
-      &_m {
-        padding: var(--label-size-m-padding);
-        gap: var(--label-size-m-gap);
-        min-height: var(--label-size-m-min-height);
-      }
-      &_s {
-        padding: var(--label-size-s-padding);
-        gap: var(--label-size-s-gap);
-        min-height: var(--label-size-s-min-height);
-      }
-      &_xs {
-        padding: var(--label-size-xs-padding);
-        gap: var(--label-size-xs-gap);
-        min-height: var(--label-size-xs-min-height);
-      }
-      &_xxs {
-        padding: var(--label-size-xxs-padding);
-        gap: var(--label-size-xxs-gap);
-        min-height: var(--label-size-xxs-min-height);
-      }
-  }
-}
-div.label {
-  &__tooltip {
-    z-index: 12;
-  }
-}
-.label {
-  &&_width {
-    &_fixed {
-      width: 240px;
-    }
-    &_hug {
-      display: inline-flex;
-    }
-    &_fill {
-      width: 100%;
-      max-width: none !important;
-    }
-  }
-}
-:root {
-  --label-size-xxl-padding: 10px 10px;
-  --label-size-xxl-gap: 8px;
-  --label-size-xxl-min-height: 40px;
-
-  --label-size-xl-padding: 7px 8px;
-  --label-size-xl-min-height: 32px;
-
-  --label-size-l-padding: 4px 6px;
-  --label-size-l-min-height: 28px;
-
-  --label-size-m-padding: 2px 8px;
-  --label-size-m-min-height: 24px;
-
-  --label-size-s-padding: 2px 6px;
-  --label-size-s-min-height: 18px;
-
-  --label-size-xs-padding: 0px 4px;
-  --label-size-xs-min-height: 16px;
-
-  --label-size-xxs-padding: 0px 4px;
-  --label-size-xxs-min-height: 12px;
-}

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

@@ -1,58 +0,0 @@
-.link {
-  color: inherit;
-}
-.link {
-  &_underline {
-    &_none {
-      text-decoration: none;
-    }
-  }
-}
-.link {
-  &_direction {
-    &_horizontal {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-    }
-    &_vertical {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-      &_row {
-        display: flex;
-        flex-direction: row;
-      }
-      &_row-reverse {
-        display: flex;
-        flex-direction: row-reverse;
-      }
-      &_column {
-        display: flex;
-        flex-direction: column;
-      }
-      &_column-reverse {
-        display: flex;
-        flex-direction: column-reverse;
-      }
-  }
-}
-.link {
-  &_shape {
-    &_rounded {
-      border-radius: var(--link-shape-rounded-default);
-    }
-    &_circular {
-      border-radius: 50%;
-    }
-    &_geometric {
-      border-radius: 0;
-    }
-  }
-}
-:root {
-  --link-shape-rounded-default: 12px;
-}