UNPKG

14.9 kBtext/lessView Raw
1@import (reference) './imports/global';
2@import (reference) './imports/aui-theme/components/dropdown';
3@import (reference) './imports/aui-theme/components/forms';
4@import (reference) './imports/mixins/icon-pseudoelement';
5@import (reference) './imports/mixins/focus';
6@import (reference) './imports/aui-theme/core/colors';
7
8/*
9 ADG styles to be added to select2 items.
10
11 There are 5 main components that select2 uses.
12 # select2-container - the top-level container that wraps the original <input> element
13 ## select2-choice - the <a> the user clicks on to trigger the dropdown, shows the selected item
14 # select2-drop - the top-level container directly in the <body> that displays the dropdown
15 ## select2-search - the search box in the dropdown
16 ## select2-results - the list of results in the dropdown, including groups
17
18 Overrides in this CSS file should start with:
19 # .aui-select2-container - in auiSelect2 JS we add this class to the top container
20 # .aui-select2-drop - in auiSelect2 JS we add this class to the dropdown container
21
22 By sticking to these two selector elements we won't accidentally break other code that uses select2. If they want
23 sexy ADG styles they can call auiSelect2() instead of select2().
24 Please don't add application-specific styles/rules in here, as these styles will eventually be pulled into AUI.
25*/
26
27@aui-select2-form-field-border-radius: @aui-border-radius-smallish;
28@aui-select2-chosen-border-radius: @aui-border-radius-smallish;
29@aui-select2-chosen-close-button-length: 17px;
30
31.select2-drop-mask {
32 z-index: @aui-z-select2 - 2;
33}
34
35.aui-select2-drop {
36 --aui-item-border-radius: 0;
37 margin-top: @aui-dropdown-trigger-offset;
38 margin-bottom: 0;
39 z-index: @aui-z-select2 - 1; // override select2 z-indices to fit in AUI's ranges. sits above blanket but below suggestions.
40}
41
42.aui-select2 .select2-search {
43 z-index: @aui-z-select2;
44}
45
46.aui-select2-drop .select2-result-selectable .select2-match,
47.aui-select2-drop .select2-result-unselectable .select2-match {
48 text-decoration: none;
49 font-weight: bold;
50}
51
52.aui-select2-drop .select2-results ul.select2-result-sub {
53 padding: 0;
54}
55
56@aui-select2-search-input-padding: 5px;
57@aui-dropdown2-padding: 3px;
58.aui-select2-drop.aui-dropdown2 .select2-search {
59 padding: @aui-select2-search-input-padding+@aui-dropdown2-padding;
60}
61
62.aui-select2-drop .select2-results ul.select2-result-sub > li .select2-result-label,
63.aui-select2-drop .select2-results .select2-result-label,
64.aui-select2-drop .select2-results .select2-searching,
65.aui-select2-drop .select2-results .select2-no-results,
66.aui-select2-drop .select2-results .select2-more-results {
67 #aui-nav.item-base();
68}
69
70.aui-select2-drop .select2-result-label {
71 text-overflow: ellipsis;
72 white-space: nowrap;
73 overflow: hidden;
74 cursor: inherit; // this will be set by the dropdown item style
75}
76
77.aui-select2-drop .select2-results {
78 margin: 0;
79 padding: 0;
80}
81
82.aui-select2-drop .select2-more-results,
83.aui-select2-drop .select2-searching,
84.aui-select2-drop .select2-no-results {
85 background-color: transparent;
86}
87
88.aui-select2-drop {
89 border: @aui-form-field-border-width solid @aui-button-border-color;
90}
91
92.select2-drop.select2-drop-above .select2-search input {
93 margin-top: 0;
94}
95
96.aui-select2-drop .select2-search {
97 display: flex;
98 align-items: center;
99 @icon-offset: 12px;
100 #aui.icon(@aui-glyph-search, {
101 left: auto;
102 right: @icon-offset;
103 });
104 input {
105 //padding for the icon
106 padding-right: @icon-offset/2 + @aui-icon-size-small;
107 #aui.with-focus-border();
108 border-radius: @aui-select2-form-field-border-radius;
109 //we need to use important because jquery plugin uses important as well :(
110 background: none !important;
111 color: inherit;
112 font-family: inherit;
113 min-height: 0;
114 }
115}
116
117.aui-select2-container.select2-container .select2-choice,
118.aui-select2-drop {
119 color: inherit;
120 max-width: none;
121}
122
123.aui-select2-drop.aui-dropdown2 {
124 #aui-dropdowns.aui-dropdown-style();
125
126 // Styles for when the results are shown above instead of below the input
127 &.select2-drop-above {
128 margin-bottom: @aui-dropdown-trigger-offset;
129 margin-top: 0;
130 }
131}
132.aui-select2-drop.aui-dropdown2.select2-with-searchbox {
133 padding-top: 0;
134}
135
136.aui-select2-drop .select2-results .select2-result-selectable {
137 #aui-nav.item-style(normal);
138}
139
140.aui-select2-drop .select2-results .select2-highlighted {
141 #aui-nav.item-style(hover);
142}
143
144.aui-select2-drop .select2-results .select2-result-unselectable {
145 #aui-nav.item-style(disabled);
146}
147
148// beat the previous rule and ensure the cursor is correct.
149.aui-select2-drop .select2-results .select2-result-with-children {
150 cursor: inherit;
151}
152
153// Add dividers between grouped options
154.aui-select2-drop .select2-results {
155 .select2-result-with-children {
156 // We need to add both borders because the results double
157 // as group containers and we don't know where in
158 // the source order they'll appear.
159 border-top: 1px solid @aui-dropdown-border-color;
160 border-bottom: 1px solid @aui-dropdown-border-color;
161 margin: @aui-dropdown-group-spacing 0;
162 padding: 0;
163
164 &:first-child {
165 border-top: 0;
166 margin-top: 0;
167 }
168
169 &:last-child {
170 border-bottom: 0;
171 margin-bottom: 0;
172 }
173
174 > :first-child {
175 margin-top: @aui-dropdown-group-spacing;
176 }
177
178 > :last-child {
179 margin-bottom: @aui-dropdown-group-spacing;
180 }
181
182 > .select2-result-label {
183 #aui.typography.h100(@aui-dropdown-heading-text-color);
184 }
185 }
186
187 // We now selectively remove borders and add margins, depending
188 // on subsequent elements after a group of results.
189 // This occurs when an <optgroup> is sandwiched
190 // in between <option> elements.
191 .select2-result-with-children + .select2-result > .select2-result-label {
192 margin-top: @aui-dropdown-group-spacing;
193 }
194
195 .select2-result-with-children + .select2-result-with-children {
196 border-top: 0;
197 }
198}
199
200.aui-select2-container.select2-container .select2-choice > span {
201 display: block;
202 overflow: hidden;
203 white-space: nowrap;
204 text-overflow: ellipsis;
205}
206
207.aui-select2-container.select2-container .select2-choice .select2-arrow {
208 background: none;
209 border: none;
210 filter: none;
211}
212
213.aui-select2-container.select2-container-active .select2-choice,
214.aui-select2-container.select2-container-active .select2-choices {
215 border: none;
216 outline: none;
217 box-shadow: none;
218}
219
220.aui-select2-container.select2-container .select2-choice .select2-arrow b {
221 display: none;
222 background: none;
223}
224
225.aui-select2-container.select2-container .select2-choice {
226 padding-right: 23px; /* 8px (arrow width) + 10px (right padding) + 5px (margin between arrow and logo) */
227 position: relative;
228 width: inherit;
229}
230
231.aui-select2-container.select2-container a.select2-choice,
232.aui-select2-container.select2-container a.select2-choice:focus,
233.aui-select2-container.select2-container a.select2-choice:hover,
234.aui-select2-container.select2-container a.select2-choice:active {
235 text-decoration: none;
236}
237
238.aui-select2-container.select2-container .select2-choice:after {
239 #aui.icon-pseudoelement();
240 content: @aui-glyph-chevron-down;
241 height: 0;
242 margin-left: -18px;
243 margin-top: -2px;
244 opacity: 1;
245 position: absolute;
246 top: calc(50% - 10px);
247 width: 0;
248 font-size: 16px;
249 line-height: 24px;
250 right: 22px;
251}
252
253/* Set the default text color to inherit.
254 NOTE: this class is only marked as !important because Select2 marks the same
255 selector as !important in it's styles. */
256.aui-select2-container .select2-input {
257 color: inherit !important;
258}
259
260/* Since select2 uses the placeholder text as the value of the input,
261 the following style is used to override text color to mach ADG placeholder.
262 Select2 gives the input a class of select2-default when the value represents the placeholder value.
263 NOTE: this class is only marked as !important because Select2 marks the same
264 selector as !important in its styles. */
265.aui-select2-container .select2-default {
266 color: var(--aui-select2-placeholder-text-color) !important;
267}
268
269.aui-select2-container .select2-choices .select2-search-field input {
270 font-family: inherit;
271 font-size: 14px;
272 height: 1.4285714285714em; /* 20px - using ems so the fields increase in line with user specified font-sizes */
273 line-height: 1.4285714285714;
274 margin: 0;
275 padding: 0;
276}
277
278.aui-select2-container.select2-container-multi .select2-choices {
279 #aui-forms.aui-select2-input-field-style(normal);
280 #aui.icon(@aui-glyph-chevron-down, {
281 font-size: 16.5px;
282 left: inherit;
283 color: var(--aui-button-default-text-color);
284 right: 3px;
285 top: 50%;
286 line-height: 16px;
287 });
288
289 min-height: 0;
290}
291
292.aui-select2-container.select2-container-multi.select2-container .select2-choices.select2-choices{
293 padding-right: @aui-icon-size-small;
294}
295.aui-select2-container.select2-container-multi.text {
296 height: auto;
297}
298
299
300// We need to be that specific with allowClear to change the default styles when the option is set to "true"
301.aui-select2-container, .aui-select2-container.select2-allowclear {
302 .select2-search-choice-close {
303 // Remove default select2 close icon image
304 background-image: none !important; // because the base select2 styles' media queries for retina use !important :(
305 left: unset; // from default select2 styles
306
307 // Apply our styles
308 border-radius: @aui-select2-chosen-border-radius;
309 color: inherit;
310 cursor: pointer;
311 text-align: center;
312 width: @aui-select2-chosen-close-button-length;
313 height: auto; // Needed to override select2 close button height
314 text-decoration: none;
315 filter: opacity(0.5);
316
317 // Apply our own icon
318 &::before {
319 #aui.icon-pseudoelement(@aui-icon-font-family);
320 content: @aui-glyph-close;
321 font-size: 10px;
322 margin: auto;
323 }
324
325 &:hover {
326 background-color: var(--aui-label-close-hover-bg-color);
327 color: var(--aui-label-close-hover-text-color);
328 filter: none;
329 }
330 }
331
332 // set specific styles for "close" icon when is shown inside a multi-select option that is selected
333 .select2-search-choice .select2-search-choice-close {
334 position: absolute;
335 right: 0;
336 top: 0;
337 bottom: 0;
338 display: flex;
339 }
340}
341
342.select2-search-choice {
343 .aui-select2-container .select2-choices & {
344 background: var(--aui-select2-chosen-bg-color);
345 border: 1px solid $background;
346 border-radius: @aui-select2-chosen-border-radius;
347 box-shadow: none;
348 color: var(--aui-select2-chosen-text-color);
349 display: inline-block;
350 font-size: 14px;
351 font-weight: normal;
352 line-height: 1;
353 padding: 1px 18px 1px 5px;
354 position: relative;
355 margin: 1px 5px 1px 0;
356 text-align: left;
357 text-decoration: none;
358 }
359
360 .aui-select2-container .select2-choices:hover & {
361 background-color: var(--aui-select2-chosen-hover-bg-color);
362 border-color: $background-color;
363 color: var(--aui-select2-chosen-hover-text-color);
364 }
365
366 .aui-select2-container.select2-container-active .select2-choices & {
367 background-color: var(--aui-select2-active-chosen-bg-color);
368 border-color: $background-color;
369 color: var(--aui-select2-active-chosen-text-color);
370 }
371
372 .aui-select2-container .select2-choices &.select2-search-choice-focus {
373 #aui.with-focus-ring();
374 background-color: var(--aui-select2-chosen-hover-bg-color);
375
376 .select2-search-choice-close {
377 &:extend(.aui-select2-container .select2-search-choice-close:hover);
378 }
379 }
380}
381
382/* In order to beat out select2's overrides, the aui-button style had to be copied in below.
383 Unfortunately, any changes to that style will have to be copied here as well to keep the select2
384 element consistent.*/
385.aui-select2-container.select2-container .select2-choice,
386.aui-select2-container.select2-container a.select2-choice,
387.aui-select2-container.select2-container .select2-choice:visited {
388 #aui.box-sizing();
389 #aui-buttons.aui-button-base();
390 #aui-buttons.aui-button-style(normal);
391 border-width: 0;
392 display: inline-block;
393 filter: none;
394 height: 2.1428571428571em; /* 30px - using ems so the fields increase in line with user specified font-sizes */
395 line-height: 1.4285714285714;
396 margin: 0;
397 padding: 4px 10px;
398 text-decoration: none;
399 text-shadow: none;
400 vertical-align: top;
401 white-space: nowrap;
402}
403
404// Dropdown hovered by mouse
405.aui-select2-container:not(.select2-dropdown-open).select2-container .select2-choice:hover {
406 #aui-buttons.aui-button-style(hover);
407 box-shadow: none;
408 text-decoration: none;
409}
410
411// Dropdown focussed by keyboard
412.aui-select2-container.select2-container.select2-container-active .select2-choice,
413.aui-select2-container.select2-container .select2-choice:active {
414 #aui-buttons.aui-button-style(hover);
415}
416
417.aui-select2-container.select2-container:not(.select2-dropdown-open).select2-container-active .select2-choice,
418.aui-select2-container.select2-container:not(.select2-dropdown-open) .select2-choice:active {
419 #aui.with-focus-ring();
420}
421
422// Dropdown "selected" (i.e., active with an open dropdown)
423.aui-select2-container.select2-container.select2-dropdown-open:not(.select2-container-multi) .select2-choice,
424.aui-select2-container.select2-container.select2-dropdown-open:not(.select2-container-multi) .select2-choices {
425 #aui-buttons.aui-button-style(selected);
426}
427
428.aui-select2-container.select2-container.select2-drop-above .select2-choice,
429.aui-select2-container.select2-dropdown-open.select2-drop-above .select2-choice,
430.aui-select2-container.select2-dropdown-open.select2-drop-above .select2-choices,
431.aui-select2-container.select2-container-multi .select2-choices .select2-search-choice {
432 filter: none;
433}
434
435.aui-select2-container .aui-avatar {
436 margin-right: 5px;
437}
438
439.aui-select2-container.aui-has-avatar .select2-choices .select2-search-field input {
440 padding: 1px 0;
441}
442
443.aui-select2-drop.aui-has-avatar .select2-results .select2-result-label .aui-avatar {
444 margin-right: 5px;
445 vertical-align: middle;
446}
447
448.aui-select2-drop.aui-has-avatar .select2-more-results,
449.aui-select2-drop.aui-has-avatar .select2-searching,
450.aui-select2-drop.aui-has-avatar .select2-no-results {
451 padding-bottom: 5px;
452 padding-top: 5px;
453}