@entur/dropdown 5.0.0-beta.2 → 5.0.0-beta.3

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.
package/dist/styles.css CHANGED
@@ -3,70 +3,6 @@
3
3
  }
4
4
  /* DO NOT CHANGE!*/
5
5
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
- .eds-dropdown-list {
7
- border-radius: 0.25rem;
8
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
9
- display: none;
10
- list-style: none;
11
- margin: 0;
12
- max-height: 50vh;
13
- padding: 0;
14
- position: relative;
15
- overflow-y: auto;
16
- width: 100%;
17
- z-index: 20;
18
- }
19
- .eds-contrast .eds-dropdown-list {
20
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
21
- }
22
- .eds-dropdown-list--open {
23
- display: inline-block;
24
- }
25
- .eds-dropdown-list:focus {
26
- outline: none;
27
- }
28
- @media all and (min-width: 50rem) {
29
- .eds-dropdown-list {
30
- max-height: 30vh;
31
- }
32
- }
33
- .eds-dropdown-list__item {
34
- align-items: center;
35
- background-color: #f8f8f8;
36
- border-bottom: 0.125rem solid #e9e9e9;
37
- border-left: 0.125rem solid #e9e9e9;
38
- border-right: 0.125rem solid #e9e9e9;
39
- color: #181c56;
40
- display: flex;
41
- justify-content: space-between;
42
- font-family: inherit;
43
- font-size: 1rem;
44
- line-height: 1.25rem;
45
- padding: 0.75rem 1rem;
46
- width: 100%;
47
- }
48
- .eds-dropdown-list__item:first-child {
49
- border-top: 0.125rem solid #e9e9e9;
50
- }
51
- .eds-dropdown-list__item:last-child {
52
- border-bottom: none;
53
- }
54
- .eds-contrast .eds-dropdown-list__item {
55
- color: #181c56;
56
- border-color: #54568c;
57
- background-color: #ffffff;
58
- }
59
- .eds-dropdown-list__item--highlighted {
60
- background-color: #d1d4e3;
61
- }
62
- .eds-contrast .eds-dropdown-list__item--highlighted {
63
- background-color: #d1d4e3;
64
- }
65
- .eds-dropdown-list-icon {
66
- margin-left: 0.75rem;
67
- }
68
- /* DO NOT CHANGE!*/
69
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
70
6
  .eds-multi-select {
71
7
  position: relative;
72
8
  }
@@ -172,13 +108,68 @@
172
108
  }
173
109
  /* DO NOT CHANGE!*/
174
110
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
175
- .eds-inline-spinner {
111
+ .eds-dropdown-list {
112
+ border-radius: 0.25rem;
113
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
114
+ display: none;
115
+ list-style: none;
116
+ margin: 0;
117
+ max-height: 50vh;
118
+ padding: 0;
119
+ position: relative;
120
+ overflow-y: auto;
121
+ width: 100%;
122
+ z-index: 20;
123
+ }
124
+ .eds-contrast .eds-dropdown-list {
125
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
126
+ }
127
+ .eds-dropdown-list--open {
128
+ display: inline-block;
129
+ }
130
+ .eds-dropdown-list:focus {
131
+ outline: none;
132
+ }
133
+ @media all and (min-width: 50rem) {
134
+ .eds-dropdown-list {
135
+ max-height: 30vh;
136
+ }
137
+ }
138
+ .eds-dropdown-list__item {
176
139
  align-items: center;
140
+ background-color: #f8f8f8;
141
+ border-bottom: 0.125rem solid #e9e9e9;
142
+ border-left: 0.125rem solid #e9e9e9;
143
+ border-right: 0.125rem solid #e9e9e9;
144
+ color: #181c56;
177
145
  display: flex;
178
- justify-content: center;
179
- height: 100%;
146
+ justify-content: space-between;
147
+ font-family: inherit;
148
+ font-size: 1rem;
149
+ line-height: 1.25rem;
150
+ padding: 0.75rem 1rem;
180
151
  width: 100%;
181
152
  }
153
+ .eds-dropdown-list__item:first-child {
154
+ border-top: 0.125rem solid #e9e9e9;
155
+ }
156
+ .eds-dropdown-list__item:last-child {
157
+ border-bottom: none;
158
+ }
159
+ .eds-contrast .eds-dropdown-list__item {
160
+ color: #181c56;
161
+ border-color: #54568c;
162
+ background-color: #ffffff;
163
+ }
164
+ .eds-dropdown-list__item--highlighted {
165
+ background-color: #d1d4e3;
166
+ }
167
+ .eds-contrast .eds-dropdown-list__item--highlighted {
168
+ background-color: #d1d4e3;
169
+ }
170
+ .eds-dropdown-list-icon {
171
+ margin-left: 0.75rem;
172
+ }
182
173
  /* DO NOT CHANGE!*/
183
174
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
184
175
  .eds-dropdown__searchable-selected-item {
@@ -206,6 +197,15 @@
206
197
  }
207
198
  /* DO NOT CHANGE!*/
208
199
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
200
+ .eds-inline-spinner {
201
+ align-items: center;
202
+ display: flex;
203
+ justify-content: center;
204
+ height: 100%;
205
+ width: 100%;
206
+ }
207
+ /* DO NOT CHANGE!*/
208
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
209
209
  .eds-dropdown__wrapper {
210
210
  position: relative;
211
211
  }
@@ -281,9 +281,19 @@
281
281
  padding: 1.25rem 1rem 0.25rem;
282
282
  min-height: 2.75rem;
283
283
  }
284
+ .eds-dropdown__selected-item-button__placeholder {
285
+ color: #54568c;
286
+ }
287
+ .eds-contrast .eds-dropdown__selected-item-button__placeholder {
288
+ color: #656782;
289
+ }
290
+ .eds-contrast .eds-dropdown__selected-item-button__placeholder--readonly {
291
+ color: #aeb7e2;
292
+ }
284
293
  .eds-dropdown-appendix {
285
294
  display: flex;
286
295
  align-items: center;
296
+ flex-direction: row-reverse;
287
297
  }
288
298
  .eds-dropdown-appendix__clear-button {
289
299
  padding: 0.5rem;
@@ -319,6 +329,9 @@
319
329
  .eds-dropdown-appendix__toggle-button--open svg {
320
330
  transform: rotate(180deg);
321
331
  }
332
+ .eds-dropdown-appendix__toggle-button:focus {
333
+ border-color: transparent;
334
+ }
322
335
  .eds-dropdown-appendix__toggle-button svg {
323
336
  transition: transform ease-in-out 0.1s;
324
337
  }
@@ -329,7 +342,7 @@
329
342
  background: #949494;
330
343
  }
331
344
  .eds-contrast .eds-dropdown-appendix__toggle-button:focus {
332
- border: 0.0625rem solid #181c56;
345
+ border: none;
333
346
  outline: none;
334
347
  }
335
348
  /* DO NOT CHANGE!*/
@@ -392,6 +405,52 @@
392
405
  }
393
406
  /* DO NOT CHANGE!*/
394
407
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
408
+ .eds-dropdown__selected-item-tag {
409
+ height: 1.5rem;
410
+ max-width: 40%;
411
+ padding: 0;
412
+ }
413
+ .eds-dropdown__selected-item-tag > span {
414
+ overflow: hidden;
415
+ text-overflow: ellipsis;
416
+ white-space: nowrap;
417
+ margin-left: 0.5rem;
418
+ }
419
+ .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
420
+ margin-right: 0.125rem;
421
+ }
422
+ .eds-dropdown__selected-item-tag .eds-tag-chip__close-button > svg {
423
+ font-size: 0.6rem;
424
+ }
425
+ .eds-contrast .eds-dropdown__selected-item-tag {
426
+ background: #ebebf1;
427
+ border: 0.0625rem solid #d1d4e3;
428
+ color: #181c56;
429
+ }
430
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
431
+ color: #181c56;
432
+ }
433
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
434
+ background-color: #babbcf;
435
+ }
436
+ .eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled {
437
+ padding-right: 0.5rem;
438
+ }
439
+ .eds-dropdown__selected-item-tag--readonly .eds-tag-chip__close-button, .eds-dropdown__selected-item-tag--disabled .eds-tag-chip__close-button {
440
+ display: none;
441
+ }
442
+ .eds-contrast .eds-dropdown__selected-item-tag--readonly {
443
+ background-color: #8285a8;
444
+ border-color: transparent;
445
+ color: #ffffff;
446
+ }
447
+ .eds-contrast .eds-dropdown__selected-item-tag--disabled {
448
+ background-color: #54568c;
449
+ border-color: transparent;
450
+ color: #8285a8;
451
+ }
452
+ /* DO NOT CHANGE!*/
453
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
395
454
  .eds-dropdown__list {
396
455
  position: absolute;
397
456
  display: none;
@@ -474,36 +533,6 @@
474
533
  }
475
534
  /* DO NOT CHANGE!*/
476
535
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
477
- .eds-dropdown__selected-element-tag {
478
- height: 1.5rem;
479
- max-width: 40%;
480
- padding: 0;
481
- }
482
- .eds-dropdown__selected-element-tag > span {
483
- overflow: hidden;
484
- text-overflow: ellipsis;
485
- white-space: nowrap;
486
- margin-left: 0.5rem;
487
- }
488
- .eds-dropdown__selected-element-tag .eds-tag-chip__close-button {
489
- margin-right: 0.125rem;
490
- }
491
- .eds-dropdown__selected-element-tag .eds-tag-chip__close-button > svg {
492
- font-size: 0.6rem;
493
- }
494
- .eds-contrast .eds-dropdown__selected-element-tag {
495
- background: #ebebf1;
496
- border: 0.0625rem solid #d1d4e3;
497
- color: #181c56;
498
- }
499
- .eds-contrast .eds-dropdown__selected-element-tag .eds-tag-chip__close-button {
500
- color: #181c56;
501
- }
502
- .eds-contrast .eds-dropdown__selected-element-tag .eds-tag-chip__close-button:hover {
503
- background-color: #babbcf;
504
- }
505
- /* DO NOT CHANGE!*/
506
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
507
536
  .eds-dropdown__toggle-button {
508
537
  -webkit-appearance: none;
509
538
  -moz-appearance: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/dropdown",
3
- "version": "5.0.0-beta.2",
3
+ "version": "5.0.0-beta.3",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/dropdown.esm.js",
@@ -39,5 +39,5 @@
39
39
  "classnames": "^2.3.1",
40
40
  "downshift": "^6.1.7"
41
41
  },
42
- "gitHead": "0ab4e336d82a7ba03ad8fc0d2114d666199f0ab8"
42
+ "gitHead": "f461da8c64cfd812b51a779b1dec74b3c6610228"
43
43
  }