@meve/ui/es/select/select.less

Argon design system components library

@import '../styles/var';

@select-normal-height: 42px;
@select-normal-font-size: 15px;
@select-small-height: 36px;
@select-small-font-size: 14px;
@select-mini-height: 30px;
@select-mini-font-size: 13px;
@select-padding: 0 10px;
@select-background: #fff;
@select-outline-active-color: @color-primary;
@select-outline-inactive-color: #ccc;
@select-border-radius: 4px;
@select-text-color: #666;
@select-placeholder-text-color: #bbb;
@select-disabled-background: #e6e9ec;
@select-disabled-text-color: #888;
@select-clear-margin: 0 0 0 6px;
@select-clear-size: 16px;
@select-clear-color: #888;
@select-validation-error-color: @color-warning;
@select-normal-options-padding: 9px 0;
@select-small-options-padding: 7px 0;
@select-mini-options-padding: 5px 0;
@select-options-background: #fff;
@select-options-box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15),
  0 5px 15px rgba(0, 0, 0, 0.1);
@select-options-border-radius: 6px;
@select-arrow-size: 20px;
@select-tag-vertical-space: 3px;

.m-select {
  display: block;

  &__select {
    display: flex;
    align-items: center;
    background: @select-background;
    padding: @select-padding;
    border: thin solid @select-outline-inactive-color;
    border-radius: @select-border-radius;
    color: @select-text-color;
    transition: background-color 0.25s, border 0.25s;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  &__popover[select-cover] {
    display: block;
  }

  &__options {
    background: @select-options-background;
    box-shadow: @select-options-box-shadow;
    border-radius: @select-options-border-radius;
  }

  &__input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    color: inherit;
    font-size: inherit;
    padding: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: none;

    &::placeholder {
      font-size: inherit;
      color: @select-placeholder-text-color;
    }
  }

  &__tags {
    padding-bottom: @select-tag-vertical-space;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    min-height: 100%;
    color: inherit;
    font-size: inherit;
    background: transparent;
  }

  &__placeholder {
    font-size: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    pointer-events: none;
    background: transparent;

    &::placeholder {
      font-size: inherit;
      color: @select-placeholder-text-color;
    }
  }

  &__tag {
    margin-right: 6px;
    margin-top: @select-tag-vertical-space;
  }

  &__arrow {
    font-size: @select-arrow-size;
  }

  &__clear-icon {
    margin: @select-clear-margin;
    font-size: @select-clear-size;
    opacity: 0;
    transition: opacity 0.1s linear;
    color: @select-clear-color;
  }

  &--disabled {
    background: @select-disabled-background;
    color: @select-disabled-text-color;
    cursor: not-allowed;

    * {
      cursor: not-allowed;
    }
  }

  &--normal {
    min-height: @select-normal-height;
    //height: @select-normal-height;
    font-size: @select-normal-font-size;
  }

  &--small {
    min-height: @select-small-height;
    //height: @select-small-height;
    font-size: @select-small-font-size;
  }

  &--mini {
    min-height: @select-mini-height;
    //height: @select-mini-height;
    font-size: @select-mini-font-size;
  }

  &--normal-options {
    padding: @select-normal-options-padding;
  }

  &--small-options {
    padding: @select-small-options-padding;
  }

  &--mini-options {
    padding: @select-mini-options-padding;
  }

  &--outline {
    border: thin solid @select-outline-active-color;
  }

  &--outline-hover {
    &:hover {
      border: thin solid @select-outline-active-color;
    }
  }

  &--clear-icon-visible {
    opacity: 1;
    cursor: pointer;
  }

  &--validation-error-border {
    border: thin solid @select-validation-error-color !important;
  }
}