github.com/manicqin/nomad@v0.9.5/ui/app/styles/components/dropdown.scss (about)

     1  .ember-power-select-trigger,
     2  .dropdown-trigger {
     3    position: relative;
     4    padding: 0.3em 16px 0.3em 0.3em;
     5    border-radius: $radius;
     6    box-shadow: $button-box-shadow-standard;
     7    background: $white-bis;
     8    border: 1px solid $grey-light;
     9    outline: none;
    10    cursor: pointer;
    11  
    12    &:focus {
    13      box-shadow: $button-box-shadow-standard, inset 0 0 0 2px $grey-lighter;
    14    }
    15  
    16    &.is-outlined {
    17      border-color: rgba($white, 0.5);
    18      color: $white;
    19      background: transparent;
    20      box-shadow: $button-box-shadow-standard, 0 0 2px 2px rgba($black, 0.1);
    21  
    22      .ember-power-select-status-icon {
    23        border-top-color: rgba($white, 0.75);
    24      }
    25  
    26      .ember-power-select-prefix {
    27        color: rgba($white, 0.75);
    28      }
    29    }
    30  }
    31  
    32  .button-bar {
    33    display: inline-flex;
    34    flex-direction: row;
    35    box-shadow: $button-box-shadow-standard;
    36  
    37    .dropdown {
    38      display: flex;
    39      position: relative;
    40  
    41      & + .dropdown {
    42        margin-left: -1px;
    43      }
    44    }
    45  
    46    .ember-power-select-trigger,
    47    .dropdown-trigger {
    48      border-radius: 0;
    49      box-shadow: none;
    50  
    51      &:focus {
    52        box-shadow: inset 0 0 0 2px $grey-lighter;
    53      }
    54    }
    55  
    56    .dropdown:first-child {
    57      .ember-power-select-trigger,
    58      .dropdown-trigger {
    59        border-top-left-radius: $radius;
    60        border-bottom-left-radius: $radius;
    61      }
    62    }
    63  
    64    .dropdown:last-child {
    65      .ember-power-select-trigger,
    66      .dropdown-trigger {
    67        border-top-right-radius: $radius;
    68        border-bottom-right-radius: $radius;
    69      }
    70    }
    71  }
    72  
    73  .dropdown-trigger-label {
    74    margin-left: 8px;
    75    margin-right: 8px;
    76    display: inline-block;
    77    white-space: nowrap;
    78  }
    79  
    80  .ember-power-select-selected-item,
    81  .dropdown-item {
    82    text-overflow: ellipsis;
    83    white-space: nowrap;
    84  }
    85  
    86  .ember-power-select-prefix,
    87  .dropdown-prefix {
    88    color: $grey;
    89  }
    90  
    91  .ember-power-select-option,
    92  .dropdown-option {
    93    .ember-power-select-prefix,
    94    .dropdown-prefix {
    95      display: none;
    96    }
    97  }
    98  
    99  .dropdown-options,
   100  .ember-power-select-options {
   101    margin: 0;
   102    padding: 0;
   103  }
   104  
   105  // Bulma override
   106  .menu-list li ul.ember-power-select-options {
   107    margin: 0;
   108    padding: 0;
   109  }
   110  
   111  .dropdown-options {
   112    border: 1px solid $grey-light;
   113    margin-top: -1px;
   114    max-height: 400px;
   115    overflow: auto;
   116  
   117    & > ul {
   118      width: 100%;
   119    }
   120  
   121    .dropdown-option {
   122      margin: 0;
   123      padding: 0;
   124      white-space: nowrap;
   125      line-height: 1.75;
   126  
   127      label {
   128        display: block;
   129        padding: 3px 8px;
   130        min-width: 100px;
   131        cursor: pointer;
   132      }
   133  
   134      & + .dropdown-option {
   135        border-top: 1px solid $grey-lighter;
   136      }
   137  
   138      &:hover,
   139      &:focus {
   140        background: $white-bis;
   141        outline: none;
   142        border-left: 2px solid $blue;
   143        label {
   144          padding-left: 6px;
   145          min-width: 98px;
   146        }
   147      }
   148    }
   149  
   150    .dropdown-empty {
   151      display: block;
   152      padding: 8px 12px;
   153      color: $grey-light;
   154    }
   155  }