@entur/chip 0.9.0 → 0.9.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.
- package/dist/chip.cjs.js +302 -0
- package/dist/chip.cjs.js.map +1 -0
- package/dist/chip.esm.js +292 -216
- package/dist/chip.esm.js.map +1 -1
- package/dist/index.d.ts +98 -6
- package/dist/styles.css +246 -266
- package/package.json +33 -15
- package/dist/ActionChip.d.ts +0 -18
- package/dist/ChoiceChip.d.ts +0 -20
- package/dist/ChoiceChipGroup.d.ts +0 -16
- package/dist/ChoiceChipGroupContext.d.ts +0 -9
- package/dist/FilterChip.d.ts +0 -27
- package/dist/TagChip.d.ts +0 -18
- package/dist/chip.cjs.development.js +0 -234
- package/dist/chip.cjs.development.js.map +0 -1
- package/dist/chip.cjs.production.min.js +0 -2
- package/dist/chip.cjs.production.min.js.map +0 -1
- package/dist/index.js +0 -8
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,98 @@
|
|
|
1
|
-
import '
|
|
2
|
-
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
export
|
|
6
|
-
|
|
1
|
+
import { default as default_2 } from 'react';
|
|
2
|
+
|
|
3
|
+
export declare const ActionChip: default_2.ForwardRefExoticComponent<Omit<ActionChipProps, "ref"> & default_2.RefAttributes<HTMLButtonElement>>;
|
|
4
|
+
|
|
5
|
+
export declare type ActionChipProps = {
|
|
6
|
+
/** Teksten som vises i ActionChip */
|
|
7
|
+
children: default_2.ReactNode;
|
|
8
|
+
/** Ekstra klassenavn */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Om chip-en er opptatt, f.eks med å oppdatere informasjon
|
|
11
|
+
* @default false
|
|
12
|
+
*/
|
|
13
|
+
loading?: boolean;
|
|
14
|
+
/** Størrelsen på chip
|
|
15
|
+
* @default 'medium'
|
|
16
|
+
*/
|
|
17
|
+
size?: 'small' | 'medium';
|
|
18
|
+
} & default_2.DetailedHTMLProps<default_2.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
|
|
19
|
+
|
|
20
|
+
export declare const ChoiceChip: default_2.ForwardRefExoticComponent<Omit<ChoiceChipProps, "ref"> & default_2.RefAttributes<HTMLInputElement>>;
|
|
21
|
+
|
|
22
|
+
export declare const ChoiceChipGroup: default_2.FC<ChoiceChipGroupProps>;
|
|
23
|
+
|
|
24
|
+
export declare type ChoiceChipGroupProps = {
|
|
25
|
+
/** Navnet til ChoiceChipsGroup */
|
|
26
|
+
name: string;
|
|
27
|
+
/** Verdien til den valgte ChoiceChipen */
|
|
28
|
+
value: string | null;
|
|
29
|
+
/** ChoiceChip-komponentene sendes inn som children */
|
|
30
|
+
children: default_2.ReactNode;
|
|
31
|
+
/** En callback som blir kalles hver gang en ChoiceChip klikkes på */
|
|
32
|
+
onChange: (e: default_2.ChangeEvent<HTMLInputElement>) => void;
|
|
33
|
+
/** Labelen til ChoiceChip-gruppen. */
|
|
34
|
+
label?: default_2.ReactNode;
|
|
35
|
+
[key: string]: any;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export declare type ChoiceChipProps = {
|
|
39
|
+
/** Ekstra klassenavn */
|
|
40
|
+
className?: string;
|
|
41
|
+
/** Om Choicechip er deaktivert eller ikke
|
|
42
|
+
* @default false
|
|
43
|
+
*/
|
|
44
|
+
disabled?: boolean;
|
|
45
|
+
/** Label til ChoiceChip */
|
|
46
|
+
children?: default_2.ReactNode;
|
|
47
|
+
/** Verdien til ChoiceChip */
|
|
48
|
+
value: string;
|
|
49
|
+
/** Størrelsen på chip
|
|
50
|
+
* @default 'medium'
|
|
51
|
+
*/
|
|
52
|
+
size?: 'small' | 'medium';
|
|
53
|
+
} & Omit<default_2.DetailedHTMLProps<default_2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'value' | 'size'>;
|
|
54
|
+
|
|
55
|
+
export declare const FilterChip: default_2.ForwardRefExoticComponent<{
|
|
56
|
+
/** Ekstra klassenavn */
|
|
57
|
+
className?: string;
|
|
58
|
+
/** Label til FilterChip */
|
|
59
|
+
children?: default_2.ReactNode;
|
|
60
|
+
/** Verdien til FilterChip */
|
|
61
|
+
value: string;
|
|
62
|
+
/** Størrelsen på chip
|
|
63
|
+
* @default 'medium'
|
|
64
|
+
*/
|
|
65
|
+
size?: "small" | "medium";
|
|
66
|
+
} & Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "value" | "size"> & default_2.RefAttributes<HTMLInputElement>>;
|
|
67
|
+
|
|
68
|
+
export declare type FilterChipProps = {
|
|
69
|
+
/** Ekstra klassenavn */
|
|
70
|
+
className?: string;
|
|
71
|
+
/** Label til FilterChip */
|
|
72
|
+
children?: default_2.ReactNode;
|
|
73
|
+
/** Verdien til FilterChip */
|
|
74
|
+
value: string;
|
|
75
|
+
/** Størrelsen på chip
|
|
76
|
+
* @default 'medium'
|
|
77
|
+
*/
|
|
78
|
+
size?: 'small' | 'medium';
|
|
79
|
+
} & Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'>;
|
|
80
|
+
|
|
81
|
+
export declare const TagChip: default_2.ForwardRefExoticComponent<TagChipProps & default_2.RefAttributes<HTMLButtonElement>>;
|
|
82
|
+
|
|
83
|
+
export declare type TagChipProps = {
|
|
84
|
+
/** Teksten som vises i TagChip */
|
|
85
|
+
children: default_2.ReactNode;
|
|
86
|
+
/** Ekstra klassenavn */
|
|
87
|
+
className?: string;
|
|
88
|
+
/** Callback for når man klikker på krysset */
|
|
89
|
+
onClose: () => void;
|
|
90
|
+
/** Skjermlesertekst for X-knappen */
|
|
91
|
+
closeButtonAriaLabel?: string;
|
|
92
|
+
/** Størrelsen på chip
|
|
93
|
+
* @default 'medium'
|
|
94
|
+
*/
|
|
95
|
+
size?: 'small' | 'medium';
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
export { }
|
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,244 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
+
/* DO NOT CHANGE!*/
|
|
4
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
5
|
+
/* DO NOT CHANGE!*/
|
|
6
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
7
|
+
[data-color-mode=light],
|
|
8
|
+
:root {
|
|
9
|
+
--components-chip-contrast-active: #8794d4;
|
|
10
|
+
--components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
|
|
11
|
+
--components-chip-contrast-border-disabled: #949699;
|
|
12
|
+
--components-chip-contrast-default: rgba(255, 255, 255, 0);
|
|
13
|
+
--components-chip-contrast-hover: #626493;
|
|
14
|
+
--components-chip-contrast-icon-disabled: #b6b8ba;
|
|
15
|
+
--components-chip-contrast-icon-selected: #181c56;
|
|
16
|
+
--components-chip-contrast-icon-unselected: #ffffff;
|
|
17
|
+
--components-chip-contrast-text-disabled: #b6b8ba;
|
|
18
|
+
--components-chip-contrast-text-selected: #181c56;
|
|
19
|
+
--components-chip-contrast-text-unselected: #ffffff;
|
|
20
|
+
--components-chip-standard-active: #aeb7e2;
|
|
21
|
+
--components-chip-standard-border: rgba(84, 86, 140, 0.4);
|
|
22
|
+
--components-chip-standard-border-disabled: #949699;
|
|
23
|
+
--components-chip-standard-default: rgba(255, 255, 255, 0);
|
|
24
|
+
--components-chip-standard-hover: #d9ddf2;
|
|
25
|
+
--components-chip-standard-icon-disabled: #6e6f73;
|
|
26
|
+
--components-chip-standard-icon-selected: #181c56;
|
|
27
|
+
--components-chip-standard-icon-unselected: #181c56;
|
|
28
|
+
--components-chip-standard-text-disabled: #6e6f73;
|
|
29
|
+
--components-chip-standard-text-selected: #181c56;
|
|
30
|
+
--components-chip-standard-text-unselected: #181c56;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
[data-color-mode=dark] {
|
|
34
|
+
--components-chip-contrast-active: #8794d4;
|
|
35
|
+
--components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
|
|
36
|
+
--components-chip-contrast-border-disabled: #949699;
|
|
37
|
+
--components-chip-contrast-default: rgba(255, 255, 255, 0);
|
|
38
|
+
--components-chip-contrast-hover: #626493;
|
|
39
|
+
--components-chip-contrast-icon-disabled: #b6b8ba;
|
|
40
|
+
--components-chip-contrast-icon-selected: #08091c;
|
|
41
|
+
--components-chip-contrast-icon-unselected: #e5e5e9;
|
|
42
|
+
--components-chip-contrast-text-disabled: #b6b8ba;
|
|
43
|
+
--components-chip-contrast-text-selected: #08091c;
|
|
44
|
+
--components-chip-contrast-text-unselected: #e5e5e9;
|
|
45
|
+
--components-chip-standard-active: #8794d4;
|
|
46
|
+
--components-chip-standard-border: rgba(174, 183, 226, 0.6980392157);
|
|
47
|
+
--components-chip-standard-border-disabled: #949699;
|
|
48
|
+
--components-chip-standard-default: rgba(255, 255, 255, 0);
|
|
49
|
+
--components-chip-standard-hover: #626493;
|
|
50
|
+
--components-chip-standard-icon-disabled: #b6b8ba;
|
|
51
|
+
--components-chip-standard-icon-selected: #08091c;
|
|
52
|
+
--components-chip-standard-icon-unselected: #e5e5e9;
|
|
53
|
+
--components-chip-standard-text-disabled: #b6b8ba;
|
|
54
|
+
--components-chip-standard-text-selected: #08091c;
|
|
55
|
+
--components-chip-standard-text-unselected: #e5e5e9;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* DO NOT CHANGE!*/
|
|
59
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
60
|
+
/* DO NOT CHANGE!*/
|
|
61
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
62
|
+
[data-color-mode=light],
|
|
63
|
+
:root {
|
|
64
|
+
--basecolors-frame-contrast: #181c56;
|
|
65
|
+
--basecolors-frame-contrastalt: #393d79;
|
|
66
|
+
--basecolors-frame-contrastalt-2: #292b6a;
|
|
67
|
+
--basecolors-frame-default: #ffffff;
|
|
68
|
+
--basecolors-frame-elevated: #ffffff;
|
|
69
|
+
--basecolors-frame-elevatedalt: #f6f6f9;
|
|
70
|
+
--basecolors-frame-subdued: #d9dae8;
|
|
71
|
+
--basecolors-frame-tint: #f6f6f9;
|
|
72
|
+
--basecolors-shape-accent: #181c56;
|
|
73
|
+
--basecolors-shape-bicycle-contrast: #00db9b;
|
|
74
|
+
--basecolors-shape-bicycle-default: #388f76;
|
|
75
|
+
--basecolors-shape-bus-contrast: #ff6392;
|
|
76
|
+
--basecolors-shape-bus-default: #c5044e;
|
|
77
|
+
--basecolors-shape-cableway-contrast: #b482fb;
|
|
78
|
+
--basecolors-shape-cableway-default: #78469a;
|
|
79
|
+
--basecolors-shape-disabled: #6e6f73;
|
|
80
|
+
--basecolors-shape-disabledalt: #b6b8ba;
|
|
81
|
+
--basecolors-shape-ferry-contrast: #6fdfff;
|
|
82
|
+
--basecolors-shape-ferry-default: #0c6693;
|
|
83
|
+
--basecolors-shape-funicular-contrast: #b482fb;
|
|
84
|
+
--basecolors-shape-funicular-default: #78469a;
|
|
85
|
+
--basecolors-shape-helicopter-contrast: #fbafea;
|
|
86
|
+
--basecolors-shape-helicopter-default: #800664;
|
|
87
|
+
--basecolors-shape-highlight: #ff5959;
|
|
88
|
+
--basecolors-shape-light: #ffffff;
|
|
89
|
+
--basecolors-shape-mask: #ffffff;
|
|
90
|
+
--basecolors-shape-maskalt: #ffffff;
|
|
91
|
+
--basecolors-shape-metro-contrast: #f08901;
|
|
92
|
+
--basecolors-shape-metro-default: #bf5826;
|
|
93
|
+
--basecolors-shape-mobility-contrast: #00db9b;
|
|
94
|
+
--basecolors-shape-mobility-default: #388f76;
|
|
95
|
+
--basecolors-shape-plane-contrast: #fbafea;
|
|
96
|
+
--basecolors-shape-plane-default: #800664;
|
|
97
|
+
--basecolors-shape-subdued: #626493;
|
|
98
|
+
--basecolors-shape-subduedalt: #d9dae8;
|
|
99
|
+
--basecolors-shape-taxi-contrast: #ffe082;
|
|
100
|
+
--basecolors-shape-taxi-default: #3d3e40;
|
|
101
|
+
--basecolors-shape-train-contrast: #42a5f5;
|
|
102
|
+
--basecolors-shape-train-default: #00367f;
|
|
103
|
+
--basecolors-shape-tram-contrast: #b482fb;
|
|
104
|
+
--basecolors-shape-tram-default: #78469a;
|
|
105
|
+
--basecolors-shape-walk-contrast: #8284ab;
|
|
106
|
+
--basecolors-shape-walk-default: #8d8e9c;
|
|
107
|
+
--basecolors-shape-airportlinkbus-contrast: #fbafea;
|
|
108
|
+
--basecolors-shape-airportlinkbus-default: #800664;
|
|
109
|
+
--basecolors-shape-airportlinkrail-contrast: #fbafea;
|
|
110
|
+
--basecolors-shape-airportlinkrail-default: #800664;
|
|
111
|
+
--basecolors-stroke-contrast: #aeb7e2;
|
|
112
|
+
--basecolors-stroke-default: #181c56;
|
|
113
|
+
--basecolors-stroke-disabled: #949699;
|
|
114
|
+
--basecolors-stroke-focus-contrast: #aeb7e2;
|
|
115
|
+
--basecolors-stroke-focus-standard: #181c56;
|
|
116
|
+
--basecolors-stroke-highlight: #ff5959;
|
|
117
|
+
--basecolors-stroke-light: #ffffff;
|
|
118
|
+
--basecolors-stroke-subdued: #8284ab;
|
|
119
|
+
--basecolors-stroke-subduedalt: #e3e6e8;
|
|
120
|
+
--basecolors-text-accent: #181c56;
|
|
121
|
+
--basecolors-text-disabled: #6e6f73;
|
|
122
|
+
--basecolors-text-disabledalt: #b6b8ba;
|
|
123
|
+
--basecolors-text-highlight: #ff5959;
|
|
124
|
+
--basecolors-text-light: #ffffff;
|
|
125
|
+
--basecolors-text-subdued: #626493;
|
|
126
|
+
--basecolors-text-subduedalt: #d9dae8;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
[data-color-mode=dark] {
|
|
130
|
+
--basecolors-frame-contrast: #212233;
|
|
131
|
+
--basecolors-frame-contrastalt: #141527;
|
|
132
|
+
--basecolors-frame-contrastalt-2: #08091c;
|
|
133
|
+
--basecolors-frame-default: #08091c;
|
|
134
|
+
--basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
|
|
135
|
+
--basecolors-frame-elevatedalt: #464755;
|
|
136
|
+
--basecolors-frame-subdued: #2d2e3e;
|
|
137
|
+
--basecolors-frame-tint: #141527;
|
|
138
|
+
--basecolors-shape-accent: #e5e5e9;
|
|
139
|
+
--basecolors-shape-bicycle-contrast: #4db295;
|
|
140
|
+
--basecolors-shape-bicycle-default: #4db295;
|
|
141
|
+
--basecolors-shape-bus-contrast: #ef7398;
|
|
142
|
+
--basecolors-shape-bus-default: #ef7398;
|
|
143
|
+
--basecolors-shape-cableway-contrast: #b898e5;
|
|
144
|
+
--basecolors-shape-cableway-default: #b898e5;
|
|
145
|
+
--basecolors-shape-disabled: #b6b8ba;
|
|
146
|
+
--basecolors-shape-disabledalt: #b3b4bd;
|
|
147
|
+
--basecolors-shape-ferry-contrast: #8ccfe2;
|
|
148
|
+
--basecolors-shape-ferry-default: #8ccfe2;
|
|
149
|
+
--basecolors-shape-funicular-contrast: #b898e5;
|
|
150
|
+
--basecolors-shape-funicular-default: #b898e5;
|
|
151
|
+
--basecolors-shape-helicopter-contrast: #f2b8e5;
|
|
152
|
+
--basecolors-shape-helicopter-default: #f2b8e5;
|
|
153
|
+
--basecolors-shape-highlight: #ff9494;
|
|
154
|
+
--basecolors-shape-light: #e5e5e9;
|
|
155
|
+
--basecolors-shape-mask: #2d2e3e;
|
|
156
|
+
--basecolors-shape-maskalt: #393a49;
|
|
157
|
+
--basecolors-shape-metro-contrast: #dd973c;
|
|
158
|
+
--basecolors-shape-metro-default: #dd973c;
|
|
159
|
+
--basecolors-shape-mobility-contrast: #4db295;
|
|
160
|
+
--basecolors-shape-mobility-default: #4db295;
|
|
161
|
+
--basecolors-shape-plane-contrast: #f2b8e5;
|
|
162
|
+
--basecolors-shape-plane-default: #f2b8e5;
|
|
163
|
+
--basecolors-shape-subdued: #b3b4bd;
|
|
164
|
+
--basecolors-shape-subduedalt: #b3b4bd;
|
|
165
|
+
--basecolors-shape-taxi-contrast: #ffe082;
|
|
166
|
+
--basecolors-shape-taxi-default: #ffe082;
|
|
167
|
+
--basecolors-shape-train-contrast: #60a2d7;
|
|
168
|
+
--basecolors-shape-train-default: #60a2d7;
|
|
169
|
+
--basecolors-shape-tram-contrast: #b898e5;
|
|
170
|
+
--basecolors-shape-tram-default: #b898e5;
|
|
171
|
+
--basecolors-shape-walk-contrast: #8d8e9c;
|
|
172
|
+
--basecolors-shape-walk-default: #8d8e9c;
|
|
173
|
+
--basecolors-shape-airportlinkbus-contrast: #f2b8e5;
|
|
174
|
+
--basecolors-shape-airportlinkbus-default: #f2b8e5;
|
|
175
|
+
--basecolors-shape-airportlinkrail-contrast: #f2b8e5;
|
|
176
|
+
--basecolors-shape-airportlinkrail-default: #f2b8e5;
|
|
177
|
+
--basecolors-stroke-contrast: #aeb7e2;
|
|
178
|
+
--basecolors-stroke-default: #b3b4bd;
|
|
179
|
+
--basecolors-stroke-disabled: #e3e6e8;
|
|
180
|
+
--basecolors-stroke-focus-contrast: #aeb7e2;
|
|
181
|
+
--basecolors-stroke-focus-standard: #aeb7e2;
|
|
182
|
+
--basecolors-stroke-highlight: #ff9494;
|
|
183
|
+
--basecolors-stroke-light: #b3b4bd;
|
|
184
|
+
--basecolors-stroke-subdued: #81828f;
|
|
185
|
+
--basecolors-stroke-subduedalt: #949699;
|
|
186
|
+
--basecolors-text-accent: #e5e5e9;
|
|
187
|
+
--basecolors-text-disabled: #b6b8ba;
|
|
188
|
+
--basecolors-text-disabledalt: #b6b8ba;
|
|
189
|
+
--basecolors-text-highlight: #ff9494;
|
|
190
|
+
--basecolors-text-light: #e5e5e9;
|
|
191
|
+
--basecolors-text-subdued: #b3b4bd;
|
|
192
|
+
--basecolors-text-subduedalt: #b3b4bd;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
:root {
|
|
196
|
+
--eds-chip: 1;
|
|
197
|
+
}/* DO NOT CHANGE!*/
|
|
198
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
199
|
+
.eds-chip {
|
|
200
|
+
background: transparent;
|
|
201
|
+
border: 0.0625rem solid var(--components-chip-standard-border);
|
|
202
|
+
border-radius: 1rem;
|
|
203
|
+
color: var(--components-chip-standard-text-unselected);
|
|
204
|
+
font-family: inherit;
|
|
205
|
+
transition: background 0.1s ease-out, border 0.1s ease-out;
|
|
206
|
+
display: flex;
|
|
207
|
+
justify-content: center;
|
|
208
|
+
align-items: center;
|
|
209
|
+
white-space: nowrap;
|
|
210
|
+
}
|
|
211
|
+
.eds-chip svg {
|
|
212
|
+
font-size: 0.875rem;
|
|
213
|
+
}
|
|
214
|
+
.eds-contrast .eds-chip {
|
|
215
|
+
background-color: transparent;
|
|
216
|
+
color: var(--components-chip-contrast-text-unselected);
|
|
217
|
+
border-color: var(--components-chip-contrast-border);
|
|
218
|
+
}
|
|
219
|
+
.eds-chip--size-small {
|
|
220
|
+
height: 1.5rem;
|
|
221
|
+
min-width: 2.5rem;
|
|
222
|
+
padding: 0 0.5rem;
|
|
223
|
+
font-size: 0.75rem;
|
|
224
|
+
}
|
|
225
|
+
.eds-chip--size-small .eds-tag-chip__close-button svg {
|
|
226
|
+
width: 1rem;
|
|
227
|
+
height: 1rem;
|
|
228
|
+
}
|
|
229
|
+
.eds-chip--size-medium {
|
|
230
|
+
height: 2rem;
|
|
231
|
+
min-width: 3rem;
|
|
232
|
+
padding: 0 0.75rem;
|
|
233
|
+
font-size: 0.875rem;
|
|
234
|
+
}
|
|
235
|
+
.eds-chip--leading-icon > svg:first-of-type {
|
|
236
|
+
margin-right: 0.25rem;
|
|
237
|
+
}
|
|
238
|
+
.eds-chip--trailing-icon > svg:last-of-type {
|
|
239
|
+
margin-left: 0.25rem;
|
|
240
|
+
}/* DO NOT CHANGE!*/
|
|
241
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
242
|
.eds-choice-chip {
|
|
4
243
|
cursor: pointer;
|
|
5
244
|
display: inline-block;
|
|
@@ -8,8 +247,7 @@
|
|
|
8
247
|
transition: all 0.1s ease-out;
|
|
9
248
|
}
|
|
10
249
|
.eds-choice-chip__input {
|
|
11
|
-
|
|
12
|
-
appearance: none;
|
|
250
|
+
appearance: none;
|
|
13
251
|
height: 0;
|
|
14
252
|
position: absolute;
|
|
15
253
|
width: 0;
|
|
@@ -71,52 +309,7 @@
|
|
|
71
309
|
opacity: 1;
|
|
72
310
|
border-color: var(--components-chip-contrast-border-disabled);
|
|
73
311
|
color: var(--components-chip-contrast-text-disabled);
|
|
74
|
-
}
|
|
75
|
-
/* DO NOT CHANGE!*/
|
|
76
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
77
|
-
.eds-chip {
|
|
78
|
-
background: transparent;
|
|
79
|
-
border: 0.0625rem solid var(--components-chip-standard-border);
|
|
80
|
-
border-radius: 1rem;
|
|
81
|
-
color: var(--components-chip-standard-text-unselected);
|
|
82
|
-
font-family: inherit;
|
|
83
|
-
transition: background 0.1s ease-out, border 0.1s ease-out;
|
|
84
|
-
display: flex;
|
|
85
|
-
justify-content: center;
|
|
86
|
-
align-items: center;
|
|
87
|
-
white-space: nowrap;
|
|
88
|
-
}
|
|
89
|
-
.eds-chip svg {
|
|
90
|
-
font-size: 0.875rem;
|
|
91
|
-
}
|
|
92
|
-
.eds-contrast .eds-chip {
|
|
93
|
-
background-color: transparent;
|
|
94
|
-
color: var(--components-chip-contrast-text-unselected);
|
|
95
|
-
border-color: var(--components-chip-contrast-border);
|
|
96
|
-
}
|
|
97
|
-
.eds-chip--size-small {
|
|
98
|
-
height: 1.5rem;
|
|
99
|
-
min-width: 2.5rem;
|
|
100
|
-
padding: 0 0.5rem;
|
|
101
|
-
font-size: 0.75rem;
|
|
102
|
-
}
|
|
103
|
-
.eds-chip--size-small .eds-tag-chip__close-button svg {
|
|
104
|
-
width: 1rem;
|
|
105
|
-
height: 1rem;
|
|
106
|
-
}
|
|
107
|
-
.eds-chip--size-medium {
|
|
108
|
-
height: 2rem;
|
|
109
|
-
min-width: 3rem;
|
|
110
|
-
padding: 0 0.75rem;
|
|
111
|
-
font-size: 0.875rem;
|
|
112
|
-
}
|
|
113
|
-
.eds-chip--leading-icon > svg:first-of-type {
|
|
114
|
-
margin-right: 0.25rem;
|
|
115
|
-
}
|
|
116
|
-
.eds-chip--trailing-icon > svg:last-of-type {
|
|
117
|
-
margin-left: 0.25rem;
|
|
118
|
-
}
|
|
119
|
-
/* DO NOT CHANGE!*/
|
|
312
|
+
}/* DO NOT CHANGE!*/
|
|
120
313
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
121
314
|
/* DO NOT CHANGE!*/
|
|
122
315
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -321,34 +514,26 @@
|
|
|
321
514
|
}
|
|
322
515
|
.eds-action-chip:focus-visible {
|
|
323
516
|
outline: 2px solid #181c56;
|
|
324
|
-
outline-color: #181c56;
|
|
325
517
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
326
518
|
outline-offset: 0.125rem;
|
|
327
519
|
}
|
|
328
520
|
.eds-contrast .eds-action-chip:focus-visible {
|
|
329
|
-
outline-color: #aeb7e2;
|
|
330
521
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
331
522
|
}
|
|
332
523
|
.eds-action-chip:hover {
|
|
333
|
-
border-color: rgba(84, 86, 140, 0.4);
|
|
334
524
|
border-color: var(--components-chip-standard-border);
|
|
335
|
-
background-color: #d9ddf2;
|
|
336
525
|
background-color: var(--components-chip-standard-hover);
|
|
337
526
|
}
|
|
338
527
|
.eds-contrast .eds-action-chip:hover {
|
|
339
528
|
border-color: transparent;
|
|
340
|
-
background-color: #626493;
|
|
341
529
|
background-color: var(--components-chip-contrast-hover);
|
|
342
530
|
}
|
|
343
531
|
.eds-action-chip:active {
|
|
344
|
-
background-color: #aeb7e2;
|
|
345
532
|
background-color: var(--components-chip-standard-active);
|
|
346
533
|
border-color: transparent;
|
|
347
534
|
}
|
|
348
535
|
.eds-contrast .eds-action-chip:active {
|
|
349
|
-
background-color: #8794d4;
|
|
350
536
|
background-color: var(--components-chip-contrast-active);
|
|
351
|
-
color: #181c56;
|
|
352
537
|
color: var(--components-chip-contrast-text-selected);
|
|
353
538
|
}
|
|
354
539
|
.eds-action-chip--disabled {
|
|
@@ -357,24 +542,19 @@
|
|
|
357
542
|
}
|
|
358
543
|
.eds-action-chip--disabled__wrapper {
|
|
359
544
|
cursor: not-allowed;
|
|
360
|
-
width: -moz-fit-content;
|
|
361
545
|
width: fit-content;
|
|
362
546
|
}
|
|
363
547
|
.eds-contrast .eds-action-chip__loading-dots .eds-loading-dots__dot {
|
|
364
548
|
background-color: var(--colors-brand-white);
|
|
365
|
-
}
|
|
366
|
-
/* DO NOT CHANGE!*/
|
|
549
|
+
}/* DO NOT CHANGE!*/
|
|
367
550
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
368
551
|
.eds-tag-chip {
|
|
369
552
|
cursor: default;
|
|
370
553
|
padding-right: 0.125rem;
|
|
371
|
-
width: -moz-fit-content;
|
|
372
554
|
width: fit-content;
|
|
373
555
|
}
|
|
374
556
|
.eds-tag-chip__close-button {
|
|
375
|
-
|
|
376
|
-
-moz-appearance: none;
|
|
377
|
-
appearance: none;
|
|
557
|
+
appearance: none;
|
|
378
558
|
background: none;
|
|
379
559
|
border: none;
|
|
380
560
|
border-radius: 50%;
|
|
@@ -413,12 +593,10 @@
|
|
|
413
593
|
.eds-contrast .eds-tag-chip__close-button:active {
|
|
414
594
|
background-color: var(--components-chip-contrast-active);
|
|
415
595
|
color: var(--components-chip-contrast-text-selected);
|
|
416
|
-
}
|
|
417
|
-
/* DO NOT CHANGE!*/
|
|
596
|
+
}/* DO NOT CHANGE!*/
|
|
418
597
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
419
598
|
.eds-filter-chip {
|
|
420
599
|
cursor: pointer;
|
|
421
|
-
width: -moz-fit-content;
|
|
422
600
|
width: fit-content;
|
|
423
601
|
display: flex;
|
|
424
602
|
}
|
|
@@ -507,208 +685,10 @@
|
|
|
507
685
|
100% {
|
|
508
686
|
stroke-dashoffset: 0;
|
|
509
687
|
}
|
|
510
|
-
}
|
|
511
|
-
/* DO NOT CHANGE!*/
|
|
512
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
513
|
-
/* DO NOT CHANGE!*/
|
|
514
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
515
|
-
/* DO NOT CHANGE!*/
|
|
516
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
517
|
-
[data-color-mode=light],
|
|
518
|
-
:root {
|
|
519
|
-
--components-chip-contrast-active: #8794d4;
|
|
520
|
-
--components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
|
|
521
|
-
--components-chip-contrast-border-disabled: #949699;
|
|
522
|
-
--components-chip-contrast-default: rgba(255, 255, 255, 0);
|
|
523
|
-
--components-chip-contrast-hover: #626493;
|
|
524
|
-
--components-chip-contrast-icon-disabled: #b6b8ba;
|
|
525
|
-
--components-chip-contrast-icon-selected: #181c56;
|
|
526
|
-
--components-chip-contrast-icon-unselected: #ffffff;
|
|
527
|
-
--components-chip-contrast-text-disabled: #b6b8ba;
|
|
528
|
-
--components-chip-contrast-text-selected: #181c56;
|
|
529
|
-
--components-chip-contrast-text-unselected: #ffffff;
|
|
530
|
-
--components-chip-standard-active: #aeb7e2;
|
|
531
|
-
--components-chip-standard-border: rgba(84, 86, 140, 0.4);
|
|
532
|
-
--components-chip-standard-border-disabled: #949699;
|
|
533
|
-
--components-chip-standard-default: rgba(255, 255, 255, 0);
|
|
534
|
-
--components-chip-standard-hover: #d9ddf2;
|
|
535
|
-
--components-chip-standard-icon-disabled: #6e6f73;
|
|
536
|
-
--components-chip-standard-icon-selected: #181c56;
|
|
537
|
-
--components-chip-standard-icon-unselected: #181c56;
|
|
538
|
-
--components-chip-standard-text-disabled: #6e6f73;
|
|
539
|
-
--components-chip-standard-text-selected: #181c56;
|
|
540
|
-
--components-chip-standard-text-unselected: #181c56;
|
|
541
|
-
}
|
|
542
|
-
|
|
543
|
-
[data-color-mode=dark] {
|
|
544
|
-
--components-chip-contrast-active: #8794d4;
|
|
545
|
-
--components-chip-contrast-border: rgba(174, 183, 226, 0.6980392157);
|
|
546
|
-
--components-chip-contrast-border-disabled: #949699;
|
|
547
|
-
--components-chip-contrast-default: rgba(255, 255, 255, 0);
|
|
548
|
-
--components-chip-contrast-hover: #626493;
|
|
549
|
-
--components-chip-contrast-icon-disabled: #b6b8ba;
|
|
550
|
-
--components-chip-contrast-icon-selected: #08091c;
|
|
551
|
-
--components-chip-contrast-icon-unselected: #e5e5e9;
|
|
552
|
-
--components-chip-contrast-text-disabled: #b6b8ba;
|
|
553
|
-
--components-chip-contrast-text-selected: #08091c;
|
|
554
|
-
--components-chip-contrast-text-unselected: #e5e5e9;
|
|
555
|
-
--components-chip-standard-active: #8794d4;
|
|
556
|
-
--components-chip-standard-border: rgba(174, 183, 226, 0.6980392157);
|
|
557
|
-
--components-chip-standard-border-disabled: #949699;
|
|
558
|
-
--components-chip-standard-default: rgba(255, 255, 255, 0);
|
|
559
|
-
--components-chip-standard-hover: #626493;
|
|
560
|
-
--components-chip-standard-icon-disabled: #b6b8ba;
|
|
561
|
-
--components-chip-standard-icon-selected: #08091c;
|
|
562
|
-
--components-chip-standard-icon-unselected: #e5e5e9;
|
|
563
|
-
--components-chip-standard-text-disabled: #b6b8ba;
|
|
564
|
-
--components-chip-standard-text-selected: #08091c;
|
|
565
|
-
--components-chip-standard-text-unselected: #e5e5e9;
|
|
566
|
-
}
|
|
567
|
-
|
|
568
|
-
/* DO NOT CHANGE!*/
|
|
569
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
570
|
-
/* DO NOT CHANGE!*/
|
|
571
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
572
|
-
[data-color-mode=light],
|
|
573
|
-
:root {
|
|
574
|
-
--basecolors-frame-contrast: #181c56;
|
|
575
|
-
--basecolors-frame-contrastalt: #393d79;
|
|
576
|
-
--basecolors-frame-contrastalt-2: #292b6a;
|
|
577
|
-
--basecolors-frame-default: #ffffff;
|
|
578
|
-
--basecolors-frame-elevated: #ffffff;
|
|
579
|
-
--basecolors-frame-elevatedalt: #f6f6f9;
|
|
580
|
-
--basecolors-frame-subdued: #d9dae8;
|
|
581
|
-
--basecolors-frame-tint: #f6f6f9;
|
|
582
|
-
--basecolors-shape-accent: #181c56;
|
|
583
|
-
--basecolors-shape-bicycle-contrast: #00db9b;
|
|
584
|
-
--basecolors-shape-bicycle-default: #388f76;
|
|
585
|
-
--basecolors-shape-bus-contrast: #ff6392;
|
|
586
|
-
--basecolors-shape-bus-default: #c5044e;
|
|
587
|
-
--basecolors-shape-cableway-contrast: #b482fb;
|
|
588
|
-
--basecolors-shape-cableway-default: #78469a;
|
|
589
|
-
--basecolors-shape-disabled: #6e6f73;
|
|
590
|
-
--basecolors-shape-disabledalt: #b6b8ba;
|
|
591
|
-
--basecolors-shape-ferry-contrast: #6fdfff;
|
|
592
|
-
--basecolors-shape-ferry-default: #0c6693;
|
|
593
|
-
--basecolors-shape-funicular-contrast: #b482fb;
|
|
594
|
-
--basecolors-shape-funicular-default: #78469a;
|
|
595
|
-
--basecolors-shape-helicopter-contrast: #fbafea;
|
|
596
|
-
--basecolors-shape-helicopter-default: #800664;
|
|
597
|
-
--basecolors-shape-highlight: #ff5959;
|
|
598
|
-
--basecolors-shape-light: #ffffff;
|
|
599
|
-
--basecolors-shape-mask: #ffffff;
|
|
600
|
-
--basecolors-shape-maskalt: #ffffff;
|
|
601
|
-
--basecolors-shape-metro-contrast: #f08901;
|
|
602
|
-
--basecolors-shape-metro-default: #bf5826;
|
|
603
|
-
--basecolors-shape-mobility-contrast: #00db9b;
|
|
604
|
-
--basecolors-shape-mobility-default: #388f76;
|
|
605
|
-
--basecolors-shape-plane-contrast: #fbafea;
|
|
606
|
-
--basecolors-shape-plane-default: #800664;
|
|
607
|
-
--basecolors-shape-subdued: #626493;
|
|
608
|
-
--basecolors-shape-subduedalt: #d9dae8;
|
|
609
|
-
--basecolors-shape-taxi-contrast: #ffe082;
|
|
610
|
-
--basecolors-shape-taxi-default: #3d3e40;
|
|
611
|
-
--basecolors-shape-train-contrast: #42a5f5;
|
|
612
|
-
--basecolors-shape-train-default: #00367f;
|
|
613
|
-
--basecolors-shape-tram-contrast: #b482fb;
|
|
614
|
-
--basecolors-shape-tram-default: #78469a;
|
|
615
|
-
--basecolors-shape-walk-contrast: #8284ab;
|
|
616
|
-
--basecolors-shape-walk-default: #8d8e9c;
|
|
617
|
-
--basecolors-shape-airportlinkbus-contrast: #fbafea;
|
|
618
|
-
--basecolors-shape-airportlinkbus-default: #800664;
|
|
619
|
-
--basecolors-shape-airportlinkrail-contrast: #fbafea;
|
|
620
|
-
--basecolors-shape-airportlinkrail-default: #800664;
|
|
621
|
-
--basecolors-stroke-contrast: #aeb7e2;
|
|
622
|
-
--basecolors-stroke-default: #181c56;
|
|
623
|
-
--basecolors-stroke-disabled: #949699;
|
|
624
|
-
--basecolors-stroke-focus-contrast: #aeb7e2;
|
|
625
|
-
--basecolors-stroke-focus-standard: #181c56;
|
|
626
|
-
--basecolors-stroke-highlight: #ff5959;
|
|
627
|
-
--basecolors-stroke-light: #ffffff;
|
|
628
|
-
--basecolors-stroke-subdued: #8284ab;
|
|
629
|
-
--basecolors-stroke-subduedalt: #e3e6e8;
|
|
630
|
-
--basecolors-text-accent: #181c56;
|
|
631
|
-
--basecolors-text-disabled: #6e6f73;
|
|
632
|
-
--basecolors-text-disabledalt: #b6b8ba;
|
|
633
|
-
--basecolors-text-highlight: #ff5959;
|
|
634
|
-
--basecolors-text-light: #ffffff;
|
|
635
|
-
--basecolors-text-subdued: #626493;
|
|
636
|
-
--basecolors-text-subduedalt: #d9dae8;
|
|
637
|
-
}
|
|
638
|
-
|
|
639
|
-
[data-color-mode=dark] {
|
|
640
|
-
--basecolors-frame-contrast: #212233;
|
|
641
|
-
--basecolors-frame-contrastalt: #141527;
|
|
642
|
-
--basecolors-frame-contrastalt-2: #08091c;
|
|
643
|
-
--basecolors-frame-default: #08091c;
|
|
644
|
-
--basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
|
|
645
|
-
--basecolors-frame-elevatedalt: #464755;
|
|
646
|
-
--basecolors-frame-subdued: #2d2e3e;
|
|
647
|
-
--basecolors-frame-tint: #141527;
|
|
648
|
-
--basecolors-shape-accent: #e5e5e9;
|
|
649
|
-
--basecolors-shape-bicycle-contrast: #4db295;
|
|
650
|
-
--basecolors-shape-bicycle-default: #4db295;
|
|
651
|
-
--basecolors-shape-bus-contrast: #ef7398;
|
|
652
|
-
--basecolors-shape-bus-default: #ef7398;
|
|
653
|
-
--basecolors-shape-cableway-contrast: #b898e5;
|
|
654
|
-
--basecolors-shape-cableway-default: #b898e5;
|
|
655
|
-
--basecolors-shape-disabled: #b6b8ba;
|
|
656
|
-
--basecolors-shape-disabledalt: #b3b4bd;
|
|
657
|
-
--basecolors-shape-ferry-contrast: #8ccfe2;
|
|
658
|
-
--basecolors-shape-ferry-default: #8ccfe2;
|
|
659
|
-
--basecolors-shape-funicular-contrast: #b898e5;
|
|
660
|
-
--basecolors-shape-funicular-default: #b898e5;
|
|
661
|
-
--basecolors-shape-helicopter-contrast: #f2b8e5;
|
|
662
|
-
--basecolors-shape-helicopter-default: #f2b8e5;
|
|
663
|
-
--basecolors-shape-highlight: #ff9494;
|
|
664
|
-
--basecolors-shape-light: #e5e5e9;
|
|
665
|
-
--basecolors-shape-mask: #2d2e3e;
|
|
666
|
-
--basecolors-shape-maskalt: #393a49;
|
|
667
|
-
--basecolors-shape-metro-contrast: #dd973c;
|
|
668
|
-
--basecolors-shape-metro-default: #dd973c;
|
|
669
|
-
--basecolors-shape-mobility-contrast: #4db295;
|
|
670
|
-
--basecolors-shape-mobility-default: #4db295;
|
|
671
|
-
--basecolors-shape-plane-contrast: #f2b8e5;
|
|
672
|
-
--basecolors-shape-plane-default: #f2b8e5;
|
|
673
|
-
--basecolors-shape-subdued: #b3b4bd;
|
|
674
|
-
--basecolors-shape-subduedalt: #b3b4bd;
|
|
675
|
-
--basecolors-shape-taxi-contrast: #ffe082;
|
|
676
|
-
--basecolors-shape-taxi-default: #ffe082;
|
|
677
|
-
--basecolors-shape-train-contrast: #60a2d7;
|
|
678
|
-
--basecolors-shape-train-default: #60a2d7;
|
|
679
|
-
--basecolors-shape-tram-contrast: #b898e5;
|
|
680
|
-
--basecolors-shape-tram-default: #b898e5;
|
|
681
|
-
--basecolors-shape-walk-contrast: #8d8e9c;
|
|
682
|
-
--basecolors-shape-walk-default: #8d8e9c;
|
|
683
|
-
--basecolors-shape-airportlinkbus-contrast: #f2b8e5;
|
|
684
|
-
--basecolors-shape-airportlinkbus-default: #f2b8e5;
|
|
685
|
-
--basecolors-shape-airportlinkrail-contrast: #f2b8e5;
|
|
686
|
-
--basecolors-shape-airportlinkrail-default: #f2b8e5;
|
|
687
|
-
--basecolors-stroke-contrast: #aeb7e2;
|
|
688
|
-
--basecolors-stroke-default: #b3b4bd;
|
|
689
|
-
--basecolors-stroke-disabled: #e3e6e8;
|
|
690
|
-
--basecolors-stroke-focus-contrast: #aeb7e2;
|
|
691
|
-
--basecolors-stroke-focus-standard: #aeb7e2;
|
|
692
|
-
--basecolors-stroke-highlight: #ff9494;
|
|
693
|
-
--basecolors-stroke-light: #b3b4bd;
|
|
694
|
-
--basecolors-stroke-subdued: #81828f;
|
|
695
|
-
--basecolors-stroke-subduedalt: #949699;
|
|
696
|
-
--basecolors-text-accent: #e5e5e9;
|
|
697
|
-
--basecolors-text-disabled: #b6b8ba;
|
|
698
|
-
--basecolors-text-disabledalt: #b6b8ba;
|
|
699
|
-
--basecolors-text-highlight: #ff9494;
|
|
700
|
-
--basecolors-text-light: #e5e5e9;
|
|
701
|
-
--basecolors-text-subdued: #b3b4bd;
|
|
702
|
-
--basecolors-text-subduedalt: #b3b4bd;
|
|
703
|
-
}
|
|
704
|
-
|
|
705
|
-
:root {
|
|
706
|
-
--eds-chip: 1;
|
|
707
|
-
}
|
|
708
|
-
/* DO NOT CHANGE!*/
|
|
688
|
+
}/* DO NOT CHANGE!*/
|
|
709
689
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
710
690
|
:where(.eds-choice-chips-group) {
|
|
711
691
|
display: flex;
|
|
712
692
|
row-gap: 0.5rem;
|
|
713
693
|
flex-wrap: wrap;
|
|
714
|
-
}
|
|
694
|
+
}
|