@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/borders.css ADDED
@@ -0,0 +1,403 @@
1
+ /* Generated by theme/css/tools/generate.ts: do not edit, edit the generator instead. */
2
+ .border-solid,
3
+ .border-double,
4
+ .border-dashed,
5
+ .border-dotted {
6
+ &.border-size-1 {
7
+ border-width: var(--pacem-size-1);
8
+ }
9
+ &.border-size--1 {
10
+ border-width: var(--pacem-size--1);
11
+ }
12
+ &.border-size-2 {
13
+ border-width: var(--pacem-size-2);
14
+ }
15
+ &.border-size--2 {
16
+ border-width: var(--pacem-size--2);
17
+ }
18
+ &.border-size-3 {
19
+ border-width: var(--pacem-size-3);
20
+ }
21
+ &.border-size--3 {
22
+ border-width: var(--pacem-size--3);
23
+ }
24
+ &.border-size-4 {
25
+ border-width: var(--pacem-size-4);
26
+ }
27
+ &.border-size--4 {
28
+ border-width: var(--pacem-size--4);
29
+ }
30
+ &.border-size-5 {
31
+ border-width: var(--pacem-size-5);
32
+ }
33
+ &.border-size--5 {
34
+ border-width: var(--pacem-size--5);
35
+ }
36
+ &.border-size-6 {
37
+ border-width: var(--pacem-size-6);
38
+ }
39
+ &.border-size--6 {
40
+ border-width: var(--pacem-size--6);
41
+ }
42
+ &.border-size-7 {
43
+ border-width: var(--pacem-size-7);
44
+ }
45
+ &.border-size--7 {
46
+ border-width: var(--pacem-size--7);
47
+ }
48
+ &.border-size-8 {
49
+ border-width: var(--pacem-size-8);
50
+ }
51
+ &.border-size--8 {
52
+ border-width: var(--pacem-size--8);
53
+ }
54
+ &.border-size-9 {
55
+ border-width: var(--pacem-size-9);
56
+ }
57
+ &.border-size--9 {
58
+ border-width: var(--pacem-size--9);
59
+ }
60
+ &.border-size-10 {
61
+ border-width: var(--pacem-size-10);
62
+ }
63
+ &.border-size--10 {
64
+ border-width: var(--pacem-size--10);
65
+ }
66
+ &.border-size-11 {
67
+ border-width: var(--pacem-size-11);
68
+ }
69
+ &.border-size--11 {
70
+ border-width: var(--pacem-size--11);
71
+ }
72
+ &.border-size-12 {
73
+ border-width: var(--pacem-size-12);
74
+ }
75
+ &.border-size--12 {
76
+ border-width: var(--pacem-size--12);
77
+ }
78
+ &.border-root {
79
+ border-color: var(--pacem-color-root);
80
+ }
81
+ &.border-root-container {
82
+ border-color: var(--pacem-color-root-container);
83
+ }
84
+ &.border-root-container-inverse {
85
+ border-color: var(--pacem-color-root-container-inverse);
86
+ }
87
+ &.border-background {
88
+ border-color: var(--pacem-color-background);
89
+ }
90
+ &.border-background-container {
91
+ border-color: var(--pacem-color-background-container);
92
+ }
93
+ &.border-background-container-inverse {
94
+ border-color: var(--pacem-color-background-container-inverse);
95
+ }
96
+ &.border-default {
97
+ border-color: var(--pacem-color-default);
98
+ }
99
+ &.border-default-container {
100
+ border-color: var(--pacem-color-default-container);
101
+ }
102
+ &.border-default-container-inverse {
103
+ border-color: var(--pacem-color-default-container-inverse);
104
+ }
105
+ &.border-invert {
106
+ border-color: var(--pacem-color-invert);
107
+ }
108
+ &.border-invert-container {
109
+ border-color: var(--pacem-color-invert-container);
110
+ }
111
+ &.border-invert-container-inverse {
112
+ border-color: var(--pacem-color-invert-container-inverse);
113
+ }
114
+ &.border-primary {
115
+ border-color: var(--pacem-color-primary);
116
+ }
117
+ &.border-primary-container {
118
+ border-color: var(--pacem-color-primary-container);
119
+ }
120
+ &.border-primary-container-inverse {
121
+ border-color: var(--pacem-color-primary-container-inverse);
122
+ }
123
+ &.border-secondary {
124
+ border-color: var(--pacem-color-secondary);
125
+ }
126
+ &.border-secondary-container {
127
+ border-color: var(--pacem-color-secondary-container);
128
+ }
129
+ &.border-secondary-container-inverse {
130
+ border-color: var(--pacem-color-secondary-container-inverse);
131
+ }
132
+ &.border-accent {
133
+ border-color: var(--pacem-color-accent);
134
+ }
135
+ &.border-accent-container {
136
+ border-color: var(--pacem-color-accent-container);
137
+ }
138
+ &.border-accent-container-inverse {
139
+ border-color: var(--pacem-color-accent-container-inverse);
140
+ }
141
+ &.border-info {
142
+ border-color: var(--pacem-color-info);
143
+ }
144
+ &.border-info-container {
145
+ border-color: var(--pacem-color-info-container);
146
+ }
147
+ &.border-info-container-inverse {
148
+ border-color: var(--pacem-color-info-container-inverse);
149
+ }
150
+ &.border-success {
151
+ border-color: var(--pacem-color-success);
152
+ }
153
+ &.border-success-container {
154
+ border-color: var(--pacem-color-success-container);
155
+ }
156
+ &.border-success-container-inverse {
157
+ border-color: var(--pacem-color-success-container-inverse);
158
+ }
159
+ &.border-warning {
160
+ border-color: var(--pacem-color-warning);
161
+ }
162
+ &.border-warning-container {
163
+ border-color: var(--pacem-color-warning-container);
164
+ }
165
+ &.border-warning-container-inverse {
166
+ border-color: var(--pacem-color-warning-container-inverse);
167
+ }
168
+ &.border-danger {
169
+ border-color: var(--pacem-color-danger);
170
+ }
171
+ &.border-danger-container {
172
+ border-color: var(--pacem-color-danger-container);
173
+ }
174
+ &.border-danger-container-inverse {
175
+ border-color: var(--pacem-color-danger-container-inverse);
176
+ }
177
+ &.border-error {
178
+ border-color: var(--pacem-color-error);
179
+ }
180
+ &.border-error-container {
181
+ border-color: var(--pacem-color-error-container);
182
+ }
183
+ &.border-error-container-inverse {
184
+ border-color: var(--pacem-color-error-container-inverse);
185
+ }
186
+ &.border-disabled {
187
+ border-color: var(--pacem-color-disabled);
188
+ }
189
+ &.border-disabled-container {
190
+ border-color: var(--pacem-color-disabled-container);
191
+ }
192
+ &.border-disabled-container-inverse {
193
+ border-color: var(--pacem-color-disabled-container-inverse);
194
+ }
195
+ &.border-green {
196
+ border-color: var(--pacem-color-green);
197
+ }
198
+ &.border-green-container {
199
+ border-color: var(--pacem-color-green-container);
200
+ }
201
+ &.border-green-container-inverse {
202
+ border-color: var(--pacem-color-green-container-inverse);
203
+ }
204
+ &.border-yellow {
205
+ border-color: var(--pacem-color-yellow);
206
+ }
207
+ &.border-yellow-container {
208
+ border-color: var(--pacem-color-yellow-container);
209
+ }
210
+ &.border-yellow-container-inverse {
211
+ border-color: var(--pacem-color-yellow-container-inverse);
212
+ }
213
+ &.border-brown {
214
+ border-color: var(--pacem-color-brown);
215
+ }
216
+ &.border-brown-container {
217
+ border-color: var(--pacem-color-brown-container);
218
+ }
219
+ &.border-brown-container-inverse {
220
+ border-color: var(--pacem-color-brown-container-inverse);
221
+ }
222
+ &.border-red {
223
+ border-color: var(--pacem-color-red);
224
+ }
225
+ &.border-red-container {
226
+ border-color: var(--pacem-color-red-container);
227
+ }
228
+ &.border-red-container-inverse {
229
+ border-color: var(--pacem-color-red-container-inverse);
230
+ }
231
+ &.border-pink {
232
+ border-color: var(--pacem-color-pink);
233
+ }
234
+ &.border-pink-container {
235
+ border-color: var(--pacem-color-pink-container);
236
+ }
237
+ &.border-pink-container-inverse {
238
+ border-color: var(--pacem-color-pink-container-inverse);
239
+ }
240
+ &.border-blue {
241
+ border-color: var(--pacem-color-blue);
242
+ }
243
+ &.border-blue-container {
244
+ border-color: var(--pacem-color-blue-container);
245
+ }
246
+ &.border-blue-container-inverse {
247
+ border-color: var(--pacem-color-blue-container-inverse);
248
+ }
249
+ &.border-orange {
250
+ border-color: var(--pacem-color-orange);
251
+ }
252
+ &.border-orange-container {
253
+ border-color: var(--pacem-color-orange-container);
254
+ }
255
+ &.border-orange-container-inverse {
256
+ border-color: var(--pacem-color-orange-container-inverse);
257
+ }
258
+ &.border-purple {
259
+ border-color: var(--pacem-color-purple);
260
+ }
261
+ &.border-purple-container {
262
+ border-color: var(--pacem-color-purple-container);
263
+ }
264
+ &.border-purple-container-inverse {
265
+ border-color: var(--pacem-color-purple-container-inverse);
266
+ }
267
+ &.border-teal {
268
+ border-color: var(--pacem-color-teal);
269
+ }
270
+ &.border-teal-container {
271
+ border-color: var(--pacem-color-teal-container);
272
+ }
273
+ &.border-teal-container-inverse {
274
+ border-color: var(--pacem-color-teal-container-inverse);
275
+ }
276
+ &.border-gray {
277
+ border-color: var(--pacem-color-gray);
278
+ }
279
+ &.border-gray-container {
280
+ border-color: var(--pacem-color-gray-container);
281
+ }
282
+ &.border-gray-container-inverse {
283
+ border-color: var(--pacem-color-gray-container-inverse);
284
+ }
285
+ }
286
+
287
+ .border-radius-0,
288
+ .border-radius--0 {
289
+ border-radius: 0;
290
+ }
291
+
292
+ .border-size-0,
293
+ .border-size--0 {
294
+ border-width: 0;
295
+ }
296
+
297
+ .border-round.border-radius--1,
298
+ .border-radius--1 {
299
+ border-radius: var(--pacem-size--1);
300
+ }
301
+ .border-round.border-radius-1,
302
+ .border-radius-1 {
303
+ border-radius: var(--pacem-size-1);
304
+ }
305
+
306
+ .border-round.border-radius--2,
307
+ .border-radius--2 {
308
+ border-radius: var(--pacem-size--2);
309
+ }
310
+ .border-round.border-radius-2,
311
+ .border-radius-2 {
312
+ border-radius: var(--pacem-size-2);
313
+ }
314
+
315
+ .border-round.border-radius--3,
316
+ .border-radius--3 {
317
+ border-radius: var(--pacem-size--3);
318
+ }
319
+ .border-round.border-radius-3,
320
+ .border-radius-3 {
321
+ border-radius: var(--pacem-size-3);
322
+ }
323
+
324
+ .border-round.border-radius--4,
325
+ .border-radius--4 {
326
+ border-radius: var(--pacem-size--4);
327
+ }
328
+ .border-round.border-radius-4,
329
+ .border-radius-4 {
330
+ border-radius: var(--pacem-size-4);
331
+ }
332
+
333
+ .border-round.border-radius--5,
334
+ .border-radius--5 {
335
+ border-radius: var(--pacem-size--5);
336
+ }
337
+ .border-round.border-radius-5,
338
+ .border-radius-5 {
339
+ border-radius: var(--pacem-size-5);
340
+ }
341
+
342
+ .border-round.border-radius--6,
343
+ .border-radius--6 {
344
+ border-radius: var(--pacem-size--6);
345
+ }
346
+ .border-round.border-radius-6,
347
+ .border-radius-6 {
348
+ border-radius: var(--pacem-size-6);
349
+ }
350
+
351
+ .border-round.border-radius--7,
352
+ .border-radius--7 {
353
+ border-radius: var(--pacem-size--7);
354
+ }
355
+ .border-round.border-radius-7,
356
+ .border-radius-7 {
357
+ border-radius: var(--pacem-size-7);
358
+ }
359
+
360
+ .border-round.border-radius--8,
361
+ .border-radius--8 {
362
+ border-radius: var(--pacem-size--8);
363
+ }
364
+ .border-round.border-radius-8,
365
+ .border-radius-8 {
366
+ border-radius: var(--pacem-size-8);
367
+ }
368
+
369
+ .border-round.border-radius--9,
370
+ .border-radius--9 {
371
+ border-radius: var(--pacem-size--9);
372
+ }
373
+ .border-round.border-radius-9,
374
+ .border-radius-9 {
375
+ border-radius: var(--pacem-size-9);
376
+ }
377
+
378
+ .border-round.border-radius--10,
379
+ .border-radius--10 {
380
+ border-radius: var(--pacem-size--10);
381
+ }
382
+ .border-round.border-radius-10,
383
+ .border-radius-10 {
384
+ border-radius: var(--pacem-size-10);
385
+ }
386
+
387
+ .border-round.border-radius--11,
388
+ .border-radius--11 {
389
+ border-radius: var(--pacem-size--11);
390
+ }
391
+ .border-round.border-radius-11,
392
+ .border-radius-11 {
393
+ border-radius: var(--pacem-size-11);
394
+ }
395
+
396
+ .border-round.border-radius--12,
397
+ .border-radius--12 {
398
+ border-radius: var(--pacem-size--12);
399
+ }
400
+ .border-round.border-radius-12,
401
+ .border-radius-12 {
402
+ border-radius: var(--pacem-size-12);
403
+ }
package/src/layout/generated/card-ribbon.css ADDED
@@ -0,0 +1,94 @@
1
+ /* Generated by theme/css/tools/generate.ts: do not edit, edit the generator instead. */
2
+ .pacem-card > .card-ribbon {
3
+ width: calc(var(--pacem-grid-cell) + var(--pacem-grid-spacing) * 2 / 3);
4
+ &.ribbon-border,
5
+ &.border {
6
+ border: round(down, calc(calc(var(--pacem-grid-cell) + var(--pacem-grid-spacing) * 2 / 3) / 11.5), 1px) solid rgba(255, 255, 255, 0.5);
7
+ }
8
+ &.ribbon-rise,
9
+ &.rise {
10
+ box-shadow: 0 2px round(down, calc(calc(var(--pacem-grid-cell) + var(--pacem-grid-spacing) * 2 / 3) / 11.5), 1px) rgba(0, 0, 0, .5);
11
+ :--gradients &.ribbon-border,
12
+ :--gradients &.border {
13
+ box-shadow: 0 2px round(down, calc(calc(var(--pacem-grid-cell) + var(--pacem-grid-spacing) * 2 / 3) / 11.5), 1px) rgba(0, 0, 0, .5), inset 0 calc(round(down, calc(calc(var(--pacem-grid-cell) + var(--pacem-grid-spacing) * 2 / 3) / 11.5), 1px) / 2) round(calc(calc(var(--pacem-grid-cell) + var(--pacem-grid-spacing) * 2 / 3) / 4), 1px) rgba(0, 0, 0, 0.5);
14
+ }
15
+ }
16
+ &.ribbon-small,
17
+ &.ribbon-md {
18
+ width: var(--pacem-grid-cell);
19
+ &.ribbon-border,
20
+ &.border {
21
+ border: round(down, calc(var(--pacem-grid-cell) / 11.5), 1px) solid rgba(255, 255, 255, 0.5);
22
+ }
23
+ &.ribbon-rise,
24
+ &.rise {
25
+ box-shadow: 0 2px round(down, calc(var(--pacem-grid-cell) / 11.5), 1px) rgba(0, 0, 0, .5);
26
+ :--gradients &.ribbon-border,
27
+ :--gradients &.border {
28
+ box-shadow: 0 2px round(down, calc(var(--pacem-grid-cell) / 11.5), 1px) rgba(0, 0, 0, .5), inset 0 calc(round(down, calc(var(--pacem-grid-cell) / 11.5), 1px) / 2) round(calc(var(--pacem-grid-cell) / 4), 1px) rgba(0, 0, 0, 0.5);
29
+ }
30
+ }
31
+ }
32
+ &.ribbon-smaller,
33
+ &.ribbon-sm {
34
+ width: calc(var(--pacem-grid-spacing) * 2);
35
+ &.ribbon-border,
36
+ &.border {
37
+ border: round(down, calc(calc(var(--pacem-grid-spacing) * 2) / 11.5), 1px) solid rgba(255, 255, 255, 0.5);
38
+ }
39
+ &.ribbon-rise,
40
+ &.rise {
41
+ box-shadow: 0 2px round(down, calc(calc(var(--pacem-grid-spacing) * 2) / 11.5), 1px) rgba(0, 0, 0, .5);
42
+ :--gradients &.ribbon-border,
43
+ :--gradients &.border {
44
+ box-shadow: 0 2px round(down, calc(calc(var(--pacem-grid-spacing) * 2) / 11.5), 1px) rgba(0, 0, 0, .5), inset 0 calc(round(down, calc(calc(var(--pacem-grid-spacing) * 2) / 11.5), 1px) / 2) round(calc(calc(var(--pacem-grid-spacing) * 2) / 4), 1px) rgba(0, 0, 0, 0.5);
45
+ }
46
+ }
47
+ }
48
+ &.ribbon-tiny,
49
+ &.ribbon-xs {
50
+ width: var(--pacem-grid-spacing);
51
+ &.ribbon-border,
52
+ &.border {
53
+ border: round(down, calc(var(--pacem-grid-spacing) / 11.5), 1px) solid rgba(255, 255, 255, 0.5);
54
+ }
55
+ &.ribbon-rise,
56
+ &.rise {
57
+ box-shadow: 0 2px round(down, calc(var(--pacem-grid-spacing) / 11.5), 1px) rgba(0, 0, 0, .5);
58
+ :--gradients &.ribbon-border,
59
+ :--gradients &.border {
60
+ box-shadow: 0 2px round(down, calc(var(--pacem-grid-spacing) / 11.5), 1px) rgba(0, 0, 0, .5), inset 0 calc(round(down, calc(var(--pacem-grid-spacing) / 11.5), 1px) / 2) round(calc(var(--pacem-grid-spacing) / 4), 1px) rgba(0, 0, 0, 0.5);
61
+ }
62
+ }
63
+ }
64
+ &.ribbon-lg {
65
+ width: 128px;
66
+ &.ribbon-border,
67
+ &.border {
68
+ border: round(down, calc(128px / 11.5), 1px) solid rgba(255, 255, 255, 0.5);
69
+ }
70
+ &.ribbon-rise,
71
+ &.rise {
72
+ box-shadow: 0 2px round(down, calc(128px / 11.5), 1px) rgba(0, 0, 0, .5);
73
+ :--gradients &.ribbon-border,
74
+ :--gradients &.border {
75
+ box-shadow: 0 2px round(down, calc(128px / 11.5), 1px) rgba(0, 0, 0, .5), inset 0 calc(round(down, calc(128px / 11.5), 1px) / 2) round(calc(128px / 4), 1px) rgba(0, 0, 0, 0.5);
76
+ }
77
+ }
78
+ }
79
+ &.ribbon-xl {
80
+ width: 192px;
81
+ &.ribbon-border,
82
+ &.border {
83
+ border: round(down, calc(192px / 11.5), 1px) solid rgba(255, 255, 255, 0.5);
84
+ }
85
+ &.ribbon-rise,
86
+ &.rise {
87
+ box-shadow: 0 2px round(down, calc(192px / 11.5), 1px) rgba(0, 0, 0, .5);
88
+ :--gradients &.ribbon-border,
89
+ :--gradients &.border {
90
+ box-shadow: 0 2px round(down, calc(192px / 11.5), 1px) rgba(0, 0, 0, .5), inset 0 calc(round(down, calc(192px / 11.5), 1px) / 2) round(calc(192px / 4), 1px) rgba(0, 0, 0, 0.5);
91
+ }
92
+ }
93
+ }
94
+ }