@i-cell/ids-styles 0.0.1

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.
@@ -0,0 +1,850 @@
1
+ .ids-card {
2
+ display: flex;
3
+ border-style: solid;
4
+ }
5
+ .ids-card.ids-card-clickable {
6
+ pointer-events: auto;
7
+ cursor: pointer;
8
+ }
9
+ .ids-card.ids-card-clickable:focus {
10
+ outline-offset: 2px;
11
+ outline-style: solid;
12
+ outline-color: var(--ids-comp-card-focused-outline-color-dark-focused);
13
+ }
14
+ .ids-card.ids-card-clickable:focus.ids-button-light {
15
+ outline-color: var(--ids-comp-card-focused-outline-color-light-focused);
16
+ }
17
+ .ids-card.ids-card-clickable.ids-card-disabled {
18
+ pointer-events: none;
19
+ cursor: not-allowed;
20
+ }
21
+ .ids-card.ids-card-vertical {
22
+ flex-direction: column;
23
+ }
24
+ .ids-card.ids-card-vertical .ids-card-section:first-child {
25
+ padding-bottom: 0px;
26
+ border-top-left-radius: inherit;
27
+ border-top-right-radius: inherit;
28
+ }
29
+ .ids-card.ids-card-vertical .ids-card-section:last-child {
30
+ padding-top: 0px;
31
+ border-bottom-left-radius: inherit;
32
+ border-bottom-right-radius: inherit;
33
+ }
34
+ .ids-card.ids-card-vertical .ids-card-section.ids-card-section-stretched {
35
+ padding-left: 0px;
36
+ padding-right: 0px;
37
+ width: 100%;
38
+ }
39
+ .ids-card.ids-card-vertical .ids-card-section .ids-card-header-headline {
40
+ display: flex;
41
+ flex-direction: column;
42
+ }
43
+ .ids-card.ids-card-horizontal .ids-card-section:first-child {
44
+ padding-right: 0px;
45
+ border-top-left-radius: inherit;
46
+ border-bottom-left-radius: inherit;
47
+ }
48
+ .ids-card.ids-card-horizontal .ids-card-section:last-child {
49
+ padding-left: 0px;
50
+ border-top-right-radius: inherit;
51
+ border-bottom-right-radius: inherit;
52
+ }
53
+ .ids-card.ids-card-horizontal .ids-card-section.ids-card-section-stretched {
54
+ padding-top: 0px;
55
+ padding-bottom: 0px;
56
+ height: 100%;
57
+ }
58
+ .ids-card.ids-card-horizontal .ids-card-section.ids-card-header, .ids-card.ids-card-horizontal .ids-card-section.ids-card-footer {
59
+ display: none;
60
+ }
61
+ .ids-card .ids-card-title {
62
+ color: var(--ids-smc-reference-container-color-fg-surface-darker-95);
63
+ font-size: 24px;
64
+ font-style: normal;
65
+ font-weight: 600;
66
+ line-height: 32px;
67
+ }
68
+ .ids-card .ids-card-subtitle {
69
+ color: var(--ids-smc-reference-container-color-fg-surface-darker-70);
70
+ font-size: 16px;
71
+ font-style: normal;
72
+ font-weight: 500;
73
+ line-height: 24px;
74
+ letter-spacing: 0.15px;
75
+ }
76
+ .ids-card.ids-card-elevated {
77
+ box-shadow: var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-sm) var(--ids-smc-reference-container-effects-shadow-blur-md) var(--ids-smc-reference-container-effects-shadow-spread-xxl) var(--ids-smc-reference-container-effects-shadow-color-dark-light), var(--ids-smc-reference-container-effects-shadow-horizontal-none) var(--ids-smc-reference-container-effects-shadow-vertical-xs) var(--ids-smc-reference-container-effects-shadow-blur-sm) var(--ids-smc-reference-container-effects-shadow-spread-xl) var(--ids-smc-reference-container-effects-shadow-color-dark-light);
78
+ }
79
+ .ids-card.ids-card-compact.ids-card-horizontal {
80
+ padding: var(--ids-comp-size-card-container-horizontal-size-padding-y-compact) var(--ids-comp-size-card-container-horizontal-size-padding-x-compact);
81
+ gap: var(--ids-comp-size-card-container-horizontal-size-gap-compact);
82
+ border-radius: var(--ids-comp-size-card-container-horizontal-size-border-radius-compact);
83
+ }
84
+ .ids-card.ids-card-compact.ids-card-horizontal.ids-card-outlined {
85
+ border-width: var(--ids-comp-size-card-container-horizontal-size-border-width-compact);
86
+ }
87
+ .ids-card.ids-card-compact.ids-card-vertical {
88
+ padding: var(--ids-comp-size-card-container-vertical-size-padding-y-compact) var(--ids-comp-size-card-container-vertical-size-padding-x-compact);
89
+ gap: var(--ids-comp-size-card-container-vertical-size-gap-compact);
90
+ border-radius: var(--ids-comp-size-card-container-vertical-size-border-radius-compact);
91
+ }
92
+ .ids-card.ids-card-compact.ids-card-vertical.ids-card-outlined {
93
+ border-width: var(--ids-comp-size-card-container-vertical-size-border-width-compact);
94
+ }
95
+ .ids-card.ids-card-compact.ids-card-clickable:focus {
96
+ outline-width: var(--ids-comp-size-card-focused-outline-outline-compact);
97
+ }
98
+ .ids-card.ids-card-compact .ids-card-header-headline {
99
+ gap: var(--ids-comp-size-card-header-headline-gap-compact);
100
+ padding: var(--ids-comp-size-card-header-headline-padding-y-compact) var(--ids-comp-size-card-header-headline-padding-x-compact);
101
+ }
102
+ .ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
103
+ padding-top: var(--ids-comp-size-card-slot-size-padding-top-compact);
104
+ }
105
+ .ids-card.ids-card-compact.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
106
+ padding-bottom: var(--ids-comp-size-card-slot-size-padding-bottom-compact);
107
+ }
108
+ .ids-card.ids-card-compact.ids-card-vertical .ids-card-section.ids-card-section-padded {
109
+ padding-left: var(--ids-comp-size-card-slot-size-padding-x-compact);
110
+ padding-right: var(--ids-comp-size-card-slot-size-padding-x-compact);
111
+ }
112
+ .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
113
+ padding-left: var(--ids-comp-size-card-slot-size-padding-top-compact);
114
+ }
115
+ .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
116
+ padding-right: var(--ids-comp-size-card-slot-size-padding-bottom-compact);
117
+ }
118
+ .ids-card.ids-card-compact.ids-card-horizontal .ids-card-section.ids-card-section-padded {
119
+ padding-top: var(--ids-comp-size-card-slot-size-padding-x-compact);
120
+ padding-bottom: var(--ids-comp-size-card-slot-size-padding-x-compact);
121
+ }
122
+ .ids-card.ids-card-comfortable.ids-card-horizontal {
123
+ padding: var(--ids-comp-size-card-container-horizontal-size-padding-y-comfortable) var(--ids-comp-size-card-container-horizontal-size-padding-x-comfortable);
124
+ gap: var(--ids-comp-size-card-container-horizontal-size-gap-comfortable);
125
+ border-radius: var(--ids-comp-size-card-container-horizontal-size-border-radius-comfortable);
126
+ }
127
+ .ids-card.ids-card-comfortable.ids-card-horizontal.ids-card-outlined {
128
+ border-width: var(--ids-comp-size-card-container-horizontal-size-border-width-comfortable);
129
+ }
130
+ .ids-card.ids-card-comfortable.ids-card-vertical {
131
+ padding: var(--ids-comp-size-card-container-vertical-size-padding-y-comfortable) var(--ids-comp-size-card-container-vertical-size-padding-x-comfortable);
132
+ gap: var(--ids-comp-size-card-container-vertical-size-gap-comfortable);
133
+ border-radius: var(--ids-comp-size-card-container-vertical-size-border-radius-comfortable);
134
+ }
135
+ .ids-card.ids-card-comfortable.ids-card-vertical.ids-card-outlined {
136
+ border-width: var(--ids-comp-size-card-container-vertical-size-border-width-comfortable);
137
+ }
138
+ .ids-card.ids-card-comfortable.ids-card-clickable:focus {
139
+ outline-width: var(--ids-comp-size-card-focused-outline-outline-comfortable);
140
+ }
141
+ .ids-card.ids-card-comfortable .ids-card-header-headline {
142
+ gap: var(--ids-comp-size-card-header-headline-gap-comfortable);
143
+ padding: var(--ids-comp-size-card-header-headline-padding-y-comfortable) var(--ids-comp-size-card-header-headline-padding-x-comfortable);
144
+ }
145
+ .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
146
+ padding-top: var(--ids-comp-size-card-slot-size-padding-top-comfortable);
147
+ }
148
+ .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
149
+ padding-bottom: var(--ids-comp-size-card-slot-size-padding-bottom-comfortable);
150
+ }
151
+ .ids-card.ids-card-comfortable.ids-card-vertical .ids-card-section.ids-card-section-padded {
152
+ padding-left: var(--ids-comp-size-card-slot-size-padding-x-comfortable);
153
+ padding-right: var(--ids-comp-size-card-slot-size-padding-x-comfortable);
154
+ }
155
+ .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
156
+ padding-left: var(--ids-comp-size-card-slot-size-padding-top-comfortable);
157
+ }
158
+ .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
159
+ padding-right: var(--ids-comp-size-card-slot-size-padding-bottom-comfortable);
160
+ }
161
+ .ids-card.ids-card-comfortable.ids-card-horizontal .ids-card-section.ids-card-section-padded {
162
+ padding-top: var(--ids-comp-size-card-slot-size-padding-x-comfortable);
163
+ padding-bottom: var(--ids-comp-size-card-slot-size-padding-x-comfortable);
164
+ }
165
+ .ids-card.ids-card-spacious.ids-card-horizontal {
166
+ padding: var(--ids-comp-size-card-container-horizontal-size-padding-y-spacious) var(--ids-comp-size-card-container-horizontal-size-padding-x-spacious);
167
+ gap: var(--ids-comp-size-card-container-horizontal-size-gap-spacious);
168
+ border-radius: var(--ids-comp-size-card-container-horizontal-size-border-radius-spacious);
169
+ }
170
+ .ids-card.ids-card-spacious.ids-card-horizontal.ids-card-outlined {
171
+ border-width: var(--ids-comp-size-card-container-horizontal-size-border-width-spacious);
172
+ }
173
+ .ids-card.ids-card-spacious.ids-card-vertical {
174
+ padding: var(--ids-comp-size-card-container-vertical-size-padding-y-spacious) var(--ids-comp-size-card-container-vertical-size-padding-x-spacious);
175
+ gap: var(--ids-comp-size-card-container-vertical-size-gap-spacious);
176
+ border-radius: var(--ids-comp-size-card-container-vertical-size-border-radius-spacious);
177
+ }
178
+ .ids-card.ids-card-spacious.ids-card-vertical.ids-card-outlined {
179
+ border-width: var(--ids-comp-size-card-container-vertical-size-border-width-spacious);
180
+ }
181
+ .ids-card.ids-card-spacious.ids-card-clickable:focus {
182
+ outline-width: var(--ids-comp-size-card-focused-outline-outline-spacious);
183
+ }
184
+ .ids-card.ids-card-spacious .ids-card-header-headline {
185
+ gap: var(--ids-comp-size-card-header-headline-gap-spacious);
186
+ padding: var(--ids-comp-size-card-header-headline-padding-y-spacious) var(--ids-comp-size-card-header-headline-padding-x-spacious);
187
+ }
188
+ .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
189
+ padding-top: var(--ids-comp-size-card-slot-size-padding-top-spacious);
190
+ }
191
+ .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
192
+ padding-bottom: var(--ids-comp-size-card-slot-size-padding-bottom-spacious);
193
+ }
194
+ .ids-card.ids-card-spacious.ids-card-vertical .ids-card-section.ids-card-section-padded {
195
+ padding-left: var(--ids-comp-size-card-slot-size-padding-x-spacious);
196
+ padding-right: var(--ids-comp-size-card-slot-size-padding-x-spacious);
197
+ }
198
+ .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
199
+ padding-left: var(--ids-comp-size-card-slot-size-padding-top-spacious);
200
+ }
201
+ .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
202
+ padding-right: var(--ids-comp-size-card-slot-size-padding-bottom-spacious);
203
+ }
204
+ .ids-card.ids-card-spacious.ids-card-horizontal .ids-card-section.ids-card-section-padded {
205
+ padding-top: var(--ids-comp-size-card-slot-size-padding-x-spacious);
206
+ padding-bottom: var(--ids-comp-size-card-slot-size-padding-x-spacious);
207
+ }
208
+ .ids-card.ids-card-dense.ids-card-horizontal {
209
+ padding: var(--ids-comp-size-card-container-horizontal-size-padding-y-dense) var(--ids-comp-size-card-container-horizontal-size-padding-x-dense);
210
+ gap: var(--ids-comp-size-card-container-horizontal-size-gap-dense);
211
+ border-radius: var(--ids-comp-size-card-container-horizontal-size-border-radius-dense);
212
+ }
213
+ .ids-card.ids-card-dense.ids-card-horizontal.ids-card-outlined {
214
+ border-width: var(--ids-comp-size-card-container-horizontal-size-border-width-dense);
215
+ }
216
+ .ids-card.ids-card-dense.ids-card-vertical {
217
+ padding: var(--ids-comp-size-card-container-vertical-size-padding-y-dense) var(--ids-comp-size-card-container-vertical-size-padding-x-dense);
218
+ gap: var(--ids-comp-size-card-container-vertical-size-gap-dense);
219
+ border-radius: var(--ids-comp-size-card-container-vertical-size-border-radius-dense);
220
+ }
221
+ .ids-card.ids-card-dense.ids-card-vertical.ids-card-outlined {
222
+ border-width: var(--ids-comp-size-card-container-vertical-size-border-width-dense);
223
+ }
224
+ .ids-card.ids-card-dense.ids-card-clickable:focus {
225
+ outline-width: var(--ids-comp-size-card-focused-outline-outline-dense);
226
+ }
227
+ .ids-card.ids-card-dense .ids-card-header-headline {
228
+ gap: var(--ids-comp-size-card-header-headline-gap-dense);
229
+ padding: var(--ids-comp-size-card-header-headline-padding-y-dense) var(--ids-comp-size-card-header-headline-padding-x-dense);
230
+ }
231
+ .ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):first-child {
232
+ padding-top: var(--ids-comp-size-card-slot-size-padding-top-dense);
233
+ }
234
+ .ids-card.ids-card-dense.ids-card-vertical .ids-card-section:not(.ids-card-media):last-child {
235
+ padding-bottom: var(--ids-comp-size-card-slot-size-padding-bottom-dense);
236
+ }
237
+ .ids-card.ids-card-dense.ids-card-vertical .ids-card-section.ids-card-section-padded {
238
+ padding-left: var(--ids-comp-size-card-slot-size-padding-x-dense);
239
+ padding-right: var(--ids-comp-size-card-slot-size-padding-x-dense);
240
+ }
241
+ .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):first-child {
242
+ padding-left: var(--ids-comp-size-card-slot-size-padding-top-dense);
243
+ }
244
+ .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section:not(.ids-card-media):last-child {
245
+ padding-right: var(--ids-comp-size-card-slot-size-padding-bottom-dense);
246
+ }
247
+ .ids-card.ids-card-dense.ids-card-horizontal .ids-card-section.ids-card-section-padded {
248
+ padding-top: var(--ids-comp-size-card-slot-size-padding-x-dense);
249
+ padding-bottom: var(--ids-comp-size-card-slot-size-padding-x-dense);
250
+ }
251
+ .ids-card.ids-card-filled.ids-card-primary {
252
+ background-color: var(--ids-comp-card-filled-color-bg-primary-enabled);
253
+ border-color: var(--ids-comp-card-filled-color-border-primary-enabled);
254
+ }
255
+ .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:hover {
256
+ background-color: var(--ids-comp-card-filled-color-bg-primary-hovered);
257
+ border-color: var(--ids-comp-card-filled-color-border-primary-hovered);
258
+ }
259
+ .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:focus {
260
+ background-color: var(--ids-comp-card-filled-color-bg-primary-focused);
261
+ border-color: var(--ids-comp-card-filled-color-border-primary-focused);
262
+ }
263
+ .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable:active {
264
+ background-color: var(--ids-comp-card-filled-color-bg-primary-pressed);
265
+ border-color: var(--ids-comp-card-filled-color-border-primary-pressed);
266
+ }
267
+ .ids-card.ids-card-filled.ids-card-primary.ids-card-clickable.ids-card-disabled {
268
+ background-color: var(--ids-comp-card-filled-color-bg-primary-disabled);
269
+ border-color: var(--ids-comp-card-filled-color-border-primary-disabled);
270
+ }
271
+ .ids-card.ids-card-filled.ids-card-secondary {
272
+ background-color: var(--ids-comp-card-filled-color-bg-secondary-enabled);
273
+ border-color: var(--ids-comp-card-filled-color-border-secondary-enabled);
274
+ }
275
+ .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:hover {
276
+ background-color: var(--ids-comp-card-filled-color-bg-secondary-hovered);
277
+ border-color: var(--ids-comp-card-filled-color-border-secondary-hovered);
278
+ }
279
+ .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:focus {
280
+ background-color: var(--ids-comp-card-filled-color-bg-secondary-focused);
281
+ border-color: var(--ids-comp-card-filled-color-border-secondary-focused);
282
+ }
283
+ .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable:active {
284
+ background-color: var(--ids-comp-card-filled-color-bg-secondary-pressed);
285
+ border-color: var(--ids-comp-card-filled-color-border-secondary-pressed);
286
+ }
287
+ .ids-card.ids-card-filled.ids-card-secondary.ids-card-clickable.ids-card-disabled {
288
+ background-color: var(--ids-comp-card-filled-color-bg-secondary-disabled);
289
+ border-color: var(--ids-comp-card-filled-color-border-secondary-disabled);
290
+ }
291
+ .ids-card.ids-card-filled.ids-card-brand {
292
+ background-color: var(--ids-comp-card-filled-color-bg-brand-enabled);
293
+ border-color: var(--ids-comp-card-filled-color-border-brand-enabled);
294
+ }
295
+ .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:hover {
296
+ background-color: var(--ids-comp-card-filled-color-bg-brand-hovered);
297
+ border-color: var(--ids-comp-card-filled-color-border-brand-hovered);
298
+ }
299
+ .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:focus {
300
+ background-color: var(--ids-comp-card-filled-color-bg-brand-focused);
301
+ border-color: var(--ids-comp-card-filled-color-border-brand-focused);
302
+ }
303
+ .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable:active {
304
+ background-color: var(--ids-comp-card-filled-color-bg-brand-pressed);
305
+ border-color: var(--ids-comp-card-filled-color-border-brand-pressed);
306
+ }
307
+ .ids-card.ids-card-filled.ids-card-brand.ids-card-clickable.ids-card-disabled {
308
+ background-color: var(--ids-comp-card-filled-color-bg-brand-disabled);
309
+ border-color: var(--ids-comp-card-filled-color-border-brand-disabled);
310
+ }
311
+ .ids-card.ids-card-filled.ids-card-error {
312
+ background-color: var(--ids-comp-card-filled-color-bg-error-enabled);
313
+ border-color: var(--ids-comp-card-filled-color-border-error-enabled);
314
+ }
315
+ .ids-card.ids-card-filled.ids-card-error.ids-card-clickable:hover {
316
+ background-color: var(--ids-comp-card-filled-color-bg-error-hovered);
317
+ border-color: var(--ids-comp-card-filled-color-border-error-hovered);
318
+ }
319
+ .ids-card.ids-card-filled.ids-card-error.ids-card-clickable:focus {
320
+ background-color: var(--ids-comp-card-filled-color-bg-error-focused);
321
+ border-color: var(--ids-comp-card-filled-color-border-error-focused);
322
+ }
323
+ .ids-card.ids-card-filled.ids-card-error.ids-card-clickable:active {
324
+ background-color: var(--ids-comp-card-filled-color-bg-error-pressed);
325
+ border-color: var(--ids-comp-card-filled-color-border-error-pressed);
326
+ }
327
+ .ids-card.ids-card-filled.ids-card-error.ids-card-clickable.ids-card-disabled {
328
+ background-color: var(--ids-comp-card-filled-color-bg-error-disabled);
329
+ border-color: var(--ids-comp-card-filled-color-border-error-disabled);
330
+ }
331
+ .ids-card.ids-card-filled.ids-card-success {
332
+ background-color: var(--ids-comp-card-filled-color-bg-success-enabled);
333
+ border-color: var(--ids-comp-card-filled-color-border-success-enabled);
334
+ }
335
+ .ids-card.ids-card-filled.ids-card-success.ids-card-clickable:hover {
336
+ background-color: var(--ids-comp-card-filled-color-bg-success-hovered);
337
+ border-color: var(--ids-comp-card-filled-color-border-success-hovered);
338
+ }
339
+ .ids-card.ids-card-filled.ids-card-success.ids-card-clickable:focus {
340
+ background-color: var(--ids-comp-card-filled-color-bg-success-focused);
341
+ border-color: var(--ids-comp-card-filled-color-border-success-focused);
342
+ }
343
+ .ids-card.ids-card-filled.ids-card-success.ids-card-clickable:active {
344
+ background-color: var(--ids-comp-card-filled-color-bg-success-pressed);
345
+ border-color: var(--ids-comp-card-filled-color-border-success-pressed);
346
+ }
347
+ .ids-card.ids-card-filled.ids-card-success.ids-card-clickable.ids-card-disabled {
348
+ background-color: var(--ids-comp-card-filled-color-bg-success-disabled);
349
+ border-color: var(--ids-comp-card-filled-color-border-success-disabled);
350
+ }
351
+ .ids-card.ids-card-filled.ids-card-warning {
352
+ background-color: var(--ids-comp-card-filled-color-bg-warning-enabled);
353
+ border-color: var(--ids-comp-card-filled-color-border-warning-enabled);
354
+ }
355
+ .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:hover {
356
+ background-color: var(--ids-comp-card-filled-color-bg-warning-hovered);
357
+ border-color: var(--ids-comp-card-filled-color-border-warning-hovered);
358
+ }
359
+ .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:focus {
360
+ background-color: var(--ids-comp-card-filled-color-bg-warning-focused);
361
+ border-color: var(--ids-comp-card-filled-color-border-warning-focused);
362
+ }
363
+ .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable:active {
364
+ background-color: var(--ids-comp-card-filled-color-bg-warning-pressed);
365
+ border-color: var(--ids-comp-card-filled-color-border-warning-pressed);
366
+ }
367
+ .ids-card.ids-card-filled.ids-card-warning.ids-card-clickable.ids-card-disabled {
368
+ background-color: var(--ids-comp-card-filled-color-bg-warning-disabled);
369
+ border-color: var(--ids-comp-card-filled-color-border-warning-disabled);
370
+ }
371
+ .ids-card.ids-card-filled.ids-card-info {
372
+ background-color: var(--ids-comp-card-filled-color-bg-info-enabled);
373
+ border-color: var(--ids-comp-card-filled-color-border-info-enabled);
374
+ }
375
+ .ids-card.ids-card-filled.ids-card-info.ids-card-clickable:hover {
376
+ background-color: var(--ids-comp-card-filled-color-bg-info-hovered);
377
+ border-color: var(--ids-comp-card-filled-color-border-info-hovered);
378
+ }
379
+ .ids-card.ids-card-filled.ids-card-info.ids-card-clickable:focus {
380
+ background-color: var(--ids-comp-card-filled-color-bg-info-focused);
381
+ border-color: var(--ids-comp-card-filled-color-border-info-focused);
382
+ }
383
+ .ids-card.ids-card-filled.ids-card-info.ids-card-clickable:active {
384
+ background-color: var(--ids-comp-card-filled-color-bg-info-pressed);
385
+ border-color: var(--ids-comp-card-filled-color-border-info-pressed);
386
+ }
387
+ .ids-card.ids-card-filled.ids-card-info.ids-card-clickable.ids-card-disabled {
388
+ background-color: var(--ids-comp-card-filled-color-bg-info-disabled);
389
+ border-color: var(--ids-comp-card-filled-color-border-info-disabled);
390
+ }
391
+ .ids-card.ids-card-filled.ids-card-light {
392
+ background-color: var(--ids-comp-card-filled-color-bg-light-enabled);
393
+ border-color: var(--ids-comp-card-filled-color-border-light-enabled);
394
+ }
395
+ .ids-card.ids-card-filled.ids-card-light.ids-card-clickable:hover {
396
+ background-color: var(--ids-comp-card-filled-color-bg-light-hovered);
397
+ border-color: var(--ids-comp-card-filled-color-border-light-hovered);
398
+ }
399
+ .ids-card.ids-card-filled.ids-card-light.ids-card-clickable:focus {
400
+ background-color: var(--ids-comp-card-filled-color-bg-light-focused);
401
+ border-color: var(--ids-comp-card-filled-color-border-light-focused);
402
+ }
403
+ .ids-card.ids-card-filled.ids-card-light.ids-card-clickable:active {
404
+ background-color: var(--ids-comp-card-filled-color-bg-light-pressed);
405
+ border-color: var(--ids-comp-card-filled-color-border-light-pressed);
406
+ }
407
+ .ids-card.ids-card-filled.ids-card-light.ids-card-clickable.ids-card-disabled {
408
+ background-color: var(--ids-comp-card-filled-color-bg-light-disabled);
409
+ border-color: var(--ids-comp-card-filled-color-border-light-disabled);
410
+ }
411
+ .ids-card.ids-card-filled.ids-card-dark {
412
+ background-color: var(--ids-comp-card-filled-color-bg-dark-enabled);
413
+ border-color: var(--ids-comp-card-filled-color-border-dark-enabled);
414
+ }
415
+ .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:hover {
416
+ background-color: var(--ids-comp-card-filled-color-bg-dark-hovered);
417
+ border-color: var(--ids-comp-card-filled-color-border-dark-hovered);
418
+ }
419
+ .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:focus {
420
+ background-color: var(--ids-comp-card-filled-color-bg-dark-focused);
421
+ border-color: var(--ids-comp-card-filled-color-border-dark-focused);
422
+ }
423
+ .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable:active {
424
+ background-color: var(--ids-comp-card-filled-color-bg-dark-pressed);
425
+ border-color: var(--ids-comp-card-filled-color-border-dark-pressed);
426
+ }
427
+ .ids-card.ids-card-filled.ids-card-dark.ids-card-clickable.ids-card-disabled {
428
+ background-color: var(--ids-comp-card-filled-color-bg-dark-disabled);
429
+ border-color: var(--ids-comp-card-filled-color-border-dark-disabled);
430
+ }
431
+ .ids-card.ids-card-filled.ids-card-surface {
432
+ background-color: var(--ids-comp-card-filled-color-bg-surface-enabled);
433
+ border-color: var(--ids-comp-card-filled-color-border-surface-enabled);
434
+ }
435
+ .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:hover {
436
+ background-color: var(--ids-comp-card-filled-color-bg-surface-hovered);
437
+ border-color: var(--ids-comp-card-filled-color-border-surface-hovered);
438
+ }
439
+ .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:focus {
440
+ background-color: var(--ids-comp-card-filled-color-bg-surface-focused);
441
+ border-color: var(--ids-comp-card-filled-color-border-surface-focused);
442
+ }
443
+ .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable:active {
444
+ background-color: var(--ids-comp-card-filled-color-bg-surface-pressed);
445
+ border-color: var(--ids-comp-card-filled-color-border-surface-pressed);
446
+ }
447
+ .ids-card.ids-card-filled.ids-card-surface.ids-card-clickable.ids-card-disabled {
448
+ background-color: var(--ids-comp-card-filled-color-bg-surface-disabled);
449
+ border-color: var(--ids-comp-card-filled-color-border-surface-disabled);
450
+ }
451
+ .ids-card.ids-card-outlined.ids-card-primary {
452
+ background-color: var(--ids-comp-card-outlined-color-bg-primary-enabled);
453
+ border-color: var(--ids-comp-card-outlined-color-border-primary-enabled);
454
+ }
455
+ .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:hover {
456
+ background-color: var(--ids-comp-card-outlined-color-bg-primary-hovered);
457
+ border-color: var(--ids-comp-card-outlined-color-border-primary-hovered);
458
+ }
459
+ .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:focus {
460
+ background-color: var(--ids-comp-card-outlined-color-bg-primary-focused);
461
+ border-color: var(--ids-comp-card-outlined-color-border-primary-focused);
462
+ }
463
+ .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable:active {
464
+ background-color: var(--ids-comp-card-outlined-color-bg-primary-pressed);
465
+ border-color: var(--ids-comp-card-outlined-color-border-primary-pressed);
466
+ }
467
+ .ids-card.ids-card-outlined.ids-card-primary.ids-card-clickable.ids-card-disabled {
468
+ background-color: var(--ids-comp-card-outlined-color-bg-primary-disabled);
469
+ border-color: var(--ids-comp-card-outlined-color-border-primary-disabled);
470
+ }
471
+ .ids-card.ids-card-outlined.ids-card-secondary {
472
+ background-color: var(--ids-comp-card-outlined-color-bg-secondary-enabled);
473
+ border-color: var(--ids-comp-card-outlined-color-border-secondary-enabled);
474
+ }
475
+ .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:hover {
476
+ background-color: var(--ids-comp-card-outlined-color-bg-secondary-hovered);
477
+ border-color: var(--ids-comp-card-outlined-color-border-secondary-hovered);
478
+ }
479
+ .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:focus {
480
+ background-color: var(--ids-comp-card-outlined-color-bg-secondary-focused);
481
+ border-color: var(--ids-comp-card-outlined-color-border-secondary-focused);
482
+ }
483
+ .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable:active {
484
+ background-color: var(--ids-comp-card-outlined-color-bg-secondary-pressed);
485
+ border-color: var(--ids-comp-card-outlined-color-border-secondary-pressed);
486
+ }
487
+ .ids-card.ids-card-outlined.ids-card-secondary.ids-card-clickable.ids-card-disabled {
488
+ background-color: var(--ids-comp-card-outlined-color-bg-secondary-disabled);
489
+ border-color: var(--ids-comp-card-outlined-color-border-secondary-disabled);
490
+ }
491
+ .ids-card.ids-card-outlined.ids-card-brand {
492
+ background-color: var(--ids-comp-card-outlined-color-bg-brand-enabled);
493
+ border-color: var(--ids-comp-card-outlined-color-border-brand-enabled);
494
+ }
495
+ .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:hover {
496
+ background-color: var(--ids-comp-card-outlined-color-bg-brand-hovered);
497
+ border-color: var(--ids-comp-card-outlined-color-border-brand-hovered);
498
+ }
499
+ .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:focus {
500
+ background-color: var(--ids-comp-card-outlined-color-bg-brand-focused);
501
+ border-color: var(--ids-comp-card-outlined-color-border-brand-focused);
502
+ }
503
+ .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable:active {
504
+ background-color: var(--ids-comp-card-outlined-color-bg-brand-pressed);
505
+ border-color: var(--ids-comp-card-outlined-color-border-brand-pressed);
506
+ }
507
+ .ids-card.ids-card-outlined.ids-card-brand.ids-card-clickable.ids-card-disabled {
508
+ background-color: var(--ids-comp-card-outlined-color-bg-brand-disabled);
509
+ border-color: var(--ids-comp-card-outlined-color-border-brand-disabled);
510
+ }
511
+ .ids-card.ids-card-outlined.ids-card-error {
512
+ background-color: var(--ids-comp-card-outlined-color-bg-error-enabled);
513
+ border-color: var(--ids-comp-card-outlined-color-border-error-enabled);
514
+ }
515
+ .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:hover {
516
+ background-color: var(--ids-comp-card-outlined-color-bg-error-hovered);
517
+ border-color: var(--ids-comp-card-outlined-color-border-error-hovered);
518
+ }
519
+ .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:focus {
520
+ background-color: var(--ids-comp-card-outlined-color-bg-error-focused);
521
+ border-color: var(--ids-comp-card-outlined-color-border-error-focused);
522
+ }
523
+ .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable:active {
524
+ background-color: var(--ids-comp-card-outlined-color-bg-error-pressed);
525
+ border-color: var(--ids-comp-card-outlined-color-border-error-pressed);
526
+ }
527
+ .ids-card.ids-card-outlined.ids-card-error.ids-card-clickable.ids-card-disabled {
528
+ background-color: var(--ids-comp-card-outlined-color-bg-error-disabled);
529
+ border-color: var(--ids-comp-card-outlined-color-border-error-disabled);
530
+ }
531
+ .ids-card.ids-card-outlined.ids-card-success {
532
+ background-color: var(--ids-comp-card-outlined-color-bg-success-enabled);
533
+ border-color: var(--ids-comp-card-outlined-color-border-success-enabled);
534
+ }
535
+ .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:hover {
536
+ background-color: var(--ids-comp-card-outlined-color-bg-success-hovered);
537
+ border-color: var(--ids-comp-card-outlined-color-border-success-hovered);
538
+ }
539
+ .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:focus {
540
+ background-color: var(--ids-comp-card-outlined-color-bg-success-focused);
541
+ border-color: var(--ids-comp-card-outlined-color-border-success-focused);
542
+ }
543
+ .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable:active {
544
+ background-color: var(--ids-comp-card-outlined-color-bg-success-pressed);
545
+ border-color: var(--ids-comp-card-outlined-color-border-success-pressed);
546
+ }
547
+ .ids-card.ids-card-outlined.ids-card-success.ids-card-clickable.ids-card-disabled {
548
+ background-color: var(--ids-comp-card-outlined-color-bg-success-disabled);
549
+ border-color: var(--ids-comp-card-outlined-color-border-success-disabled);
550
+ }
551
+ .ids-card.ids-card-outlined.ids-card-warning {
552
+ background-color: var(--ids-comp-card-outlined-color-bg-warning-enabled);
553
+ border-color: var(--ids-comp-card-outlined-color-border-warning-enabled);
554
+ }
555
+ .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:hover {
556
+ background-color: var(--ids-comp-card-outlined-color-bg-warning-hovered);
557
+ border-color: var(--ids-comp-card-outlined-color-border-warning-hovered);
558
+ }
559
+ .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:focus {
560
+ background-color: var(--ids-comp-card-outlined-color-bg-warning-focused);
561
+ border-color: var(--ids-comp-card-outlined-color-border-warning-focused);
562
+ }
563
+ .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable:active {
564
+ background-color: var(--ids-comp-card-outlined-color-bg-warning-pressed);
565
+ border-color: var(--ids-comp-card-outlined-color-border-warning-pressed);
566
+ }
567
+ .ids-card.ids-card-outlined.ids-card-warning.ids-card-clickable.ids-card-disabled {
568
+ background-color: var(--ids-comp-card-outlined-color-bg-warning-disabled);
569
+ border-color: var(--ids-comp-card-outlined-color-border-warning-disabled);
570
+ }
571
+ .ids-card.ids-card-outlined.ids-card-info {
572
+ background-color: var(--ids-comp-card-outlined-color-bg-info-enabled);
573
+ border-color: var(--ids-comp-card-outlined-color-border-info-enabled);
574
+ }
575
+ .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:hover {
576
+ background-color: var(--ids-comp-card-outlined-color-bg-info-hovered);
577
+ border-color: var(--ids-comp-card-outlined-color-border-info-hovered);
578
+ }
579
+ .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:focus {
580
+ background-color: var(--ids-comp-card-outlined-color-bg-info-focused);
581
+ border-color: var(--ids-comp-card-outlined-color-border-info-focused);
582
+ }
583
+ .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable:active {
584
+ background-color: var(--ids-comp-card-outlined-color-bg-info-pressed);
585
+ border-color: var(--ids-comp-card-outlined-color-border-info-pressed);
586
+ }
587
+ .ids-card.ids-card-outlined.ids-card-info.ids-card-clickable.ids-card-disabled {
588
+ background-color: var(--ids-comp-card-outlined-color-bg-info-disabled);
589
+ border-color: var(--ids-comp-card-outlined-color-border-info-disabled);
590
+ }
591
+ .ids-card.ids-card-outlined.ids-card-light {
592
+ background-color: var(--ids-comp-card-outlined-color-bg-light-enabled);
593
+ border-color: var(--ids-comp-card-outlined-color-border-light-enabled);
594
+ }
595
+ .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:hover {
596
+ background-color: var(--ids-comp-card-outlined-color-bg-light-hovered);
597
+ border-color: var(--ids-comp-card-outlined-color-border-light-hovered);
598
+ }
599
+ .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:focus {
600
+ background-color: var(--ids-comp-card-outlined-color-bg-light-focused);
601
+ border-color: var(--ids-comp-card-outlined-color-border-light-focused);
602
+ }
603
+ .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable:active {
604
+ background-color: var(--ids-comp-card-outlined-color-bg-light-pressed);
605
+ border-color: var(--ids-comp-card-outlined-color-border-light-pressed);
606
+ }
607
+ .ids-card.ids-card-outlined.ids-card-light.ids-card-clickable.ids-card-disabled {
608
+ background-color: var(--ids-comp-card-outlined-color-bg-light-disabled);
609
+ border-color: var(--ids-comp-card-outlined-color-border-light-disabled);
610
+ }
611
+ .ids-card.ids-card-outlined.ids-card-dark {
612
+ background-color: var(--ids-comp-card-outlined-color-bg-dark-enabled);
613
+ border-color: var(--ids-comp-card-outlined-color-border-dark-enabled);
614
+ }
615
+ .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:hover {
616
+ background-color: var(--ids-comp-card-outlined-color-bg-dark-hovered);
617
+ border-color: var(--ids-comp-card-outlined-color-border-dark-hovered);
618
+ }
619
+ .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:focus {
620
+ background-color: var(--ids-comp-card-outlined-color-bg-dark-focused);
621
+ border-color: var(--ids-comp-card-outlined-color-border-dark-focused);
622
+ }
623
+ .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable:active {
624
+ background-color: var(--ids-comp-card-outlined-color-bg-dark-pressed);
625
+ border-color: var(--ids-comp-card-outlined-color-border-dark-pressed);
626
+ }
627
+ .ids-card.ids-card-outlined.ids-card-dark.ids-card-clickable.ids-card-disabled {
628
+ background-color: var(--ids-comp-card-outlined-color-bg-dark-disabled);
629
+ border-color: var(--ids-comp-card-outlined-color-border-dark-disabled);
630
+ }
631
+ .ids-card.ids-card-outlined.ids-card-surface {
632
+ background-color: var(--ids-comp-card-outlined-color-bg-surface-enabled);
633
+ border-color: var(--ids-comp-card-outlined-color-border-surface-enabled);
634
+ }
635
+ .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:hover {
636
+ background-color: var(--ids-comp-card-outlined-color-bg-surface-hovered);
637
+ border-color: var(--ids-comp-card-outlined-color-border-surface-hovered);
638
+ }
639
+ .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:focus {
640
+ background-color: var(--ids-comp-card-outlined-color-bg-surface-focused);
641
+ border-color: var(--ids-comp-card-outlined-color-border-surface-focused);
642
+ }
643
+ .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable:active {
644
+ background-color: var(--ids-comp-card-outlined-color-bg-surface-pressed);
645
+ border-color: var(--ids-comp-card-outlined-color-border-surface-pressed);
646
+ }
647
+ .ids-card.ids-card-outlined.ids-card-surface.ids-card-clickable.ids-card-disabled {
648
+ background-color: var(--ids-comp-card-outlined-color-bg-surface-disabled);
649
+ border-color: var(--ids-comp-card-outlined-color-border-surface-disabled);
650
+ }
651
+ .ids-card.ids-card-elevated.ids-card-primary {
652
+ background-color: var(--ids-comp-card-elevated-color-bg-primary-enabled);
653
+ border-color: var(--ids-comp-card-elevated-color-border-primary-enabled);
654
+ }
655
+ .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:hover {
656
+ background-color: var(--ids-comp-card-elevated-color-bg-primary-hovered);
657
+ border-color: var(--ids-comp-card-elevated-color-border-primary-hovered);
658
+ }
659
+ .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:focus {
660
+ background-color: var(--ids-comp-card-elevated-color-bg-primary-focused);
661
+ border-color: var(--ids-comp-card-elevated-color-border-primary-focused);
662
+ }
663
+ .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable:active {
664
+ background-color: var(--ids-comp-card-elevated-color-bg-primary-pressed);
665
+ border-color: var(--ids-comp-card-elevated-color-border-primary-pressed);
666
+ }
667
+ .ids-card.ids-card-elevated.ids-card-primary.ids-card-clickable.ids-card-disabled {
668
+ background-color: var(--ids-comp-card-elevated-color-bg-primary-disabled);
669
+ border-color: var(--ids-comp-card-elevated-color-border-primary-disabled);
670
+ }
671
+ .ids-card.ids-card-elevated.ids-card-secondary {
672
+ background-color: var(--ids-comp-card-elevated-color-bg-secondary-enabled);
673
+ border-color: var(--ids-comp-card-elevated-color-border-secondary-enabled);
674
+ }
675
+ .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:hover {
676
+ background-color: var(--ids-comp-card-elevated-color-bg-secondary-hovered);
677
+ border-color: var(--ids-comp-card-elevated-color-border-secondary-hovered);
678
+ }
679
+ .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:focus {
680
+ background-color: var(--ids-comp-card-elevated-color-bg-secondary-focused);
681
+ border-color: var(--ids-comp-card-elevated-color-border-secondary-focused);
682
+ }
683
+ .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable:active {
684
+ background-color: var(--ids-comp-card-elevated-color-bg-secondary-pressed);
685
+ border-color: var(--ids-comp-card-elevated-color-border-secondary-pressed);
686
+ }
687
+ .ids-card.ids-card-elevated.ids-card-secondary.ids-card-clickable.ids-card-disabled {
688
+ background-color: var(--ids-comp-card-elevated-color-bg-secondary-disabled);
689
+ border-color: var(--ids-comp-card-elevated-color-border-secondary-disabled);
690
+ }
691
+ .ids-card.ids-card-elevated.ids-card-brand {
692
+ background-color: var(--ids-comp-card-elevated-color-bg-brand-enabled);
693
+ border-color: var(--ids-comp-card-elevated-color-border-brand-enabled);
694
+ }
695
+ .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:hover {
696
+ background-color: var(--ids-comp-card-elevated-color-bg-brand-hovered);
697
+ border-color: var(--ids-comp-card-elevated-color-border-brand-hovered);
698
+ }
699
+ .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:focus {
700
+ background-color: var(--ids-comp-card-elevated-color-bg-brand-focused);
701
+ border-color: var(--ids-comp-card-elevated-color-border-brand-focused);
702
+ }
703
+ .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable:active {
704
+ background-color: var(--ids-comp-card-elevated-color-bg-brand-pressed);
705
+ border-color: var(--ids-comp-card-elevated-color-border-brand-pressed);
706
+ }
707
+ .ids-card.ids-card-elevated.ids-card-brand.ids-card-clickable.ids-card-disabled {
708
+ background-color: var(--ids-comp-card-elevated-color-bg-brand-disabled);
709
+ border-color: var(--ids-comp-card-elevated-color-border-brand-disabled);
710
+ }
711
+ .ids-card.ids-card-elevated.ids-card-error {
712
+ background-color: var(--ids-comp-card-elevated-color-bg-error-enabled);
713
+ border-color: var(--ids-comp-card-elevated-color-border-error-enabled);
714
+ }
715
+ .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:hover {
716
+ background-color: var(--ids-comp-card-elevated-color-bg-error-hovered);
717
+ border-color: var(--ids-comp-card-elevated-color-border-error-hovered);
718
+ }
719
+ .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:focus {
720
+ background-color: var(--ids-comp-card-elevated-color-bg-error-focused);
721
+ border-color: var(--ids-comp-card-elevated-color-border-error-focused);
722
+ }
723
+ .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable:active {
724
+ background-color: var(--ids-comp-card-elevated-color-bg-error-pressed);
725
+ border-color: var(--ids-comp-card-elevated-color-border-error-pressed);
726
+ }
727
+ .ids-card.ids-card-elevated.ids-card-error.ids-card-clickable.ids-card-disabled {
728
+ background-color: var(--ids-comp-card-elevated-color-bg-error-disabled);
729
+ border-color: var(--ids-comp-card-elevated-color-border-error-disabled);
730
+ }
731
+ .ids-card.ids-card-elevated.ids-card-success {
732
+ background-color: var(--ids-comp-card-elevated-color-bg-success-enabled);
733
+ border-color: var(--ids-comp-card-elevated-color-border-success-enabled);
734
+ }
735
+ .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:hover {
736
+ background-color: var(--ids-comp-card-elevated-color-bg-success-hovered);
737
+ border-color: var(--ids-comp-card-elevated-color-border-success-hovered);
738
+ }
739
+ .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:focus {
740
+ background-color: var(--ids-comp-card-elevated-color-bg-success-focused);
741
+ border-color: var(--ids-comp-card-elevated-color-border-success-focused);
742
+ }
743
+ .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable:active {
744
+ background-color: var(--ids-comp-card-elevated-color-bg-success-pressed);
745
+ border-color: var(--ids-comp-card-elevated-color-border-success-pressed);
746
+ }
747
+ .ids-card.ids-card-elevated.ids-card-success.ids-card-clickable.ids-card-disabled {
748
+ background-color: var(--ids-comp-card-elevated-color-bg-success-disabled);
749
+ border-color: var(--ids-comp-card-elevated-color-border-success-disabled);
750
+ }
751
+ .ids-card.ids-card-elevated.ids-card-warning {
752
+ background-color: var(--ids-comp-card-elevated-color-bg-warning-enabled);
753
+ border-color: var(--ids-comp-card-elevated-color-border-warning-enabled);
754
+ }
755
+ .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:hover {
756
+ background-color: var(--ids-comp-card-elevated-color-bg-warning-hovered);
757
+ border-color: var(--ids-comp-card-elevated-color-border-warning-hovered);
758
+ }
759
+ .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:focus {
760
+ background-color: var(--ids-comp-card-elevated-color-bg-warning-focused);
761
+ border-color: var(--ids-comp-card-elevated-color-border-warning-focused);
762
+ }
763
+ .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable:active {
764
+ background-color: var(--ids-comp-card-elevated-color-bg-warning-pressed);
765
+ border-color: var(--ids-comp-card-elevated-color-border-warning-pressed);
766
+ }
767
+ .ids-card.ids-card-elevated.ids-card-warning.ids-card-clickable.ids-card-disabled {
768
+ background-color: var(--ids-comp-card-elevated-color-bg-warning-disabled);
769
+ border-color: var(--ids-comp-card-elevated-color-border-warning-disabled);
770
+ }
771
+ .ids-card.ids-card-elevated.ids-card-info {
772
+ background-color: var(--ids-comp-card-elevated-color-bg-info-enabled);
773
+ border-color: var(--ids-comp-card-elevated-color-border-info-enabled);
774
+ }
775
+ .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:hover {
776
+ background-color: var(--ids-comp-card-elevated-color-bg-info-hovered);
777
+ border-color: var(--ids-comp-card-elevated-color-border-info-hovered);
778
+ }
779
+ .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:focus {
780
+ background-color: var(--ids-comp-card-elevated-color-bg-info-focused);
781
+ border-color: var(--ids-comp-card-elevated-color-border-info-focused);
782
+ }
783
+ .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable:active {
784
+ background-color: var(--ids-comp-card-elevated-color-bg-info-pressed);
785
+ border-color: var(--ids-comp-card-elevated-color-border-info-pressed);
786
+ }
787
+ .ids-card.ids-card-elevated.ids-card-info.ids-card-clickable.ids-card-disabled {
788
+ background-color: var(--ids-comp-card-elevated-color-bg-info-disabled);
789
+ border-color: var(--ids-comp-card-elevated-color-border-info-disabled);
790
+ }
791
+ .ids-card.ids-card-elevated.ids-card-light {
792
+ background-color: var(--ids-comp-card-elevated-color-bg-light-enabled);
793
+ border-color: var(--ids-comp-card-elevated-color-border-light-enabled);
794
+ }
795
+ .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:hover {
796
+ background-color: var(--ids-comp-card-elevated-color-bg-light-hovered);
797
+ border-color: var(--ids-comp-card-elevated-color-border-light-hovered);
798
+ }
799
+ .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:focus {
800
+ background-color: var(--ids-comp-card-elevated-color-bg-light-focused);
801
+ border-color: var(--ids-comp-card-elevated-color-border-light-focused);
802
+ }
803
+ .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable:active {
804
+ background-color: var(--ids-comp-card-elevated-color-bg-light-pressed);
805
+ border-color: var(--ids-comp-card-elevated-color-border-light-pressed);
806
+ }
807
+ .ids-card.ids-card-elevated.ids-card-light.ids-card-clickable.ids-card-disabled {
808
+ background-color: var(--ids-comp-card-elevated-color-bg-light-disabled);
809
+ border-color: var(--ids-comp-card-elevated-color-border-light-disabled);
810
+ }
811
+ .ids-card.ids-card-elevated.ids-card-dark {
812
+ background-color: var(--ids-comp-card-elevated-color-bg-dark-enabled);
813
+ border-color: var(--ids-comp-card-elevated-color-border-dark-enabled);
814
+ }
815
+ .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:hover {
816
+ background-color: var(--ids-comp-card-elevated-color-bg-dark-hovered);
817
+ border-color: var(--ids-comp-card-elevated-color-border-dark-hovered);
818
+ }
819
+ .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:focus {
820
+ background-color: var(--ids-comp-card-elevated-color-bg-dark-focused);
821
+ border-color: var(--ids-comp-card-elevated-color-border-dark-focused);
822
+ }
823
+ .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable:active {
824
+ background-color: var(--ids-comp-card-elevated-color-bg-dark-pressed);
825
+ border-color: var(--ids-comp-card-elevated-color-border-dark-pressed);
826
+ }
827
+ .ids-card.ids-card-elevated.ids-card-dark.ids-card-clickable.ids-card-disabled {
828
+ background-color: var(--ids-comp-card-elevated-color-bg-dark-disabled);
829
+ border-color: var(--ids-comp-card-elevated-color-border-dark-disabled);
830
+ }
831
+ .ids-card.ids-card-elevated.ids-card-surface {
832
+ background-color: var(--ids-comp-card-elevated-color-bg-surface-enabled);
833
+ border-color: var(--ids-comp-card-elevated-color-border-surface-enabled);
834
+ }
835
+ .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:hover {
836
+ background-color: var(--ids-comp-card-elevated-color-bg-surface-hovered);
837
+ border-color: var(--ids-comp-card-elevated-color-border-surface-hovered);
838
+ }
839
+ .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:focus {
840
+ background-color: var(--ids-comp-card-elevated-color-bg-surface-focused);
841
+ border-color: var(--ids-comp-card-elevated-color-border-surface-focused);
842
+ }
843
+ .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable:active {
844
+ background-color: var(--ids-comp-card-elevated-color-bg-surface-pressed);
845
+ border-color: var(--ids-comp-card-elevated-color-border-surface-pressed);
846
+ }
847
+ .ids-card.ids-card-elevated.ids-card-surface.ids-card-clickable.ids-card-disabled {
848
+ background-color: var(--ids-comp-card-elevated-color-bg-surface-disabled);
849
+ border-color: var(--ids-comp-card-elevated-color-border-surface-disabled);
850
+ }