@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/layout-stretch.css ADDED
@@ -0,0 +1,132 @@
1
+ /* Generated by theme/css/tools/generate.ts: do not edit, edit the generator instead. */
2
+ .pacem-body {
3
+ &[footer] .pacem-stretch {
4
+ min-height: calc(100vh - (var(--pacem-layout-footer-height)));
5
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
6
+ &.stretch-strict {
7
+ height: calc(100vh - (var(--pacem-layout-footer-height)));
8
+ }
9
+ }
10
+ &[bigfooter] .pacem-stretch {
11
+ min-height: calc(100vh - (var(--pacem-layout-bigfooter-height)));
12
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
13
+ &.stretch-strict {
14
+ height: calc(100vh - (var(--pacem-layout-bigfooter-height)));
15
+ }
16
+ }
17
+ &[header] {
18
+ & .pacem-stretch {
19
+ min-height: calc(100vh - (var(--pacem-layout-header-height)));
20
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
21
+ &.stretch-strict {
22
+ height: calc(100vh - (var(--pacem-layout-header-height)));
23
+ }
24
+ }
25
+ &[footer] .pacem-stretch {
26
+ min-height: calc(100vh - (var(--pacem-layout-header-height) + var(--pacem-layout-footer-height)));
27
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
28
+ &.stretch-strict {
29
+ height: calc(100vh - (var(--pacem-layout-header-height) + var(--pacem-layout-footer-height)));
30
+ }
31
+ }
32
+ &[bigfooter] .pacem-stretch {
33
+ min-height: calc(100vh - (var(--pacem-layout-header-height) + var(--pacem-layout-bigfooter-height)));
34
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
35
+ &.stretch-strict {
36
+ height: calc(100vh - (var(--pacem-layout-header-height) + var(--pacem-layout-bigfooter-height)));
37
+ }
38
+ }
39
+ }
40
+ &[headbar], &[footbar], &[headbar-prepend], &[footbar-append] {
41
+ & .pacem-stretch {
42
+ min-height: calc(100vh - (var(--pacem-layout-toolbar-height)));
43
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
44
+ &.stretch-strict {
45
+ height: calc(100vh - (var(--pacem-layout-toolbar-height)));
46
+ }
47
+ }
48
+ &[footer] .pacem-stretch {
49
+ min-height: calc(100vh - (var(--pacem-layout-toolbar-height) + var(--pacem-layout-footer-height)));
50
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
51
+ &.stretch-strict {
52
+ height: calc(100vh - (var(--pacem-layout-toolbar-height) + var(--pacem-layout-footer-height)));
53
+ }
54
+ }
55
+ &[bigfooter] .pacem-stretch {
56
+ min-height: calc(100vh - (var(--pacem-layout-toolbar-height) + var(--pacem-layout-bigfooter-height)));
57
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
58
+ &.stretch-strict {
59
+ height: calc(100vh - (var(--pacem-layout-toolbar-height) + var(--pacem-layout-bigfooter-height)));
60
+ }
61
+ }
62
+ &[header] {
63
+ & .pacem-stretch {
64
+ min-height: calc(100vh - (var(--pacem-layout-toolbar-height) + var(--pacem-layout-toolbar-height)));
65
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
66
+ &.stretch-strict {
67
+ height: calc(100vh - (var(--pacem-layout-toolbar-height) + var(--pacem-layout-toolbar-height)));
68
+ }
69
+ }
70
+ &[footer] .pacem-stretch {
71
+ min-height: calc(100vh - (var(--pacem-layout-toolbar-height) + var(--pacem-layout-toolbar-height) + var(--pacem-layout-footer-height)));
72
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
73
+ &.stretch-strict {
74
+ height: calc(100vh - (var(--pacem-layout-toolbar-height) + var(--pacem-layout-toolbar-height) + var(--pacem-layout-footer-height)));
75
+ }
76
+ }
77
+ &[bigfooter] .pacem-stretch {
78
+ min-height: calc(100vh - (var(--pacem-layout-toolbar-height) + var(--pacem-layout-toolbar-height) + var(--pacem-layout-bigfooter-height)));
79
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
80
+ &.stretch-strict {
81
+ height: calc(100vh - (var(--pacem-layout-toolbar-height) + var(--pacem-layout-toolbar-height) + var(--pacem-layout-bigfooter-height)));
82
+ }
83
+ }
84
+ }
85
+ }
86
+ &[headbar][footbar], &[headbar-prepend][footbar], &[headbar][footbar-append], &[headbar-prepend][footbar-append] {
87
+ & .pacem-stretch {
88
+ min-height: calc(100vh - (2 * var(--pacem-layout-toolbar-height)));
89
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
90
+ &.stretch-strict {
91
+ height: calc(100vh - (2 * var(--pacem-layout-toolbar-height)));
92
+ }
93
+ }
94
+ &[footer] .pacem-stretch {
95
+ min-height: calc(100vh - (2 * var(--pacem-layout-toolbar-height) + var(--pacem-layout-footer-height)));
96
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
97
+ &.stretch-strict {
98
+ height: calc(100vh - (2 * var(--pacem-layout-toolbar-height) + var(--pacem-layout-footer-height)));
99
+ }
100
+ }
101
+ &[bigfooter] .pacem-stretch {
102
+ min-height: calc(100vh - (2 * var(--pacem-layout-toolbar-height) + var(--pacem-layout-bigfooter-height)));
103
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
104
+ &.stretch-strict {
105
+ height: calc(100vh - (2 * var(--pacem-layout-toolbar-height) + var(--pacem-layout-bigfooter-height)));
106
+ }
107
+ }
108
+ &[header] {
109
+ & .pacem-stretch {
110
+ min-height: calc(100vh - (var(--pacem-layout-toolbar-height) + 2 * var(--pacem-layout-toolbar-height)));
111
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
112
+ &.stretch-strict {
113
+ height: calc(100vh - (var(--pacem-layout-toolbar-height) + 2 * var(--pacem-layout-toolbar-height)));
114
+ }
115
+ }
116
+ &[footer] .pacem-stretch {
117
+ min-height: calc(100vh - (var(--pacem-layout-toolbar-height) + 2 * var(--pacem-layout-toolbar-height) + var(--pacem-layout-footer-height)));
118
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
119
+ &.stretch-strict {
120
+ height: calc(100vh - (var(--pacem-layout-toolbar-height) + 2 * var(--pacem-layout-toolbar-height) + var(--pacem-layout-footer-height)));
121
+ }
122
+ }
123
+ &[bigfooter] .pacem-stretch {
124
+ min-height: calc(100vh - (var(--pacem-layout-toolbar-height) + 2 * var(--pacem-layout-toolbar-height) + var(--pacem-layout-bigfooter-height)));
125
+ margin: calc(-1 * var(--pacem-grid-spacing)) 0;
126
+ &.stretch-strict {
127
+ height: calc(100vh - (var(--pacem-layout-toolbar-height) + 2 * var(--pacem-layout-toolbar-height) + var(--pacem-layout-bigfooter-height)));
128
+ }
129
+ }
130
+ }
131
+ }
132
+ }
package/src/layout/generated/positioning.css ADDED
@@ -0,0 +1,323 @@
1
+ /* Generated by theme/css/tools/generate.ts: do not edit, edit the generator instead. */
2
+ .pacem-body {
3
+ /* bottom */
4
+ &[footbar] .pos-sticky.sticky-bottom {
5
+ bottom: var(--pacem-layout-toolbar-height);
6
+ &.bottom-1 {
7
+ bottom: calc(var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) / 3);
8
+ &.sticky-absolute {
9
+ bottom: calc(var(--pacem-grid-spacing) / 3);
10
+ }
11
+ }
12
+ &.bottom-2 {
13
+ bottom: calc(var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) / 2);
14
+ &.sticky-absolute {
15
+ bottom: calc(var(--pacem-grid-spacing) / 2);
16
+ }
17
+ }
18
+ &.bottom-3 {
19
+ bottom: calc(var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing));
20
+ &.sticky-absolute {
21
+ bottom: var(--pacem-grid-spacing);
22
+ }
23
+ }
24
+ &.bottom-4 {
25
+ bottom: calc(var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 1.3333);
26
+ &.sticky-absolute {
27
+ bottom: calc(var(--pacem-grid-spacing) * 1.3333);
28
+ }
29
+ }
30
+ &.bottom-5 {
31
+ bottom: calc(var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 1.5);
32
+ &.sticky-absolute {
33
+ bottom: calc(var(--pacem-grid-spacing) * 1.5);
34
+ }
35
+ }
36
+ &.bottom-6 {
37
+ bottom: calc(var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 2);
38
+ &.sticky-absolute {
39
+ bottom: calc(var(--pacem-grid-spacing) * 2);
40
+ }
41
+ }
42
+ }
43
+ &[footer] .pos-sticky.sticky-bottom {
44
+ bottom: var(--pacem-layout-footer-height);
45
+ &.bottom-1 {
46
+ bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-grid-spacing) / 3);
47
+ &.sticky-absolute {
48
+ bottom: calc(var(--pacem-grid-spacing) / 3);
49
+ }
50
+ }
51
+ &.bottom-2 {
52
+ bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-grid-spacing) / 2);
53
+ &.sticky-absolute {
54
+ bottom: calc(var(--pacem-grid-spacing) / 2);
55
+ }
56
+ }
57
+ &.bottom-3 {
58
+ bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-grid-spacing));
59
+ &.sticky-absolute {
60
+ bottom: var(--pacem-grid-spacing);
61
+ }
62
+ }
63
+ &.bottom-4 {
64
+ bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-grid-spacing) * 1.3333);
65
+ &.sticky-absolute {
66
+ bottom: calc(var(--pacem-grid-spacing) * 1.3333);
67
+ }
68
+ }
69
+ &.bottom-5 {
70
+ bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-grid-spacing) * 1.5);
71
+ &.sticky-absolute {
72
+ bottom: calc(var(--pacem-grid-spacing) * 1.5);
73
+ }
74
+ }
75
+ &.bottom-6 {
76
+ bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-grid-spacing) * 2);
77
+ &.sticky-absolute {
78
+ bottom: calc(var(--pacem-grid-spacing) * 2);
79
+ }
80
+ }
81
+ }
82
+ &[bigfooter] .pos-sticky.sticky-bottom {
83
+ bottom: var(--pacem-layout-bigfooter-height);
84
+ &.bottom-1 {
85
+ bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-grid-spacing) / 3);
86
+ &.sticky-absolute {
87
+ bottom: calc(var(--pacem-grid-spacing) / 3);
88
+ }
89
+ }
90
+ &.bottom-2 {
91
+ bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-grid-spacing) / 2);
92
+ &.sticky-absolute {
93
+ bottom: calc(var(--pacem-grid-spacing) / 2);
94
+ }
95
+ }
96
+ &.bottom-3 {
97
+ bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-grid-spacing));
98
+ &.sticky-absolute {
99
+ bottom: var(--pacem-grid-spacing);
100
+ }
101
+ }
102
+ &.bottom-4 {
103
+ bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-grid-spacing) * 1.3333);
104
+ &.sticky-absolute {
105
+ bottom: calc(var(--pacem-grid-spacing) * 1.3333);
106
+ }
107
+ }
108
+ &.bottom-5 {
109
+ bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-grid-spacing) * 1.5);
110
+ &.sticky-absolute {
111
+ bottom: calc(var(--pacem-grid-spacing) * 1.5);
112
+ }
113
+ }
114
+ &.bottom-6 {
115
+ bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-grid-spacing) * 2);
116
+ &.sticky-absolute {
117
+ bottom: calc(var(--pacem-grid-spacing) * 2);
118
+ }
119
+ }
120
+ }
121
+ &[footer][footbar] .pos-sticky.sticky-bottom {
122
+ bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-layout-toolbar-height));
123
+ &.bottom-1 {
124
+ bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) / 3);
125
+ &.sticky-absolute {
126
+ bottom: calc(var(--pacem-grid-spacing) / 3);
127
+ }
128
+ }
129
+ &.bottom-2 {
130
+ bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) / 2);
131
+ &.sticky-absolute {
132
+ bottom: calc(var(--pacem-grid-spacing) / 2);
133
+ }
134
+ }
135
+ &.bottom-3 {
136
+ bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing));
137
+ &.sticky-absolute {
138
+ bottom: var(--pacem-grid-spacing);
139
+ }
140
+ }
141
+ &.bottom-4 {
142
+ bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 1.3333);
143
+ &.sticky-absolute {
144
+ bottom: calc(var(--pacem-grid-spacing) * 1.3333);
145
+ }
146
+ }
147
+ &.bottom-5 {
148
+ bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 1.5);
149
+ &.sticky-absolute {
150
+ bottom: calc(var(--pacem-grid-spacing) * 1.5);
151
+ }
152
+ }
153
+ &.bottom-6 {
154
+ bottom: calc(var(--pacem-layout-footer-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 2);
155
+ &.sticky-absolute {
156
+ bottom: calc(var(--pacem-grid-spacing) * 2);
157
+ }
158
+ }
159
+ }
160
+ &[bigfooter][footbar] .pos-sticky.sticky-bottom {
161
+ bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-layout-toolbar-height));
162
+ &.bottom-1 {
163
+ bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) / 3);
164
+ &.sticky-absolute {
165
+ bottom: calc(var(--pacem-grid-spacing) / 3);
166
+ }
167
+ }
168
+ &.bottom-2 {
169
+ bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) / 2);
170
+ &.sticky-absolute {
171
+ bottom: calc(var(--pacem-grid-spacing) / 2);
172
+ }
173
+ }
174
+ &.bottom-3 {
175
+ bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing));
176
+ &.sticky-absolute {
177
+ bottom: var(--pacem-grid-spacing);
178
+ }
179
+ }
180
+ &.bottom-4 {
181
+ bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 1.3333);
182
+ &.sticky-absolute {
183
+ bottom: calc(var(--pacem-grid-spacing) * 1.3333);
184
+ }
185
+ }
186
+ &.bottom-5 {
187
+ bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 1.5);
188
+ &.sticky-absolute {
189
+ bottom: calc(var(--pacem-grid-spacing) * 1.5);
190
+ }
191
+ }
192
+ &.bottom-6 {
193
+ bottom: calc(var(--pacem-layout-bigfooter-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 2);
194
+ &.sticky-absolute {
195
+ bottom: calc(var(--pacem-grid-spacing) * 2);
196
+ }
197
+ }
198
+ }
199
+ .pos-sticky.sticky-bottom.bottom-0 {
200
+ bottom: 0;
201
+ }
202
+ /* top */
203
+ &[headbar] .pos-sticky.sticky-top {
204
+ top: var(--pacem-layout-toolbar-height);
205
+ &.top-1 {
206
+ top: calc(var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) / 3);
207
+ &.sticky-absolute {
208
+ top: calc(var(--pacem-grid-spacing) / 3);
209
+ }
210
+ }
211
+ &.top-2 {
212
+ top: calc(var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) / 2);
213
+ &.sticky-absolute {
214
+ top: calc(var(--pacem-grid-spacing) / 2);
215
+ }
216
+ }
217
+ &.top-3 {
218
+ top: calc(var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing));
219
+ &.sticky-absolute {
220
+ top: var(--pacem-grid-spacing);
221
+ }
222
+ }
223
+ &.top-4 {
224
+ top: calc(var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 1.3333);
225
+ &.sticky-absolute {
226
+ top: calc(var(--pacem-grid-spacing) * 1.3333);
227
+ }
228
+ }
229
+ &.top-5 {
230
+ top: calc(var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 1.5);
231
+ &.sticky-absolute {
232
+ top: calc(var(--pacem-grid-spacing) * 1.5);
233
+ }
234
+ }
235
+ &.top-6 {
236
+ top: calc(var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 2);
237
+ &.sticky-absolute {
238
+ top: calc(var(--pacem-grid-spacing) * 2);
239
+ }
240
+ }
241
+ }
242
+ &[header] .pos-sticky.sticky-top {
243
+ top: var(--pacem-layout-header-height);
244
+ &.top-1 {
245
+ top: calc(var(--pacem-layout-header-height) + var(--pacem-grid-spacing) / 3);
246
+ &.sticky-absolute {
247
+ top: calc(var(--pacem-grid-spacing) / 3);
248
+ }
249
+ }
250
+ &.top-2 {
251
+ top: calc(var(--pacem-layout-header-height) + var(--pacem-grid-spacing) / 2);
252
+ &.sticky-absolute {
253
+ top: calc(var(--pacem-grid-spacing) / 2);
254
+ }
255
+ }
256
+ &.top-3 {
257
+ top: calc(var(--pacem-layout-header-height) + var(--pacem-grid-spacing));
258
+ &.sticky-absolute {
259
+ top: var(--pacem-grid-spacing);
260
+ }
261
+ }
262
+ &.top-4 {
263
+ top: calc(var(--pacem-layout-header-height) + var(--pacem-grid-spacing) * 1.3333);
264
+ &.sticky-absolute {
265
+ top: calc(var(--pacem-grid-spacing) * 1.3333);
266
+ }
267
+ }
268
+ &.top-5 {
269
+ top: calc(var(--pacem-layout-header-height) + var(--pacem-grid-spacing) * 1.5);
270
+ &.sticky-absolute {
271
+ top: calc(var(--pacem-grid-spacing) * 1.5);
272
+ }
273
+ }
274
+ &.top-6 {
275
+ top: calc(var(--pacem-layout-header-height) + var(--pacem-grid-spacing) * 2);
276
+ &.sticky-absolute {
277
+ top: calc(var(--pacem-grid-spacing) * 2);
278
+ }
279
+ }
280
+ }
281
+ &[header][headbar] .pos-sticky.sticky-top {
282
+ top: calc(var(--pacem-layout-header-height) + var(--pacem-layout-toolbar-height));
283
+ &.top-1 {
284
+ top: calc(var(--pacem-layout-header-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) / 3);
285
+ &.sticky-absolute {
286
+ top: calc(var(--pacem-grid-spacing) / 3);
287
+ }
288
+ }
289
+ &.top-2 {
290
+ top: calc(var(--pacem-layout-header-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) / 2);
291
+ &.sticky-absolute {
292
+ top: calc(var(--pacem-grid-spacing) / 2);
293
+ }
294
+ }
295
+ &.top-3 {
296
+ top: calc(var(--pacem-layout-header-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing));
297
+ &.sticky-absolute {
298
+ top: var(--pacem-grid-spacing);
299
+ }
300
+ }
301
+ &.top-4 {
302
+ top: calc(var(--pacem-layout-header-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 1.3333);
303
+ &.sticky-absolute {
304
+ top: calc(var(--pacem-grid-spacing) * 1.3333);
305
+ }
306
+ }
307
+ &.top-5 {
308
+ top: calc(var(--pacem-layout-header-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 1.5);
309
+ &.sticky-absolute {
310
+ top: calc(var(--pacem-grid-spacing) * 1.5);
311
+ }
312
+ }
313
+ &.top-6 {
314
+ top: calc(var(--pacem-layout-header-height) + var(--pacem-layout-toolbar-height) + var(--pacem-grid-spacing) * 2);
315
+ &.sticky-absolute {
316
+ top: calc(var(--pacem-grid-spacing) * 2);
317
+ }
318
+ }
319
+ }
320
+ .pos-sticky.sticky-top.top-0 {
321
+ top: 0;
322
+ }
323
+ }