vitess.io/vitess@v0.16.2/web/vtadmin/src/components/inputs/Select.module.scss (about)

     1  /**
     2   * Copyright 2021 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  .container {
    17      display: inline-block;
    18      position: relative;
    19  }
    20  
    21  .toggle {
    22      background: var(--backgroundPrimary);
    23      border: solid 2px var(--colorDisabled);
    24      border-radius: 6px;
    25      box-sizing: border-box;
    26      color: var(--textColorPrimary);
    27      cursor: pointer;
    28      display: block;
    29      font-family: var(--fontFamilyPrimary);
    30      font-size: var(--fontSizeBody);
    31      height: var(--inputHeightMedium);
    32      min-width: 16rem;
    33      padding: 0 40px 0 12px;
    34      position: relative;
    35      text-align: left;
    36      transition: all 0.1s ease-in-out;
    37      white-space: nowrap;
    38  }
    39  
    40  .placeholder .toggle {
    41      color: var(--textColorSecondary);
    42  }
    43  
    44  .open .toggle,
    45  .toggle:active,
    46  .toggle:focus {
    47      border-color: var(--colorPrimary);
    48      outline: none;
    49  }
    50  
    51  .toggle:disabled {
    52      background: var(--backgroundSecondary);
    53      border-color: var(--backgroundSecondaryHighlight);
    54      color: var(--textColorSecondary);
    55      cursor: not-allowed;
    56  }
    57  
    58  .large .toggle {
    59      font-size: theme('fontSize.lg');
    60      height: var(--inputHeightLarge);
    61      min-width: 24rem;
    62      padding: 0 16px;
    63  }
    64  
    65  .chevron {
    66      height: 20px;
    67      position: absolute;
    68      top: calc(50% - 10px);
    69      right: 4px;
    70  }
    71  
    72  .dropdown {
    73      background: var(--backgroundPrimary);
    74      border: solid 2px var(--colorDisabled);
    75      border-radius: 6px;
    76      box-sizing: border-box;
    77      margin: 4px 0 0 0;
    78      height: min-content;
    79      max-height: 420px;
    80      overflow: auto;
    81      outline: none;
    82      padding: 8px 0;
    83      min-width: 100%;
    84      position: absolute;
    85      z-index: 1000;
    86  }
    87  
    88  .menu {
    89      list-style-type: none;
    90      margin: 0;
    91      outline: none;
    92      padding: 0;
    93  }
    94  
    95  .menu li {
    96      line-height: 32px;
    97      padding: 4px 12px;
    98  
    99      &:hover {
   100          background: var(--backgroundPrimaryHighlight);
   101          cursor: pointer;
   102      }
   103  
   104      &.active {
   105          background: var(--backgroundPrimaryHighlight);
   106      }
   107  }
   108  
   109  .large .menu li {
   110      font-size: theme('fontSize.lg');
   111      min-width: 24rem;
   112      padding: 8px 16px;
   113  }
   114  
   115  .clear {
   116      background: none;
   117      border: none;
   118      box-sizing: border-box;
   119      color: var(--textColorSecondary);
   120      cursor: pointer;
   121      display: block;
   122      font-family: var(--fontFamilyPrimary);
   123      font-size: var(--fontSizeBody);
   124      min-width: 16rem;
   125      padding: 4px 12px;
   126      position: relative;
   127      text-align: left;
   128      transition: all 0.1s ease-in-out;
   129      white-space: nowrap;
   130      width: 100%;
   131  
   132      &:hover,
   133      &:active,
   134      &:focus {
   135          background: var(--backgroundPrimaryHighlight);
   136      }
   137  }
   138  
   139  .large .clear {
   140      font-size: theme('fontSize.lg');
   141      padding: 8px 16px;
   142  }
   143  
   144  .emptyContainer {
   145      outline: none;
   146      padding: 8px 12px;
   147  }
   148  
   149  .emptyPlaceholder {
   150      color: var(--textColorSecondary);
   151  }