1 | @mixin box-sizing() {
|
2 | -webkit-box-sizing: border-box;
|
3 | -moz-box-sizing: border-box;
|
4 | box-sizing: border-box;
|
5 | }
|
6 |
|
7 | @mixin wrap-text() {
|
8 | white-space: nowrap;
|
9 | overflow: hidden;
|
10 | text-overflow: ellipsis;
|
11 | }
|
12 |
|
13 | .ng-select {
|
14 | position: relative;
|
15 | display: block;
|
16 | @include box-sizing;
|
17 |
|
18 | div,
|
19 | input,
|
20 | span {
|
21 | @include box-sizing;
|
22 | }
|
23 |
|
24 | [hidden] {
|
25 | display: none;
|
26 | }
|
27 |
|
28 | &.ng-select-searchable {
|
29 | .ng-select-container .ng-value-container .ng-input {
|
30 | opacity: 1;
|
31 | }
|
32 | }
|
33 |
|
34 | &.ng-select-opened .ng-select-container {
|
35 | z-index: 1001;
|
36 | }
|
37 |
|
38 | &.ng-select-disabled {
|
39 | .ng-select-container {
|
40 | .ng-value-container {
|
41 | .ng-placeholder,
|
42 | .ng-value {
|
43 | user-select: none;
|
44 | cursor: default;
|
45 | }
|
46 | }
|
47 | }
|
48 |
|
49 | .ng-arrow-wrapper {
|
50 | cursor: default;
|
51 | }
|
52 | }
|
53 |
|
54 | &.ng-select-filtered {
|
55 | .ng-placeholder {
|
56 | display: none;
|
57 | }
|
58 | }
|
59 |
|
60 | .ng-select-container {
|
61 | cursor: default;
|
62 | display: flex;
|
63 | outline: none;
|
64 | overflow: hidden;
|
65 | position: relative;
|
66 | width: 100%;
|
67 |
|
68 | .ng-value-container {
|
69 | display: flex;
|
70 | flex: 1;
|
71 |
|
72 | .ng-input {
|
73 | opacity: 0;
|
74 |
|
75 | > input {
|
76 | box-sizing: content-box;
|
77 | background: none transparent;
|
78 | border: 0 none;
|
79 | box-shadow: none;
|
80 | outline: none;
|
81 | padding: 0;
|
82 | cursor: default;
|
83 | width: 100%;
|
84 |
|
85 | &::-ms-clear {
|
86 | display: none;
|
87 | }
|
88 |
|
89 | &[readonly] {
|
90 | user-select: none;
|
91 | width: 0;
|
92 | padding: 0;
|
93 | }
|
94 | }
|
95 | }
|
96 | }
|
97 | }
|
98 |
|
99 | &.ng-select-single {
|
100 | &.ng-select-filtered {
|
101 | .ng-select-container .ng-value-container .ng-value {
|
102 | visibility: hidden;
|
103 | }
|
104 | }
|
105 |
|
106 | .ng-select-container {
|
107 | .ng-value-container {
|
108 | @include wrap-text;
|
109 |
|
110 | .ng-value {
|
111 | @include wrap-text;
|
112 |
|
113 | .ng-value-icon {
|
114 | display: none;
|
115 | }
|
116 | }
|
117 |
|
118 | .ng-input {
|
119 | position: absolute;
|
120 | left: 0;
|
121 | width: 100%;
|
122 | }
|
123 | }
|
124 | }
|
125 | }
|
126 |
|
127 | &.ng-select-multiple {
|
128 | &.ng-select-disabled {
|
129 | > .ng-select-container .ng-value-container .ng-value {
|
130 | .ng-value-icon {
|
131 | display: none;
|
132 | }
|
133 | }
|
134 | }
|
135 |
|
136 | .ng-select-container {
|
137 | .ng-value-container {
|
138 | flex-wrap: wrap;
|
139 |
|
140 | .ng-placeholder {
|
141 | position: absolute;
|
142 | }
|
143 |
|
144 | .ng-value {
|
145 | white-space: nowrap;
|
146 |
|
147 | &.ng-value-disabled {
|
148 | .ng-value-icon {
|
149 | display: none;
|
150 | }
|
151 | }
|
152 |
|
153 | .ng-value-icon {
|
154 | cursor: pointer;
|
155 | }
|
156 | }
|
157 |
|
158 | .ng-input {
|
159 | flex: 1;
|
160 | z-index: 2;
|
161 | }
|
162 |
|
163 | .ng-placeholder {
|
164 | z-index: 1;
|
165 | }
|
166 | }
|
167 | }
|
168 | }
|
169 |
|
170 | .ng-clear-wrapper {
|
171 | cursor: pointer;
|
172 | position: relative;
|
173 | width: 17px;
|
174 | user-select: none;
|
175 |
|
176 | .ng-clear {
|
177 | display: inline-block;
|
178 | font-size: 18px;
|
179 | line-height: 1;
|
180 | pointer-events: none;
|
181 | }
|
182 | }
|
183 |
|
184 | .ng-spinner-loader {
|
185 | border-radius: 50%;
|
186 | width: 17px;
|
187 | height: 17px;
|
188 | margin-right: 5px;
|
189 | font-size: 10px;
|
190 | position: relative;
|
191 | text-indent: -9999em;
|
192 | border-top: 2px solid rgba(66, 66, 66, 0.2);
|
193 | border-right: 2px solid rgba(66, 66, 66, 0.2);
|
194 | border-bottom: 2px solid rgba(66, 66, 66, 0.2);
|
195 | border-left: 2px solid #424242;
|
196 | transform: translateZ(0);
|
197 | animation: load8 0.8s infinite linear;
|
198 |
|
199 | &:after {
|
200 | border-radius: 50%;
|
201 | width: 17px;
|
202 | height: 17px;
|
203 | }
|
204 |
|
205 | @-webkit-keyframes load8 {
|
206 | 0% {
|
207 | -webkit-transform: rotate(0deg);
|
208 | transform: rotate(0deg);
|
209 | }
|
210 | 100% {
|
211 | -webkit-transform: rotate(360deg);
|
212 | transform: rotate(360deg);
|
213 | }
|
214 | }
|
215 | @keyframes load8 {
|
216 | 0% {
|
217 | -webkit-transform: rotate(0deg);
|
218 | transform: rotate(0deg);
|
219 | }
|
220 | 100% {
|
221 | -webkit-transform: rotate(360deg);
|
222 | transform: rotate(360deg);
|
223 | }
|
224 | }
|
225 | }
|
226 |
|
227 | .ng-arrow-wrapper {
|
228 | cursor: pointer;
|
229 | position: relative;
|
230 | text-align: center;
|
231 | user-select: none;
|
232 |
|
233 | .ng-arrow {
|
234 | pointer-events: none;
|
235 | display: inline-block;
|
236 | height: 0;
|
237 | width: 0;
|
238 | position: relative;
|
239 | }
|
240 | }
|
241 | }
|
242 |
|
243 | .ng-dropdown-panel {
|
244 | box-sizing: border-box;
|
245 | position: absolute;
|
246 | opacity: 0;
|
247 | width: 100%;
|
248 | z-index: 1050;
|
249 | -webkit-overflow-scrolling: touch;
|
250 |
|
251 | .ng-dropdown-panel-items {
|
252 | display: block;
|
253 | height: auto;
|
254 | -webkit-box-sizing: border-box;
|
255 | -moz-box-sizing: border-box;
|
256 | box-sizing: border-box;
|
257 | max-height: 240px;
|
258 | overflow-y: auto;
|
259 |
|
260 | .ng-optgroup {
|
261 | @include wrap-text();
|
262 | }
|
263 |
|
264 | .ng-option {
|
265 | box-sizing: border-box;
|
266 | cursor: pointer;
|
267 | display: block;
|
268 | @include wrap-text();
|
269 |
|
270 | .ng-option-label:empty:before {
|
271 | content: "\200b";
|
272 | }
|
273 |
|
274 | .highlighted {
|
275 | font-weight: bold;
|
276 | text-decoration: underline;
|
277 | }
|
278 | &.disabled {
|
279 | cursor: default;
|
280 | }
|
281 | }
|
282 | }
|
283 |
|
284 | .scroll-host {
|
285 | overflow: hidden;
|
286 | overflow-y: auto;
|
287 | position: relative;
|
288 | display: block;
|
289 | -webkit-overflow-scrolling: touch;
|
290 | }
|
291 |
|
292 | .scrollable-content {
|
293 | top: 0;
|
294 | left: 0;
|
295 | width: 100%;
|
296 | height: 100%;
|
297 | position: absolute;
|
298 | }
|
299 |
|
300 | .total-padding {
|
301 | width: 1px;
|
302 | opacity: 0;
|
303 | }
|
304 | }
|