@pacem/pacem-theme-css 0.0.0-stage → 2.0.0-abel

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.
Files changed (153) hide show
  1. package/LICENSE +191 -0
  2. package/NOTICE +4 -0
  3. package/README.md +142 -3
  4. package/cli.js +26 -0
  5. package/pacem-themes.json +10 -0
  6. package/package.json +45 -6
  7. package/src/2d/index.css +44 -0
  8. package/src/3d/index.css +49 -0
  9. package/src/base/animations.css +82 -0
  10. package/src/base/attributes.css +19 -0
  11. package/src/base/backgrounds.css +37 -0
  12. package/src/base/body.css +199 -0
  13. package/src/base/content.css +4 -0
  14. package/src/base/icons.css +74 -0
  15. package/src/base/logging.css +5 -0
  16. package/src/base/overrides.css +3 -0
  17. package/src/base/preloader.css +17 -0
  18. package/src/base/reset.css +50 -0
  19. package/src/base/shell.css +3 -0
  20. package/src/base/text.css +184 -0
  21. package/src/basic/index.css +285 -0
  22. package/src/charts/generated/colors.css +49 -0
  23. package/src/charts/index.css +573 -0
  24. package/src/fx/index.css +230 -0
  25. package/src/layout/address.css +46 -0
  26. package/src/layout/animations.css +33 -0
  27. package/src/layout/borders.css +63 -0
  28. package/src/layout/box.css +271 -0
  29. package/src/layout/breadcrumbs.css +114 -0
  30. package/src/layout/cards.css +246 -0
  31. package/src/layout/coloring.css +862 -0
  32. package/src/layout/container.css +40 -0
  33. package/src/layout/corners.css +52 -0
  34. package/src/layout/datatable.css +324 -0
  35. package/src/layout/elevation.css +73 -0
  36. package/src/layout/fetch-feedback.css +125 -0
  37. package/src/layout/generated/borders.css +403 -0
  38. package/src/layout/generated/card-ribbon.css +94 -0
  39. package/src/layout/generated/card-sides.css +888 -0
  40. package/src/layout/generated/grid-system.css +308 -0
  41. package/src/layout/generated/grids.css +952 -0
  42. package/src/layout/generated/layout-stretch.css +132 -0
  43. package/src/layout/generated/positioning.css +323 -0
  44. package/src/layout/generated/sizing.css +478 -0
  45. package/src/layout/generated/spacing.css +1988 -0
  46. package/src/layout/generated/visibility.css +384 -0
  47. package/src/layout/grid-system.css +49 -0
  48. package/src/layout/grids.css +92 -0
  49. package/src/layout/index.css +39 -0
  50. package/src/layout/interactive.css +11 -0
  51. package/src/layout/layout.css +479 -0
  52. package/src/layout/lists.css +104 -0
  53. package/src/layout/other.css +25 -0
  54. package/src/layout/panels.css +337 -0
  55. package/src/layout/positioning.css +108 -0
  56. package/src/layout/scroll.css +85 -0
  57. package/src/layout/shapes.css +20 -0
  58. package/src/layout/shell.css +3 -0
  59. package/src/layout/sizing.css +25 -0
  60. package/src/layout/spacing.css +17 -0
  61. package/src/layout/superposition-system.css +116 -0
  62. package/src/layout/tokens-chips.css +15 -0
  63. package/src/layout/toolbar.css +30 -0
  64. package/src/layout/typography.css +106 -0
  65. package/src/layout/visibility.css +231 -0
  66. package/src/maps/index.css +20 -0
  67. package/src/media/index.css +6 -0
  68. package/src/media.css +18 -0
  69. package/src/pacem-content.css +24 -0
  70. package/src/pacem-shell.css +14 -0
  71. package/src/pacem.css +35 -0
  72. package/src/plus/carousel.css +327 -0
  73. package/src/plus/datagrid.css +68 -0
  74. package/src/plus/gallery.css +186 -0
  75. package/src/plus/icons.css +25 -0
  76. package/src/plus/index.css +7 -0
  77. package/src/plus/misc.css +194 -0
  78. package/src/scaffolding/calendar-picker.css +291 -0
  79. package/src/scaffolding/checkbox-radio.css +118 -0
  80. package/src/scaffolding/checkbox.css +200 -0
  81. package/src/scaffolding/childform.css +156 -0
  82. package/src/scaffolding/color.css +129 -0
  83. package/src/scaffolding/contenteditable.css +403 -0
  84. package/src/scaffolding/datepicker.css +126 -0
  85. package/src/scaffolding/elements.css +30 -0
  86. package/src/scaffolding/fieldset.css +346 -0
  87. package/src/scaffolding/form.css +36 -0
  88. package/src/scaffolding/formfield.css +364 -0
  89. package/src/scaffolding/generated/calendar-picker.css +40 -0
  90. package/src/scaffolding/generated/colors.css +115 -0
  91. package/src/scaffolding/generated/formfield.css +500 -0
  92. package/src/scaffolding/hierarchy.css +76 -0
  93. package/src/scaffolding/icons.css +64 -0
  94. package/src/scaffolding/image.css +195 -0
  95. package/src/scaffolding/index.css +40 -0
  96. package/src/scaffolding/input.css +163 -0
  97. package/src/scaffolding/inputs.css +77 -0
  98. package/src/scaffolding/latlng.css +173 -0
  99. package/src/scaffolding/markdown.css +14 -0
  100. package/src/scaffolding/password.css +7 -0
  101. package/src/scaffolding/pickers.css +150 -0
  102. package/src/scaffolding/radio.css +68 -0
  103. package/src/scaffolding/select.css +59 -0
  104. package/src/scaffolding/slider.css +236 -0
  105. package/src/scaffolding/snapshot.css +167 -0
  106. package/src/scaffolding/suggest.css +92 -0
  107. package/src/scaffolding/tags.css +132 -0
  108. package/src/scaffolding/textarea.css +45 -0
  109. package/src/scaffolding/upload.css +283 -0
  110. package/src/scaffolding/validators.css +29 -0
  111. package/src/tokens/colors.css +403 -0
  112. package/src/tokens/components.css +16 -0
  113. package/src/tokens/system.css +92 -0
  114. package/src/tokens/theme.css +221 -0
  115. package/src/traits.css +18 -0
  116. package/src/transforms/index.css +5 -0
  117. package/src/ui/anchor.css +55 -0
  118. package/src/ui/balloon.css +573 -0
  119. package/src/ui/binder.css +28 -0
  120. package/src/ui/blade.css +83 -0
  121. package/src/ui/bottom-sheet.css +53 -0
  122. package/src/ui/button.css +626 -0
  123. package/src/ui/calendar.css +415 -0
  124. package/src/ui/collapse.css +25 -0
  125. package/src/ui/dialog.css +230 -0
  126. package/src/ui/divider.css +42 -0
  127. package/src/ui/generated/calendar.css +363 -0
  128. package/src/ui/hidden.css +40 -0
  129. package/src/ui/icon.css +90 -0
  130. package/src/ui/image.css +140 -0
  131. package/src/ui/index.css +30 -0
  132. package/src/ui/led.css +84 -0
  133. package/src/ui/loader.css +174 -0
  134. package/src/ui/markdown.css +352 -0
  135. package/src/ui/marquee.css +41 -0
  136. package/src/ui/menu.css +386 -0
  137. package/src/ui/pager.css +133 -0
  138. package/src/ui/progressbar.css +137 -0
  139. package/src/ui/shell.css +4 -0
  140. package/src/ui/sidebar.css +103 -0
  141. package/src/ui/sticky-header.css +22 -0
  142. package/src/ui/tabs.css +355 -0
  143. package/src/ui/ticker.css +105 -0
  144. package/src/ui/timeline.css +106 -0
  145. package/src/ui/toast.css +182 -0
  146. package/src/ui/toc.css +58 -0
  147. package/src/ui/tuner.css +196 -0
  148. package/src/ui/view.css +30 -0
  149. package/src/ui/window.css +287 -0
  150. package/templates/theme.css +28 -0
  151. package/themebuilder.js +19 -0
  152. package/themes/dark.css +6 -0
  153. package/themes/light.css +97 -0
package/src/layout/generated/card-sides.css ADDED
@@ -0,0 +1,888 @@
1
+ /* Generated by theme/css/tools/generate.ts: do not edit, edit the generator instead. */
2
+ .pacem-card:is(.card-left, .card-right) {
3
+ display: grid;
4
+ > .card-ribbon {
5
+ margin: 0;
6
+ grid-area: unset;
7
+ position: absolute;
8
+ left: calc(2 * var(--pacem-grid-spacing) / 3);
9
+ top: calc(2 * var(--pacem-grid-spacing) / 3);
10
+ }
11
+ > .card-heading {
12
+ grid-area: heading;
13
+ text-align: start;
14
+ }
15
+ > .card-body {
16
+ grid-area: body;
17
+ }
18
+ > .card-footer {
19
+ grid-area: footer;
20
+ }
21
+ > .card-img {
22
+ position: relative;
23
+ grid-area: img;
24
+ height: 100%;
25
+ }
26
+ .card-img {
27
+ border-top-left-radius: var(--pacem-border-card-radius);
28
+ border-top-right-radius: 0;
29
+ border-bottom-left-radius: var(--pacem-border-card-radius);
30
+ border-bottom-right-radius: 0;
31
+ }
32
+ :--shadows & .card-img {
33
+ box-shadow: inset calc(var(--pacem-grid-spacing) / -8) 0 var(--pacem-grid-spacing) rgba(0, 0, 0, 0.5);
34
+ }
35
+ .card-heading {
36
+ box-sizing: border-box;
37
+ padding-top: calc(2 * var(--pacem-grid-spacing) / 3);
38
+ height: auto;
39
+ text-align: start;
40
+ }
41
+ :--no-shadows & .card-heading {
42
+ color: inherit;
43
+ text-shadow: none;
44
+ }
45
+ .card-tools {
46
+ grid-area: tools;
47
+ align-self: center;
48
+ }
49
+ }
50
+ .pacem-card.card-left {
51
+ grid-template-columns: 33% 1fr auto;
52
+ grid-template-rows: auto 1fr auto;
53
+ grid-template-areas: 'img heading tools' 'img body body' 'img footer footer';
54
+ .card-img {
55
+ border-top-left-radius: var(--pacem-border-card-radius);
56
+ border-top-right-radius: 0;
57
+ border-bottom-left-radius: var(--pacem-border-card-radius);
58
+ border-bottom-right-radius: 0;
59
+ }
60
+ &.card-img-wide {
61
+ grid-template-columns: 50% 1fr auto;
62
+ }
63
+ &.card-img-slim {
64
+ grid-template-columns: 25% 1fr auto;
65
+ }
66
+ }
67
+ .pacem-card.card-right {
68
+ grid-template-columns: 1fr auto 33%;
69
+ grid-template-rows: auto 1fr auto;
70
+ grid-template-areas: 'heading tools img' 'body body img' 'footer footer img';
71
+ .card-img {
72
+ border-top-left-radius: 0;
73
+ border-top-right-radius: var(--pacem-border-card-radius);
74
+ border-bottom-left-radius: 0;
75
+ border-bottom-right-radius: var(--pacem-border-card-radius);
76
+ }
77
+ .card-ribbon {
78
+ right: calc(2 * var(--pacem-grid-spacing) / 3);
79
+ left: inherit;
80
+ }
81
+ &.card-img-wide {
82
+ grid-template-columns: 1fr auto 50%;
83
+ }
84
+ &.card-img-slim {
85
+ grid-template-columns: 1fr auto 25%;
86
+ }
87
+ }
88
+
89
+ @media (--pacem-below-sm) {
90
+ .pacem-card:is(.card-xs-left, .card-xs-right) {
91
+ display: grid;
92
+ > .card-ribbon {
93
+ margin: 0;
94
+ grid-area: unset;
95
+ position: absolute;
96
+ left: calc(2 * var(--pacem-grid-spacing) / 3);
97
+ top: calc(2 * var(--pacem-grid-spacing) / 3);
98
+ }
99
+ > .card-heading {
100
+ grid-area: heading;
101
+ text-align: start;
102
+ }
103
+ > .card-body {
104
+ grid-area: body;
105
+ }
106
+ > .card-footer {
107
+ grid-area: footer;
108
+ }
109
+ > .card-img {
110
+ position: relative;
111
+ grid-area: img;
112
+ height: 100%;
113
+ }
114
+ .card-img {
115
+ border-top-left-radius: var(--pacem-border-card-radius);
116
+ border-top-right-radius: 0;
117
+ border-bottom-left-radius: var(--pacem-border-card-radius);
118
+ border-bottom-right-radius: 0;
119
+ }
120
+ :--shadows & .card-img {
121
+ box-shadow: inset calc(var(--pacem-grid-spacing) / -8) 0 var(--pacem-grid-spacing) rgba(0, 0, 0, 0.5);
122
+ }
123
+ .card-heading {
124
+ box-sizing: border-box;
125
+ padding-top: calc(2 * var(--pacem-grid-spacing) / 3);
126
+ height: auto;
127
+ text-align: start;
128
+ }
129
+ :--no-shadows & .card-heading {
130
+ color: inherit;
131
+ text-shadow: none;
132
+ }
133
+ .card-tools {
134
+ grid-area: tools;
135
+ align-self: center;
136
+ }
137
+ }
138
+ .pacem-card.card-xs-left {
139
+ grid-template-columns: 33% 1fr auto;
140
+ grid-template-rows: auto 1fr auto;
141
+ grid-template-areas: 'img heading tools' 'img body body' 'img footer footer';
142
+ .card-img {
143
+ border-top-left-radius: var(--pacem-border-card-radius);
144
+ border-top-right-radius: 0;
145
+ border-bottom-left-radius: var(--pacem-border-card-radius);
146
+ border-bottom-right-radius: 0;
147
+ }
148
+ &.card-img-wide {
149
+ grid-template-columns: 50% 1fr auto;
150
+ }
151
+ &.card-img-slim {
152
+ grid-template-columns: 25% 1fr auto;
153
+ }
154
+ }
155
+ .pacem-card.card-xs-right {
156
+ grid-template-columns: 1fr auto 33%;
157
+ grid-template-rows: auto 1fr auto;
158
+ grid-template-areas: 'heading tools img' 'body body img' 'footer footer img';
159
+ .card-img {
160
+ border-top-left-radius: 0;
161
+ border-top-right-radius: var(--pacem-border-card-radius);
162
+ border-bottom-left-radius: 0;
163
+ border-bottom-right-radius: var(--pacem-border-card-radius);
164
+ }
165
+ .card-ribbon {
166
+ right: calc(2 * var(--pacem-grid-spacing) / 3);
167
+ left: inherit;
168
+ }
169
+ &.card-img-wide {
170
+ grid-template-columns: 1fr auto 50%;
171
+ }
172
+ &.card-img-slim {
173
+ grid-template-columns: 1fr auto 25%;
174
+ }
175
+ }
176
+ }
177
+
178
+ @media (--pacem-sm) {
179
+ .pacem-card:is(.card-sm-left, .card-sm-right) {
180
+ display: grid;
181
+ > .card-ribbon {
182
+ margin: 0;
183
+ grid-area: unset;
184
+ position: absolute;
185
+ left: calc(2 * var(--pacem-grid-spacing) / 3);
186
+ top: calc(2 * var(--pacem-grid-spacing) / 3);
187
+ }
188
+ > .card-heading {
189
+ grid-area: heading;
190
+ text-align: start;
191
+ }
192
+ > .card-body {
193
+ grid-area: body;
194
+ }
195
+ > .card-footer {
196
+ grid-area: footer;
197
+ }
198
+ > .card-img {
199
+ position: relative;
200
+ grid-area: img;
201
+ height: 100%;
202
+ }
203
+ .card-img {
204
+ border-top-left-radius: var(--pacem-border-card-radius);
205
+ border-top-right-radius: 0;
206
+ border-bottom-left-radius: var(--pacem-border-card-radius);
207
+ border-bottom-right-radius: 0;
208
+ }
209
+ :--shadows & .card-img {
210
+ box-shadow: inset calc(var(--pacem-grid-spacing) / -8) 0 var(--pacem-grid-spacing) rgba(0, 0, 0, 0.5);
211
+ }
212
+ .card-heading {
213
+ box-sizing: border-box;
214
+ padding-top: calc(2 * var(--pacem-grid-spacing) / 3);
215
+ height: auto;
216
+ text-align: start;
217
+ }
218
+ :--no-shadows & .card-heading {
219
+ color: inherit;
220
+ text-shadow: none;
221
+ }
222
+ .card-tools {
223
+ grid-area: tools;
224
+ align-self: center;
225
+ }
226
+ }
227
+ .pacem-card.card-sm-left {
228
+ grid-template-columns: 33% 1fr auto;
229
+ grid-template-rows: auto 1fr auto;
230
+ grid-template-areas: 'img heading tools' 'img body body' 'img footer footer';
231
+ .card-img {
232
+ border-top-left-radius: var(--pacem-border-card-radius);
233
+ border-top-right-radius: 0;
234
+ border-bottom-left-radius: var(--pacem-border-card-radius);
235
+ border-bottom-right-radius: 0;
236
+ }
237
+ &.card-img-wide {
238
+ grid-template-columns: 50% 1fr auto;
239
+ }
240
+ &.card-img-slim {
241
+ grid-template-columns: 25% 1fr auto;
242
+ }
243
+ }
244
+ .pacem-card.card-sm-right {
245
+ grid-template-columns: 1fr auto 33%;
246
+ grid-template-rows: auto 1fr auto;
247
+ grid-template-areas: 'heading tools img' 'body body img' 'footer footer img';
248
+ .card-img {
249
+ border-top-left-radius: 0;
250
+ border-top-right-radius: var(--pacem-border-card-radius);
251
+ border-bottom-left-radius: 0;
252
+ border-bottom-right-radius: var(--pacem-border-card-radius);
253
+ }
254
+ .card-ribbon {
255
+ right: calc(2 * var(--pacem-grid-spacing) / 3);
256
+ left: inherit;
257
+ }
258
+ &.card-img-wide {
259
+ grid-template-columns: 1fr auto 50%;
260
+ }
261
+ &.card-img-slim {
262
+ grid-template-columns: 1fr auto 25%;
263
+ }
264
+ }
265
+ }
266
+
267
+ @media (--pacem-md) {
268
+ .pacem-card:is(.card-md-left, .card-md-right) {
269
+ display: grid;
270
+ > .card-ribbon {
271
+ margin: 0;
272
+ grid-area: unset;
273
+ position: absolute;
274
+ left: calc(2 * var(--pacem-grid-spacing) / 3);
275
+ top: calc(2 * var(--pacem-grid-spacing) / 3);
276
+ }
277
+ > .card-heading {
278
+ grid-area: heading;
279
+ text-align: start;
280
+ }
281
+ > .card-body {
282
+ grid-area: body;
283
+ }
284
+ > .card-footer {
285
+ grid-area: footer;
286
+ }
287
+ > .card-img {
288
+ position: relative;
289
+ grid-area: img;
290
+ height: 100%;
291
+ }
292
+ .card-img {
293
+ border-top-left-radius: var(--pacem-border-card-radius);
294
+ border-top-right-radius: 0;
295
+ border-bottom-left-radius: var(--pacem-border-card-radius);
296
+ border-bottom-right-radius: 0;
297
+ }
298
+ :--shadows & .card-img {
299
+ box-shadow: inset calc(var(--pacem-grid-spacing) / -8) 0 var(--pacem-grid-spacing) rgba(0, 0, 0, 0.5);
300
+ }
301
+ .card-heading {
302
+ box-sizing: border-box;
303
+ padding-top: calc(2 * var(--pacem-grid-spacing) / 3);
304
+ height: auto;
305
+ text-align: start;
306
+ }
307
+ :--no-shadows & .card-heading {
308
+ color: inherit;
309
+ text-shadow: none;
310
+ }
311
+ .card-tools {
312
+ grid-area: tools;
313
+ align-self: center;
314
+ }
315
+ }
316
+ .pacem-card.card-md-left {
317
+ grid-template-columns: 33% 1fr auto;
318
+ grid-template-rows: auto 1fr auto;
319
+ grid-template-areas: 'img heading tools' 'img body body' 'img footer footer';
320
+ .card-img {
321
+ border-top-left-radius: var(--pacem-border-card-radius);
322
+ border-top-right-radius: 0;
323
+ border-bottom-left-radius: var(--pacem-border-card-radius);
324
+ border-bottom-right-radius: 0;
325
+ }
326
+ &.card-img-wide {
327
+ grid-template-columns: 50% 1fr auto;
328
+ }
329
+ &.card-img-slim {
330
+ grid-template-columns: 25% 1fr auto;
331
+ }
332
+ }
333
+ .pacem-card.card-md-right {
334
+ grid-template-columns: 1fr auto 33%;
335
+ grid-template-rows: auto 1fr auto;
336
+ grid-template-areas: 'heading tools img' 'body body img' 'footer footer img';
337
+ .card-img {
338
+ border-top-left-radius: 0;
339
+ border-top-right-radius: var(--pacem-border-card-radius);
340
+ border-bottom-left-radius: 0;
341
+ border-bottom-right-radius: var(--pacem-border-card-radius);
342
+ }
343
+ .card-ribbon {
344
+ right: calc(2 * var(--pacem-grid-spacing) / 3);
345
+ left: inherit;
346
+ }
347
+ &.card-img-wide {
348
+ grid-template-columns: 1fr auto 50%;
349
+ }
350
+ &.card-img-slim {
351
+ grid-template-columns: 1fr auto 25%;
352
+ }
353
+ }
354
+ }
355
+
356
+ @media (--pacem-lg) {
357
+ .pacem-card:is(.card-lg-left, .card-lg-right) {
358
+ display: grid;
359
+ > .card-ribbon {
360
+ margin: 0;
361
+ grid-area: unset;
362
+ position: absolute;
363
+ left: calc(2 * var(--pacem-grid-spacing) / 3);
364
+ top: calc(2 * var(--pacem-grid-spacing) / 3);
365
+ }
366
+ > .card-heading {
367
+ grid-area: heading;
368
+ text-align: start;
369
+ }
370
+ > .card-body {
371
+ grid-area: body;
372
+ }
373
+ > .card-footer {
374
+ grid-area: footer;
375
+ }
376
+ > .card-img {
377
+ position: relative;
378
+ grid-area: img;
379
+ height: 100%;
380
+ }
381
+ .card-img {
382
+ border-top-left-radius: var(--pacem-border-card-radius);
383
+ border-top-right-radius: 0;
384
+ border-bottom-left-radius: var(--pacem-border-card-radius);
385
+ border-bottom-right-radius: 0;
386
+ }
387
+ :--shadows & .card-img {
388
+ box-shadow: inset calc(var(--pacem-grid-spacing) / -8) 0 var(--pacem-grid-spacing) rgba(0, 0, 0, 0.5);
389
+ }
390
+ .card-heading {
391
+ box-sizing: border-box;
392
+ padding-top: calc(2 * var(--pacem-grid-spacing) / 3);
393
+ height: auto;
394
+ text-align: start;
395
+ }
396
+ :--no-shadows & .card-heading {
397
+ color: inherit;
398
+ text-shadow: none;
399
+ }
400
+ .card-tools {
401
+ grid-area: tools;
402
+ align-self: center;
403
+ }
404
+ }
405
+ .pacem-card.card-lg-left {
406
+ grid-template-columns: 33% 1fr auto;
407
+ grid-template-rows: auto 1fr auto;
408
+ grid-template-areas: 'img heading tools' 'img body body' 'img footer footer';
409
+ .card-img {
410
+ border-top-left-radius: var(--pacem-border-card-radius);
411
+ border-top-right-radius: 0;
412
+ border-bottom-left-radius: var(--pacem-border-card-radius);
413
+ border-bottom-right-radius: 0;
414
+ }
415
+ &.card-img-wide {
416
+ grid-template-columns: 50% 1fr auto;
417
+ }
418
+ &.card-img-slim {
419
+ grid-template-columns: 25% 1fr auto;
420
+ }
421
+ }
422
+ .pacem-card.card-lg-right {
423
+ grid-template-columns: 1fr auto 33%;
424
+ grid-template-rows: auto 1fr auto;
425
+ grid-template-areas: 'heading tools img' 'body body img' 'footer footer img';
426
+ .card-img {
427
+ border-top-left-radius: 0;
428
+ border-top-right-radius: var(--pacem-border-card-radius);
429
+ border-bottom-left-radius: 0;
430
+ border-bottom-right-radius: var(--pacem-border-card-radius);
431
+ }
432
+ .card-ribbon {
433
+ right: calc(2 * var(--pacem-grid-spacing) / 3);
434
+ left: inherit;
435
+ }
436
+ &.card-img-wide {
437
+ grid-template-columns: 1fr auto 50%;
438
+ }
439
+ &.card-img-slim {
440
+ grid-template-columns: 1fr auto 25%;
441
+ }
442
+ }
443
+ }
444
+
445
+ @media (--pacem-xl) {
446
+ .pacem-card:is(.card-xl-left, .card-xl-right) {
447
+ display: grid;
448
+ > .card-ribbon {
449
+ margin: 0;
450
+ grid-area: unset;
451
+ position: absolute;
452
+ left: calc(2 * var(--pacem-grid-spacing) / 3);
453
+ top: calc(2 * var(--pacem-grid-spacing) / 3);
454
+ }
455
+ > .card-heading {
456
+ grid-area: heading;
457
+ text-align: start;
458
+ }
459
+ > .card-body {
460
+ grid-area: body;
461
+ }
462
+ > .card-footer {
463
+ grid-area: footer;
464
+ }
465
+ > .card-img {
466
+ position: relative;
467
+ grid-area: img;
468
+ height: 100%;
469
+ }
470
+ .card-img {
471
+ border-top-left-radius: var(--pacem-border-card-radius);
472
+ border-top-right-radius: 0;
473
+ border-bottom-left-radius: var(--pacem-border-card-radius);
474
+ border-bottom-right-radius: 0;
475
+ }
476
+ :--shadows & .card-img {
477
+ box-shadow: inset calc(var(--pacem-grid-spacing) / -8) 0 var(--pacem-grid-spacing) rgba(0, 0, 0, 0.5);
478
+ }
479
+ .card-heading {
480
+ box-sizing: border-box;
481
+ padding-top: calc(2 * var(--pacem-grid-spacing) / 3);
482
+ height: auto;
483
+ text-align: start;
484
+ }
485
+ :--no-shadows & .card-heading {
486
+ color: inherit;
487
+ text-shadow: none;
488
+ }
489
+ .card-tools {
490
+ grid-area: tools;
491
+ align-self: center;
492
+ }
493
+ }
494
+ .pacem-card.card-xl-left {
495
+ grid-template-columns: 33% 1fr auto;
496
+ grid-template-rows: auto 1fr auto;
497
+ grid-template-areas: 'img heading tools' 'img body body' 'img footer footer';
498
+ .card-img {
499
+ border-top-left-radius: var(--pacem-border-card-radius);
500
+ border-top-right-radius: 0;
501
+ border-bottom-left-radius: var(--pacem-border-card-radius);
502
+ border-bottom-right-radius: 0;
503
+ }
504
+ &.card-img-wide {
505
+ grid-template-columns: 50% 1fr auto;
506
+ }
507
+ &.card-img-slim {
508
+ grid-template-columns: 25% 1fr auto;
509
+ }
510
+ }
511
+ .pacem-card.card-xl-right {
512
+ grid-template-columns: 1fr auto 33%;
513
+ grid-template-rows: auto 1fr auto;
514
+ grid-template-areas: 'heading tools img' 'body body img' 'footer footer img';
515
+ .card-img {
516
+ border-top-left-radius: 0;
517
+ border-top-right-radius: var(--pacem-border-card-radius);
518
+ border-bottom-left-radius: 0;
519
+ border-bottom-right-radius: var(--pacem-border-card-radius);
520
+ }
521
+ .card-ribbon {
522
+ right: calc(2 * var(--pacem-grid-spacing) / 3);
523
+ left: inherit;
524
+ }
525
+ &.card-img-wide {
526
+ grid-template-columns: 1fr auto 50%;
527
+ }
528
+ &.card-img-slim {
529
+ grid-template-columns: 1fr auto 25%;
530
+ }
531
+ }
532
+ }
533
+
534
+ @media (--pacem-hd) {
535
+ .pacem-card:is(.card-hd-left, .card-hd-right) {
536
+ display: grid;
537
+ > .card-ribbon {
538
+ margin: 0;
539
+ grid-area: unset;
540
+ position: absolute;
541
+ left: calc(2 * var(--pacem-grid-spacing) / 3);
542
+ top: calc(2 * var(--pacem-grid-spacing) / 3);
543
+ }
544
+ > .card-heading {
545
+ grid-area: heading;
546
+ text-align: start;
547
+ }
548
+ > .card-body {
549
+ grid-area: body;
550
+ }
551
+ > .card-footer {
552
+ grid-area: footer;
553
+ }
554
+ > .card-img {
555
+ position: relative;
556
+ grid-area: img;
557
+ height: 100%;
558
+ }
559
+ .card-img {
560
+ border-top-left-radius: var(--pacem-border-card-radius);
561
+ border-top-right-radius: 0;
562
+ border-bottom-left-radius: var(--pacem-border-card-radius);
563
+ border-bottom-right-radius: 0;
564
+ }
565
+ :--shadows & .card-img {
566
+ box-shadow: inset calc(var(--pacem-grid-spacing) / -8) 0 var(--pacem-grid-spacing) rgba(0, 0, 0, 0.5);
567
+ }
568
+ .card-heading {
569
+ box-sizing: border-box;
570
+ padding-top: calc(2 * var(--pacem-grid-spacing) / 3);
571
+ height: auto;
572
+ text-align: start;
573
+ }
574
+ :--no-shadows & .card-heading {
575
+ color: inherit;
576
+ text-shadow: none;
577
+ }
578
+ .card-tools {
579
+ grid-area: tools;
580
+ align-self: center;
581
+ }
582
+ }
583
+ .pacem-card.card-hd-left {
584
+ grid-template-columns: 33% 1fr auto;
585
+ grid-template-rows: auto 1fr auto;
586
+ grid-template-areas: 'img heading tools' 'img body body' 'img footer footer';
587
+ .card-img {
588
+ border-top-left-radius: var(--pacem-border-card-radius);
589
+ border-top-right-radius: 0;
590
+ border-bottom-left-radius: var(--pacem-border-card-radius);
591
+ border-bottom-right-radius: 0;
592
+ }
593
+ &.card-img-wide {
594
+ grid-template-columns: 50% 1fr auto;
595
+ }
596
+ &.card-img-slim {
597
+ grid-template-columns: 25% 1fr auto;
598
+ }
599
+ }
600
+ .pacem-card.card-hd-right {
601
+ grid-template-columns: 1fr auto 33%;
602
+ grid-template-rows: auto 1fr auto;
603
+ grid-template-areas: 'heading tools img' 'body body img' 'footer footer img';
604
+ .card-img {
605
+ border-top-left-radius: 0;
606
+ border-top-right-radius: var(--pacem-border-card-radius);
607
+ border-bottom-left-radius: 0;
608
+ border-bottom-right-radius: var(--pacem-border-card-radius);
609
+ }
610
+ .card-ribbon {
611
+ right: calc(2 * var(--pacem-grid-spacing) / 3);
612
+ left: inherit;
613
+ }
614
+ &.card-img-wide {
615
+ grid-template-columns: 1fr auto 50%;
616
+ }
617
+ &.card-img-slim {
618
+ grid-template-columns: 1fr auto 25%;
619
+ }
620
+ }
621
+ }
622
+
623
+ @media (--pacem-2k) {
624
+ .pacem-card:is(.card-2k-left, .card-2k-right) {
625
+ display: grid;
626
+ > .card-ribbon {
627
+ margin: 0;
628
+ grid-area: unset;
629
+ position: absolute;
630
+ left: calc(2 * var(--pacem-grid-spacing) / 3);
631
+ top: calc(2 * var(--pacem-grid-spacing) / 3);
632
+ }
633
+ > .card-heading {
634
+ grid-area: heading;
635
+ text-align: start;
636
+ }
637
+ > .card-body {
638
+ grid-area: body;
639
+ }
640
+ > .card-footer {
641
+ grid-area: footer;
642
+ }
643
+ > .card-img {
644
+ position: relative;
645
+ grid-area: img;
646
+ height: 100%;
647
+ }
648
+ .card-img {
649
+ border-top-left-radius: var(--pacem-border-card-radius);
650
+ border-top-right-radius: 0;
651
+ border-bottom-left-radius: var(--pacem-border-card-radius);
652
+ border-bottom-right-radius: 0;
653
+ }
654
+ :--shadows & .card-img {
655
+ box-shadow: inset calc(var(--pacem-grid-spacing) / -8) 0 var(--pacem-grid-spacing) rgba(0, 0, 0, 0.5);
656
+ }
657
+ .card-heading {
658
+ box-sizing: border-box;
659
+ padding-top: calc(2 * var(--pacem-grid-spacing) / 3);
660
+ height: auto;
661
+ text-align: start;
662
+ }
663
+ :--no-shadows & .card-heading {
664
+ color: inherit;
665
+ text-shadow: none;
666
+ }
667
+ .card-tools {
668
+ grid-area: tools;
669
+ align-self: center;
670
+ }
671
+ }
672
+ .pacem-card.card-2k-left {
673
+ grid-template-columns: 33% 1fr auto;
674
+ grid-template-rows: auto 1fr auto;
675
+ grid-template-areas: 'img heading tools' 'img body body' 'img footer footer';
676
+ .card-img {
677
+ border-top-left-radius: var(--pacem-border-card-radius);
678
+ border-top-right-radius: 0;
679
+ border-bottom-left-radius: var(--pacem-border-card-radius);
680
+ border-bottom-right-radius: 0;
681
+ }
682
+ &.card-img-wide {
683
+ grid-template-columns: 50% 1fr auto;
684
+ }
685
+ &.card-img-slim {
686
+ grid-template-columns: 25% 1fr auto;
687
+ }
688
+ }
689
+ .pacem-card.card-2k-right {
690
+ grid-template-columns: 1fr auto 33%;
691
+ grid-template-rows: auto 1fr auto;
692
+ grid-template-areas: 'heading tools img' 'body body img' 'footer footer img';
693
+ .card-img {
694
+ border-top-left-radius: 0;
695
+ border-top-right-radius: var(--pacem-border-card-radius);
696
+ border-bottom-left-radius: 0;
697
+ border-bottom-right-radius: var(--pacem-border-card-radius);
698
+ }
699
+ .card-ribbon {
700
+ right: calc(2 * var(--pacem-grid-spacing) / 3);
701
+ left: inherit;
702
+ }
703
+ &.card-img-wide {
704
+ grid-template-columns: 1fr auto 50%;
705
+ }
706
+ &.card-img-slim {
707
+ grid-template-columns: 1fr auto 25%;
708
+ }
709
+ }
710
+ }
711
+
712
+ @media (--pacem-4k) {
713
+ .pacem-card:is(.card-4k-left, .card-4k-right) {
714
+ display: grid;
715
+ > .card-ribbon {
716
+ margin: 0;
717
+ grid-area: unset;
718
+ position: absolute;
719
+ left: calc(2 * var(--pacem-grid-spacing) / 3);
720
+ top: calc(2 * var(--pacem-grid-spacing) / 3);
721
+ }
722
+ > .card-heading {
723
+ grid-area: heading;
724
+ text-align: start;
725
+ }
726
+ > .card-body {
727
+ grid-area: body;
728
+ }
729
+ > .card-footer {
730
+ grid-area: footer;
731
+ }
732
+ > .card-img {
733
+ position: relative;
734
+ grid-area: img;
735
+ height: 100%;
736
+ }
737
+ .card-img {
738
+ border-top-left-radius: var(--pacem-border-card-radius);
739
+ border-top-right-radius: 0;
740
+ border-bottom-left-radius: var(--pacem-border-card-radius);
741
+ border-bottom-right-radius: 0;
742
+ }
743
+ :--shadows & .card-img {
744
+ box-shadow: inset calc(var(--pacem-grid-spacing) / -8) 0 var(--pacem-grid-spacing) rgba(0, 0, 0, 0.5);
745
+ }
746
+ .card-heading {
747
+ box-sizing: border-box;
748
+ padding-top: calc(2 * var(--pacem-grid-spacing) / 3);
749
+ height: auto;
750
+ text-align: start;
751
+ }
752
+ :--no-shadows & .card-heading {
753
+ color: inherit;
754
+ text-shadow: none;
755
+ }
756
+ .card-tools {
757
+ grid-area: tools;
758
+ align-self: center;
759
+ }
760
+ }
761
+ .pacem-card.card-4k-left {
762
+ grid-template-columns: 33% 1fr auto;
763
+ grid-template-rows: auto 1fr auto;
764
+ grid-template-areas: 'img heading tools' 'img body body' 'img footer footer';
765
+ .card-img {
766
+ border-top-left-radius: var(--pacem-border-card-radius);
767
+ border-top-right-radius: 0;
768
+ border-bottom-left-radius: var(--pacem-border-card-radius);
769
+ border-bottom-right-radius: 0;
770
+ }
771
+ &.card-img-wide {
772
+ grid-template-columns: 50% 1fr auto;
773
+ }
774
+ &.card-img-slim {
775
+ grid-template-columns: 25% 1fr auto;
776
+ }
777
+ }
778
+ .pacem-card.card-4k-right {
779
+ grid-template-columns: 1fr auto 33%;
780
+ grid-template-rows: auto 1fr auto;
781
+ grid-template-areas: 'heading tools img' 'body body img' 'footer footer img';
782
+ .card-img {
783
+ border-top-left-radius: 0;
784
+ border-top-right-radius: var(--pacem-border-card-radius);
785
+ border-bottom-left-radius: 0;
786
+ border-bottom-right-radius: var(--pacem-border-card-radius);
787
+ }
788
+ .card-ribbon {
789
+ right: calc(2 * var(--pacem-grid-spacing) / 3);
790
+ left: inherit;
791
+ }
792
+ &.card-img-wide {
793
+ grid-template-columns: 1fr auto 50%;
794
+ }
795
+ &.card-img-slim {
796
+ grid-template-columns: 1fr auto 25%;
797
+ }
798
+ }
799
+ }
800
+
801
+ @media (orientation: portrait) {
802
+ .pacem-card:is(.card-v-left, .card-v-right) {
803
+ display: grid;
804
+ > .card-ribbon {
805
+ margin: 0;
806
+ grid-area: unset;
807
+ position: absolute;
808
+ left: calc(2 * var(--pacem-grid-spacing) / 3);
809
+ top: calc(2 * var(--pacem-grid-spacing) / 3);
810
+ }
811
+ > .card-heading {
812
+ grid-area: heading;
813
+ text-align: start;
814
+ }
815
+ > .card-body {
816
+ grid-area: body;
817
+ }
818
+ > .card-footer {
819
+ grid-area: footer;
820
+ }
821
+ > .card-img {
822
+ position: relative;
823
+ grid-area: img;
824
+ height: 100%;
825
+ }
826
+ .card-img {
827
+ border-top-left-radius: var(--pacem-border-card-radius);
828
+ border-top-right-radius: 0;
829
+ border-bottom-left-radius: var(--pacem-border-card-radius);
830
+ border-bottom-right-radius: 0;
831
+ }
832
+ :--shadows & .card-img {
833
+ box-shadow: inset calc(var(--pacem-grid-spacing) / -8) 0 var(--pacem-grid-spacing) rgba(0, 0, 0, 0.5);
834
+ }
835
+ .card-heading {
836
+ box-sizing: border-box;
837
+ padding-top: calc(2 * var(--pacem-grid-spacing) / 3);
838
+ height: auto;
839
+ text-align: start;
840
+ }
841
+ :--no-shadows & .card-heading {
842
+ color: inherit;
843
+ text-shadow: none;
844
+ }
845
+ .card-tools {
846
+ grid-area: tools;
847
+ align-self: center;
848
+ }
849
+ }
850
+ .pacem-card.card-v-left {
851
+ grid-template-columns: 33% 1fr auto;
852
+ grid-template-rows: auto 1fr auto;
853
+ grid-template-areas: 'img heading tools' 'img body body' 'img footer footer';
854
+ .card-img {
855
+ border-top-left-radius: var(--pacem-border-card-radius);
856
+ border-top-right-radius: 0;
857
+ border-bottom-left-radius: var(--pacem-border-card-radius);
858
+ border-bottom-right-radius: 0;
859
+ }
860
+ &.card-img-wide {
861
+ grid-template-columns: 50% 1fr auto;
862
+ }
863
+ &.card-img-slim {
864
+ grid-template-columns: 25% 1fr auto;
865
+ }
866
+ }
867
+ .pacem-card.card-v-right {
868
+ grid-template-columns: 1fr auto 33%;
869
+ grid-template-rows: auto 1fr auto;
870
+ grid-template-areas: 'heading tools img' 'body body img' 'footer footer img';
871
+ .card-img {
872
+ border-top-left-radius: 0;
873
+ border-top-right-radius: var(--pacem-border-card-radius);
874
+ border-bottom-left-radius: 0;
875
+ border-bottom-right-radius: var(--pacem-border-card-radius);
876
+ }
877
+ .card-ribbon {
878
+ right: calc(2 * var(--pacem-grid-spacing) / 3);
879
+ left: inherit;
880
+ }
881
+ &.card-img-wide {
882
+ grid-template-columns: 1fr auto 50%;
883
+ }
884
+ &.card-img-slim {
885
+ grid-template-columns: 1fr auto 25%;
886
+ }
887
+ }
888
+ }