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 {
  $menuBackgroundColor: var(--contentColor);

  --select-menu-bgc: #{$menuBackgroundColor};
  --select-menu-border-color: var(--halfGray);
  --select-option-selected-color: var(--inputOptionHoverColor);
  --select-option-focused-bgc: var(--colorInfo);
  --select-option-focused-color: var(--textColorAccent);

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

    * {
      color: inherit;
    }

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

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

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

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

    &__single-value {
      color: var(--textColorSecondary);
    }

    &__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;

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

      &--is-selected {
        background: var(--menuSelectedOptionBgc);
        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;
      }
    }

    &__value-container {
      &--is-multi {
      }

      &--has-value {
      }
    }

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

      &__remove {
        background: inherit;

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

  //-- Themes

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

  .Select, .Select__menu {
    &.theme-light {
      --select-menu-bgc: white;
      --select-option-selected-color: var(--textColorSecondary);

      .Select {
        &__multi-value {
          background: none;
          box-shadow: 0 0 0 1px var(--textColorSecondary);
        }

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

          &:hover {
            color: white;
          }

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

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

    &.theme-outlined {
      .Select__control {
        box-shadow: 0 0 0 1px var(--colorVague);
        color: var(--primary);

        .Select__value-container {
          padding: 0 $padding * 0.5;
        }

        .Select__dropdown-indicator {
          padding: 3px;
        }
      }
    }

    &.theme-lens {
      :hover {
        &.Select__control {
          box-shadow: 0 0 0 1px var(--inputControlHoverBorder);
          transition: box-shadow 0.1s;
        }
      }

      :focus-within {
        &.Select__control {
          box-shadow: 0 0 0 1px var(--colorInfo);
        }
      }

      &.Select__menu {
        box-shadow: inset 0 0 0 1px var(--inputControlBorder);
      }

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

        &__control {
          box-shadow: 0 0 0 1px var(--inputControlBorder);
          background: var(--inputControlBackground);
          border-radius: var(--border-radius);
        }

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

        &__menu {
          &-list {
            padding: 6px;
          }
        }

        &__option {
          border-radius: 4px;

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

          &--is-selected {
            background: var(--inputControlBackground);
            color: var(--textColorAccent);
          }

          &--is-focused {
            color: var(--textColorPrimary);
            background: var(--inputControlBackground);
          }
        }
      }
    }
  }
}