1/** 2 * selectize.default.css (v0.12.4) - Default Theme 3 * Copyright (c) 2013–2015 Brian Reavis & contributors 4 * 5 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this 6 * file except in compliance with the License. You may obtain a copy of the License at: 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software distributed under 10 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF 11 * ANY KIND, either express or implied. See the License for the specific language 12 * governing permissions and limitations under the License. 13 * 14 * @author Brian Reavis <brian@thirdroute.com> 15 */ 16.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder { 17 visibility: visible !important; 18 background: #f2f2f2 !important; 19 background: rgba(0, 0, 0, 0.06) !important; 20 border: 0 none !important; 21 -webkit-box-shadow: inset 0 0 12px 4px #ffffff; 22 box-shadow: inset 0 0 12px 4px #ffffff; 23} 24.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after { 25 content: '!'; 26 visibility: hidden; 27} 28.selectize-control.plugin-drag_drop .ui-sortable-helper { 29 -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 30 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 31} 32.selectize-dropdown-header { 33 position: relative; 34 padding: 5px 8px; 35 border-bottom: 1px solid #d0d0d0; 36 background: #f8f8f8; 37 -webkit-border-radius: 3px 3px 0 0; 38 -moz-border-radius: 3px 3px 0 0; 39 border-radius: 3px 3px 0 0; 40} 41.selectize-dropdown-header-close { 42 position: absolute; 43 right: 8px; 44 top: 50%; 45 color: #303030; 46 opacity: 0.4; 47 margin-top: -12px; 48 line-height: 20px; 49 font-size: 20px !important; 50} 51.selectize-dropdown-header-close:hover { 52 color: #000000; 53} 54.selectize-dropdown.plugin-optgroup_columns .optgroup { 55 border-right: 1px solid #f2f2f2; 56 border-top: 0 none; 57 float: left; 58 -webkit-box-sizing: border-box; 59 -moz-box-sizing: border-box; 60 box-sizing: border-box; 61} 62.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child { 63 border-right: 0 none; 64} 65.selectize-dropdown.plugin-optgroup_columns .optgroup:before { 66 display: none; 67} 68.selectize-dropdown.plugin-optgroup_columns .optgroup-header { 69 border-top: 0 none; 70} 71.selectize-control.plugin-remove_button [data-value] { 72 position: relative; 73 padding-right: 24px !important; 74} 75.selectize-control.plugin-remove_button [data-value] .remove { 76 z-index: 1; 77 /* fixes ie bug (see #392) */ 78 position: absolute; 79 top: 0; 80 right: 0; 81 bottom: 0; 82 width: 17px; 83 text-align: center; 84 font-weight: bold; 85 font-size: 12px; 86 color: inherit; 87 text-decoration: none; 88 vertical-align: middle; 89 display: inline-block; 90 padding: 2px 0 0 0; 91 border-left: 1px solid #0073bb; 92 -webkit-border-radius: 0 2px 2px 0; 93 -moz-border-radius: 0 2px 2px 0; 94 border-radius: 0 2px 2px 0; 95 -webkit-box-sizing: border-box; 96 -moz-box-sizing: border-box; 97 box-sizing: border-box; 98} 99.selectize-control.plugin-remove_button [data-value] .remove:hover { 100 background: rgba(0, 0, 0, 0.05); 101} 102.selectize-control.plugin-remove_button [data-value].active .remove { 103 border-left-color: #00578d; 104} 105.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover { 106 background: none; 107} 108.selectize-control.plugin-remove_button .disabled [data-value] .remove { 109 border-left-color: #aaaaaa; 110} 111.selectize-control.plugin-remove_button .remove-single { 112 position: absolute; 113 right: 28px; 114 top: 6px; 115 font-size: 23px; 116} 117.selectize-control { 118 position: relative; 119} 120.selectize-dropdown, 121.selectize-input, 122.selectize-input input { 123 color: #303030; 124 font-family: inherit; 125 font-size: 13px; 126 line-height: 18px; 127 -webkit-font-smoothing: inherit; 128} 129.selectize-input, 130.selectize-control.single .selectize-input.input-active { 131 background: #ffffff; 132 cursor: text; 133 display: inline-block; 134} 135.selectize-input { 136 border: 1px solid #d0d0d0; 137 padding: 8px 8px; 138 display: inline-block; 139 width: 100%; 140 overflow: hidden; 141 position: relative; 142 z-index: 1; 143 -webkit-box-sizing: border-box; 144 -moz-box-sizing: border-box; 145 box-sizing: border-box; 146 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); 147 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); 148 -webkit-border-radius: 3px; 149 -moz-border-radius: 3px; 150 border-radius: 3px; 151} 152.selectize-control.multi .selectize-input.has-items { 153 padding: 5px 8px 2px; 154} 155.selectize-input.full { 156 background-color: #ffffff; 157} 158.selectize-input.disabled, 159.selectize-input.disabled * { 160 cursor: default !important; 161} 162.selectize-input.focus { 163 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); 164 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); 165} 166.selectize-input.dropdown-active { 167 -webkit-border-radius: 3px 3px 0 0; 168 -moz-border-radius: 3px 3px 0 0; 169 border-radius: 3px 3px 0 0; 170} 171.selectize-input > * { 172 vertical-align: baseline; 173 display: -moz-inline-stack; 174 display: inline-block; 175 zoom: 1; 176 *display: inline; 177} 178.selectize-control.multi .selectize-input > div { 179 cursor: pointer; 180 margin: 0 3px 3px 0; 181 padding: 2px 6px; 182 background: #1da7ee; 183 color: #ffffff; 184 border: 1px solid #0073bb; 185} 186.selectize-control.multi .selectize-input > div.active { 187 background: #92c836; 188 color: #ffffff; 189 border: 1px solid #00578d; 190} 191.selectize-control.multi .selectize-input.disabled > div, 192.selectize-control.multi .selectize-input.disabled > div.active { 193 color: #ffffff; 194 background: #d2d2d2; 195 border: 1px solid #aaaaaa; 196} 197.selectize-input > input { 198 display: inline-block !important; 199 padding: 0 !important; 200 min-height: 0 !important; 201 max-height: none !important; 202 max-width: 100% !important; 203 margin: 0 1px !important; 204 text-indent: 0 !important; 205 border: 0 none !important; 206 background: none !important; 207 line-height: inherit !important; 208 -webkit-user-select: auto !important; 209 -webkit-box-shadow: none !important; 210 box-shadow: none !important; 211} 212.selectize-input > input::-ms-clear { 213 display: none; 214} 215.selectize-input > input:focus { 216 outline: none !important; 217} 218.selectize-input::after { 219 content: ' '; 220 display: block; 221 clear: left; 222} 223.selectize-input.dropdown-active::before { 224 content: ' '; 225 display: block; 226 position: absolute; 227 background: #f0f0f0; 228 height: 1px; 229 bottom: 0; 230 left: 0; 231 right: 0; 232} 233.selectize-dropdown { 234 position: absolute; 235 z-index: 10; 236 border: 1px solid #d0d0d0; 237 background: #ffffff; 238 margin: -1px 0 0 0; 239 border-top: 0 none; 240 -webkit-box-sizing: border-box; 241 -moz-box-sizing: border-box; 242 box-sizing: border-box; 243 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 244 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 245 -webkit-border-radius: 0 0 3px 3px; 246 -moz-border-radius: 0 0 3px 3px; 247 border-radius: 0 0 3px 3px; 248} 249.selectize-dropdown [data-selectable] { 250 cursor: pointer; 251 overflow: hidden; 252} 253.selectize-dropdown [data-selectable] .highlight { 254 background: rgba(125, 168, 208, 0.2); 255 -webkit-border-radius: 1px; 256 -moz-border-radius: 1px; 257 border-radius: 1px; 258} 259.selectize-dropdown [data-selectable], 260.selectize-dropdown .optgroup-header { 261 padding: 5px 8px; 262} 263.selectize-dropdown .optgroup:first-child .optgroup-header { 264 border-top: 0 none; 265} 266.selectize-dropdown .optgroup-header { 267 color: #303030; 268 background: #ffffff; 269 cursor: default; 270} 271.selectize-dropdown .active { 272 background-color: #f5fafd; 273 color: #495c68; 274} 275.selectize-dropdown .active.create { 276 color: #495c68; 277} 278.selectize-dropdown .create { 279 color: rgba(48, 48, 48, 0.5); 280} 281.selectize-dropdown-content { 282 overflow-y: auto; 283 overflow-x: hidden; 284 max-height: 200px; 285 -webkit-overflow-scrolling: touch; 286} 287.selectize-control.single .selectize-input, 288.selectize-control.single .selectize-input input { 289 cursor: pointer; 290} 291.selectize-control.single .selectize-input.input-active, 292.selectize-control.single .selectize-input.input-active input { 293 cursor: text; 294} 295.selectize-control.single .selectize-input:after { 296 content: ' '; 297 display: block; 298 position: absolute; 299 top: 50%; 300 right: 15px; 301 margin-top: -3px; 302 width: 0; 303 height: 0; 304 border-style: solid; 305 border-width: 5px 5px 0 5px; 306 border-color: #808080 transparent transparent transparent; 307} 308.selectize-control.single .selectize-input.dropdown-active:after { 309 margin-top: -4px; 310 border-width: 0 5px 5px 5px; 311 border-color: transparent transparent #808080 transparent; 312} 313.selectize-control.rtl.single .selectize-input:after { 314 left: 15px; 315 right: auto; 316} 317.selectize-control.rtl .selectize-input > input { 318 margin: 0 4px 0 -2px !important; 319} 320.selectize-control .selectize-input.disabled { 321 opacity: 0.5; 322 background-color: #fafafa; 323} 324.selectize-control.multi .selectize-input.has-items { 325 padding-left: 5px; 326 padding-right: 5px; 327} 328.selectize-control.multi .selectize-input.disabled [data-value] { 329 color: #999; 330 text-shadow: none; 331 background: none; 332 -webkit-box-shadow: none; 333 box-shadow: none; 334} 335.selectize-control.multi .selectize-input.disabled [data-value], 336.selectize-control.multi .selectize-input.disabled [data-value] .remove { 337 border-color: #e6e6e6; 338} 339.selectize-control.multi .selectize-input.disabled [data-value] .remove { 340 background: none; 341} 342.selectize-control.multi .selectize-input [data-value] { 343 text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3); 344 -webkit-border-radius: 3px; 345 -moz-border-radius: 3px; 346 border-radius: 3px; 347 background-color: #1b9dec; 348 background-image: -moz-linear-gradient(top, #1da7ee, #178ee9); 349 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1da7ee), to(#178ee9)); 350 background-image: -webkit-linear-gradient(top, #1da7ee, #178ee9); 351 background-image: -o-linear-gradient(top, #1da7ee, #178ee9); 352 background-image: linear-gradient(to bottom, #1da7ee, #178ee9); 353 background-repeat: repeat-x; 354 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1da7ee', endColorstr='#ff178ee9', GradientType=0); 355 -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03); 356 box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03); 357} 358.selectize-control.multi .selectize-input [data-value].active { 359 background-color: #0085d4; 360 background-image: -moz-linear-gradient(top, #008fd8, #0075cf); 361 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#008fd8), to(#0075cf)); 362 background-image: -webkit-linear-gradient(top, #008fd8, #0075cf); 363 background-image: -o-linear-gradient(top, #008fd8, #0075cf); 364 background-image: linear-gradient(to bottom, #008fd8, #0075cf); 365 background-repeat: repeat-x; 366 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff008fd8', endColorstr='#ff0075cf', GradientType=0); 367} 368.selectize-control.single .selectize-input { 369 -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8); 370 box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8); 371 background-color: #f9f9f9; 372 background-image: -moz-linear-gradient(top, #fefefe, #f2f2f2); 373 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#f2f2f2)); 374 background-image: -webkit-linear-gradient(top, #fefefe, #f2f2f2); 375 background-image: -o-linear-gradient(top, #fefefe, #f2f2f2); 376 background-image: linear-gradient(to bottom, #fefefe, #f2f2f2); 377 background-repeat: repeat-x; 378 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffefefe', endColorstr='#fff2f2f2', GradientType=0); 379} 380.selectize-control.single .selectize-input, 381.selectize-dropdown.single { 382 border-color: #b8b8b8; 383} 384.selectize-dropdown .optgroup-header { 385 padding-top: 7px; 386 font-weight: bold; 387 font-size: 0.85em; 388} 389.selectize-dropdown .optgroup { 390 border-top: 1px solid #f0f0f0; 391} 392.selectize-dropdown .optgroup:first-child { 393 border-top: 0 none; 394} 395