@tmorrow/cre8-wc 1.1.4 → 1.1.6
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/lib/components/card/card.styles.d.ts.map +1 -1
- package/lib/components/card/card.styles.js +338 -1
- package/lib/components/card/card.styles.js.map +1 -1
- package/lib/components/field/field.styles.d.ts.map +1 -1
- package/lib/components/field/field.styles.js +359 -1
- package/lib/components/field/field.styles.js.map +1 -1
- package/lib/components/inline-alert/inline-alert.styles.d.ts.map +1 -1
- package/lib/components/inline-alert/inline-alert.styles.js +392 -1
- package/lib/components/inline-alert/inline-alert.styles.js.map +1 -1
- package/lib/design-tokens/brands/cre8-a2ui/css/tokens_brand.css +2 -0
- package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts +1 -1
- package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts.map +1 -1
- package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.js +7 -3
- package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.js.map +1 -1
- package/lib/design-tokens/core/scss/theming/component.scss +1 -1
- package/lib/design-tokens/core/scss/theming/variables.css +39 -1
- package/lib/design-tokens/core/scss/theming/variables.scss +3 -1
- package/lib/scripts/generate-mcp-manifest.d.ts +8 -0
- package/lib/scripts/generate-mcp-manifest.d.ts.map +1 -0
- package/lib/scripts/generate-mcp-manifest.js +350 -0
- package/lib/scripts/generate-mcp-manifest.js.map +1 -0
- package/mcp-manifest.json +3844 -0
- package/package.json +7 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAiViC,CAAC;AAC9C,eAAe,MAAM,CAAC"}
|
|
@@ -1,4 +1,341 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
const styles = css
|
|
2
|
+
const styles = css `/**
|
|
3
|
+
* Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
|
|
4
|
+
*/
|
|
5
|
+
*,
|
|
6
|
+
::slotted(*),
|
|
7
|
+
*:before,
|
|
8
|
+
*:after {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:root {
|
|
13
|
+
--size-base-unit: 0.5rem;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* RTL support for values logical properties can't automatically adjust for
|
|
18
|
+
* 1) Percentage based horizontal translate values need to be flipped
|
|
19
|
+
* 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
|
|
20
|
+
* 3) Inverse items that have 45degs
|
|
21
|
+
*/
|
|
22
|
+
[dir=rtl] {
|
|
23
|
+
--rtlTranslateX: 50%;
|
|
24
|
+
/* 1 */
|
|
25
|
+
--rtlGradientToRight: 270deg;
|
|
26
|
+
/* 2 */
|
|
27
|
+
--rtlRotate45Inverse: -45deg;
|
|
28
|
+
/* 3 */
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Visible focus outline for elements on a light background
|
|
33
|
+
*/
|
|
34
|
+
/**
|
|
35
|
+
* Visible focus outline for elements with an error status
|
|
36
|
+
*/
|
|
37
|
+
/**
|
|
38
|
+
* Visible focus outline for elements on a dark background
|
|
39
|
+
*/
|
|
40
|
+
/**
|
|
41
|
+
* Focus state for themes that need a dashed outline for focus
|
|
42
|
+
* state
|
|
43
|
+
**/
|
|
44
|
+
/**
|
|
45
|
+
* Invisible focus outline for elements that need a more visible
|
|
46
|
+
* focus state for high-contrast mode
|
|
47
|
+
*/
|
|
48
|
+
/**
|
|
49
|
+
* Visually hidden from display
|
|
50
|
+
*/
|
|
51
|
+
/*
|
|
52
|
+
=======
|
|
53
|
+
Animations
|
|
54
|
+
=======
|
|
55
|
+
*/
|
|
56
|
+
:host {
|
|
57
|
+
--cre8-z-index-1: 1;
|
|
58
|
+
--cre8-z-index-50: 50;
|
|
59
|
+
--cre8-z-index-100: 100;
|
|
60
|
+
--cre8-z-index-200: 200;
|
|
61
|
+
--cre8-z-index-1030: 1030;
|
|
62
|
+
--cre8-anim-fade-quick: 0.35s;
|
|
63
|
+
--cre8-anim-ease: ease;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@keyframes fadeIn {
|
|
67
|
+
100% {
|
|
68
|
+
opacity: 1;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
@keyframes slideIn {
|
|
72
|
+
100% {
|
|
73
|
+
transform: translateX(0);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
@keyframes slideInFwd {
|
|
77
|
+
100% {
|
|
78
|
+
width: 272px;
|
|
79
|
+
height: 272px;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
@keyframes slideOutRight {
|
|
83
|
+
100% {
|
|
84
|
+
width: 272px;
|
|
85
|
+
height: 272px;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
@keyframes slideUp {
|
|
89
|
+
100% {
|
|
90
|
+
transform: translateY(0);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
@media (width >= 481px) {
|
|
94
|
+
@keyframes slideInFwd {
|
|
95
|
+
100% {
|
|
96
|
+
width: 417px;
|
|
97
|
+
height: 417px;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
@keyframes slideOutRight {
|
|
101
|
+
100% {
|
|
102
|
+
width: 417px;
|
|
103
|
+
height: 417px;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
@media (width >= 48rem) {
|
|
108
|
+
@keyframes slideInFwd {
|
|
109
|
+
100% {
|
|
110
|
+
width: 330px;
|
|
111
|
+
height: 330px;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
@keyframes slideOutRight {
|
|
115
|
+
100% {
|
|
116
|
+
width: 330px;
|
|
117
|
+
height: 330px;
|
|
118
|
+
transform: translateX(calc(100vw - 45px));
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
@media (width >= 60rem) {
|
|
123
|
+
@keyframes slideInFwd {
|
|
124
|
+
100% {
|
|
125
|
+
width: 460px;
|
|
126
|
+
height: 460px;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
@keyframes slideOutRight {
|
|
130
|
+
100% {
|
|
131
|
+
width: 460px;
|
|
132
|
+
height: 460px;
|
|
133
|
+
transform: translateX(calc(100vw - 45px));
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
@media (width >= 75rem) {
|
|
138
|
+
@keyframes slideInFwd {
|
|
139
|
+
100% {
|
|
140
|
+
width: 592px;
|
|
141
|
+
height: 591px;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
@keyframes slideOutRight {
|
|
145
|
+
100% {
|
|
146
|
+
width: 592px;
|
|
147
|
+
height: 591px;
|
|
148
|
+
transform: translateX(calc(100vw - 45px));
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
@media (width >= 87.5rem) {
|
|
153
|
+
@keyframes slideOutRight {
|
|
154
|
+
100% {
|
|
155
|
+
width: 592px;
|
|
156
|
+
height: 591px;
|
|
157
|
+
transform: translateX(calc(100vw - 120px));
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
@media (width >= 2200px) {
|
|
162
|
+
@keyframes slideOutRight {
|
|
163
|
+
100% {
|
|
164
|
+
width: 592px;
|
|
165
|
+
height: 591px;
|
|
166
|
+
transform: translateX(calc(100vw - 592px));
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
span.ripple {
|
|
171
|
+
position: absolute;
|
|
172
|
+
border-radius: 50%;
|
|
173
|
+
transform: scale(0);
|
|
174
|
+
animation: ripple 600ms linear;
|
|
175
|
+
background-color: var(--ripple-bg-color);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
@keyframes ripple {
|
|
179
|
+
to {
|
|
180
|
+
transform: scale(4);
|
|
181
|
+
opacity: 1;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
:root {
|
|
185
|
+
--size-base-unit: 0.5rem;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* RTL support for values logical properties can't automatically adjust for
|
|
190
|
+
* 1) Percentage based horizontal translate values need to be flipped
|
|
191
|
+
* 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
|
|
192
|
+
* 3) Inverse items that have 45degs
|
|
193
|
+
*/
|
|
194
|
+
[dir=rtl] {
|
|
195
|
+
--rtlTranslateX: 50%;
|
|
196
|
+
/* 1 */
|
|
197
|
+
--rtlGradientToRight: 270deg;
|
|
198
|
+
/* 2 */
|
|
199
|
+
--rtlRotate45Inverse: -45deg;
|
|
200
|
+
/* 3 */
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/**
|
|
204
|
+
* Visible focus outline for elements on a light background
|
|
205
|
+
*/
|
|
206
|
+
/**
|
|
207
|
+
* Visible focus outline for elements with an error status
|
|
208
|
+
*/
|
|
209
|
+
/**
|
|
210
|
+
* Visible focus outline for elements on a dark background
|
|
211
|
+
*/
|
|
212
|
+
/**
|
|
213
|
+
* Focus state for themes that need a dashed outline for focus
|
|
214
|
+
* state
|
|
215
|
+
**/
|
|
216
|
+
/**
|
|
217
|
+
* Invisible focus outline for elements that need a more visible
|
|
218
|
+
* focus state for high-contrast mode
|
|
219
|
+
*/
|
|
220
|
+
/**
|
|
221
|
+
* Visually hidden from display
|
|
222
|
+
*/
|
|
223
|
+
:host {
|
|
224
|
+
display: block;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/**
|
|
228
|
+
* 1) A card is an organized block that typically contains a title, image,
|
|
229
|
+
* text, and/or calls to action. It is made up of an optional header slot, required
|
|
230
|
+
* body slot, and optional footer slot to place other Components and content within.
|
|
231
|
+
*/
|
|
232
|
+
.cre8-c-card {
|
|
233
|
+
overflow: hidden;
|
|
234
|
+
display: flex;
|
|
235
|
+
flex-direction: column;
|
|
236
|
+
height: 100%;
|
|
237
|
+
width: 100%;
|
|
238
|
+
padding: 1.5rem;
|
|
239
|
+
gap: 1rem;
|
|
240
|
+
border-color: var(--cre8-color-border-default);
|
|
241
|
+
border-style: var(--cre8-border-style-default);
|
|
242
|
+
border-width: var(--cre8-border-width-default);
|
|
243
|
+
border-radius: var(--cre8-border-radius-container);
|
|
244
|
+
background: var(--cre8-color-bg-default);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
/**
|
|
248
|
+
* Horizontal card
|
|
249
|
+
* 1) Organized block with flex-direction set to row so that header => footer appears
|
|
250
|
+
* from left to right rather than top to bottom
|
|
251
|
+
*/
|
|
252
|
+
.cre8-c-card--horizontal {
|
|
253
|
+
flex-direction: row;
|
|
254
|
+
align-items: center;
|
|
255
|
+
justify-content: center;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/**
|
|
259
|
+
* Bare card
|
|
260
|
+
* 1) Organized block without a border, background, or padding
|
|
261
|
+
*/
|
|
262
|
+
.cre8-c-card--bare {
|
|
263
|
+
border: 0;
|
|
264
|
+
padding: 0;
|
|
265
|
+
gap: 0;
|
|
266
|
+
box-shadow: none;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
/**
|
|
270
|
+
* Horizontal-bare card
|
|
271
|
+
* 1) Organized block with flex-direction set to row so that header => footer appears
|
|
272
|
+
* from left to right rather than top to bottom without a border, background, or padding
|
|
273
|
+
*/
|
|
274
|
+
.cre8-c-card--horizontal-bare {
|
|
275
|
+
flex-direction: row;
|
|
276
|
+
border: 0;
|
|
277
|
+
padding: 0;
|
|
278
|
+
gap: 0;
|
|
279
|
+
box-shadow: none;
|
|
280
|
+
align-items: center;
|
|
281
|
+
justify-content: center;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
/**
|
|
285
|
+
* Center aligned card
|
|
286
|
+
* 1) Center content and text within the card
|
|
287
|
+
*/
|
|
288
|
+
.cre8-c-card--align-center {
|
|
289
|
+
text-align: center;
|
|
290
|
+
/* 1 */
|
|
291
|
+
align-items: center;
|
|
292
|
+
/* 1 */
|
|
293
|
+
justify-content: center;
|
|
294
|
+
/* 1 */
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
/**
|
|
298
|
+
* Slotted image within a card
|
|
299
|
+
* 1) Make the image full width
|
|
300
|
+
*/
|
|
301
|
+
::slotted(img) {
|
|
302
|
+
width: 100%;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
/**
|
|
306
|
+
* Card header
|
|
307
|
+
* 1) Remove flex so that body always takes up remaining space
|
|
308
|
+
*/
|
|
309
|
+
.cre8-c-card__header {
|
|
310
|
+
display: block;
|
|
311
|
+
flex: none;
|
|
312
|
+
/* 1 */
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/**
|
|
316
|
+
* Card body
|
|
317
|
+
* 1) Flex applied to always fill the remaining space of the card
|
|
318
|
+
*/
|
|
319
|
+
.cre8-c-card__body {
|
|
320
|
+
display: block;
|
|
321
|
+
flex: 1 1 auto;
|
|
322
|
+
/* 1 */
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/**
|
|
326
|
+
* Card footer
|
|
327
|
+
* 1) Remove flex so that body always takes up remaining space
|
|
328
|
+
*/
|
|
329
|
+
.cre8-c-card__footer {
|
|
330
|
+
display: block;
|
|
331
|
+
flex: none;
|
|
332
|
+
/* 1 */
|
|
333
|
+
}
|
|
334
|
+
.cre8-c-card--bare .cre8-c-card__footer {
|
|
335
|
+
padding: 0;
|
|
336
|
+
}
|
|
337
|
+
.cre8-c-card--horizontal-bare .cre8-c-card__footer {
|
|
338
|
+
padding: 0;
|
|
339
|
+
}/*# sourceMappingURL=card.module.css.map */`;
|
|
3
340
|
export default styles;
|
|
4
341
|
//# sourceMappingURL=card.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6CAiV2B,CAAC;AAC9C,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n --rtlTranslateX: 50%;\n /* 1 */\n --rtlGradientToRight: 270deg;\n /* 2 */\n --rtlRotate45Inverse: -45deg;\n /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n --rtlTranslateX: 50%;\n /* 1 */\n --rtlGradientToRight: 270deg;\n /* 2 */\n --rtlRotate45Inverse: -45deg;\n /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n:host {\n display: block;\n}\n\n/**\n * 1) A card is an organized block that typically contains a title, image,\n * text, and/or calls to action. It is made up of an optional header slot, required\n * body slot, and optional footer slot to place other Components and content within.\n */\n.cre8-c-card {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n padding: 1.5rem;\n gap: 1rem;\n border-color: var(--cre8-color-border-default);\n border-style: var(--cre8-border-style-default);\n border-width: var(--cre8-border-width-default);\n border-radius: var(--cre8-border-radius-container);\n background: var(--cre8-color-bg-default);\n}\n\n/**\n * Horizontal card\n * 1) Organized block with flex-direction set to row so that header => footer appears\n * from left to right rather than top to bottom\n */\n.cre8-c-card--horizontal {\n flex-direction: row;\n align-items: center;\n justify-content: center;\n}\n\n/**\n * Bare card\n * 1) Organized block without a border, background, or padding\n */\n.cre8-c-card--bare {\n border: 0;\n padding: 0;\n gap: 0;\n box-shadow: none;\n}\n\n/**\n * Horizontal-bare card\n * 1) Organized block with flex-direction set to row so that header => footer appears\n * from left to right rather than top to bottom without a border, background, or padding\n */\n.cre8-c-card--horizontal-bare {\n flex-direction: row;\n border: 0;\n padding: 0;\n gap: 0;\n box-shadow: none;\n align-items: center;\n justify-content: center;\n}\n\n/**\n * Center aligned card\n * 1) Center content and text within the card\n */\n.cre8-c-card--align-center {\n text-align: center;\n /* 1 */\n align-items: center;\n /* 1 */\n justify-content: center;\n /* 1 */\n}\n\n/**\n * Slotted image within a card\n * 1) Make the image full width\n */\n::slotted(img) {\n width: 100%;\n}\n\n/**\n * Card header\n * 1) Remove flex so that body always takes up remaining space\n */\n.cre8-c-card__header {\n display: block;\n flex: none;\n /* 1 */\n}\n\n/**\n * Card body\n * 1) Flex applied to always fill the remaining space of the card\n */\n.cre8-c-card__body {\n display: block;\n flex: 1 1 auto;\n /* 1 */\n}\n\n/**\n * Card footer\n * 1) Remove flex so that body always takes up remaining space\n */\n.cre8-c-card__footer {\n display: block;\n flex: none;\n /* 1 */\n}\n.cre8-c-card--bare .cre8-c-card__footer {\n padding: 0;\n}\n.cre8-c-card--horizontal-bare .cre8-c-card__footer {\n padding: 0;\n}/*# sourceMappingURL=card.module.css.map */`;\nexport default styles;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.styles.d.ts","sourceRoot":"","sources":["../../../components/field/field.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"field.styles.d.ts","sourceRoot":"","sources":["../../../components/field/field.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAsWkC,CAAC;AAC/C,eAAe,MAAM,CAAC"}
|