@entur/dropdown 8.0.0 → 8.0.1-beta.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.
Files changed (2) hide show
  1. package/dist/styles.css +353 -263
  2. package/package.json +8 -8
package/dist/styles.css CHANGED
@@ -1,277 +1,367 @@
1
- :root {
2
- --eds-dropdown: 1;
3
- }/* DO NOT CHANGE!*/
4
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
- .eds-dropdown__list {
6
- position: absolute;
7
- box-sizing: border-box;
8
- max-height: 20rem;
9
- overflow-y: auto;
10
- z-index: 20;
11
- padding: 0;
12
- margin: 0;
13
- list-style: none;
14
- border: 0.125rem solid var(--components-form-basemenu-border);
15
- border-radius: 0.25rem;
16
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
17
- cursor: default;
18
- width: min(95dvw, 100%);
19
- max-height: var(--list-max-height, 15rem);
20
- }
21
- .eds-dropdown__list:focus {
22
- outline: none;
23
- }
24
- .eds-dropdown__list__item {
25
- display: flex;
26
- align-items: center;
27
- justify-content: flex-start;
28
- padding: 0.75rem 1rem;
29
- font-family: inherit;
30
- font-size: 1rem;
31
- word-break: break-word;
32
- line-height: 1.25rem;
33
- overflow-x: hidden;
34
- color: var(--components-form-basemenu-text);
35
- background-color: var(--components-form-basemenu-fill-default);
36
- }
37
- .eds-dropdown__list__item:last-child {
38
- border-bottom: none;
39
- }
40
- .eds-dropdown__list__item__text {
41
- flex: 1;
42
- cursor: default;
43
- }
44
- .eds-dropdown__list__item__icon {
45
- margin-left: 0.75rem;
46
- }
47
- .eds-dropdown__list__item__checkbox {
48
- pointer-events: none;
49
- }
50
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon {
51
- border-color: var(--components-form-checkbox-standard-border);
1
+ :root{
2
+ --eds-dropdown:1;
3
+ }.eds-dropdown__list{
4
+ position:absolute;
5
+ -webkit-box-sizing:border-box;
6
+ -moz-box-sizing:border-box;
7
+ box-sizing:border-box;
8
+ max-height:20rem;
9
+ overflow-y:auto;
10
+ z-index:20;
11
+ padding:0;
12
+ margin:0;
13
+ list-style:none;
14
+ border:0.125rem solid var(--components-form-basemenu-border);
15
+ -webkit-border-radius:0.25rem;
16
+ -moz-border-radius:0.25rem;
17
+ border-radius:0.25rem;
18
+ -webkit-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
19
+ -moz-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
20
+ box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
21
+ cursor:default;
22
+ width:min(95dvw, 100%);
23
+ max-height:15rem;
24
+ max-height:var(--list-max-height, 15rem);
25
+ }
26
+ .eds-dropdown__list:focus{
27
+ outline:none;
28
+ }
29
+ .eds-dropdown__list__item{
30
+ display:-webkit-box;
31
+ display:-webkit-flex;
32
+ display:-moz-box;
33
+ display:flex;
34
+ -webkit-box-align:center;
35
+ -webkit-align-items:center;
36
+ -moz-box-align:center;
37
+ align-items:center;
38
+ -webkit-box-pack:start;
39
+ -webkit-justify-content:flex-start;
40
+ -moz-box-pack:start;
41
+ justify-content:flex-start;
42
+ padding:0.75rem 1rem;
43
+ font-family:inherit;
44
+ font-size:1rem;
45
+ word-break:break-word;
46
+ line-height:1.25rem;
47
+ overflow-x:hidden;
48
+ color:var(--components-form-basemenu-text);
49
+ background-color:var(--components-form-basemenu-fill-default);
50
+ }
51
+ .eds-dropdown__list__item:last-child{
52
+ border-bottom:none;
53
+ }
54
+ .eds-dropdown__list__item__text{
55
+ -webkit-box-flex:1;
56
+ -webkit-flex:1;
57
+ -moz-box-flex:1;
58
+ flex:1;
59
+ cursor:default;
60
+ }
61
+ .eds-dropdown__list__item__icon{
62
+ margin-left:0.75rem;
63
+ }
64
+ .eds-dropdown__list__item__checkbox{
65
+ pointer-events:none;
66
+ }
67
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon{
68
+ border-color:var(--components-form-checkbox-standard-border);
52
69
  }
53
70
  .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
54
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon {
55
- background-color: var(--components-form-checkbox-standard-fill-selected);
71
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon{
72
+ background-color:var(--components-form-checkbox-standard-fill-selected);
56
73
  }
57
74
  .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon path,
58
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon path {
59
- stroke: var(--components-form-checkbox-standard-icon);
75
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon path{
76
+ stroke:var(--components-form-checkbox-standard-icon);
60
77
  }
61
78
  .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon rect,
62
- .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon rect {
63
- fill: var(--components-form-checkbox-standard-icon);
79
+ .eds-contrast .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon rect{
80
+ fill:var(--components-form-checkbox-standard-icon);
64
81
  }
65
- .eds-dropdown__list__item--highlighted {
66
- background-color: var(--components-form-basemenu-fill-hover);
82
+ .eds-dropdown__list__item--highlighted{
83
+ background-color:var(--components-form-basemenu-fill-hover);
67
84
  }
68
85
  .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:checked + .eds-checkbox__icon,
69
86
  .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input:indeterminate + .eds-checkbox__icon,
70
87
  .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:checked + .eds-checkbox__icon,
71
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:indeterminate + .eds-checkbox__icon {
72
- background-color: var(--components-form-checkbox-standard-fill-selected);
73
- border-color: transparent;
88
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input:indeterminate + .eds-checkbox__icon{
89
+ background-color:var(--components-form-checkbox-standard-fill-selected);
90
+ border-color:transparent;
74
91
  }
75
92
  .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container > input + .eds-checkbox__icon,
76
- .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input + .eds-checkbox__icon {
77
- border-color: var(--components-form-checkbox-standard-border);
78
- }
79
- .eds-dropdown__list__item--selected {
80
- background-color: var(--components-form-basemenu-fill-hover);
81
- }/* DO NOT CHANGE!*/
82
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
83
- .eds-contrast .eds-dropdown__selected-item-tag {
84
- background: var(--components-chip-standard-default);
85
- border: 0.0625rem solid var(--components-chip-standard-border);
86
- color: var(--components-chip-standard-text-unselected);
87
- }
88
- .eds-contrast .eds-dropdown__selected-item-tag:hover {
89
- border-color: var(--components-chip-standard-border);
90
- background-color: var(--components-chip-standard-hover);
91
- }
92
- .eds-contrast .eds-dropdown__selected-item-tag:active {
93
- background-color: var(--components-chip-standard-active);
94
- border-color: transparent;
95
- }
96
- .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button {
97
- color: var(--components-chip-standard-text-unselected);
98
- }
99
- .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover {
100
- background-color: var(--components-chip-standard-hover);
101
- }
102
- .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:focus-visible {
103
- outline-color: var(--basecolors-stroke-focus-standard);
104
- }
105
- .eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled {
106
- padding-right: 0.5rem;
107
- }
108
- .eds-dropdown__selected-item-tag--readonly .eds-tag-chip__close-button, .eds-dropdown__selected-item-tag--disabled .eds-tag-chip__close-button {
109
- display: none;
110
- }
111
- .eds-dropdown__selected-item-tag--readonly {
112
- cursor: text;
113
- }
114
- .eds-contrast .eds-dropdown__selected-item-tag--readonly {
115
- background-color: var(--components-form-baseform-standard-fill-readonly);
116
- border-color: var(--components-chip-contrast-border);
117
- color: var(--components-form-baseform-contrast-fill-default);
118
- }
119
- .eds-dropdown__selected-item-tag--disabled {
120
- cursor: not-allowed;
121
- border: 1px dashed var(--components-chip-standard-border-disabled);
122
- }
123
- .eds-contrast .eds-dropdown__selected-item-tag--disabled {
124
- background-color: var(--components-form-baseform-standard-fill-disabled);
125
- border: 1px dashed var(--components-chip-contrast-border-disabled);
126
- color: var(--components-form-baseform-standard-text-disabled);
127
- }
128
- .eds-dropdown__selected-item-tag__text {
129
- text-wrap: nowrap;
130
- text-overflow: ellipsis;
131
- overflow-x: hidden;
132
- }
133
- .eds-contrast .eds-dropdown .eds-icon-button {
134
- color: var(--components-button-iconbutton-standard-text);
135
- }
136
- .eds-contrast .eds-dropdown .eds-icon-button:hover {
137
- background-color: var(--components-button-iconbutton-standard-hover);
138
- }
139
- .eds-contrast .eds-dropdown .eds-icon-button:focus-visible {
140
- outline: 2px solid #181c56;
141
- outline-color: var(--basecolors-stroke-focus-standard);
142
- outline-offset: 0.125rem;
143
- }
144
- .eds-contrast .eds-dropdown .eds-icon-button:active {
145
- background-color: var(--components-button-iconbutton-standard-active);
146
- }
147
- .eds-dropdown__appendix {
148
- display: flex;
149
- align-items: center;
150
- align-self: flex-start;
151
- margin-top: 0.25rem;
152
- gap: 0.25rem;
153
- }
154
- .eds-dropdown__appendix__clear-button__tooltip {
155
- white-space: nowrap;
156
- }
157
- .eds-dropdown__appendix__divider {
158
- content: "";
159
- display: block;
160
- background-color: var(--components-form-baseform-standard-text-content);
161
- height: 1.5rem;
162
- width: 1px;
163
- }
164
- .eds-dropdown__appendix__toggle-button {
165
- margin-right: -0.75rem;
166
- }
167
- .eds-dropdown__appendix__toggle-button--open svg {
168
- transform: rotate(180deg);
169
- }
170
- .eds-dropdown__appendix__toggle-button svg {
171
- transition: transform ease-in-out 0.1s;
172
- }
173
- .eds-dropdown__appendix__toggle-button--loading-dots {
174
- align-items: center;
175
- display: flex;
176
- justify-content: center;
177
- height: 100%;
178
- width: 1.5rem;
179
- margin-left: 0.25rem;
180
- }
181
- .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot {
182
- background-color: var(--components-loader-loader-standard-text);
183
- }
184
- .eds-contrast .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot {
185
- background-color: var(--components-loader-loader-standard-text);
186
- }
187
- .eds-contrast .eds-dropdown__appendix__toggle-button:hover {
188
- background-color: var(--components-button-iconbutton-standard-hover);
189
- }
190
- .eds-contrast .eds-dropdown__appendix__toggle-button:focus-visible {
191
- outline-color: var(--basecolors-stroke-focus-standard);
192
- }/* DO NOT CHANGE!*/
193
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
194
- .eds-dropdown {
195
- position: relative;
196
- cursor: pointer;
197
- }
198
- .eds-dropdown:has(.eds-form-control-wrapper--readonly) {
199
- cursor: text;
200
- }
201
- .eds-dropdown__input {
202
- flex: 1;
203
- width: 0;
204
- }
205
- .eds-dropdown__input--hidden {
206
- flex: 0;
207
- }
208
- .eds-dropdown__input__wrapper {
209
- flex: 1 1 auto;
210
- display: flex;
211
- }
212
- .eds-dropdown__selected-item {
213
- flex: 1;
214
- height: 100%;
215
- min-height: 2.75rem;
216
- padding: 1.25rem 0rem 0.25rem;
217
- overflow-x: hidden;
218
- text-overflow: ellipsis;
219
- line-height: 1rem;
220
- }
221
- .eds-dropdown__selected-item:focus {
222
- outline: none;
223
- }
224
- .eds-dropdown--searchable {
225
- cursor: text;
226
- }
227
- .eds-dropdown--searchable__selected-item {
228
- position: relative;
229
- flex: 1;
230
- overflow-x: hidden;
231
- text-overflow: ellipsis;
232
- padding: 1.375rem 0rem 0.3rem;
233
- white-space: nowrap;
234
- line-height: 1rem;
235
- font-family: inherit;
236
- }
237
- .eds-dropdown--searchable__selected-item--hidden {
238
- flex: 0;
239
- }
240
- .eds-dropdown--searchable :not(.eds-dropdown--searchable__selected-item--hidden) + ::placeholder {
241
- transition: none;
242
- }
243
- .eds-dropdown--multiselect {
244
- cursor: text;
245
- }
246
- .eds-dropdown--multiselect__selected-items-and-input {
247
- display: flex;
248
- flex-wrap: wrap;
249
- flex: 1;
250
- gap: 0.5rem;
251
- min-width: 0;
252
- }
253
- .eds-dropdown--multiselect__selected-items-and-input--filled {
254
- padding: 1.25rem 0rem 0.25rem;
255
- }
256
- .eds-dropdown--multiselect__selected-items-and-input--filled .eds-dropdown__input {
257
- padding: unset;
258
- min-height: 1.5rem;
259
- }
260
- .eds-dropdown--multiselect__selected-items-and-input--filled .eds-tag-chip:focus {
261
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
262
- }
263
- .eds-dropdown--multiselect__selected-items-and-input--filled .eds-tag-chip__close-button svg {
264
- width: 1rem;
265
- height: 1rem;
266
- }
267
- .eds-dropdown--native + .eds-form-control__append {
268
- margin-left: -2em;
269
- pointer-events: none;
270
- }
271
- .eds-dropdown--native option {
272
- color: var(--components-form-basemenu-text);
273
- background-color: var(--components-form-basemenu-fill-default);
274
- }
275
- .eds-contrast .eds-dropdown--native option {
276
- color: var(--components-form-basemenu-text);
93
+ .eds-dropdown__list__item--highlighted .eds-dropdown__list__item__checkbox.eds-checkbox__container:hover > input + .eds-checkbox__icon{
94
+ border-color:var(--components-form-checkbox-standard-border);
95
+ }
96
+ .eds-dropdown__list__item--selected{
97
+ background-color:var(--components-form-basemenu-fill-hover);
98
+ }.eds-contrast .eds-dropdown__selected-item-tag{
99
+ background:var(--components-chip-standard-default);
100
+ border:0.0625rem solid var(--components-chip-standard-border);
101
+ color:var(--components-chip-standard-text-unselected);
102
+ }
103
+ .eds-contrast .eds-dropdown__selected-item-tag:hover{
104
+ border-color:var(--components-chip-standard-border);
105
+ background-color:var(--components-chip-standard-hover);
106
+ }
107
+ .eds-contrast .eds-dropdown__selected-item-tag:active{
108
+ background-color:var(--components-chip-standard-active);
109
+ border-color:transparent;
110
+ }
111
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button{
112
+ color:var(--components-chip-standard-text-unselected);
113
+ }
114
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:hover{
115
+ background-color:var(--components-chip-standard-hover);
116
+ }
117
+ .eds-contrast .eds-dropdown__selected-item-tag .eds-tag-chip__close-button:focus-visible{
118
+ outline-color:var(--basecolors-stroke-focus-standard);
119
+ }
120
+ .eds-dropdown__selected-item-tag--readonly, .eds-dropdown__selected-item-tag--disabled{
121
+ padding-right:0.5rem;
122
+ }
123
+ .eds-dropdown__selected-item-tag--readonly .eds-tag-chip__close-button, .eds-dropdown__selected-item-tag--disabled .eds-tag-chip__close-button{
124
+ display:none;
125
+ }
126
+ .eds-dropdown__selected-item-tag--readonly{
127
+ cursor:text;
128
+ }
129
+ .eds-contrast .eds-dropdown__selected-item-tag--readonly{
130
+ background-color:var(--components-form-baseform-standard-fill-readonly);
131
+ border-color:var(--components-chip-contrast-border);
132
+ color:var(--components-form-baseform-contrast-fill-default);
133
+ }
134
+ .eds-dropdown__selected-item-tag--disabled{
135
+ cursor:not-allowed;
136
+ border:1px dashed var(--components-chip-standard-border-disabled);
137
+ }
138
+ .eds-contrast .eds-dropdown__selected-item-tag--disabled{
139
+ background-color:var(--components-form-baseform-standard-fill-disabled);
140
+ border:1px dashed var(--components-chip-contrast-border-disabled);
141
+ color:var(--components-form-baseform-standard-text-disabled);
142
+ }
143
+ .eds-dropdown__selected-item-tag__text{
144
+ text-wrap:nowrap;
145
+ -o-text-overflow:ellipsis;
146
+ text-overflow:ellipsis;
147
+ overflow-x:hidden;
148
+ }
149
+ .eds-contrast .eds-dropdown .eds-icon-button{
150
+ color:var(--components-button-iconbutton-standard-text);
151
+ }
152
+ .eds-contrast .eds-dropdown .eds-icon-button:hover{
153
+ background-color:var(--components-button-iconbutton-standard-hover);
154
+ }
155
+ .eds-contrast .eds-dropdown .eds-icon-button:focus-visible{
156
+ outline:2px solid #181c56;
157
+ outline-color:var(--basecolors-stroke-focus-standard);
158
+ outline-offset:0.125rem;
159
+ }
160
+ .eds-contrast .eds-dropdown .eds-icon-button:active{
161
+ background-color:var(--components-button-iconbutton-standard-active);
162
+ }
163
+ .eds-dropdown__appendix{
164
+ display:-webkit-box;
165
+ display:-webkit-flex;
166
+ display:-moz-box;
167
+ display:flex;
168
+ -webkit-box-align:center;
169
+ -webkit-align-items:center;
170
+ -moz-box-align:center;
171
+ align-items:center;
172
+ -webkit-align-self:flex-start;
173
+ align-self:flex-start;
174
+ margin-top:0.25rem;
175
+ gap:0.25rem;
176
+ }
177
+ .eds-dropdown__appendix__clear-button__tooltip{
178
+ white-space:nowrap;
179
+ }
180
+ .eds-dropdown__appendix__divider{
181
+ content:"";
182
+ display:block;
183
+ background-color:var(--components-form-baseform-standard-text-content);
184
+ height:1.5rem;
185
+ width:1px;
186
+ }
187
+ .eds-dropdown__appendix__toggle-button{
188
+ margin-right:-0.75rem;
189
+ }
190
+ .eds-dropdown__appendix__toggle-button--open svg{
191
+ -webkit-transform:rotate(180deg);
192
+ -moz-transform:rotate(180deg);
193
+ -o-transform:rotate(180deg);
194
+ transform:rotate(180deg);
195
+ }
196
+ .eds-dropdown__appendix__toggle-button svg{
197
+ -webkit-transition:-webkit-transform ease-in-out 0.1s;
198
+ transition:-webkit-transform ease-in-out 0.1s;
199
+ -o-transition:-o-transform ease-in-out 0.1s;
200
+ -moz-transition:transform ease-in-out 0.1s, -moz-transform ease-in-out 0.1s;
201
+ transition:transform ease-in-out 0.1s;
202
+ transition:transform ease-in-out 0.1s, -webkit-transform ease-in-out 0.1s, -moz-transform ease-in-out 0.1s, -o-transform ease-in-out 0.1s;
203
+ }
204
+ .eds-dropdown__appendix__toggle-button--loading-dots{
205
+ -webkit-box-align:center;
206
+ -webkit-align-items:center;
207
+ -moz-box-align:center;
208
+ align-items:center;
209
+ display:-webkit-box;
210
+ display:-webkit-flex;
211
+ display:-moz-box;
212
+ display:flex;
213
+ -webkit-box-pack:center;
214
+ -webkit-justify-content:center;
215
+ -moz-box-pack:center;
216
+ justify-content:center;
217
+ height:100%;
218
+ width:1.5rem;
219
+ margin-left:0.25rem;
220
+ }
221
+ .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot{
222
+ background-color:var(--components-loader-loader-standard-text);
223
+ }
224
+ .eds-contrast .eds-dropdown__appendix__toggle-button--loading-dots .eds-loading-dots__dot{
225
+ background-color:var(--components-loader-loader-standard-text);
226
+ }
227
+ .eds-contrast .eds-dropdown__appendix__toggle-button:hover{
228
+ background-color:var(--components-button-iconbutton-standard-hover);
229
+ }
230
+ .eds-contrast .eds-dropdown__appendix__toggle-button:focus-visible{
231
+ outline-color:var(--basecolors-stroke-focus-standard);
232
+ }.eds-dropdown{
233
+ position:relative;
234
+ cursor:pointer;
235
+ }
236
+ .eds-dropdown:has(.eds-form-control-wrapper--readonly){
237
+ cursor:text;
238
+ }
239
+ .eds-dropdown__input{
240
+ -webkit-box-flex:1;
241
+ -webkit-flex:1;
242
+ -moz-box-flex:1;
243
+ flex:1;
244
+ width:0;
245
+ }
246
+ .eds-dropdown__input--hidden{
247
+ -webkit-box-flex:0;
248
+ -webkit-flex:0;
249
+ -moz-box-flex:0;
250
+ flex:0;
251
+ }
252
+ .eds-dropdown__input__wrapper{
253
+ -webkit-box-flex:1;
254
+ -webkit-flex:1 1 auto;
255
+ -moz-box-flex:1;
256
+ flex:1 1 auto;
257
+ display:-webkit-box;
258
+ display:-webkit-flex;
259
+ display:-moz-box;
260
+ display:flex;
261
+ }
262
+ .eds-dropdown__selected-item{
263
+ -webkit-box-flex:1;
264
+ -webkit-flex:1;
265
+ -moz-box-flex:1;
266
+ flex:1;
267
+ height:100%;
268
+ min-height:2.75rem;
269
+ padding:1.25rem 0rem 0.25rem;
270
+ overflow-x:hidden;
271
+ -o-text-overflow:ellipsis;
272
+ text-overflow:ellipsis;
273
+ line-height:1rem;
274
+ }
275
+ .eds-dropdown__selected-item:focus{
276
+ outline:none;
277
+ }
278
+ .eds-dropdown--searchable{
279
+ cursor:text;
280
+ }
281
+ .eds-dropdown--searchable__selected-item{
282
+ position:relative;
283
+ -webkit-box-flex:1;
284
+ -webkit-flex:1;
285
+ -moz-box-flex:1;
286
+ flex:1;
287
+ overflow-x:hidden;
288
+ -o-text-overflow:ellipsis;
289
+ text-overflow:ellipsis;
290
+ padding:1.375rem 0rem 0.3rem;
291
+ white-space:nowrap;
292
+ line-height:1rem;
293
+ font-family:inherit;
294
+ }
295
+ .eds-dropdown--searchable__selected-item--hidden{
296
+ -webkit-box-flex:0;
297
+ -webkit-flex:0;
298
+ -moz-box-flex:0;
299
+ flex:0;
300
+ }
301
+ .eds-dropdown--searchable :not(.eds-dropdown--searchable__selected-item--hidden) + ::-webkit-input-placeholder{
302
+ -webkit-transition:none;
303
+ transition:none;
304
+ }
305
+ .eds-dropdown--searchable :not(.eds-dropdown--searchable__selected-item--hidden) + :-moz-placeholder{
306
+ -moz-transition:none;
307
+ transition:none;
308
+ }
309
+ .eds-dropdown--searchable :not(.eds-dropdown--searchable__selected-item--hidden) + ::-moz-placeholder{
310
+ -moz-transition:none;
311
+ transition:none;
312
+ }
313
+ .eds-dropdown--searchable :not(.eds-dropdown--searchable__selected-item--hidden) + ::-ms-input-placeholder{
314
+ -ms-transition:none;
315
+ transition:none;
316
+ }
317
+ .eds-dropdown--searchable :not(.eds-dropdown--searchable__selected-item--hidden) + ::placeholder{
318
+ -webkit-transition:none;
319
+ -o-transition:none;
320
+ -moz-transition:none;
321
+ transition:none;
322
+ }
323
+ .eds-dropdown--multiselect{
324
+ cursor:text;
325
+ }
326
+ .eds-dropdown--multiselect__selected-items-and-input{
327
+ display:-webkit-box;
328
+ display:-webkit-flex;
329
+ display:-moz-box;
330
+ display:flex;
331
+ -webkit-flex-wrap:wrap;
332
+ flex-wrap:wrap;
333
+ -webkit-box-flex:1;
334
+ -webkit-flex:1;
335
+ -moz-box-flex:1;
336
+ flex:1;
337
+ gap:0.5rem;
338
+ min-width:0;
339
+ }
340
+ .eds-dropdown--multiselect__selected-items-and-input--filled{
341
+ padding:1.25rem 0rem 0.25rem;
342
+ }
343
+ .eds-dropdown--multiselect__selected-items-and-input--filled .eds-dropdown__input{
344
+ padding:0;
345
+ padding:initial;
346
+ min-height:1.5rem;
347
+ }
348
+ .eds-dropdown--multiselect__selected-items-and-input--filled .eds-tag-chip:focus{
349
+ -webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
350
+ -moz-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
351
+ box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
352
+ }
353
+ .eds-dropdown--multiselect__selected-items-and-input--filled .eds-tag-chip__close-button svg{
354
+ width:1rem;
355
+ height:1rem;
356
+ }
357
+ .eds-dropdown--native + .eds-form-control__append{
358
+ margin-left:-2em;
359
+ pointer-events:none;
360
+ }
361
+ .eds-dropdown--native option{
362
+ color:var(--components-form-basemenu-text);
363
+ background-color:var(--components-form-basemenu-fill-default);
364
+ }
365
+ .eds-contrast .eds-dropdown--native option{
366
+ color:var(--components-form-basemenu-text);
277
367
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/dropdown",
3
- "version": "8.0.0",
3
+ "version": "8.0.1-beta.0",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/dropdown.cjs.js",
6
6
  "module": "dist/dropdown.esm.js",
@@ -28,13 +28,13 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@entur/a11y": "^0.2.102",
31
- "@entur/button": "^3.3.18",
32
- "@entur/chip": "^0.9.8",
33
- "@entur/form": "^9.0.1",
34
- "@entur/icons": "^8.2.0",
35
- "@entur/loader": "^0.5.35",
31
+ "@entur/button": "^3.4.0-beta.0",
32
+ "@entur/chip": "^0.9.9-beta.0",
33
+ "@entur/form": "^9.0.2-beta.0",
34
+ "@entur/icons": "^8.3.0-beta.0",
35
+ "@entur/loader": "^0.5.36-beta.0",
36
36
  "@entur/tokens": "^3.20.0",
37
- "@entur/tooltip": "^5.2.17",
37
+ "@entur/tooltip": "^5.2.18-beta.0",
38
38
  "@entur/utils": "^0.12.5",
39
39
  "@floating-ui/react-dom": "^2.1.6",
40
40
  "classnames": "^2.5.1",
@@ -53,5 +53,5 @@
53
53
  "vite": "^7.1.3",
54
54
  "vite-plugin-dts": "^4.5.4"
55
55
  },
56
- "gitHead": "51a246c05d8abbc22f93b38be56a5242fcee00c6"
56
+ "gitHead": "e3da53c27deec5444106581c2339049814f633fe"
57
57
  }