@dialpad/dialtone-css/lib/build/less/components/selects.less

Dialpad's design system

//
//  DIALTONE
//  COMPONENTS: SELECT MENUS
//
//  These are select menu classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/components/select
//
//  TABLE OF CONTENTS
//  • SELECT MENUS
//    - Sizes
//  • SELECT MENU INPUTS
//    - Validation States
//

//  ============================================================================
//  $  SELECT MENU (NATIVE)
//  ----------------------------------------------------------------------------
.d-select {
  //  Component CSS Vars
  //  --------------------------------------------------------------------------
  --select-color-border: var(--dt-inputs-color-border-default);
  --select-notch-position-right: var(--dt-space-400);

  position: relative;
  width: stretch;

  //  --  Arrows
  &::after {
    --select-arrow-size: calc(var(--dt-size-300) * 3.5);

    position: absolute;
    top: 50%;
    right: var(--select-notch-position-right);
    width: var(--select-arrow-size);
    height: var(--select-arrow-size);
    background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M6.55798 1.89155C6.80205 1.64748 7.19778 1.64748 7.44186 1.89155L10.3585 4.80822C10.6026 5.0523 10.6026 5.44803 10.3585 5.6921C10.1144 5.93618 9.71872 5.93618 9.47464 5.6921L6.99992 3.21738L4.52519 5.6921C4.28112 5.93618 3.88539 5.93618 3.64131 5.6921C3.39723 5.44803 3.39723 5.0523 3.64131 4.80822L6.55798 1.89155ZM3.64131 8.30822C3.88539 8.06414 4.28112 8.06414 4.52519 8.30822L6.99992 10.7829L9.47464 8.30822C9.71872 8.06414 10.1144 8.06414 10.3585 8.30822C10.6026 8.5523 10.6026 8.94803 10.3585 9.1921L7.44186 12.1088C7.19778 12.3528 6.80205 12.3528 6.55798 12.1088L3.64131 9.1921C3.39723 8.94803 3.39723 8.5523 3.64131 8.30822Z' fill='gray'/> </svg>");
    background-repeat: no-repeat;
    background-size: 100%;
    transform: translateY(-50%);
    content: '';
    pointer-events: none;
  }
}

//  $  SELECT MENU INPUT
//  ----------------------------------------------------------------------------
.d-select__input {
  --select-color-border: var(--input-color-border);
  --select-notch-padding-right: var(--dt-space-550);

  // Use shared style properties of d-input (<input>, <textarea>)
  .d-input();

  // select options can be styled on windows
  & option {
    color: var(--dt-color-foreground-secondary);
    background-color: var(--dt-color-surface-secondary);
  }

  //  --  FOCUS STATE
  &:focus {
      --input-color-background: var(--dt-inputs-color-background-focus);
  }

  // Adjust space on right beneath arrows
  padding-right: var(--select-notch-padding-right);

  &[disabled],
  &[read-only] {
    color: var(--dt-inputs-color-foreground-disabled);
    background: var(--dt-inputs-color-background-disabled);
    border-color: transparent;
    border-style: solid;
    border-width: var(--input-border-width);
  }

  &::-moz-focus-inner {
    outline: none !important;
  }

  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--dt-color-black-900);
  }

  &::-ms-expand {
    display: none;
  }
}

//  $$  SIZES
//  ----------------------------------------------------------------------------
.d-select--xs {
  .d-select__input {
    #d-internal__input-and-select-xs();
  }
}

.d-select--sm {
  .d-select__input {
    #d-internal__input-and-select-sm();
  }
}

.d-select--lg {
  .d-select__input {
    #d-internal__input-and-select-lg();

    --select-notch-padding-right: calc(var(--dt-space-300) * 9);
  }

  &::after {
    --select-arrow-size: calc(var(--dt-size-300) * 4.5);
    --select-notch-position-right: var(--dt-space-450);
  }
}

.d-select--xl {
  .d-select__input {
    #d-internal__input-and-select-xl();

    --select-notch-padding-right: calc(var(--dt-space-300) * 9);
  }

  &::after {
    --select-arrow-size: calc(var(--dt-size-300) * 4.5);
    --select-notch-position-right: var(--dt-space-450);
  }
}

//  $$  VALIDATION STATES
//  ------------------------------------------------------------------------
.d-select__input--success,
.d-select__input--success:hover {
  --input-color-border: var(--dt-inputs-color-border-success);
}

.d-select__input--error,
.d-select__input--error:hover {
  --input-color-border: var(--dt-inputs-color-border-critical);
}

.d-select__input--warning,
.d-select__input--warning:hover {
  --input-color-border: var(--dt-inputs-color-border-warning);
}

.d-select--disabled {
  &::before,
  &::after {
    opacity: 0.33;
  }
}