github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/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  
    37  .button-bar {
    38    display: inline-flex;
    39    flex-direction: row;
    40    box-shadow: $button-box-shadow-standard;
    41  
    42    .dropdown {
    43      display: flex;
    44      position: relative;
    45  
    46      & + .dropdown {
    47        margin-left: -1px;
    48      }
    49    }
    50  
    51    .ember-power-select-trigger,
    52    .dropdown-trigger {
    53      border-radius: 0;
    54      box-shadow: none;
    55  
    56      &:focus {
    57        box-shadow: inset 0 0 0 2px $grey-lighter;
    58      }
    59    }
    60  
    61    .dropdown:first-child {
    62      .ember-power-select-trigger,
    63      .dropdown-trigger {
    64        border-top-left-radius: $radius;
    65        border-bottom-left-radius: $radius;
    66      }
    67    }
    68  
    69    .dropdown:last-child {
    70      .ember-power-select-trigger,
    71      .dropdown-trigger {
    72        border-top-right-radius: $radius;
    73        border-bottom-right-radius: $radius;
    74      }
    75    }
    76  }
    77  
    78  .ember-power-select-selected-item,
    79  .dropdown-trigger-label {
    80    margin-left: 8px;
    81    margin-right: 8px;
    82    display: inline-block;
    83    white-space: nowrap;
    84  }
    85  
    86  .ember-power-select-selected-item,
    87  .dropdown-item {
    88    text-overflow: ellipsis;
    89    white-space: nowrap;
    90  }
    91  
    92  .ember-power-select-prefix,
    93  .dropdown-prefix {
    94    color: $grey;
    95  }
    96  
    97  .ember-power-select-option,
    98  .dropdown-option {
    99    .ember-power-select-prefix,
   100    .dropdown-prefix {
   101      display: none;
   102    }
   103  }
   104  
   105  .dropdown-options,
   106  .ember-power-select-options {
   107    margin: 0;
   108    padding: 0;
   109  }
   110  
   111  // Bulma override
   112  .menu-list li ul.ember-power-select-options {
   113    margin: 0;
   114    padding: 0;
   115  }
   116  
   117  .dropdown-options {
   118    border: 1px solid $grey-light;
   119    margin-top: -1px;
   120    max-height: 400px;
   121    overflow: auto;
   122  
   123    & > ul {
   124      width: 100%;
   125    }
   126  
   127    .dropdown-option {
   128      margin: 0;
   129      padding: 0;
   130      white-space: nowrap;
   131      line-height: 1.75;
   132  
   133      label {
   134        display: block;
   135        padding: 3px 8px;
   136        min-width: 100px;
   137        cursor: pointer;
   138      }
   139  
   140      & + .dropdown-option {
   141        border-top: 1px solid $grey-lighter;
   142      }
   143  
   144      &:hover,
   145      &:focus {
   146        background: $white-bis;
   147        outline: none;
   148        border-left: 2px solid $blue;
   149        label {
   150          padding-left: 6px;
   151          min-width: 98px;
   152        }
   153      }
   154    }
   155  
   156    .dropdown-empty {
   157      display: block;
   158      padding: 8px 12px;
   159      color: $grey-light;
   160    }
   161  }