github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/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    .dropdown-option {
   165      margin: 0;
   166      padding: 0;
   167      white-space: nowrap;
   168      line-height: 1.75;
   169  
   170      label {
   171        display: block;
   172        padding: 3px 8px;
   173        min-width: 100px;
   174        cursor: pointer;
   175      }
   176  
   177      & + .dropdown-option {
   178        border-top: 1px solid $grey-lighter;
   179      }
   180  
   181      &:hover,
   182      &:focus {
   183        background: $white-bis;
   184        outline: none;
   185        border-left: 2px solid $blue;
   186        label {
   187          padding-left: 6px;
   188          min-width: 98px;
   189        }
   190      }
   191    }
   192  
   193    .dropdown-empty {
   194      display: block;
   195      padding: 8px 12px;
   196      color: $grey-light;
   197    }
   198  }