lens/src/renderer/components/select/select.scss

/**
 * Copyright (c) OpenLens Authors. All rights reserved.
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */

// Custom css-styles for react-select
// Docs: https://react-select.com/styles

html {
  --select-menu-bgc: var(--inputControlBackground);
  --select-menu-border-color: var(--inputControlBorder);
  --select-option-selected-bgcolor: var(--menuSelectedOptionBgc);
  --select-option-selected-color: var(--textColorAccent);
  --select-option-focused-bgc: var(--colorInfo);
  --select-option-focused-color: #ffffff; // Same for both themes until bg color is contrast enough

  // Custom light values to override theme ones (e. g. for dialogs)
  --light-select-menu-bgc: #f6f6f7;
  --light-select-menu-border-color: #cccdcf;
  --light-select-option-selected-bgcolor: #e8e8e8;
  --light-select-option-selected-color: var(--textColorTertiary);

  .Select {
    position: relative;
    min-width: 220px;

    * {
      color: inherit;
    }

    &--is-disabled {
      opacity: .75;
      cursor: not-allowed;
      pointer-events: none;
    }

    &__control {
      border: none;
      border-radius: 4px;
      background: var(--select-menu-bgc);
      min-height: 0;
      box-shadow: 0 0 0 1px var(--select-menu-border-color);
      cursor: pointer;
      line-height: 1;

      &--is-focused {
        box-shadow: 0 0 0 1px var(--primary);
      }
    }

    &__value-container {
      margin-bottom: 1px;
    }

    &__indicator {
      padding: $padding *0.5;
      opacity: .55;

      &:hover {
        color: inherit;
        opacity: 1;
      }

      &-separator {
        display: none;
      }
    }

    &__dropdown {
      &-indicator {
        color: inherit !important;
        padding: $padding * 0.5;
      }
    }

    &__menu {
      background: var(--select-menu-bgc);
      box-shadow: inset 0 0 0 1px var(--select-menu-border-color);
      width: max-content;
      min-width: 100%;

      &-list {
        padding: 6px;
        width: max-content;
        min-width: 100%;
      }

      &-notice {
        padding: $padding * 0.3333;
      }
    }

    &__option {
      white-space: nowrap;
      cursor: pointer;
      border-radius: 4px;

      &:active {
        background: var(--primary);
      }

      &--is-selected {
        background: var(--select-option-selected-bgcolor);
        color: var(--select-option-selected-color);
      }

      &--is-focused {
        color: var(--select-option-focused-color);
        background: var(--select-option-focused-bgc);
      }

      &--is-disabled {
        cursor: not-allowed;
        background: none !important;
        color: inherit;
        opacity: .75;
      }

      .Icon {
        transition: none;
      }
    }

    &__multi-value {
      background: var(--layoutBackground);

      &__remove {
        background: inherit;

        &:hover {
          background: var(--colorError);
          color: var(--textColorAccent);
        }
      }
    }

    &__value-container {
      margin-top: 2px;
      margin-bottom: 2px;
    }

    &__single-value {
      color: var(--textColorTertiary);
      overflow: visible;
    }

    &.lightTheme {
      --select-menu-bgc: var(--light-select-menu-bgc);
      --select-menu-border-color: var(--light-select-menu-border-color);

      &__control {
        background: var(--select-menu-bgc);
      }

      &__option {
        &:active {
          color: white;
        }

        &:hover {
          color: white;
        }

        &--is-focused {
          color: white;
        }

        &--is-disabled:hover {
          color: inherit;
        }
      }
    }
  }

  .Select__menu {
    z-index: $zIndex-select-portal; // render at the top when used inside dialog

    &.lightTheme {
      --select-menu-bgc: var(--light-select-menu-bgc);
      --select-menu-border-color: var(--light-select-menu-border-color);
      --select-option-selected-bgcolor: var(--light-select-option-selected-bgcolor);
      --select-option-selected-color: var(--light-select-option-selected-color);
    }
  }
}