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

/**
 * Copyright (c) 2021 OpenLens Authors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

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

html {
  $menuBackgroundColor: $contentColor;

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

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

    * {
      color: inherit;
    }

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

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

      &--is-focused {
        border-color: $primary;
      }
    }

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

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

    &__indicator {
      padding: $padding /2;
      opacity: .55;

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

      &-separator {
        display: none;
      }
    }

    &__dropdown {
      &-indicator {
        color: inherit !important;
        padding: $padding / 2;
      }
    }

    &__menu {
      background: var(--select-menu-bgc);
      border-color: var(--select-menu-border-color);
      width: max-content;
      min-width: 100%;

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

      &-notice {
        padding: $padding / 3;
      }
    }

    &__option {
      white-space: nowrap;
      cursor: pointer;

      &:active {
        background: $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: $layoutBackground;

      &__remove {
        background: inherit;

        &:hover {
          background: $colorError;
          color: $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: $textColorSecondary;

      .Select {
        &__multi-value {
          background: none;
          border-color: $textColorSecondary;
        }

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

          &:hover {
            color: white;
          }

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

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

    &.theme-outlined {
      .Select__control {
        border-color: $colorVague;
        color: $primary;

        .Select__value-container {
          padding: 0 $padding / 2;
        }

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

    &.theme-lens {
      :hover {
        &.Select__control {
          border-color: var(--inputControlHoverBorder);
        }
      }

      :focus-within {
        &.Select__control {
          border-color: $colorInfo;
        }
      }

      &.Select__menu {
        border-color: var(--inputControlBorder);
      }

      .Select {
        &__control {
          border-color: var(--inputControlBorder);
          background: var(--inputControlBackground);
          border-radius: 5px;
        }

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