github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/styles/components/dropdown.scss (about)

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