@itcase/ui 1.8.179 → 1.9.0

package/dist/css/components/Select/Select.css

@@ -1,768 +0,0 @@
-.select {
-  width: 100%;
-  min-width: 100%;
-  position: relative;
-  transition: var(--select-transition);
-}
-
-@keyframes selectMenuAnimationOpen {
-  0% {
-    visibility: hidden;
-    transform: translate3d(0, 8px, 0);
-    opacity: 0%;
-  }
-  100% {
-    visibility: visible;
-    transform: translate3d(0, 0, 0);
-    opacity: 100%;
-  }
-}
-
-@keyframes selectMenuAnimationClose {
-  0% {
-    visibility: visible;
-    transform: translate3d(0, 0, 0);
-    opacity: 100%;
-  }
-  100% {
-    visibility: hidden;
-    transform: translate3d(0, 8px, 0);
-    opacity: 0%;
-  }
-}
-
-.select {
-  &&_size {
-      &_xl {
-        min-height: var(--select-xl-min-height);
-        ^^&__control {
-          padding: var(--select-xl-padding);
-        }
-        ^^&__option {
-          padding: var(--select-xl-padding);
-        }
-        ^^&__multi-value-item {
-          padding: var(--select-multi-item-xl-padding);
-        }
-        ^^&__menu {
-          &-notice {
-            padding: var(--select-xl-padding);
-          }
-          &-group-heading {
-            padding: var(--select-xl-padding);
-          }
-        }
-      }
-      &_l {
-        min-height: var(--select-l-min-height);
-        ^^&__control {
-          padding: var(--select-l-padding);
-        }
-        ^^&__option {
-          padding: var(--select-l-padding);
-        }
-        ^^&__multi-value-item {
-          padding: var(--select-multi-item-l-padding);
-        }
-        ^^&__menu {
-          &-notice {
-            padding: var(--select-l-padding);
-          }
-          &-group-heading {
-            padding: var(--select-l-padding);
-          }
-        }
-      }
-      &_m {
-        min-height: var(--select-m-min-height);
-        ^^&__control {
-          padding: var(--select-m-padding);
-        }
-        ^^&__option {
-          padding: var(--select-m-padding);
-        }
-        ^^&__multi-value-item {
-          padding: var(--select-multi-item-m-padding);
-        }
-        ^^&__menu {
-          &-notice {
-            padding: var(--select-m-padding);
-          }
-          &-group-heading {
-            padding: var(--select-m-padding);
-          }
-        }
-      }
-      &_s {
-        min-height: var(--select-s-min-height);
-        ^^&__control {
-          padding: var(--select-s-padding);
-        }
-        ^^&__option {
-          padding: var(--select-s-padding);
-        }
-        ^^&__multi-value-item {
-          padding: var(--select-multi-item-s-padding);
-        }
-        ^^&__menu {
-          &-notice {
-            padding: var(--select-s-padding);
-          }
-          &-group-heading {
-            padding: var(--select-s-padding);
-          }
-        }
-      }
-  }
-}
-
-.select {
-  &&_state {
-    &_hide-value-container {
-      width: auto;
-      min-width: 0;
-      & .select__control {
-        padding: 0;
-        border: none;
-      }
-      & .select__value-container {
-        display: none;
-      }
-      & .select__menu {
-        min-width: 240px;
-      }
-    }
-  }
-}
-
-.select {
-  &_position {
-    &_right {
-      & .select__menu {
-        left: auto;
-        right: 0;
-      }
-    }
-  }
-}
-
-.select {
-  &_set {
-    &_reset {
-      min-width: auto;
-    }
-  }
-}
-
-.select {
-  &_width {
-    &_fill {
-      width: 100%;
-      min-width: 0;
-    }
-  }
-}
-
-.select {
-  &__control {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    outline: 0 !important;
-  }
-  &__value-container {
-    cursor: default;
-  }
-  &__input {
-    cursor: default;
-  }
-}
-
-.select {
-  &__placeholder {
-    position: absolute;
-    display: flex;
-    & .text {
-      white-space: nowrap;
-    }
-  }
-}
-
-.select {
-  &__control {
-    ^&__indicators {
-      margin-left: 8px;
-      display: flex;
-      align-items: center;
-      align-self: center;
-      gap: 8px;
-      cursor: pointer;
-      @media (--mobile) {
-        align-items: flex-start;
-      }
-      ^^&__clear-indicator {
-        color: var(--color-surface-text-primary);
-      }
-      ^^&__dropdown-indicator {
-        display: flex;
-      }
-    }
-  }
-}
-
-.select {
-  &__input-container {
-    flex: 1;
-      &.text_size_xxl {
-        & input {
-          @mixin text-xxl;
-        }
-      }
-      &.text_size_xl {
-        & input {
-          @mixin text-xl;
-        }
-      }
-      &.text_size_l {
-        & input {
-          @mixin text-l;
-        }
-      }
-      &.text_size_m {
-        & input {
-          @mixin text-m;
-        }
-      }
-      &.text_size_s {
-        & input {
-          @mixin text-s;
-        }
-      }
-      &.text_size_xs {
-        & input {
-          @mixin text-xs;
-        }
-      }
-      &.text_size_xxs {
-        & input {
-          @mixin text-xxs;
-        }
-      }
-      &.text-color_accent {
-        &-text {
-            &-primary {
-              & input {
-                color: var(--color-accent-text-primary);
-              }
-            }
-            &-secondary {
-              & input {
-                color: var(--color-accent-text-secondary);
-              }
-            }
-            &-tertiary {
-              & input {
-                color: var(--color-accent-text-tertiary);
-              }
-            }
-            &-quaternary {
-              & input {
-                color: var(--color-accent-text-quaternary);
-              }
-            }
-            &-quinary {
-              & input {
-                color: var(--color-accent-text-quinary);
-              }
-            }
-            &-senary {
-              & input {
-                color: var(--color-accent-text-senary);
-              }
-            }
-            &-accent {
-              & input {
-                color: var(--color-accent-text-accent);
-              }
-            }
-            &-disabled {
-              & input {
-                color: var(--color-accent-text-disabled);
-              }
-            }
-            &-hover {
-              & input {
-                color: var(--color-accent-text-hover);
-              }
-            }
-        }
-      }
-      &.text-color_primary {
-        &-text {
-            &-primary {
-              & input {
-                color: var(--color-primary-text-primary);
-              }
-            }
-            &-secondary {
-              & input {
-                color: var(--color-primary-text-secondary);
-              }
-            }
-            &-tertiary {
-              & input {
-                color: var(--color-primary-text-tertiary);
-              }
-            }
-            &-quaternary {
-              & input {
-                color: var(--color-primary-text-quaternary);
-              }
-            }
-            &-quinary {
-              & input {
-                color: var(--color-primary-text-quinary);
-              }
-            }
-            &-senary {
-              & input {
-                color: var(--color-primary-text-senary);
-              }
-            }
-            &-accent {
-              & input {
-                color: var(--color-primary-text-accent);
-              }
-            }
-            &-disabled {
-              & input {
-                color: var(--color-primary-text-disabled);
-              }
-            }
-            &-hover {
-              & input {
-                color: var(--color-primary-text-hover);
-              }
-            }
-        }
-      }
-      &.text-color_secondary {
-        &-text {
-            &-primary {
-              & input {
-                color: var(--color-secondary-text-primary);
-              }
-            }
-            &-secondary {
-              & input {
-                color: var(--color-secondary-text-secondary);
-              }
-            }
-            &-tertiary {
-              & input {
-                color: var(--color-secondary-text-tertiary);
-              }
-            }
-            &-quaternary {
-              & input {
-                color: var(--color-secondary-text-quaternary);
-              }
-            }
-            &-quinary {
-              & input {
-                color: var(--color-secondary-text-quinary);
-              }
-            }
-            &-senary {
-              & input {
-                color: var(--color-secondary-text-senary);
-              }
-            }
-            &-accent {
-              & input {
-                color: var(--color-secondary-text-accent);
-              }
-            }
-            &-disabled {
-              & input {
-                color: var(--color-secondary-text-disabled);
-              }
-            }
-            &-hover {
-              & input {
-                color: var(--color-secondary-text-hover);
-              }
-            }
-        }
-      }
-      &.text-color_tertiary {
-        &-text {
-            &-primary {
-              & input {
-                color: var(--color-tertiary-text-primary);
-              }
-            }
-            &-secondary {
-              & input {
-                color: var(--color-tertiary-text-secondary);
-              }
-            }
-            &-tertiary {
-              & input {
-                color: var(--color-tertiary-text-tertiary);
-              }
-            }
-            &-quaternary {
-              & input {
-                color: var(--color-tertiary-text-quaternary);
-              }
-            }
-            &-quinary {
-              & input {
-                color: var(--color-tertiary-text-quinary);
-              }
-            }
-            &-senary {
-              & input {
-                color: var(--color-tertiary-text-senary);
-              }
-            }
-            &-accent {
-              & input {
-                color: var(--color-tertiary-text-accent);
-              }
-            }
-            &-disabled {
-              & input {
-                color: var(--color-tertiary-text-disabled);
-              }
-            }
-            &-hover {
-              & input {
-                color: var(--color-tertiary-text-hover);
-              }
-            }
-        }
-      }
-      &.text-color_surface {
-        &-text {
-            &-primary {
-              & input {
-                color: var(--color-surface-text-primary);
-              }
-            }
-            &-secondary {
-              & input {
-                color: var(--color-surface-text-secondary);
-              }
-            }
-            &-tertiary {
-              & input {
-                color: var(--color-surface-text-tertiary);
-              }
-            }
-            &-quaternary {
-              & input {
-                color: var(--color-surface-text-quaternary);
-              }
-            }
-            &-quinary {
-              & input {
-                color: var(--color-surface-text-quinary);
-              }
-            }
-            &-senary {
-              & input {
-                color: var(--color-surface-text-senary);
-              }
-            }
-            &-accent {
-              & input {
-                color: var(--color-surface-text-accent);
-              }
-            }
-            &-disabled {
-              & input {
-                color: var(--color-surface-text-disabled);
-              }
-            }
-            &-hover {
-              & input {
-                color: var(--color-surface-text-hover);
-              }
-            }
-        }
-      }
-      &.text-color_success {
-        &-text {
-            &-primary {
-              & input {
-                color: var(--color-success-text-primary);
-              }
-            }
-            &-secondary {
-              & input {
-                color: var(--color-success-text-secondary);
-              }
-            }
-            &-tertiary {
-              & input {
-                color: var(--color-success-text-tertiary);
-              }
-            }
-            &-quaternary {
-              & input {
-                color: var(--color-success-text-quaternary);
-              }
-            }
-            &-quinary {
-              & input {
-                color: var(--color-success-text-quinary);
-              }
-            }
-            &-senary {
-              & input {
-                color: var(--color-success-text-senary);
-              }
-            }
-            &-accent {
-              & input {
-                color: var(--color-success-text-accent);
-              }
-            }
-            &-disabled {
-              & input {
-                color: var(--color-success-text-disabled);
-              }
-            }
-            &-hover {
-              & input {
-                color: var(--color-success-text-hover);
-              }
-            }
-        }
-      }
-      &.text-color_error {
-        &-text {
-            &-primary {
-              & input {
-                color: var(--color-error-text-primary);
-              }
-            }
-            &-secondary {
-              & input {
-                color: var(--color-error-text-secondary);
-              }
-            }
-            &-tertiary {
-              & input {
-                color: var(--color-error-text-tertiary);
-              }
-            }
-            &-quaternary {
-              & input {
-                color: var(--color-error-text-quaternary);
-              }
-            }
-            &-quinary {
-              & input {
-                color: var(--color-error-text-quinary);
-              }
-            }
-            &-senary {
-              & input {
-                color: var(--color-error-text-senary);
-              }
-            }
-            &-accent {
-              & input {
-                color: var(--color-error-text-accent);
-              }
-            }
-            &-disabled {
-              & input {
-                color: var(--color-error-text-disabled);
-              }
-            }
-            &-hover {
-              & input {
-                color: var(--color-error-text-hover);
-              }
-            }
-        }
-      }
-  }
-}
-
-.select {
-  &__menu {
-    &-notice {
-    }
-  }
-}
-
-.select {
-  &__menu {
-    &-list {
-      &-item {
-        &_size {
-            &_xxl {
-              padding: var(--select-menu-list-item-xxl-padding);
-            }
-            &_xl {
-              padding: var(--select-menu-list-item-xl-padding);
-            }
-            &_l {
-              padding: var(--select-menu-list-item-l-padding);
-            }
-            &_m {
-              padding: var(--select-menu-list-item-m-padding);
-            }
-            &_s {
-              padding: var(--select-menu-list-item-s-padding);
-            }
-            &_xs {
-              padding: var(--select-menu-list-item-xs-padding);
-            }
-            &_xxs {
-              padding: var(--select-menu-list-item-xxs-padding);
-            }
-        }
-      }
-    }
-  }
-}
-
-.select {
-  &__menu {
-    width: 100%;
-    padding: 12px 0;
-    border-top: none;
-    position: absolute;
-    left: 0;
-    top: 100%;
-    z-index: 100000;
-    &-group-heading {
-      z-index: 100000;
-    }
-    &-list {
-      overflow-y: auto;
-      max-height: 240px;
-      &-item {
-        width: 100%;
-        position: relative;
-        justify-content: space-between;
-        &_state_selected {
-        }
-        &_option {
-          z-index: 100000;
-        }
-        &_selected {
-          height: 100%;
-          position: absolute;
-          display: flex;
-          align-items: center;
-          top: 0;
-          right: 8px;
-        }
-        & .divider {
-          height: 1px;
-          position: absolute;
-          left: 0;
-          bottom: 0;
-        }
-      }
-      &--is-multi {
-        ^^^&__option {
-          &--is-selected {
-          }
-          &--is-focused {
-            &:hover {
-              background: #eee;
-              cursor: pointer;
-            }
-          }
-          &--is-disabled {
-          }
-        }
-      }
-    }
-  }
-}
-
-.select__multi-value {
-  &-item {
-    ^&__label {
-      display: flex;
-    }
-  }
-}
-
-.select {
-  &__option {
-    display: flex;
-    cursor: pointer;
-  }
-}
-
-.select {
-  &__single-value {
-    display: flex;
-    position: relative;
-    overflow: hidden;
-    & .text {
-      white-space: nowrap;
-    }
-  }
-}
-
-.select {
-  &__value-container {
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    flex: 1;
-    flex-wrap: nowrap;
-    align-items: center;
-    &--is-multi {
-      flex-wrap: wrap;
-      gap: 8px;
-      & .select__placeholder {
-        position: relative;
-      }
-    }
-    & .css-mohuvp-dummyInput-DummyInput {
-      position: absolute;
-      bottom: 0;
-    }
-  }
-}
-
-:root {
-  --select-xl-min-height: 56px;
-  --select-xl-padding: 11px 16px;
-  --select-l-min-height: 48px;
-  --select-l-padding: 11px 12px;
-  --select-m-min-height: 40px;
-  --select-m-padding: 7px 12px;
-  --select-s-min-height: 28px;
-  --select-s-padding: 2px 6px;
-
-  --select-transition: all 0.3s ease 0s;
-
-  --select-multi-item-xxl-padding: 5px;
-  --select-multi-item-xl-padding: 5px;
-  --select-multi-item-l-padding: 5px;
-  --select-multi-item-m-padding: 5px;
-  --select-multi-item-s-padding: 5px;
-  --select-multi-item-xs-padding: 5px;
-
-  --select-menu-list-item-xxl-padding: 18px 25px;
-  --select-menu-list-item-xl-padding: 14px 20px;
-  --select-menu-list-item-l-padding: 10px 12px;
-  --select-menu-list-item-m-padding: 8px 12px;
-  --select-menu-list-item-s-padding: 6px 10px;
-  --select-menu-list-item-xs-padding: 2px 8px;
-}