@ng-select/ng-select 13.2.1 → 13.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- @import "mixins";
1
+ @import 'mixins';
2
2
 
3
3
  $ng-select-highlight: #007eff !default;
4
4
  $ng-select-primary-text: #333 !default;
@@ -12,7 +12,9 @@ $ng-select-selected-text: $ng-select-primary-text !default;
12
12
  $ng-select-marked: lighten($ng-select-highlight, 48) !default;
13
13
  $ng-select-marked-text: $ng-select-primary-text !default;
14
14
 
15
- $ng-select-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1) !default;
15
+ $ng-select-box-shadow:
16
+ inset 0 1px 1px rgba(0, 0, 0, 0.075),
17
+ 0 0 0 3px rgba(0, 126, 255, 0.1) !default;
16
18
  $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default;
17
19
  $ng-select-height: 36px !default;
18
20
  $ng-select-value-padding-left: 10px !default;
@@ -30,358 +32,360 @@ $ng-select-dropdown-option-disabled: lighten($ng-select-primary-text, 60) !defau
30
32
  $ng-select-input-text: #000000 !default;
31
33
 
32
34
  .ng-select {
33
- &.ng-select-opened {
34
- > .ng-select-container {
35
- background: $ng-select-bg;
36
- border-color: darken($ng-select-border, 10) $ng-select-border lighten($ng-select-border, 5);
37
- &:hover {
38
- box-shadow: none;
39
- }
40
- .ng-arrow {
41
- top: -2px;
42
- border-color: transparent transparent darken($ng-select-border, 20);
43
- border-width: 0 5px 5px;
44
- &:hover {
45
- border-color: transparent transparent darken($ng-select-border, 60);
46
- }
47
- }
48
- }
49
- &.ng-select-top {
50
- > .ng-select-container {
51
- border-top-right-radius: 0;
52
- border-top-left-radius: 0;
53
- }
54
- }
55
- &.ng-select-right {
56
- > .ng-select-container {
57
- border-top-right-radius: 0;
58
- border-bottom-right-radius: 0;
59
- }
60
- }
61
- &.ng-select-bottom {
62
- > .ng-select-container {
63
- border-bottom-right-radius: 0;
64
- border-bottom-left-radius: 0;
65
- }
66
- }
67
- &.ng-select-left {
68
- > .ng-select-container {
69
- border-top-left-radius: 0;
70
- border-bottom-left-radius: 0;
71
- }
72
- }
73
- }
74
- &.ng-select-focused {
75
- &:not(.ng-select-opened) > .ng-select-container {
76
- border-color: $ng-select-highlight;
77
- box-shadow: $ng-select-box-shadow;
78
- }
79
- }
80
- &.ng-select-disabled {
81
- > .ng-select-container {
82
- background-color: $ng-select-disabled-text;
83
- }
84
- }
85
- .ng-has-value .ng-placeholder {
86
- display: none;
87
- }
88
- .ng-select-container {
89
- color: $ng-select-primary-text;
90
- background-color: $ng-select-bg;
91
- border-radius: $ng-select-border-radius;
92
- border: 1px solid $ng-select-border;
93
- min-height: $ng-select-height;
94
- align-items: center;
95
- &:hover {
96
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
97
- }
98
- .ng-value-container {
99
- align-items: center;
100
- padding-left: $ng-select-value-padding-left;
101
- @include rtl {
102
- padding-right: $ng-select-value-padding-left;
103
- padding-left: 0;
104
- }
105
- .ng-placeholder {
106
- color: $ng-select-placeholder;
107
- }
108
- }
109
- }
110
- &.ng-select-single {
111
- .ng-select-container {
112
- height: $ng-select-height;
113
- .ng-value-container {
114
- .ng-input {
115
- top: 5px;
116
- left: 0;
117
- padding-left: $ng-select-value-padding-left;
118
- padding-right: 50px;
119
- @include rtl {
120
- padding-right: $ng-select-value-padding-left;
121
- padding-left: 50px;
122
- }
123
- }
124
- }
125
- }
126
- }
127
- &.ng-select-multiple {
128
- &.ng-select-disabled {
129
- > .ng-select-container .ng-value-container .ng-value {
130
- background-color: $ng-select-disabled-text;
131
- border: 1px solid lighten($ng-select-border, 10);
132
- .ng-value-label {
133
- padding: 0 5px;
134
- }
135
- }
136
- }
137
- .ng-select-container {
138
- .ng-value-container {
139
- padding-top: 5px;
140
- padding-left: 7px;
141
- @include rtl {
142
- padding-right: 7px;
143
- padding-left: 0
144
- }
145
- .ng-value {
146
- font-size: $ng-select-value-font-size;
147
- margin-bottom: 5px;
148
- color: $ng-select-value-text;
149
- background-color: $ng-select-selected;
150
- border-radius: 2px;
151
- margin-right: 5px;
152
- @include rtl {
153
- margin-right: 0;
154
- margin-left: 5px;
155
- }
156
- &.ng-value-disabled {
157
- background-color: $ng-select-disabled-text;
158
- .ng-value-label {
159
- padding-left: 5px;
160
- @include rtl {
161
- padding-left: 0;
162
- padding-right: 5px;
163
- }
164
- }
165
- }
166
- .ng-value-label {
167
- display: inline-block;
168
- padding: 1px 5px;
169
- }
170
- .ng-value-icon {
171
- display: inline-block;
172
- padding: 1px 5px;
173
- &:hover {
174
- background-color: darken($ng-select-selected, 5);
175
- }
176
- &.left {
177
- border-right: 1px solid darken($ng-select-selected, 10);
178
- @include rtl {
179
- border-left: 1px solid darken($ng-select-selected, 10);
180
- border-right: none;
181
- }
182
- }
183
- &.right {
184
- border-left: 1px solid darken($ng-select-selected, 10);
185
- @include rtl {
186
- border-left: 0;
187
- border-right: 1px solid darken($ng-select-selected, 10);
188
- }
189
- }
190
- }
191
- }
192
- .ng-input {
193
- padding: 0 0 3px 3px;
194
- @include rtl {
195
- padding: 0 3px 3px 0;
196
- }
197
- > input {
198
- color: $ng-select-input-text;
199
- }
200
- }
201
- .ng-placeholder {
202
- top: 5px;
203
- padding-bottom: 5px;
204
- padding-left: 3px;
205
- @include rtl {
206
- padding-right: 3px;
207
- padding-left: 0;
208
- }
209
- }
210
- }
211
- }
212
- }
213
- .ng-clear-wrapper {
214
- color: darken($ng-select-border, 20);
215
- &:hover .ng-clear {
216
- color: #D0021B;
217
- }
218
- &:focus .ng-clear {
219
- color: #D0021B;
220
- }
221
- &:focus {
222
- outline: none;
223
- }
224
- }
225
- .ng-spinner-zone {
226
- padding: 5px 5px 0 0;
35
+ &.ng-select-opened {
36
+ > .ng-select-container {
37
+ background: $ng-select-bg;
38
+ border-color: darken($ng-select-border, 10) $ng-select-border lighten($ng-select-border, 5);
39
+ &:hover {
40
+ box-shadow: none;
41
+ }
42
+ .ng-arrow {
43
+ top: -2px;
44
+ border-color: transparent transparent darken($ng-select-border, 20);
45
+ border-width: 0 5px 5px;
46
+ &:hover {
47
+ border-color: transparent transparent darken($ng-select-border, 60);
48
+ }
49
+ }
50
+ }
51
+ &.ng-select-top {
52
+ > .ng-select-container {
53
+ border-top-right-radius: 0;
54
+ border-top-left-radius: 0;
55
+ }
56
+ }
57
+ &.ng-select-right {
58
+ > .ng-select-container {
59
+ border-top-right-radius: 0;
60
+ border-bottom-right-radius: 0;
61
+ }
62
+ }
63
+ &.ng-select-bottom {
64
+ > .ng-select-container {
65
+ border-bottom-right-radius: 0;
66
+ border-bottom-left-radius: 0;
67
+ }
68
+ }
69
+ &.ng-select-left {
70
+ > .ng-select-container {
71
+ border-top-left-radius: 0;
72
+ border-bottom-left-radius: 0;
73
+ }
74
+ }
75
+ }
76
+ &.ng-select-focused {
77
+ &:not(.ng-select-opened) > .ng-select-container {
78
+ border-color: $ng-select-highlight;
79
+ box-shadow: $ng-select-box-shadow;
80
+ }
81
+ }
82
+ &.ng-select-disabled {
83
+ > .ng-select-container {
84
+ background-color: $ng-select-disabled-text;
85
+ }
86
+ }
87
+ .ng-has-value .ng-placeholder {
88
+ display: none;
89
+ }
90
+ .ng-select-container {
91
+ color: $ng-select-primary-text;
92
+ background-color: $ng-select-bg;
93
+ border-radius: $ng-select-border-radius;
94
+ border: 1px solid $ng-select-border;
95
+ min-height: $ng-select-height;
96
+ align-items: center;
97
+ &:hover {
98
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
99
+ }
100
+ .ng-value-container {
101
+ align-items: center;
102
+ padding-left: $ng-select-value-padding-left;
103
+ @include rtl {
104
+ padding-right: $ng-select-value-padding-left;
105
+ padding-left: 0;
106
+ }
107
+ .ng-placeholder {
108
+ color: $ng-select-placeholder;
109
+ }
110
+ }
111
+ }
112
+ &.ng-select-single {
113
+ .ng-select-container {
114
+ height: $ng-select-height;
115
+ .ng-value-container {
116
+ .ng-input {
117
+ top: 5px;
118
+ left: 0;
119
+ padding-left: $ng-select-value-padding-left;
120
+ padding-right: 50px;
121
+ @include rtl {
122
+ padding-right: $ng-select-value-padding-left;
123
+ padding-left: 50px;
124
+ }
125
+ }
126
+ }
127
+ }
128
+ }
129
+ &.ng-select-multiple {
130
+ &.ng-select-disabled {
131
+ > .ng-select-container .ng-value-container .ng-value {
132
+ background-color: $ng-select-disabled-text;
133
+ border: 1px solid lighten($ng-select-border, 10);
134
+ .ng-value-label {
135
+ padding: 0 5px;
136
+ }
137
+ }
138
+ }
139
+ .ng-select-container {
140
+ .ng-value-container {
141
+ padding-top: 5px;
142
+ padding-left: 7px;
143
+ @include rtl {
144
+ padding-right: 7px;
145
+ padding-left: 0;
146
+ }
147
+ .ng-value {
148
+ font-size: $ng-select-value-font-size;
149
+ margin-bottom: 5px;
150
+ color: $ng-select-value-text;
151
+ background-color: $ng-select-selected;
152
+ border-radius: 2px;
153
+ margin-right: 5px;
154
+ @include rtl {
155
+ margin-right: 0;
156
+ margin-left: 5px;
157
+ }
158
+ &.ng-value-disabled {
159
+ background-color: $ng-select-disabled-text;
160
+ .ng-value-label {
161
+ padding-left: 5px;
162
+ @include rtl {
163
+ padding-left: 0;
164
+ padding-right: 5px;
165
+ }
166
+ }
167
+ }
168
+ .ng-value-label {
169
+ display: inline-block;
170
+ padding: 1px 5px;
171
+ }
172
+ .ng-value-icon {
173
+ display: inline-block;
174
+ padding: 1px 5px;
175
+ &:hover {
176
+ background-color: darken($ng-select-selected, 5);
177
+ }
178
+ &.left {
179
+ border-right: 1px solid darken($ng-select-selected, 10);
180
+ @include rtl {
181
+ border-left: 1px solid darken($ng-select-selected, 10);
182
+ border-right: none;
183
+ }
184
+ }
185
+ &.right {
186
+ border-left: 1px solid darken($ng-select-selected, 10);
187
+ @include rtl {
188
+ border-left: 0;
189
+ border-right: 1px solid darken($ng-select-selected, 10);
190
+ }
191
+ }
192
+ }
193
+ }
194
+ .ng-input {
195
+ padding: 0 0 3px 3px;
196
+ @include rtl {
197
+ padding: 0 3px 3px 0;
198
+ }
199
+ > input {
200
+ color: $ng-select-input-text;
201
+ }
202
+ }
203
+ .ng-placeholder {
204
+ top: 5px;
205
+ padding-bottom: 5px;
206
+ padding-left: 3px;
207
+ @include rtl {
208
+ padding-right: 3px;
209
+ padding-left: 0;
210
+ }
211
+ }
212
+ }
213
+ }
214
+ }
215
+ .ng-clear-wrapper {
216
+ color: darken($ng-select-border, 20);
217
+ &:hover .ng-clear {
218
+ color: #d0021b;
219
+ }
220
+ &:focus .ng-clear {
221
+ color: #d0021b;
222
+ }
223
+ &:focus {
224
+ outline: none;
225
+ }
226
+ }
227
+ .ng-spinner-zone {
228
+ padding: 5px 5px 0 0;
227
229
 
228
- @include rtl {
229
- padding: 5px 0 0 5px;
230
- }
231
- }
232
- .ng-arrow-wrapper {
233
- width: 25px;
234
- padding-right: 5px;
235
- @include rtl {
236
- padding-left: 5px;
237
- padding-right: 0;
238
- }
239
- &:hover {
240
- .ng-arrow {
241
- border-top-color: darken($ng-select-border, 40);
242
- }
243
- }
244
- .ng-arrow {
245
- border-color: darken($ng-select-border, 20) transparent transparent;
246
- border-style: solid;
247
- border-width: 5px 5px 2.5px;
248
- }
249
- }
230
+ @include rtl {
231
+ padding: 5px 0 0 5px;
232
+ }
233
+ }
234
+ .ng-arrow-wrapper {
235
+ width: 25px;
236
+ padding-right: 5px;
237
+ @include rtl {
238
+ padding-left: 5px;
239
+ padding-right: 0;
240
+ }
241
+ &:hover {
242
+ .ng-arrow {
243
+ border-top-color: darken($ng-select-border, 40);
244
+ }
245
+ }
246
+ .ng-arrow {
247
+ border-color: darken($ng-select-border, 20) transparent transparent;
248
+ border-style: solid;
249
+ border-width: 5px 5px 2.5px;
250
+ }
251
+ }
250
252
  }
251
253
 
252
254
  .ng-dropdown-panel {
253
- background-color: $ng-select-dropdown-bg;
254
- border: 1px solid $ng-select-dropdown-border;
255
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
256
- left: 0;
257
- &.ng-select-top {
258
- bottom: 100%;
259
- border-top-right-radius: $ng-select-border-radius;
260
- border-top-left-radius: $ng-select-border-radius;
261
- border-bottom-color: lighten($ng-select-border, 10);
262
- margin-bottom: -1px;
263
- .ng-dropdown-panel-items {
264
- .ng-option {
265
- &:first-child {
266
- border-top-right-radius: $ng-select-border-radius;
267
- border-top-left-radius: $ng-select-border-radius;
268
- }
269
- }
270
- }
271
- }
272
- &.ng-select-right {
273
- left: 100%;
274
- top: 0;
275
- border-top-right-radius: $ng-select-border-radius;
276
- border-bottom-right-radius: $ng-select-border-radius;
277
- border-bottom-left-radius: $ng-select-border-radius;
278
- border-bottom-color: lighten($ng-select-border, 10);
279
- margin-bottom: -1px;
280
- .ng-dropdown-panel-items {
281
- .ng-option {
282
- &:first-child {
283
- border-top-right-radius: $ng-select-border-radius;
284
- }
285
- }
286
- }
287
- }
288
- &.ng-select-bottom {
289
- top: 100%;
290
- border-bottom-right-radius: $ng-select-border-radius;
291
- border-bottom-left-radius: $ng-select-border-radius;
292
- border-top-color: lighten($ng-select-border, 10);
293
- margin-top: -1px;
294
- .ng-dropdown-panel-items {
295
- .ng-option {
296
- &:last-child {
297
- border-bottom-right-radius: $ng-select-border-radius;
298
- border-bottom-left-radius: $ng-select-border-radius;
299
- }
300
- }
301
- }
302
- }
303
- &.ng-select-left {
304
- left: -100%;
305
- top: 0;
306
- border-top-left-radius: $ng-select-border-radius;
307
- border-bottom-right-radius: $ng-select-border-radius;
308
- border-bottom-left-radius: $ng-select-border-radius;
309
- border-bottom-color: lighten($ng-select-border, 10);
310
- margin-bottom: -1px;
311
- .ng-dropdown-panel-items {
312
- .ng-option {
313
- &:first-child {
314
- border-top-left-radius: $ng-select-border-radius;
315
- }
316
- }
317
- }
318
- }
319
- .ng-dropdown-header {
320
- border-bottom: 1px solid $ng-select-border;
321
- padding: 5px 7px;
322
- }
323
- .ng-dropdown-footer {
324
- border-top: 1px solid $ng-select-border;
325
- padding: 5px 7px;
326
- }
327
- .ng-dropdown-panel-items {
328
- .ng-optgroup {
329
- user-select: none;
330
- padding: 8px 10px;
331
- font-weight: 500;
332
- color: $ng-select-dropdown-optgroup-text;
333
- cursor: pointer;
334
- &.ng-option-disabled {
335
- cursor: default;
336
- }
337
- &.ng-option-marked {
338
- background-color: $ng-select-marked;
339
- }
340
- &.ng-option-selected, &.ng-option-selected.ng-option-marked {
341
- color: $ng-select-dropdown-optgroup-marked;
342
- background-color: $ng-select-selected;
343
- font-weight: 600;
344
- }
345
- }
346
- .ng-option {
347
- background-color: $ng-select-dropdown-option-bg;
348
- color: $ng-select-dropdown-option-text;
349
- padding: 8px 10px;
350
- &.ng-option-selected, &.ng-option-selected.ng-option-marked {
351
- color: $ng-select-selected-text;
352
- background-color: $ng-select-selected;
353
- .ng-option-label {
354
- font-weight: 600;
355
- }
356
- }
357
- &.ng-option-marked {
358
- background-color: $ng-select-marked;
359
- color: $ng-select-marked-text;
360
- }
361
- &.ng-option-disabled {
362
- color: $ng-select-dropdown-option-disabled;
363
- }
364
- &.ng-option-child {
365
- padding-left: 22px;
366
- @include rtl {
367
- padding-right: 22px;
368
- padding-left: 0;
369
- }
370
- }
371
- .ng-tag-label {
372
- font-size: 80%;
373
- font-weight: 400;
374
- padding-right: 5px;
375
- @include rtl {
376
- padding-left: 5px;
377
- padding-right: 0;
378
- }
379
- }
380
- }
381
- }
255
+ background-color: $ng-select-dropdown-bg;
256
+ border: 1px solid $ng-select-dropdown-border;
257
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
258
+ left: 0;
259
+ &.ng-select-top {
260
+ bottom: 100%;
261
+ border-top-right-radius: $ng-select-border-radius;
262
+ border-top-left-radius: $ng-select-border-radius;
263
+ border-bottom-color: lighten($ng-select-border, 10);
264
+ margin-bottom: -1px;
265
+ .ng-dropdown-panel-items {
266
+ .ng-option {
267
+ &:first-child {
268
+ border-top-right-radius: $ng-select-border-radius;
269
+ border-top-left-radius: $ng-select-border-radius;
270
+ }
271
+ }
272
+ }
273
+ }
274
+ &.ng-select-right {
275
+ left: 100%;
276
+ top: 0;
277
+ border-top-right-radius: $ng-select-border-radius;
278
+ border-bottom-right-radius: $ng-select-border-radius;
279
+ border-bottom-left-radius: $ng-select-border-radius;
280
+ border-bottom-color: lighten($ng-select-border, 10);
281
+ margin-bottom: -1px;
282
+ .ng-dropdown-panel-items {
283
+ .ng-option {
284
+ &:first-child {
285
+ border-top-right-radius: $ng-select-border-radius;
286
+ }
287
+ }
288
+ }
289
+ }
290
+ &.ng-select-bottom {
291
+ top: 100%;
292
+ border-bottom-right-radius: $ng-select-border-radius;
293
+ border-bottom-left-radius: $ng-select-border-radius;
294
+ border-top-color: lighten($ng-select-border, 10);
295
+ margin-top: -1px;
296
+ .ng-dropdown-panel-items {
297
+ .ng-option {
298
+ &:last-child {
299
+ border-bottom-right-radius: $ng-select-border-radius;
300
+ border-bottom-left-radius: $ng-select-border-radius;
301
+ }
302
+ }
303
+ }
304
+ }
305
+ &.ng-select-left {
306
+ left: -100%;
307
+ top: 0;
308
+ border-top-left-radius: $ng-select-border-radius;
309
+ border-bottom-right-radius: $ng-select-border-radius;
310
+ border-bottom-left-radius: $ng-select-border-radius;
311
+ border-bottom-color: lighten($ng-select-border, 10);
312
+ margin-bottom: -1px;
313
+ .ng-dropdown-panel-items {
314
+ .ng-option {
315
+ &:first-child {
316
+ border-top-left-radius: $ng-select-border-radius;
317
+ }
318
+ }
319
+ }
320
+ }
321
+ .ng-dropdown-header {
322
+ border-bottom: 1px solid $ng-select-border;
323
+ padding: 5px 7px;
324
+ }
325
+ .ng-dropdown-footer {
326
+ border-top: 1px solid $ng-select-border;
327
+ padding: 5px 7px;
328
+ }
329
+ .ng-dropdown-panel-items {
330
+ .ng-optgroup {
331
+ user-select: none;
332
+ padding: 8px 10px;
333
+ font-weight: 500;
334
+ color: $ng-select-dropdown-optgroup-text;
335
+ cursor: pointer;
336
+ &.ng-option-disabled {
337
+ cursor: default;
338
+ }
339
+ &.ng-option-marked {
340
+ background-color: $ng-select-marked;
341
+ }
342
+ &.ng-option-selected,
343
+ &.ng-option-selected.ng-option-marked {
344
+ color: $ng-select-dropdown-optgroup-marked;
345
+ background-color: $ng-select-selected;
346
+ font-weight: 600;
347
+ }
348
+ }
349
+ .ng-option {
350
+ background-color: $ng-select-dropdown-option-bg;
351
+ color: $ng-select-dropdown-option-text;
352
+ padding: 8px 10px;
353
+ &.ng-option-selected,
354
+ &.ng-option-selected.ng-option-marked {
355
+ color: $ng-select-selected-text;
356
+ background-color: $ng-select-selected;
357
+ .ng-option-label {
358
+ font-weight: 600;
359
+ }
360
+ }
361
+ &.ng-option-marked {
362
+ background-color: $ng-select-marked;
363
+ color: $ng-select-marked-text;
364
+ }
365
+ &.ng-option-disabled {
366
+ color: $ng-select-dropdown-option-disabled;
367
+ }
368
+ &.ng-option-child {
369
+ padding-left: 22px;
370
+ @include rtl {
371
+ padding-right: 22px;
372
+ padding-left: 0;
373
+ }
374
+ }
375
+ .ng-tag-label {
376
+ font-size: 80%;
377
+ font-weight: 400;
378
+ padding-right: 5px;
379
+ @include rtl {
380
+ padding-left: 5px;
381
+ padding-right: 0;
382
+ }
383
+ }
384
+ }
385
+ }
382
386
 
383
- @include rtl {
384
- direction: rtl;
385
- text-align: right;
386
- }
387
+ @include rtl {
388
+ direction: rtl;
389
+ text-align: right;
390
+ }
387
391
  }