github.com/hernad/nomad@v1.6.112/ui/app/styles/components/dropdown-nomad-internal.scss (about)

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  .ember-power-select-trigger,
     7  .dropdown-trigger {
     8    position: relative;
     9    display: flex;
    10    align-items: center;
    11    padding: 0.375em 16px 0.375em 0.3em;
    12    line-height: 1;
    13    border-radius: $radius;
    14    box-shadow: $button-box-shadow-standard;
    15    background: $white-bis;
    16    border: 1px solid $grey-light;
    17    height: 2.25em;
    18    font-size: 1rem;
    19    outline: none;
    20    cursor: pointer;
    21  
    22    &:focus {
    23      box-shadow: $button-box-shadow-standard, inset 0 0 0 2px $grey-lighter;
    24    }
    25  
    26    &.is-outlined {
    27      border-color: rgba($white, 0.5);
    28      color: $white;
    29      background: transparent;
    30      box-shadow: $button-box-shadow-standard, 0 0 2px 2px rgba($black, 0.1);
    31  
    32      .ember-power-select-status-icon {
    33        border-top-color: rgba($white, 0.75);
    34      }
    35  
    36      .ember-power-select-prefix {
    37        color: rgba($white, 0.75);
    38      }
    39    }
    40  
    41    &.is-compact {
    42      margin: -0.25em 0;
    43  
    44      &.pull-right {
    45        margin-right: -1em;
    46      }
    47  
    48      &.pull-left {
    49        margin-left: -1em;
    50      }
    51    }
    52  }
    53  
    54  .button-bar {
    55    display: inline-flex;
    56    flex-direction: row;
    57    box-shadow: $button-box-shadow-standard;
    58  
    59    .dropdown,
    60    .button {
    61      display: flex;
    62      position: relative;
    63  
    64      & + .dropdown,
    65      & + .button {
    66        margin-left: -1px;
    67      }
    68    }
    69  
    70    .ember-power-select-trigger,
    71    .dropdown-trigger,
    72    .button {
    73      border-radius: 0;
    74      box-shadow: none;
    75  
    76      &:focus {
    77        box-shadow: inset 0 0 0 2px $grey-lighter;
    78      }
    79    }
    80  
    81    // Buttons have their own focus treatment that needs to be overrided here.
    82    // Since .button.is-color takes precedence over .button-bar .button, each
    83    // color needs the override.
    84    .button {
    85      @each $name, $pair in $colors {
    86        &.is-#{$name}:focus {
    87          box-shadow: inset 0 0 0 2px $grey-lighter;
    88        }
    89      }
    90    }
    91  
    92    .dropdown:first-child .ember-power-select-trigger,
    93    .dropdown:first-child .dropdown-trigger,
    94    .button:first-child {
    95      border-top-left-radius: $radius;
    96      border-bottom-left-radius: $radius;
    97    }
    98  
    99    .dropdown:last-child .ember-power-select-trigger,
   100    .dropdown:last-child .dropdown-trigger,
   101    .button:last-child {
   102      border-top-right-radius: $radius;
   103      border-bottom-right-radius: $radius;
   104    }
   105  
   106    &.is-shadowless {
   107      box-shadow: none;
   108    }
   109  
   110    // Used to minimize any extra height the buttons would add to an otherwise
   111    // text only container.
   112    &.is-text {
   113      margin-top: -0.5em;
   114      margin-bottom: -0.5em;
   115      vertical-align: middle;
   116    }
   117  }
   118  
   119  .ember-power-select-selected-item,
   120  .dropdown-trigger-label {
   121    margin-left: 8px;
   122    margin-right: 8px;
   123    display: inline-block;
   124    white-space: nowrap;
   125  }
   126  
   127  .ember-power-select-selected-item,
   128  .dropdown-item {
   129    text-overflow: ellipsis;
   130    overflow: hidden;
   131    white-space: nowrap;
   132  }
   133  
   134  .ember-power-select-prefix,
   135  .dropdown-prefix {
   136    color: $grey;
   137  }
   138  
   139  .ember-power-select-option,
   140  .dropdown-option {
   141    .ember-power-select-prefix,
   142    .dropdown-prefix {
   143      display: none;
   144    }
   145  }
   146  
   147  .dropdown-options,
   148  .ember-power-select-options {
   149    margin: 0;
   150    padding: 0;
   151  }
   152  
   153  // Bulma override
   154  .menu-list li ul.ember-power-select-options {
   155    margin: 0;
   156    padding: 0;
   157  }
   158  
   159  .dropdown-options {
   160    border: 1px solid $grey-light;
   161    margin-top: -1px;
   162    max-height: 400px;
   163    overflow: auto;
   164  
   165    & > ul {
   166      width: 100%;
   167    }
   168  
   169    // ember-power-select@v4.1.3: There is currently no way to set a class
   170    // on an individual option, so .ember-power-select-option must be included
   171    // in these selectors.
   172    .dropdown-option,
   173    .ember-power-select-option {
   174      margin: 0;
   175      padding: 0;
   176      white-space: nowrap;
   177      line-height: 1.75;
   178  
   179      label,
   180      .dropdown-label {
   181        display: block;
   182        padding: 3px 8px;
   183        min-width: 100px;
   184        cursor: pointer;
   185      }
   186  
   187      & + .dropdown-option,
   188      & + .ember-power-select-option {
   189        border-top: 1px solid $grey-lighter;
   190      }
   191  
   192      &:hover,
   193      &:focus,
   194      &[aria-current='true'],
   195      &[aria-selected='true'] {
   196        background: $white-bis;
   197        color: $black;
   198        outline: none;
   199        border-left: 2px solid $blue;
   200        label,
   201        .dropdown-label {
   202          padding-left: 6px;
   203          min-width: 98px;
   204        }
   205      }
   206  
   207      &[aria-selected='true'] {
   208        background: $blue-050;
   209      }
   210    }
   211  
   212    .dropdown-empty {
   213      display: block;
   214      padding: 8px 12px;
   215      color: $grey-light;
   216    }
   217  }