1 | @import (reference) './imports/global';
|
2 | @import (reference) './imports/aui-theme/components/dropdown';
|
3 |
|
4 | @aui-select-image-size: 16px;
|
5 | @aui-select-image-in-input-top: 6px;
|
6 | @aui-select-image-in-input-left: 10px;
|
7 | @aui-select-image-in-input-right: 5px;
|
8 | @aui-select-image-vertical-padding: 2px;
|
9 | @aui-select-image-horizontal-padding: 6px;
|
10 |
|
11 | .aui-popover {
|
12 | --aui-item-border-radius: 0;
|
13 |
|
14 | & {
|
15 | #aui-dropdowns.aui-dropdown-style();
|
16 | box-sizing: border-box;
|
17 | max-width: 300px;
|
18 | min-width: 160px;
|
19 | padding: @aui-dropdown-group-spacing 0;
|
20 | }
|
21 |
|
22 | [role="option"] {
|
23 | color: inherit;
|
24 | display: block;
|
25 | padding: 3px 10px;
|
26 | text-decoration: none;
|
27 |
|
28 | &.aui-select-suggestion {
|
29 | cursor: pointer;
|
30 | }
|
31 | }
|
32 |
|
33 | img {
|
34 | display: inline-block;
|
35 | height: @aui-select-image-size;
|
36 | position: relative;
|
37 | padding-right: @aui-select-image-horizontal-padding;
|
38 | top: @aui-select-image-vertical-padding;
|
39 | vertical-align: baseline;
|
40 | width: @aui-select-image-size;
|
41 | }
|
42 |
|
43 | ul {
|
44 | list-style: none;
|
45 | margin: 0;
|
46 | padding-left: 0;
|
47 |
|
48 | [role="option"] {
|
49 | #aui-nav.item-base();
|
50 | #aui-nav.item-style(normal);
|
51 |
|
52 | &:not(.aui-select-no-suggestions):hover {
|
53 | #aui-nav.item-style(hover);
|
54 | }
|
55 |
|
56 | &:not(.aui-select-no-suggestions):active {
|
57 | #aui-nav.item-style(active);
|
58 | }
|
59 | }
|
60 |
|
61 | &:not(:hover) [role="option"].aui-select-active {
|
62 | #aui-nav.item-style(hover);
|
63 | }
|
64 | }
|
65 |
|
66 | &.aui-layer {
|
67 | height: auto;
|
68 | }
|
69 | }
|
70 | @select-trigger-padding-left: 6px;
|
71 | @select-trigger-padding-right: 6px;
|
72 | @select-trigger-arrow-width: 8px;
|
73 | @select-trigger-width: @aui-button-border-width * 2 + @select-trigger-padding-left + @select-trigger-arrow-width + @select-trigger-padding-right;
|
74 | @select-trigger-arrow-height: @select-trigger-arrow-width / 2;
|
75 |
|
76 | form.aui:not(.aui-legacy-forms) aui-select,
|
77 | aui-select {
|
78 |
|
79 | display: inline-block;
|
80 | position: relative;
|
81 | max-width: @aui-form-field-width-default;
|
82 | width: 100%;
|
83 |
|
84 | #aui-forms.aui-input-field-style(normal);
|
85 | font-size: @aui-font-size-medium;
|
86 |
|
87 | &:hover {
|
88 | input {
|
89 | #aui-forms.aui-input-field-style(hover);
|
90 | }
|
91 | }
|
92 |
|
93 | &:not([resolved]) {
|
94 | display: inline-block;
|
95 | height: @aui-form-field-height;
|
96 | width: 100%;
|
97 | max-width: 250px;
|
98 | vertical-align: bottom;
|
99 | }
|
100 |
|
101 | aui-option:not([resolved]) {
|
102 | display: none;
|
103 | }
|
104 |
|
105 | input.aui-select-has-inline-image {
|
106 | background-position: @aui-select-image-in-input-left @aui-select-image-in-input-top;
|
107 | background-repeat: no-repeat;
|
108 | background-size: @aui-select-image-size;
|
109 | padding-left: @aui-select-image-size + @aui-select-image-in-input-left + @aui-select-image-in-input-right;
|
110 | }
|
111 |
|
112 | select,
|
113 | datalist {
|
114 | display: none;
|
115 | }
|
116 |
|
117 | input.text {
|
118 | padding-right: @select-trigger-width;
|
119 | max-width: 100%;
|
120 | background-color: @aui-form-select-bg-color;
|
121 | }
|
122 |
|
123 | button.aui-button {
|
124 | background: transparent;
|
125 | outline: none;
|
126 | bottom: 0;
|
127 | box-sizing: border-box;
|
128 | display: inline-block;
|
129 | height: @aui-form-field-height;
|
130 | right: 0;
|
131 | margin: 0;
|
132 | position: absolute;
|
133 | top: 0;
|
134 | vertical-align: top;
|
135 | width: @select-trigger-width;
|
136 |
|
137 | &:not([aria-busy])::before {
|
138 | #aui.aui-dropdown2-trigger-chevron-icon();
|
139 | }
|
140 | }
|
141 | }
|
142 |
|
143 | form.aui.aui-legacy-forms aui-select {
|
144 | #aui-legacy-forms.colors();
|
145 |
|
146 | display: inline-block;
|
147 | position: relative;
|
148 | max-width: @aui-form-field-width-default;
|
149 | width: 100%;
|
150 |
|
151 | &:not([resolved]) {
|
152 | display: inline-block;
|
153 | height: @aui-form-field-height;
|
154 | width: 100%;
|
155 | max-width: 250px;
|
156 | vertical-align: bottom;
|
157 | }
|
158 |
|
159 | aui-option:not([resolved]) {
|
160 | display: none;
|
161 | }
|
162 |
|
163 | input.aui-select-has-inline-image {
|
164 | background-position: @aui-select-image-in-input-left @aui-select-image-in-input-top;
|
165 | background-repeat: no-repeat;
|
166 | background-size: @aui-select-image-size;
|
167 | padding-left: @aui-select-image-size + @aui-select-image-in-input-left + @aui-select-image-in-input-right;
|
168 | }
|
169 |
|
170 | select,
|
171 | datalist {
|
172 | display: none;
|
173 | }
|
174 |
|
175 | input.text {
|
176 | padding-right: @select-trigger-width;
|
177 | max-width: 100%;
|
178 | }
|
179 |
|
180 | button.aui-button {
|
181 | background-color: @aui-button-default-bg-color;
|
182 | background-clip: padding-box;
|
183 | border-color: @aui-legacy-form-field-border-color;
|
184 | border-bottom-left-radius: 0;
|
185 | border-top-left-radius: 0;
|
186 | bottom: 0;
|
187 | box-sizing: border-box;
|
188 | display: inline-block;
|
189 | height: @aui-form-field-height;
|
190 | right: 0;
|
191 | margin: 0;
|
192 | position: absolute;
|
193 | top: 0;
|
194 | vertical-align: top;
|
195 | width: @select-trigger-width;
|
196 |
|
197 | &:not(:hover) {
|
198 | border-top-color: transparent;
|
199 | border-right-color: transparent;
|
200 | border-bottom-color: transparent;
|
201 | }
|
202 |
|
203 | &:not([aria-busy])::before {
|
204 | #aui.aui-dropdown2-trigger-chevron-icon();
|
205 |
|
206 | right: ((@select-trigger-width - @aui-icon-size-small - (@aui-button-border-width *2)) / 2);
|
207 | }
|
208 | }
|
209 | }
|
210 |
|
211 |
|
212 | form.aui {
|
213 | aui-select {
|
214 | &[data-aui-notification-error] .text {
|
215 | border-color: @aui-notification-error-color;
|
216 | }
|
217 |
|
218 | &[data-aui-notification-success] .text {
|
219 | border-color: @aui-notification-success-color;
|
220 | }
|
221 | }
|
222 | }
|