|
31 | 31 | </li> |
32 | 32 | </ul> |
33 | 33 | </div> |
| 34 | + |
| 35 | +<style> |
| 36 | +.xe-dropdown-menu li.on a { |
| 37 | + color: unset; |
| 38 | +} |
| 39 | +.xe-select-label .label-input ul, |
| 40 | +.xe-select-label .label-list ul { |
| 41 | + margin: 0; |
| 42 | + padding: 0 |
| 43 | +} |
| 44 | +
|
| 45 | +.xe-select-label .label-input ul li, |
| 46 | +.xe-select-label .label-list ul li { |
| 47 | + list-style: none |
| 48 | +} |
| 49 | +
|
| 50 | +.xe-select-label .label-list li { |
| 51 | + list-style: none |
| 52 | +} |
| 53 | +
|
| 54 | +.xe-select-label .label-list li a { |
| 55 | + text-decoration: none |
| 56 | +} |
| 57 | +
|
| 58 | +.xe-dropdown-menu, |
| 59 | +.xe-dropdown-menu ul { |
| 60 | + margin: 0; |
| 61 | + padding: 0 |
| 62 | +} |
| 63 | +
|
| 64 | +.xe-dropdown-menu li, |
| 65 | +.xe-dropdown-menu ul li { |
| 66 | + list-style: none |
| 67 | +} |
| 68 | +
|
| 69 | +.xe-dropdown-menu li a, |
| 70 | +.xe-dropdown-menu ul li a { |
| 71 | + text-decoration: none |
| 72 | +} |
| 73 | +
|
| 74 | +.xe-dropdown, |
| 75 | +.xe-dropup { |
| 76 | + display: block; |
| 77 | + position: relative; |
| 78 | + font-size: 14px; |
| 79 | + white-space: nowrap; |
| 80 | + vertical-align: middle |
| 81 | +} |
| 82 | +
|
| 83 | +.xe-dropdown>.xe-btn, |
| 84 | +.xe-dropup>.xe-btn, |
| 85 | +.xe-select-box.xe-btn { |
| 86 | + display: block; |
| 87 | + position: relative; |
| 88 | + width: 100%; |
| 89 | + padding-right: 37px; |
| 90 | + text-align: left; |
| 91 | + white-space: nowrap; |
| 92 | + outline: none |
| 93 | +} |
| 94 | +
|
| 95 | +.xe-dropdown>.xe-btn:focus, |
| 96 | +.xe-dropdown>.xe-btn.focus, |
| 97 | +.xe-dropdown>.xe-btn:active, |
| 98 | +.xe-dropdown>.xe-btn.active, |
| 99 | +.xe-dropup>.xe-btn:focus, |
| 100 | +.xe-dropup>.xe-btn.focus, |
| 101 | +.xe-dropup>.xe-btn:active, |
| 102 | +.xe-dropup>.xe-btn.active, |
| 103 | +.xe-select-box.xe-btn:focus, |
| 104 | +.xe-select-box.xe-btn.focus, |
| 105 | +.xe-select-box.xe-btn:active, |
| 106 | +.xe-select-box.xe-btn.active { |
| 107 | + background-color: #fff |
| 108 | +} |
| 109 | +
|
| 110 | +.xe-dropdown>.xe-btn:hover, |
| 111 | +.xe-dropup>.xe-btn:hover, |
| 112 | +.xe-select-box.xe-btn:hover { |
| 113 | + background-color: #fff |
| 114 | +} |
| 115 | +
|
| 116 | +.xe-dropdown>.xe-btn:active:focus, |
| 117 | +.xe-dropup>.xe-btn:active:focus, |
| 118 | +.xe-select-box.xe-btn:active:focus { |
| 119 | + background-color: #fff; |
| 120 | + outline: none |
| 121 | +} |
| 122 | +
|
| 123 | +.xe-dropdown.outline-off>.xe-btn, |
| 124 | +.xe-dropup.outline-off>.xe-btn, |
| 125 | +.xe-select-box.outline-off.xe-btn { |
| 126 | + border: none |
| 127 | +} |
| 128 | +
|
| 129 | +.xe-dropdown>.xe-btn::after, |
| 130 | +.xe-dropup>.xe-btn::after, |
| 131 | +.xe-select-box.xe-btn::after, |
| 132 | +.xe-select-label .label-input::after { |
| 133 | + display: inline-block; |
| 134 | + position: absolute; |
| 135 | + right: 15px; |
| 136 | + top: 50%; |
| 137 | + width: 0; |
| 138 | + height: 0; |
| 139 | + margin-top: -2px; |
| 140 | + border-style: solid; |
| 141 | + border-width: 3px; |
| 142 | + border-color: #656973 transparent transparent transparent; |
| 143 | + content: "" |
| 144 | +} |
| 145 | +
|
| 146 | +.xe-dropup .xe-dropdown-menu { |
| 147 | + margin-top: auto; |
| 148 | + margin-bottom: -1px; |
| 149 | + top: auto; |
| 150 | + bottom: 100% |
| 151 | +} |
| 152 | +
|
| 153 | +.xe-dropdown-menu { |
| 154 | + display: none; |
| 155 | + overflow-y: auto; |
| 156 | + position: absolute; |
| 157 | + left: 0; |
| 158 | + top: 100%; |
| 159 | + max-height: 366px; |
| 160 | + margin-top: -1px !important; |
| 161 | + border: 1px solid #51586b; |
| 162 | + border-radius: 0 0 2px 2px; |
| 163 | + background-color: #fff; |
| 164 | + z-index: 10 |
| 165 | +} |
| 166 | +
|
| 167 | +.open .xe-dropdown-menu { |
| 168 | + display: block; |
| 169 | + min-width: 100% |
| 170 | +} |
| 171 | +
|
| 172 | +.xe-dropdown-menu ul li>a { |
| 173 | + position: relative |
| 174 | +} |
| 175 | +
|
| 176 | +.xe-dropdown-menu ul li>a~ul { |
| 177 | + padding-left: 15px |
| 178 | +} |
| 179 | +
|
| 180 | +.xe-dropdown-menu ul .xe-dropdown-menu__sub li>a::before { |
| 181 | + content: '⌞'; |
| 182 | + position: absolute; |
| 183 | + top: 0px; |
| 184 | + font-size: 1.3em; |
| 185 | + -webkit-transform: translateX(-15px); |
| 186 | + -ms-transform: translateX(-15px); |
| 187 | + transform: translateX(-15px) |
| 188 | +} |
| 189 | +
|
| 190 | +.xe-dropdown-menu li>a { |
| 191 | + display: block; |
| 192 | + position: relative; |
| 193 | + padding: 8px 15px; |
| 194 | + color: #2c2e37; |
| 195 | + text-align: left; |
| 196 | + line-height: 1.42857 |
| 197 | +} |
| 198 | +
|
| 199 | +.xe-dropdown-menu li>a:hover { |
| 200 | + text-decoration: underline; |
| 201 | + background-color: transparent; |
| 202 | + color: #2c8beb !important |
| 203 | +} |
| 204 | +
|
| 205 | +.xe-dropdown-menu li.on>a { |
| 206 | + color: #2c8beb |
| 207 | +} |
| 208 | +
|
| 209 | +.xe-select-box { |
| 210 | + overflow: hidden; |
| 211 | + text-overflow: ellipsis; |
| 212 | + word-break: break-word; |
| 213 | + white-space: nowrap |
| 214 | +} |
| 215 | +
|
| 216 | +.xe-select-box select { |
| 217 | + position: absolute; |
| 218 | + top: 0; |
| 219 | + left: 0; |
| 220 | + width: 100%; |
| 221 | + height: 34px; |
| 222 | + font-size: 14px; |
| 223 | + opacity: 0; |
| 224 | + filter: alpha(opacity=0); |
| 225 | + -webkit-appearance: menulist-button |
| 226 | +} |
| 227 | +
|
| 228 | +.xe-select-label { |
| 229 | + position: relative |
| 230 | +} |
| 231 | +
|
| 232 | +.xe-select-label .label-input { |
| 233 | + display: block; |
| 234 | + position: relative; |
| 235 | + overflow: hidden; |
| 236 | + padding: 0 37px 0 10px; |
| 237 | + background-color: #f6f7f9; |
| 238 | + border: 1px solid #dbdadf; |
| 239 | + border-radius: 2px |
| 240 | +} |
| 241 | +
|
| 242 | +.xe-select-label .label-input ul li { |
| 243 | + float: left |
| 244 | +} |
| 245 | +
|
| 246 | +.xe-select-label .label-input ul li:first-child .label-choice { |
| 247 | + margin-left: 0 |
| 248 | +} |
| 249 | +
|
| 250 | +.xe-select-label .label-input ul li .label-choice { |
| 251 | + display: block; |
| 252 | + position: relative; |
| 253 | + margin: 5px 2px; |
| 254 | + padding: 1px 28px 1px 8px; |
| 255 | + color: #fff; |
| 256 | + font-size: 13px; |
| 257 | + background-color: #b5b8bd; |
| 258 | + border: 1px solid #dbdadf; |
| 259 | + border-radius: 4px; |
| 260 | + line-height: 1.42857 |
| 261 | +} |
| 262 | +
|
| 263 | +.xe-select-label .label-input ul li .label-choice button { |
| 264 | + position: absolute; |
| 265 | + right: 3px; |
| 266 | + top: 1px; |
| 267 | + background-color: transparent; |
| 268 | + border: transparent; |
| 269 | + outline: none; |
| 270 | + font-size: 11px; |
| 271 | + color: #fff; |
| 272 | + cursor: pointer |
| 273 | +} |
| 274 | +
|
| 275 | +.xe-select-label .label-input ul li .search-label { |
| 276 | + height: 21px; |
| 277 | + margin: 5px 2px; |
| 278 | + border-color: transparent; |
| 279 | + background-color: transparent |
| 280 | +} |
| 281 | +
|
| 282 | +.xe-select-label .label-list { |
| 283 | + display: none; |
| 284 | + position: absolute; |
| 285 | + top: 100%; |
| 286 | + left: 0; |
| 287 | + width: 100%; |
| 288 | + border: 1px solid #8dc5ff; |
| 289 | + background-color: #fff; |
| 290 | + z-index: 100 |
| 291 | +} |
| 292 | +
|
| 293 | +.xe-select-label.open .label-list { |
| 294 | + display: block |
| 295 | +} |
| 296 | +
|
| 297 | +.xe-select-label .label-list .label-division { |
| 298 | + padding: 10px; |
| 299 | + font-size: 13px; |
| 300 | + line-height: 1.42857; |
| 301 | + text-align: left |
| 302 | +} |
| 303 | +
|
| 304 | +.xe-select-label .label-list .label-division+.label-division { |
| 305 | + border-top: 1px solid #dbdbdd |
| 306 | +} |
| 307 | +
|
| 308 | +.xe-select-label .label-list .label-division strong { |
| 309 | + display: block; |
| 310 | + margin-bottom: 10px; |
| 311 | + color: #333 |
| 312 | +} |
| 313 | +
|
| 314 | +.xe-select-label .label-list .label-division a { |
| 315 | + display: block; |
| 316 | + padding: 0 10px; |
| 317 | + color: #696e7a; |
| 318 | + line-height: 24px; |
| 319 | + border-radius: 4px |
| 320 | +} |
| 321 | +
|
| 322 | +.xe-select-label .label-list .label-division a:hover { |
| 323 | + background-color: #2992fb; |
| 324 | + color: #fff |
| 325 | +} |
| 326 | +</style> |
0 commit comments