@entur/chip 0.5.1 → 0.5.2
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/CHANGELOG.md +4 -0
- package/dist/styles.css +128 -103
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.5.2](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.5.1...@entur/chip@0.5.2) (2022-04-19)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @entur/chip
|
|
9
|
+
|
|
6
10
|
## [0.5.1](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.5.0...@entur/chip@0.5.1) (2022-03-17)
|
|
7
11
|
|
|
8
12
|
### Bug Fixes
|
package/dist/styles.css
CHANGED
|
@@ -2,13 +2,46 @@
|
|
|
2
2
|
--eds-chip: 1;
|
|
3
3
|
}/* DO NOT CHANGE!*/
|
|
4
4
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
5
|
+
.eds-chip {
|
|
6
|
+
background: #ebebf1;
|
|
7
|
+
border: 0.0625rem solid #d1d4e3;
|
|
8
|
+
border-radius: 1rem;
|
|
9
|
+
color: inherit;
|
|
10
|
+
font-family: inherit;
|
|
11
|
+
font-size: 0.875rem;
|
|
12
|
+
height: 2rem;
|
|
13
|
+
min-width: 3rem;
|
|
14
|
+
padding: 0 0.75rem;
|
|
15
|
+
transition: background 0.1s ease-out, border 0.1s ease-out;
|
|
16
|
+
display: flex;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
align-items: center;
|
|
19
|
+
}
|
|
20
|
+
.eds-chip svg {
|
|
21
|
+
font-size: 0.875rem;
|
|
22
|
+
}
|
|
23
|
+
.eds-contrast .eds-chip {
|
|
24
|
+
background-color: #393d79;
|
|
25
|
+
border-color: transparent;
|
|
26
|
+
}
|
|
27
|
+
.eds-chip--leading-icon .eds-icon {
|
|
28
|
+
margin-right: 0.5rem;
|
|
29
|
+
}
|
|
30
|
+
.eds-chip--trailing-icon .eds-icon {
|
|
31
|
+
margin-left: 0.5rem;
|
|
32
|
+
}/* DO NOT CHANGE!*/
|
|
33
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
5
34
|
.eds-tag-chip {
|
|
6
35
|
cursor: default;
|
|
7
36
|
padding-right: 0.25rem;
|
|
37
|
+
width: -webkit-fit-content;
|
|
38
|
+
width: -moz-fit-content;
|
|
8
39
|
width: fit-content;
|
|
9
40
|
}
|
|
10
41
|
.eds-tag-chip__close-button {
|
|
11
|
-
appearance: none;
|
|
42
|
+
-webkit-appearance: none;
|
|
43
|
+
-moz-appearance: none;
|
|
44
|
+
appearance: none;
|
|
12
45
|
background: none;
|
|
13
46
|
border: none;
|
|
14
47
|
border-radius: 50%;
|
|
@@ -38,6 +71,78 @@
|
|
|
38
71
|
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
39
72
|
}/* DO NOT CHANGE!*/
|
|
40
73
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
74
|
+
.eds-choice-chip {
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
display: inline-block;
|
|
77
|
+
margin-right: 0.75rem;
|
|
78
|
+
position: relative;
|
|
79
|
+
transition: all 0.1s ease-out;
|
|
80
|
+
}
|
|
81
|
+
.eds-choice-chip__input {
|
|
82
|
+
-moz-appearance: none;
|
|
83
|
+
appearance: none;
|
|
84
|
+
height: 0;
|
|
85
|
+
position: absolute;
|
|
86
|
+
width: 0;
|
|
87
|
+
-webkit-appearance: none;
|
|
88
|
+
}
|
|
89
|
+
.eds-choice-chip__input ~ .eds-chip {
|
|
90
|
+
background-color: transparent;
|
|
91
|
+
}
|
|
92
|
+
.eds-contrast .eds-choice-chip__input ~ .eds-chip {
|
|
93
|
+
border-color: #aeb7e2;
|
|
94
|
+
color: #ffffff;
|
|
95
|
+
}
|
|
96
|
+
.eds-choice-chip__input:checked ~ .eds-chip {
|
|
97
|
+
background-color: #181c56;
|
|
98
|
+
border-color: #181c56;
|
|
99
|
+
color: #ffffff;
|
|
100
|
+
}
|
|
101
|
+
.eds-contrast .eds-choice-chip__input:checked ~ .eds-chip {
|
|
102
|
+
border-color: #aeb7e2;
|
|
103
|
+
background-color: #aeb7e2;
|
|
104
|
+
color: #181c56;
|
|
105
|
+
}
|
|
106
|
+
.eds-choice-chip__input:focus ~ .eds-chip {
|
|
107
|
+
outline: none;
|
|
108
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
109
|
+
outline-offset: 0.125rem;
|
|
110
|
+
}
|
|
111
|
+
.eds-contrast .eds-choice-chip__input:focus ~ .eds-chip {
|
|
112
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
113
|
+
}
|
|
114
|
+
.eds-choice-chip__input:not(:checked):not(:disabled):hover ~ .eds-chip {
|
|
115
|
+
border-color: #181c56;
|
|
116
|
+
}
|
|
117
|
+
.eds-contrast .eds-choice-chip__input:not(:checked):not(:disabled):hover ~ .eds-chip {
|
|
118
|
+
border-color: #ffffff;
|
|
119
|
+
}
|
|
120
|
+
.eds-choice-chip__input:checked:hover ~ .eds-chip {
|
|
121
|
+
background-color: #3b3e6f;
|
|
122
|
+
border-color: #3b3e6f;
|
|
123
|
+
}
|
|
124
|
+
.eds-contrast .eds-choice-chip__input:checked:hover ~ .eds-chip {
|
|
125
|
+
background-color: #bac2e6;
|
|
126
|
+
border-color: #bac2e6;
|
|
127
|
+
}
|
|
128
|
+
.eds-choice-chip__input:active ~ .eds-chip {
|
|
129
|
+
background-color: #d1d4e3;
|
|
130
|
+
border-color: #d1d4e3;
|
|
131
|
+
}
|
|
132
|
+
.eds-contrast .eds-choice-chip__input:active ~ .eds-chip {
|
|
133
|
+
background: #33376d;
|
|
134
|
+
}
|
|
135
|
+
.eds-choice-chip .eds-chip--disabled {
|
|
136
|
+
opacity: 0.5;
|
|
137
|
+
border-style: dashed;
|
|
138
|
+
cursor: not-allowed;
|
|
139
|
+
}
|
|
140
|
+
.eds-contrast .eds-choice-chip .eds-chip--disabled {
|
|
141
|
+
opacity: 1;
|
|
142
|
+
border-color: #8285a8;
|
|
143
|
+
color: #babbcf;
|
|
144
|
+
}/* DO NOT CHANGE!*/
|
|
145
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
41
146
|
.eds-action-chip {
|
|
42
147
|
cursor: pointer;
|
|
43
148
|
}
|
|
@@ -67,39 +172,15 @@
|
|
|
67
172
|
background-color: #ffffff;
|
|
68
173
|
}/* DO NOT CHANGE!*/
|
|
69
174
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
70
|
-
.eds-chip {
|
|
71
|
-
background: #ebebf1;
|
|
72
|
-
border: 0.0625rem solid #d1d4e3;
|
|
73
|
-
border-radius: 1rem;
|
|
74
|
-
color: inherit;
|
|
75
|
-
font-family: inherit;
|
|
76
|
-
font-size: 0.875rem;
|
|
77
|
-
height: 2rem;
|
|
78
|
-
min-width: 3rem;
|
|
79
|
-
padding: 0 0.75rem;
|
|
80
|
-
transition: background 0.1s ease-out, border 0.1s ease-out;
|
|
81
|
-
display: flex;
|
|
82
|
-
justify-content: center;
|
|
83
|
-
align-items: center;
|
|
84
|
-
}
|
|
85
|
-
.eds-chip svg {
|
|
86
|
-
font-size: 0.875rem;
|
|
87
|
-
}
|
|
88
|
-
.eds-contrast .eds-chip {
|
|
89
|
-
background-color: #393d79;
|
|
90
|
-
border-color: transparent;
|
|
91
|
-
}
|
|
92
|
-
.eds-chip--leading-icon .eds-icon {
|
|
93
|
-
margin-right: 0.5rem;
|
|
94
|
-
}
|
|
95
|
-
.eds-chip--trailing-icon .eds-icon {
|
|
96
|
-
margin-left: 0.5rem;
|
|
97
|
-
}/* DO NOT CHANGE!*/
|
|
98
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
99
175
|
.eds-filter-chip {
|
|
100
176
|
cursor: pointer;
|
|
101
|
-
user-select: none;
|
|
177
|
+
-webkit-user-select: none;
|
|
178
|
+
-moz-user-select: none;
|
|
179
|
+
-ms-user-select: none;
|
|
180
|
+
user-select: none;
|
|
102
181
|
padding-left: 0.25rem;
|
|
182
|
+
width: -webkit-fit-content;
|
|
183
|
+
width: -moz-fit-content;
|
|
103
184
|
width: fit-content;
|
|
104
185
|
}
|
|
105
186
|
.eds-filter-chip__input {
|
|
@@ -113,16 +194,25 @@
|
|
|
113
194
|
}
|
|
114
195
|
.eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
|
|
115
196
|
stroke: #181c56;
|
|
116
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
197
|
+
-webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
198
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
117
199
|
}
|
|
118
200
|
.eds-contrast .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
|
|
119
201
|
stroke: #5ac39a;
|
|
120
202
|
}
|
|
203
|
+
.eds-filter-chip[focus-within] {
|
|
204
|
+
outline: none;
|
|
205
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
206
|
+
outline-offset: 0.125rem;
|
|
207
|
+
}
|
|
121
208
|
.eds-filter-chip:focus-within {
|
|
122
209
|
outline: none;
|
|
123
210
|
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
124
211
|
outline-offset: 0.125rem;
|
|
125
212
|
}
|
|
213
|
+
.eds-contrast .eds-filter-chip[focus-within] {
|
|
214
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
215
|
+
}
|
|
126
216
|
.eds-contrast .eds-filter-chip:focus-within {
|
|
127
217
|
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
128
218
|
}
|
|
@@ -164,79 +254,14 @@
|
|
|
164
254
|
stroke-width: 0.375rem;
|
|
165
255
|
}
|
|
166
256
|
|
|
167
|
-
|
|
257
|
+
@-webkit-keyframes stroke {
|
|
168
258
|
100% {
|
|
169
259
|
stroke-dashoffset: 0;
|
|
170
260
|
}
|
|
171
|
-
}/* DO NOT CHANGE!*/
|
|
172
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
173
|
-
.eds-choice-chip {
|
|
174
|
-
cursor: pointer;
|
|
175
|
-
display: inline-block;
|
|
176
|
-
margin-right: 0.75rem;
|
|
177
|
-
position: relative;
|
|
178
|
-
transition: all 0.1s ease-out;
|
|
179
|
-
}
|
|
180
|
-
.eds-choice-chip__input {
|
|
181
|
-
appearance: none;
|
|
182
|
-
height: 0;
|
|
183
|
-
position: absolute;
|
|
184
|
-
width: 0;
|
|
185
|
-
-webkit-appearance: none;
|
|
186
261
|
}
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
color: #ffffff;
|
|
193
|
-
}
|
|
194
|
-
.eds-choice-chip__input:checked ~ .eds-chip {
|
|
195
|
-
background-color: #181c56;
|
|
196
|
-
border-color: #181c56;
|
|
197
|
-
color: #ffffff;
|
|
198
|
-
}
|
|
199
|
-
.eds-contrast .eds-choice-chip__input:checked ~ .eds-chip {
|
|
200
|
-
border-color: #aeb7e2;
|
|
201
|
-
background-color: #aeb7e2;
|
|
202
|
-
color: #181c56;
|
|
203
|
-
}
|
|
204
|
-
.eds-choice-chip__input:focus ~ .eds-chip {
|
|
205
|
-
outline: none;
|
|
206
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
207
|
-
outline-offset: 0.125rem;
|
|
208
|
-
}
|
|
209
|
-
.eds-contrast .eds-choice-chip__input:focus ~ .eds-chip {
|
|
210
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
211
|
-
}
|
|
212
|
-
.eds-choice-chip__input:not(:checked):not(:disabled):hover ~ .eds-chip {
|
|
213
|
-
border-color: #181c56;
|
|
214
|
-
}
|
|
215
|
-
.eds-contrast .eds-choice-chip__input:not(:checked):not(:disabled):hover ~ .eds-chip {
|
|
216
|
-
border-color: #ffffff;
|
|
217
|
-
}
|
|
218
|
-
.eds-choice-chip__input:checked:hover ~ .eds-chip {
|
|
219
|
-
background-color: #3b3e6f;
|
|
220
|
-
border-color: #3b3e6f;
|
|
221
|
-
}
|
|
222
|
-
.eds-contrast .eds-choice-chip__input:checked:hover ~ .eds-chip {
|
|
223
|
-
background-color: #bac2e6;
|
|
224
|
-
border-color: #bac2e6;
|
|
225
|
-
}
|
|
226
|
-
.eds-choice-chip__input:active ~ .eds-chip {
|
|
227
|
-
background-color: #d1d4e3;
|
|
228
|
-
border-color: #d1d4e3;
|
|
229
|
-
}
|
|
230
|
-
.eds-contrast .eds-choice-chip__input:active ~ .eds-chip {
|
|
231
|
-
background: #33376d;
|
|
232
|
-
}
|
|
233
|
-
.eds-choice-chip .eds-chip--disabled {
|
|
234
|
-
opacity: 0.5;
|
|
235
|
-
border-style: dashed;
|
|
236
|
-
cursor: not-allowed;
|
|
237
|
-
}
|
|
238
|
-
.eds-contrast .eds-choice-chip .eds-chip--disabled {
|
|
239
|
-
opacity: 1;
|
|
240
|
-
border-color: #8285a8;
|
|
241
|
-
color: #babbcf;
|
|
262
|
+
|
|
263
|
+
@keyframes stroke {
|
|
264
|
+
100% {
|
|
265
|
+
stroke-dashoffset: 0;
|
|
266
|
+
}
|
|
242
267
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/chip",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.2",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/chip.esm.js",
|
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/form": "^5.3.
|
|
30
|
+
"@entur/form": "^5.3.1",
|
|
31
31
|
"@entur/tokens": "^3.3.1",
|
|
32
32
|
"@entur/utils": "^0.4.3",
|
|
33
33
|
"classnames": "^2.3.1"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "f760e1b8cfdc14231bd6391a8d82dfed1d71daa4"
|
|
36
36
|
}
|