@knime/kds-components 0.0.7 → 0.0.8
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/index.css +219 -107
- package/dist/index.js +164 -33
- package/dist/index.js.map +1 -1
- package/dist/src/Button/BaseButton.vue.d.ts +42 -0
- package/dist/src/Button/BaseButton.vue.d.ts.map +1 -0
- package/dist/src/Button/Button.vue.d.ts +16 -22
- package/dist/src/Button/Button.vue.d.ts.map +1 -1
- package/dist/src/Button/LinkButton.vue.d.ts +36 -0
- package/dist/src/Button/LinkButton.vue.d.ts.map +1 -0
- package/dist/src/Icon/DataType.vue.d.ts +1 -1
- package/dist/src/Icon/DataType.vue.d.ts.map +1 -1
- package/dist/src/Icon/Icon.vue.d.ts +0 -1
- package/dist/src/Icon/Icon.vue.d.ts.map +1 -1
- package/dist/src/Icon/types.d.ts +3 -1
- package/dist/src/Icon/types.d.ts.map +1 -1
- package/dist/src/constants.d.ts +2 -0
- package/dist/src/constants.d.ts.map +1 -0
- package/dist/src/index.d.ts +2 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/testUtils/DesignComparator.vue.d.ts +12 -0
- package/dist/src/testUtils/DesignComparator.vue.d.ts.map +1 -0
- package/dist/src/testUtils/storybook.d.ts +69 -0
- package/dist/src/testUtils/storybook.d.ts.map +1 -0
- package/dist/src/types.d.ts +3 -0
- package/dist/src/types.d.ts.map +1 -0
- package/dist/src/util/index.d.ts +2 -0
- package/dist/src/util/index.d.ts.map +1 -1
- package/dist/src/util/nuxtComponentResolver.d.ts +2 -0
- package/dist/src/util/nuxtComponentResolver.d.ts.map +1 -0
- package/dist/src/util/useDarkMode.d.ts +4 -0
- package/dist/src/util/useDarkMode.d.ts.map +1 -1
- package/dist/src/util/useLegacyMode.d.ts +5 -0
- package/dist/src/util/useLegacyMode.d.ts.map +1 -0
- package/package.json +3 -3
package/dist/index.css
CHANGED
|
@@ -1,220 +1,332 @@
|
|
|
1
1
|
.kds-icon {
|
|
2
|
-
&[data-v-
|
|
2
|
+
&[data-v-e172c89b] {
|
|
3
3
|
--icon-width: var(--kds-dimension-icon-1x);
|
|
4
4
|
--icon-height: var(--kds-dimension-icon-1x);
|
|
5
5
|
--icon-stroke-width: var(--kds-border-width-icon-stroke-m);
|
|
6
6
|
|
|
7
7
|
display: inline-block;
|
|
8
|
-
vertical-align: middle;
|
|
9
|
-
shape-rendering: geometricprecision;
|
|
10
8
|
width: var(--icon-width);
|
|
9
|
+
/* min sizes, otherwise they might collapse if there is not enough space */
|
|
10
|
+
min-width: var(--icon-width);
|
|
11
11
|
height: var(--icon-height);
|
|
12
|
+
min-height: var(--icon-height);
|
|
13
|
+
vertical-align: middle;
|
|
12
14
|
stroke-width: var(--icon-stroke-width);
|
|
15
|
+
shape-rendering: geometricprecision;
|
|
13
16
|
}
|
|
14
|
-
&.
|
|
17
|
+
&.xsmall[data-v-e172c89b] {
|
|
15
18
|
--icon-width: var(--kds-dimension-icon-0-56x);
|
|
16
19
|
--icon-height: var(--kds-dimension-icon-0-56x);
|
|
17
20
|
--icon-stroke-width: var(--kds-border-width-icon-stroke-s);
|
|
18
|
-
|
|
19
|
-
|
|
21
|
+
@media (max-resolution: 1.5dppx) {
|
|
22
|
+
/* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
|
|
23
|
+
rendering issues which manifests in misaligned or 'jumping' svg content.
|
|
24
|
+
Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
|
|
25
|
+
CSS transform. Thus the position of the SVG elements stays intact. */
|
|
26
|
+
&[data-v-e172c89b] {
|
|
27
|
+
--scaling-factor: 0.75;
|
|
28
|
+
--icon-width: var(--kds-dimension-icon-0-75x);
|
|
29
|
+
--icon-height: var(--kds-dimension-icon-0-75x);
|
|
30
|
+
--icon-stroke-width: calc(
|
|
31
|
+
var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
|
|
32
|
+
);
|
|
33
|
+
shape-rendering: crispEdges;
|
|
34
|
+
transform: scale(var(--scaling-factor));
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
&.small[data-v-e172c89b] {
|
|
20
39
|
--icon-width: var(--kds-dimension-icon-0-75x);
|
|
21
40
|
--icon-height: var(--kds-dimension-icon-0-75x);
|
|
22
41
|
--icon-stroke-width: var(--kds-border-width-icon-stroke-s);
|
|
23
42
|
}
|
|
24
|
-
&.large[data-v-
|
|
43
|
+
&.large[data-v-e172c89b] {
|
|
25
44
|
--icon-width: var(--kds-dimension-icon-1-25x);
|
|
26
45
|
--icon-height: var(--kds-dimension-icon-1-25x);
|
|
27
46
|
--icon-stroke-width: var(--kds-border-width-icon-stroke-l);
|
|
28
47
|
}
|
|
29
48
|
}
|
|
30
49
|
|
|
31
|
-
|
|
50
|
+
html.kds-legacy {
|
|
51
|
+
--kds-legacy-button-border-radius: var(--kds-border-radius-container-pill);
|
|
52
|
+
}
|
|
53
|
+
|
|
32
54
|
.button {
|
|
33
|
-
&[data-v-
|
|
34
|
-
text-rendering: geometricprecision;
|
|
35
|
-
font: var(--kds-font-interactive-medium-m);
|
|
55
|
+
&[data-v-580fb18a] {
|
|
36
56
|
position: relative;
|
|
37
57
|
display: flex;
|
|
38
|
-
height: var(--kds-dimension-action-height-1-75x);
|
|
39
|
-
padding: 0 var(--kds-spacing-container-0-5x);
|
|
40
|
-
justify-content: center;
|
|
41
|
-
align-items: center;
|
|
42
58
|
flex-shrink: 0;
|
|
43
|
-
|
|
44
|
-
|
|
59
|
+
align-items: center;
|
|
60
|
+
justify-content: center;
|
|
61
|
+
width: fit-content;
|
|
62
|
+
min-width: 15px;
|
|
63
|
+
max-width: 100%;
|
|
64
|
+
overflow: hidden;
|
|
45
65
|
cursor: pointer;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
& .button-label[data-v-20a2767d] {
|
|
49
|
-
padding: 0 var(--kds-spacing-container-0-25x);
|
|
50
|
-
}
|
|
51
|
-
&.button--medium[data-v-20a2767d] {
|
|
52
|
-
/* Default styles are already set */
|
|
53
|
-
}
|
|
54
|
-
&.button--large[data-v-20a2767d] {
|
|
55
|
-
height: var(--kds-dimension-action-height-2-25x);
|
|
56
|
-
font-size: var(--font-size-large);
|
|
57
|
-
padding: 0 var(--kds-spacing-container-0-75x);
|
|
58
|
-
border-radius: var(--kds-border-radius-container-0-50x);
|
|
59
|
-
}
|
|
60
|
-
&.button--small[data-v-20a2767d] {
|
|
61
|
-
height: var(--kds-dimension-action-height-1_5x);
|
|
62
|
-
gap: var(--kds-spacing-container-0_12x);
|
|
63
|
-
font-size: var(--font-size-small);
|
|
66
|
+
|
|
67
|
+
/* for LinkButton */
|
|
64
68
|
}
|
|
65
|
-
&[data-v-
|
|
66
|
-
|
|
69
|
+
&[data-v-580fb18a]:is(a) {
|
|
70
|
+
text-decoration: none;
|
|
67
71
|
}
|
|
68
|
-
|
|
72
|
+
&.disabled[data-v-580fb18a] {
|
|
69
73
|
cursor: not-allowed;
|
|
70
74
|
}
|
|
71
|
-
|
|
72
|
-
|
|
75
|
+
&[data-v-580fb18a]:focus-visible {
|
|
76
|
+
outline: var(--kds-border-action-focused);
|
|
77
|
+
outline-offset: var(--kds-focus-outline-offset);
|
|
78
|
+
}
|
|
79
|
+
&.filled {
|
|
80
|
+
&[data-v-580fb18a] {
|
|
73
81
|
color: var(--kds-color-text-and-icon-primary-inverted);
|
|
74
82
|
background-color: var(--kds-color-background-primary-bold-initial);
|
|
75
83
|
border: var(--kds-border-action-transparent);
|
|
76
|
-
|
|
77
|
-
/* apply semi transparent overlay for disabled state */
|
|
78
84
|
}
|
|
79
|
-
|
|
80
|
-
|
|
85
|
+
&.disabled[data-v-580fb18a] {
|
|
86
|
+
color: var(--kds-color-text-and-icon-disabled-inverted);
|
|
87
|
+
background-color: var(--kds-color-background-disabled-primary);
|
|
88
|
+
}
|
|
89
|
+
&:not(.disabled) {
|
|
90
|
+
&[data-v-580fb18a]:hover {
|
|
81
91
|
background-color: var(--kds-color-background-primary-bold-hover);
|
|
82
92
|
}
|
|
83
|
-
&[data-v-
|
|
93
|
+
&[data-v-580fb18a]:active {
|
|
84
94
|
background-color: var(--kds-color-background-primary-bold-active);
|
|
85
95
|
}
|
|
86
96
|
}
|
|
87
|
-
&.
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
left: calc(-1 * var(--border-width));
|
|
92
|
-
width: calc(100% + 2 * var(--border-width));
|
|
93
|
-
height: calc(100% + 2 * var(--border-width));
|
|
94
|
-
background-color: var(--kds-color-background-disabled-default);
|
|
95
|
-
pointer-events: none;
|
|
96
|
-
border-radius: inherit;
|
|
97
|
+
&.destructive {
|
|
98
|
+
&[data-v-580fb18a] {
|
|
99
|
+
color: var(--kds-color-text-and-icon-danger-inverted);
|
|
100
|
+
background-color: var(--kds-color-background-danger-bold-initial);
|
|
97
101
|
}
|
|
102
|
+
&.disabled[data-v-580fb18a] {
|
|
103
|
+
color: var(--kds-color-text-and-icon-disabled-inverted);
|
|
104
|
+
background-color: var(--kds-color-background-disabled-danger);
|
|
105
|
+
}
|
|
106
|
+
&:not(.disabled) {
|
|
107
|
+
&[data-v-580fb18a]:hover {
|
|
108
|
+
background-color: var(--kds-color-background-danger-bold-hover);
|
|
109
|
+
}
|
|
110
|
+
&[data-v-580fb18a]:active {
|
|
111
|
+
background-color: var(--kds-color-background-danger-bold-active);
|
|
98
112
|
}
|
|
99
|
-
&.button--outlined {
|
|
100
|
-
&[data-v-20a2767d] {
|
|
101
|
-
background-color: var(--kds-color-background-neutral-initial);
|
|
102
|
-
color: var(--kds-color-text-and-icon-neutral);
|
|
103
|
-
border: var(--kds-border-action-default);
|
|
104
113
|
}
|
|
105
|
-
&:not(:disabled) {
|
|
106
|
-
&[data-v-20a2767d]:hover {
|
|
107
|
-
background-color: var(--kds-color-background-primary-hover);
|
|
108
|
-
color: var(--kds-color-text-and-icon-primary-bold);
|
|
109
114
|
}
|
|
110
|
-
&[data-v-20a2767d]:active {
|
|
111
|
-
background-color: var(--kds-color-background-primary-active);
|
|
112
|
-
color: var(--kds-color-text-and-icon-primary);
|
|
113
115
|
}
|
|
116
|
+
&.outlined {
|
|
117
|
+
&[data-v-580fb18a] {
|
|
118
|
+
color: var(--kds-color-text-and-icon-neutral);
|
|
119
|
+
background-color: var(--kds-color-background-neutral-initial);
|
|
120
|
+
border: var(--kds-border-action-default);
|
|
114
121
|
}
|
|
115
|
-
&.
|
|
122
|
+
&.disabled[data-v-580fb18a] {
|
|
116
123
|
color: var(--kds-color-text-and-icon-disabled);
|
|
117
124
|
border: var(--kds-border-action-disabled);
|
|
118
125
|
}
|
|
126
|
+
&:not(.disabled) {
|
|
127
|
+
&[data-v-580fb18a]:hover {
|
|
128
|
+
background-color: var(--kds-color-background-neutral-hover);
|
|
129
|
+
}
|
|
130
|
+
&[data-v-580fb18a]:active {
|
|
131
|
+
background-color: var(--kds-color-background-neutral-active);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
&.destructive {
|
|
135
|
+
&[data-v-580fb18a] {
|
|
136
|
+
color: var(--kds-color-text-and-icon-danger);
|
|
137
|
+
border: var(--kds-border-action-error);
|
|
138
|
+
}
|
|
139
|
+
&.disabled[data-v-580fb18a] {
|
|
140
|
+
color: var(--kds-color-text-and-icon-disabled);
|
|
141
|
+
border: var(--kds-border-action-disabled);
|
|
142
|
+
}
|
|
143
|
+
&:not(.disabled) {
|
|
144
|
+
&[data-v-580fb18a]:hover {
|
|
145
|
+
background-color: var(--kds-color-background-danger-hover);
|
|
119
146
|
}
|
|
120
|
-
|
|
121
|
-
|
|
147
|
+
&[data-v-580fb18a]:active {
|
|
148
|
+
background-color: var(--kds-color-background-danger-active);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
&.transparent {
|
|
154
|
+
&[data-v-580fb18a] {
|
|
155
|
+
color: var(--kds-color-text-and-icon-neutral);
|
|
122
156
|
background-color: var(--kds-color-background-neutral-initial);
|
|
123
157
|
border: var(--kds-border-action-transparent);
|
|
124
|
-
color: var(--kds-color-text-and-icon-neutral);
|
|
125
158
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
background-color: var(--kds-color-background-primary-hover);
|
|
129
|
-
color: var(--kds-color-text-and-icon-primary-bold);
|
|
159
|
+
&.disabled[data-v-580fb18a] {
|
|
160
|
+
color: var(--kds-color-text-and-icon-disabled);
|
|
130
161
|
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
color: var(--kds-color-
|
|
162
|
+
&:not(.disabled) {
|
|
163
|
+
&[data-v-580fb18a]:hover {
|
|
164
|
+
background-color: var(--kds-color-background-neutral-hover);
|
|
134
165
|
}
|
|
166
|
+
&[data-v-580fb18a]:active {
|
|
167
|
+
background-color: var(--kds-color-background-neutral-active);
|
|
135
168
|
}
|
|
136
|
-
&.button--disabled[data-v-20a2767d] {
|
|
137
|
-
color: var(--kds-color-text-and-icon-disabled);
|
|
138
169
|
}
|
|
170
|
+
&.destructive {
|
|
171
|
+
&[data-v-580fb18a] {
|
|
172
|
+
color: var(--kds-color-text-and-icon-danger);
|
|
139
173
|
}
|
|
140
|
-
&.
|
|
141
|
-
|
|
142
|
-
font-size: 1.2em;
|
|
143
|
-
line-height: 0;
|
|
174
|
+
&.disabled[data-v-580fb18a] {
|
|
175
|
+
color: var(--kds-color-text-and-icon-disabled);
|
|
144
176
|
}
|
|
145
|
-
|
|
146
|
-
|
|
177
|
+
&:not(.disabled) {
|
|
178
|
+
&[data-v-580fb18a]:hover {
|
|
179
|
+
background-color: var(--kds-color-background-danger-hover);
|
|
180
|
+
}
|
|
181
|
+
&[data-v-580fb18a]:active {
|
|
182
|
+
background-color: var(--kds-color-background-danger-active);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
& .label[data-v-580fb18a] {
|
|
188
|
+
max-width: 200px;
|
|
189
|
+
padding: 0 var(--kds-spacing-container-0-12x);
|
|
190
|
+
overflow: hidden;
|
|
191
|
+
text-overflow: ellipsis;
|
|
192
|
+
white-space: nowrap;
|
|
193
|
+
text-rendering: geometricprecision;
|
|
194
|
+
}
|
|
195
|
+
&.xsmall[data-v-580fb18a] {
|
|
196
|
+
gap: var(--kds-spacing-container-0-12x);
|
|
197
|
+
height: var(--kds-dimension-component-height-1-25x);
|
|
198
|
+
padding: 0
|
|
199
|
+
calc(var(--kds-spacing-container-0-25x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
|
|
200
|
+
|
|
201
|
+
font: var(--kds-font-base-interactive-xsmall-strong);
|
|
202
|
+
border-radius: var(
|
|
203
|
+
--kds-legacy-button-border-radius,
|
|
204
|
+
var(--kds-border-radius-container-0-25x)
|
|
205
|
+
);
|
|
206
|
+
}
|
|
207
|
+
&.small[data-v-580fb18a] {
|
|
208
|
+
gap: var(--kds-spacing-container-0-12x);
|
|
209
|
+
height: var(--kds-dimension-component-height-1-5x);
|
|
210
|
+
padding: 0
|
|
211
|
+
calc(var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
|
|
212
|
+
|
|
213
|
+
font: var(--kds-font-base-interactive-small-strong);
|
|
214
|
+
border-radius: var(
|
|
215
|
+
--kds-legacy-button-border-radius,
|
|
216
|
+
var(--kds-border-radius-container-0-37x)
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
&.medium[data-v-580fb18a] {
|
|
220
|
+
gap: var(--kds-spacing-container-0-25x);
|
|
221
|
+
height: var(--kds-dimension-component-height-1-75x);
|
|
222
|
+
padding: 0
|
|
223
|
+
calc(var(--kds-spacing-container-0-37x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
|
|
224
|
+
|
|
225
|
+
font: var(--kds-font-base-interactive-medium-strong);
|
|
226
|
+
border-radius: var(
|
|
227
|
+
--kds-legacy-button-border-radius,
|
|
228
|
+
var(--kds-border-radius-container-0-37x)
|
|
229
|
+
);
|
|
230
|
+
}
|
|
231
|
+
&.large {
|
|
232
|
+
&[data-v-580fb18a] {
|
|
233
|
+
gap: var(--kds-spacing-container-0-25x);
|
|
234
|
+
height: var(--kds-dimension-component-height-2-25x);
|
|
235
|
+
padding: 0
|
|
236
|
+
calc(var(--kds-spacing-container-0-5x) - var(--kds-core-border-width-xs)); /* needed as border in Figma is not increasing the width */
|
|
237
|
+
|
|
238
|
+
font: var(--kds-font-base-interactive-large-strong);
|
|
239
|
+
border-radius: var(
|
|
240
|
+
--kds-legacy-button-border-radius,
|
|
241
|
+
var(--kds-border-radius-container-0-50x)
|
|
242
|
+
);
|
|
147
243
|
}
|
|
148
|
-
|
|
149
|
-
|
|
244
|
+
& .label[data-v-580fb18a] {
|
|
245
|
+
padding: 0 var(--kds-spacing-container-0-25x);
|
|
150
246
|
}
|
|
151
247
|
}
|
|
152
248
|
}
|
|
153
249
|
.kds-icon {
|
|
154
|
-
&[data-v-
|
|
250
|
+
&[data-v-84ed8d14] {
|
|
155
251
|
--icon-width: var(--kds-dimension-icon-1x);
|
|
156
252
|
--icon-height: var(--kds-dimension-icon-1x);
|
|
157
253
|
--icon-stroke-width: var(--kds-border-width-icon-stroke-m);
|
|
158
254
|
|
|
159
255
|
display: inline-block;
|
|
160
|
-
vertical-align: middle;
|
|
161
|
-
shape-rendering: geometricprecision;
|
|
162
256
|
width: var(--icon-width);
|
|
257
|
+
/* min sizes, otherwise they might collapse if there is not enough space */
|
|
258
|
+
min-width: var(--icon-width);
|
|
163
259
|
height: var(--icon-height);
|
|
260
|
+
min-height: var(--icon-height);
|
|
261
|
+
vertical-align: middle;
|
|
164
262
|
stroke-width: var(--icon-stroke-width);
|
|
263
|
+
shape-rendering: geometricprecision;
|
|
165
264
|
}
|
|
166
|
-
&.
|
|
265
|
+
&.xsmall[data-v-84ed8d14] {
|
|
167
266
|
--icon-width: var(--kds-dimension-icon-0-56x);
|
|
168
267
|
--icon-height: var(--kds-dimension-icon-0-56x);
|
|
169
268
|
--icon-stroke-width: var(--kds-border-width-icon-stroke-s);
|
|
170
|
-
|
|
171
|
-
|
|
269
|
+
@media (max-resolution: 1.5dppx) {
|
|
270
|
+
/* For small icons on low density screens, we can't simply set the sizes as this leads to subpixel
|
|
271
|
+
rendering issues which manifests in misaligned or 'jumping' svg content.
|
|
272
|
+
Solution is to render the SVG in it's natural size (don't indirectly modify the viewBox) and instead apply a
|
|
273
|
+
CSS transform. Thus the position of the SVG elements stays intact. */
|
|
274
|
+
&[data-v-84ed8d14] {
|
|
275
|
+
--scaling-factor: 0.75;
|
|
276
|
+
--icon-width: var(--kds-dimension-icon-0-75x);
|
|
277
|
+
--icon-height: var(--kds-dimension-icon-0-75x);
|
|
278
|
+
--icon-stroke-width: calc(
|
|
279
|
+
var(--kds-border-width-icon-stroke-s) / var(--scaling-factor)
|
|
280
|
+
);
|
|
281
|
+
shape-rendering: crispEdges;
|
|
282
|
+
transform: scale(var(--scaling-factor));
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
&.small[data-v-84ed8d14] {
|
|
172
287
|
--icon-width: var(--kds-dimension-icon-0-75x);
|
|
173
288
|
--icon-height: var(--kds-dimension-icon-0-75x);
|
|
174
289
|
--icon-stroke-width: var(--kds-border-width-icon-stroke-s);
|
|
175
290
|
}
|
|
176
|
-
&.large[data-v-
|
|
291
|
+
&.large[data-v-84ed8d14] {
|
|
177
292
|
--icon-width: var(--kds-dimension-icon-1-25x);
|
|
178
293
|
--icon-height: var(--kds-dimension-icon-1-25x);
|
|
179
294
|
--icon-stroke-width: var(--kds-border-width-icon-stroke-l);
|
|
180
295
|
}
|
|
181
296
|
}
|
|
182
297
|
.kds-data-type-icon-container {
|
|
183
|
-
&[data-v-
|
|
298
|
+
&[data-v-84ed8d14] {
|
|
184
299
|
--data-type-height: var(--kds-dimension-component-height-1x);
|
|
185
300
|
--data-type-width: var(--kds-dimension-component-width-1x);
|
|
186
301
|
--data-type-padding: var(--kds-spacing-container-0-12x);
|
|
187
302
|
|
|
188
|
-
|
|
303
|
+
display: inline-flex;
|
|
304
|
+
align-items: center;
|
|
305
|
+
justify-content: center;
|
|
189
306
|
width: var(--data-type-width);
|
|
307
|
+
height: var(--data-type-height);
|
|
190
308
|
padding: var(--data-type-padding);
|
|
191
309
|
color: var(--kds-color-desktop-header-text-and-icon-muted);
|
|
192
310
|
background-color: var(--kds-color-background-page-default);
|
|
193
311
|
border: var(--kds-border-base-muted);
|
|
194
312
|
border-radius: var(--kds-border-radius-container-0-12x);
|
|
195
|
-
display: inline-flex;
|
|
196
|
-
justify-content: center;
|
|
197
|
-
align-items: center;
|
|
198
313
|
|
|
199
314
|
/* The kds-data-type-icon class is needed to increase the specificity to overwrite the icon-stroke-width */
|
|
200
315
|
}
|
|
201
|
-
&.small[data-v-
|
|
316
|
+
&.small[data-v-84ed8d14] {
|
|
202
317
|
--data-type-height: var(--kds-dimension-icon-0-75x);
|
|
203
318
|
--data-type-width: var(--kds-dimension-icon-0-75x);
|
|
204
319
|
--data-type-padding: var(--kds-spacing-container-none);
|
|
205
320
|
}
|
|
206
|
-
&.large[data-v-
|
|
321
|
+
&.large[data-v-84ed8d14] {
|
|
207
322
|
--data-type-height: var(--kds-dimension-component-height-1-25x);
|
|
208
323
|
--data-type-width: var(--kds-dimension-component-width-1-25x);
|
|
209
324
|
}
|
|
210
325
|
& .kds-icon.kds-data-type-icon {
|
|
211
|
-
&.
|
|
212
|
-
--icon-stroke-width: var(--kds-border-width-icon-stroke-s);
|
|
213
|
-
}
|
|
214
|
-
&.small[data-v-38f09fe6] {
|
|
326
|
+
&.small[data-v-84ed8d14] {
|
|
215
327
|
--icon-stroke-width: var(--kds-border-width-icon-stroke-m);
|
|
216
328
|
}
|
|
217
|
-
&.medium[data-v-
|
|
329
|
+
&.medium[data-v-84ed8d14] {
|
|
218
330
|
--icon-stroke-width: var(--kds-border-width-icon-stroke-l);
|
|
219
331
|
}
|
|
220
332
|
}
|