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 }