@keenmate/pure-admin-core 1.0.0-rc01

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 (167) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +172 -0
  3. package/dist/css/main.css +11542 -0
  4. package/dist/fonts/Delivery/Delivery_W_Bd.woff2 +0 -0
  5. package/dist/fonts/Delivery/Delivery_W_BdIt.woff2 +0 -0
  6. package/dist/fonts/Delivery/Delivery_W_CdBlk.woff2 +0 -0
  7. package/dist/fonts/Delivery/Delivery_W_CdLt.woff2 +0 -0
  8. package/dist/fonts/Delivery/Delivery_W_It.woff2 +0 -0
  9. package/dist/fonts/Delivery/Delivery_W_Lt.woff2 +0 -0
  10. package/dist/fonts/Delivery/Delivery_W_LtIt.woff2 +0 -0
  11. package/dist/fonts/Delivery/Delivery_W_Rg.woff2 +0 -0
  12. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qVHQ.woff2 +0 -0
  13. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qVHQ.woff2.1 +0 -0
  14. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qVHQ.woff2.2 +0 -0
  15. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qVHQ.woff2 +0 -0
  16. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qVHQ.woff2.1 +0 -0
  17. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qVHQ.woff2.2 +0 -0
  18. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8bH-o.woff2 +0 -0
  19. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8bH-o.woff2.1 +0 -0
  20. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qVHQ.woff2 +0 -0
  21. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qVHQ.woff2.1 +0 -0
  22. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qVHQ.woff2.2 +0 -0
  23. package/dist/fonts/google/6aez4K2oVqwIvtE2H68T.woff2 +0 -0
  24. package/dist/fonts/google/6aez4K2oVqwIvtU2Hw.woff2 +0 -0
  25. package/dist/fonts/google/6aez4K2oVqwIvtY2H68T.woff2 +0 -0
  26. package/dist/fonts/google/6aez4K2oVqwIvtg2H68T.woff2 +0 -0
  27. package/dist/fonts/google/6aez4K2oVqwIvto2H68T.woff2 +0 -0
  28. package/dist/fonts/google/6aez4K2oVqwIvts2H68T.woff2 +0 -0
  29. package/dist/fonts/google/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nejog.woff2 +0 -0
  30. package/dist/fonts/google/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nijogp5.woff2 +0 -0
  31. package/dist/fonts/google/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nmjogp5.woff2 +0 -0
  32. package/dist/fonts/google/PN_xRfK9oXHga0XdZ8g_vT0.woff2 +0 -0
  33. package/dist/fonts/google/PN_xRfK9oXHga0XdZsg_.woff2 +0 -0
  34. package/dist/fonts/google/PN_xRfK9oXHga0XdaMg_vT0.woff2 +0 -0
  35. package/dist/fonts/google/TK3tWkYFABsmjsphPho.woff2 +0 -0
  36. package/dist/fonts/google/TK3tWkYFABsmjspuPho7vA.woff2 +0 -0
  37. package/dist/fonts/google/TK3tWkYFABsmjspvPho7vA.woff2 +0 -0
  38. package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjTYJwQj.woff2 +0 -0
  39. package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjXYJwQj.woff2 +0 -0
  40. package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6Vj_YJwQj.woff2 +0 -0
  41. package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjbYJwQj.woff2 +0 -0
  42. package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjvYJw.woff2 +0 -0
  43. package/dist/fonts/google/fonts-tracklist.txt +48 -0
  44. package/dist/fonts/google/vEFO2_JTCgwQ5ejvMV0O96D01E8J0tJXHKbBjM4.woff2 +0 -0
  45. package/dist/fonts/google/vEFO2_JTCgwQ5ejvMV0O96D01E8J0tJXHKbOjM7sfA.woff2 +0 -0
  46. package/dist/fonts/google/vEFO2_JTCgwQ5ejvMV0O96D01E8J0tJXHKbPjM7sfA.woff2 +0 -0
  47. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfLtrftV.woff2 +0 -0
  48. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfXtrftV.woff2 +0 -0
  49. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfbtrQ.woff2 +0 -0
  50. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfjtrftV.woff2 +0 -0
  51. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfntrftV.woff2 +0 -0
  52. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfrtrftV.woff2 +0 -0
  53. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfvtrftV.woff2 +0 -0
  54. package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_B-bnBeA.woff2 +0 -0
  55. package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_C-bk.woff2 +0 -0
  56. package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_G-bnBeA.woff2 +0 -0
  57. package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_M-bnBeA.woff2 +0 -0
  58. package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_N-bnBeA.woff2 +0 -0
  59. package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_P-bnBeA.woff2 +0 -0
  60. package/package.json +60 -0
  61. package/snippets/alerts.html +281 -0
  62. package/snippets/badges.html +212 -0
  63. package/snippets/buttons.html +287 -0
  64. package/snippets/cards.html +393 -0
  65. package/snippets/checkbox-lists.html +490 -0
  66. package/snippets/code.html +225 -0
  67. package/snippets/command-palette.html +210 -0
  68. package/snippets/comparison.html +428 -0
  69. package/snippets/customization.html +142 -0
  70. package/snippets/forms.html +477 -0
  71. package/snippets/grid.html +338 -0
  72. package/snippets/layout.html +598 -0
  73. package/snippets/lists.html +232 -0
  74. package/snippets/loaders.html +183 -0
  75. package/snippets/manifest.json +388 -0
  76. package/snippets/modal-dialogs.html +411 -0
  77. package/snippets/modals.html +310 -0
  78. package/snippets/popconfirm.html +253 -0
  79. package/snippets/profile.html +264 -0
  80. package/snippets/tables.html +317 -0
  81. package/snippets/tabs.html +930 -0
  82. package/snippets/timeline.html +364 -0
  83. package/snippets/toasts.html +154 -0
  84. package/snippets/tooltips.html +411 -0
  85. package/snippets/typography.html +101 -0
  86. package/snippets/utilities.html +595 -0
  87. package/snippets/virtual-scroll.html +322 -0
  88. package/snippets/web-daterangepicker.html +634 -0
  89. package/snippets/web-multiselect.html +362 -0
  90. package/src/scss/.claude/settings.local.json +11 -0
  91. package/src/scss/_base-css-variables.scss +348 -0
  92. package/src/scss/_core.scss +99 -0
  93. package/src/scss/_fonts.scss +67 -0
  94. package/src/scss/_purecss-grid-responsive.scss +138 -0
  95. package/src/scss/_purecss-grid.scss +58 -0
  96. package/src/scss/_variables.scss +14 -0
  97. package/src/scss/core-components/_alerts.scss +212 -0
  98. package/src/scss/core-components/_badges.scss +16 -0
  99. package/src/scss/core-components/_base.scss +124 -0
  100. package/src/scss/core-components/_buttons.scss +473 -0
  101. package/src/scss/core-components/_cards.scss +285 -0
  102. package/src/scss/core-components/_checkbox-lists.scss +289 -0
  103. package/src/scss/core-components/_code.scss +141 -0
  104. package/src/scss/core-components/_command-palette.scss +518 -0
  105. package/src/scss/core-components/_comparison.scss +172 -0
  106. package/src/scss/core-components/_file-selector.scss +780 -0
  107. package/src/scss/core-components/_forms.scss +16 -0
  108. package/src/scss/core-components/_grid.scss +264 -0
  109. package/src/scss/core-components/_layout.scss +15 -0
  110. package/src/scss/core-components/_lists.scss +211 -0
  111. package/src/scss/core-components/_loaders.scss +277 -0
  112. package/src/scss/core-components/_logic-tree.scss +280 -0
  113. package/src/scss/core-components/_modals.scss +209 -0
  114. package/src/scss/core-components/_notifications.scss +253 -0
  115. package/src/scss/core-components/_pagers.scss +141 -0
  116. package/src/scss/core-components/_popconfirm.scss +170 -0
  117. package/src/scss/core-components/_profile.scss +281 -0
  118. package/src/scss/core-components/_settings-panel.scss +128 -0
  119. package/src/scss/core-components/_statistics.scss +200 -0
  120. package/src/scss/core-components/_tables.scss +555 -0
  121. package/src/scss/core-components/_tabs.scss +438 -0
  122. package/src/scss/core-components/_timeline.scss +589 -0
  123. package/src/scss/core-components/_toasts.scss +281 -0
  124. package/src/scss/core-components/_tooltips.scss +503 -0
  125. package/src/scss/core-components/_utilities.scss +241 -0
  126. package/src/scss/core-components/_web-components-theme.scss +294 -0
  127. package/src/scss/core-components/badges/_badge-base.scss +131 -0
  128. package/src/scss/core-components/badges/_badge-group.scss +25 -0
  129. package/src/scss/core-components/badges/_composite-badge-variants.scss +396 -0
  130. package/src/scss/core-components/badges/_composite-badge.scss +70 -0
  131. package/src/scss/core-components/badges/_index.scss +10 -0
  132. package/src/scss/core-components/badges/_labels.scss +155 -0
  133. package/src/scss/core-components/forms/_checkboxes-radios.scss +205 -0
  134. package/src/scss/core-components/forms/_form-inputs.scss +100 -0
  135. package/src/scss/core-components/forms/_form-layout.scss +66 -0
  136. package/src/scss/core-components/forms/_form-states.scss +89 -0
  137. package/src/scss/core-components/forms/_index.scss +12 -0
  138. package/src/scss/core-components/forms/_input-groups.scss +149 -0
  139. package/src/scss/core-components/forms/_input-wrapper.scss +89 -0
  140. package/src/scss/core-components/forms/_query-editor.scss +313 -0
  141. package/src/scss/core-components/layout/_index.scss +11 -0
  142. package/src/scss/core-components/layout/_layout-container.scss +105 -0
  143. package/src/scss/core-components/layout/_layout-responsive.scss +100 -0
  144. package/src/scss/core-components/layout/_navbar-elements.scss +238 -0
  145. package/src/scss/core-components/layout/_navbar.scss +71 -0
  146. package/src/scss/core-components/layout/_sidebar-states.scss +228 -0
  147. package/src/scss/core-components/layout/_sidebar.scss +177 -0
  148. package/src/scss/main.scss +7 -0
  149. package/src/scss/themes/_dark-base.scss +207 -0
  150. package/src/scss/themes/audi-light.scss +311 -0
  151. package/src/scss/themes/audi.scss +288 -0
  152. package/src/scss/themes/corporate.scss +203 -0
  153. package/src/scss/themes/dark-blue.scss +152 -0
  154. package/src/scss/themes/dark-green.scss +156 -0
  155. package/src/scss/themes/dark-red.scss +160 -0
  156. package/src/scss/themes/dark.scss +145 -0
  157. package/src/scss/themes/express.scss +281 -0
  158. package/src/scss/themes/minimal.scss +121 -0
  159. package/src/scss/utilities.scss +481 -0
  160. package/src/scss/variables/_base.scss +81 -0
  161. package/src/scss/variables/_colors.scss +148 -0
  162. package/src/scss/variables/_components.scss +509 -0
  163. package/src/scss/variables/_index.scss +13 -0
  164. package/src/scss/variables/_layout.scss +65 -0
  165. package/src/scss/variables/_spacing.scss +66 -0
  166. package/src/scss/variables/_system.scss +80 -0
  167. package/src/scss/variables/_typography.scss +37 -0
package/snippets/grid.html ADDED
@@ -0,0 +1,338 @@
1
+ <!-- ================================
2
+ GRID SYSTEM SNIPPETS
3
+ Pure Admin Visual Framework
4
+ Native Flexbox Grid Reference
5
+ ================================ -->
6
+
7
+ <!-- RESPONSIVE BREAKPOINTS -->
8
+ <!--
9
+ sm: 576px
10
+ md: 768px
11
+ lg: 992px
12
+ xl: 1200px
13
+ -->
14
+
15
+
16
+ <!-- FULL WIDTH -->
17
+
18
+ <!-- 100% width -->
19
+ <div class="pa-row">
20
+ <div class="pa-col-100">Full width column</div>
21
+ </div>
22
+
23
+
24
+ <!-- HALVES (50%) -->
25
+
26
+ <!-- Two equal columns -->
27
+ <div class="pa-row">
28
+ <div class="pa-col-50">Half</div>
29
+ <div class="pa-col-50">Half</div>
30
+ </div>
31
+
32
+ <!-- Using fraction alias -->
33
+ <div class="pa-row">
34
+ <div class="pa-col-1-2">Half (fraction)</div>
35
+ <div class="pa-col-1-2">Half (fraction)</div>
36
+ </div>
37
+
38
+
39
+ <!-- THIRDS (33.33%, 66.67%) -->
40
+
41
+ <!-- Three equal columns -->
42
+ <div class="pa-row">
43
+ <div class="pa-col-1-3">Third</div>
44
+ <div class="pa-col-1-3">Third</div>
45
+ <div class="pa-col-1-3">Third</div>
46
+ </div>
47
+
48
+ <!-- Two-thirds + one-third -->
49
+ <div class="pa-row">
50
+ <div class="pa-col-2-3">Two thirds</div>
51
+ <div class="pa-col-1-3">One third</div>
52
+ </div>
53
+
54
+
55
+ <!-- QUARTERS (25%, 75%) -->
56
+
57
+ <!-- Four equal columns -->
58
+ <div class="pa-row">
59
+ <div class="pa-col-25">Quarter</div>
60
+ <div class="pa-col-25">Quarter</div>
61
+ <div class="pa-col-25">Quarter</div>
62
+ <div class="pa-col-25">Quarter</div>
63
+ </div>
64
+
65
+ <!-- Using fraction aliases -->
66
+ <div class="pa-row">
67
+ <div class="pa-col-1-4">Quarter (fraction)</div>
68
+ <div class="pa-col-3-4">Three quarters (fraction)</div>
69
+ </div>
70
+
71
+
72
+ <!-- FIFTHS (20%, 40%, 60%, 80%) -->
73
+
74
+ <!-- Five equal columns -->
75
+ <div class="pa-row">
76
+ <div class="pa-col-20">Fifth</div>
77
+ <div class="pa-col-20">Fifth</div>
78
+ <div class="pa-col-20">Fifth</div>
79
+ <div class="pa-col-20">Fifth</div>
80
+ <div class="pa-col-20">Fifth</div>
81
+ </div>
82
+
83
+ <!-- Using fraction aliases -->
84
+ <div class="pa-row">
85
+ <div class="pa-col-2-5">Two fifths</div>
86
+ <div class="pa-col-3-5">Three fifths</div>
87
+ </div>
88
+
89
+ <div class="pa-row">
90
+ <div class="pa-col-1-5">One fifth</div>
91
+ <div class="pa-col-4-5">Four fifths</div>
92
+ </div>
93
+
94
+
95
+ <!-- SIXTHS (16.67%, 83.33%) -->
96
+
97
+ <!-- Using fraction aliases -->
98
+ <div class="pa-row">
99
+ <div class="pa-col-1-6">One sixth</div>
100
+ <div class="pa-col-5-6">Five sixths</div>
101
+ </div>
102
+
103
+
104
+ <!-- TWELFTHS (8.33%, etc.) -->
105
+
106
+ <!-- Using fraction aliases -->
107
+ <div class="pa-row">
108
+ <div class="pa-col-1-12">1/12</div>
109
+ <div class="pa-col-11-12">11/12</div>
110
+ </div>
111
+
112
+ <div class="pa-row">
113
+ <div class="pa-col-5-12">5/12</div>
114
+ <div class="pa-col-7-12">7/12</div>
115
+ </div>
116
+
117
+
118
+ <!-- 5% INCREMENT COLUMNS -->
119
+
120
+ <!-- 5% increments available: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100 -->
121
+ <div class="pa-row">
122
+ <div class="pa-col-15">15%</div>
123
+ <div class="pa-col-85">85%</div>
124
+ </div>
125
+
126
+ <div class="pa-row">
127
+ <div class="pa-col-35">35%</div>
128
+ <div class="pa-col-65">65%</div>
129
+ </div>
130
+
131
+
132
+ <!-- RESPONSIVE GRID EXAMPLES -->
133
+
134
+ <!-- Mobile: full width, Tablet+: half width -->
135
+ <div class="pa-row">
136
+ <div class="pa-col-100 pa-col-md-50">Responsive column</div>
137
+ <div class="pa-col-100 pa-col-md-50">Responsive column</div>
138
+ </div>
139
+
140
+ <!-- Mobile: full, Small: half, Medium: third, Large: quarter -->
141
+ <div class="pa-row">
142
+ <div class="pa-col-100 pa-col-sm-50 pa-col-md-1-3 pa-col-lg-25">Multi-breakpoint</div>
143
+ <div class="pa-col-100 pa-col-sm-50 pa-col-md-1-3 pa-col-lg-25">Multi-breakpoint</div>
144
+ <div class="pa-col-100 pa-col-sm-50 pa-col-md-1-3 pa-col-lg-25">Multi-breakpoint</div>
145
+ <div class="pa-col-100 pa-col-sm-50 pa-col-md-1-3 pa-col-lg-25">Multi-breakpoint</div>
146
+ </div>
147
+
148
+ <!-- Sidebar + content layout (responsive) -->
149
+ <div class="pa-row">
150
+ <div class="pa-col-100 pa-col-md-25">Sidebar (mobile: full, tablet+: 25%)</div>
151
+ <div class="pa-col-100 pa-col-md-75">Content (mobile: full, tablet+: 75%)</div>
152
+ </div>
153
+
154
+ <!-- Three-column responsive with fractions -->
155
+ <div class="pa-row">
156
+ <div class="pa-col-100 pa-col-sm-50 pa-col-lg-1-3">Column 1</div>
157
+ <div class="pa-col-100 pa-col-sm-50 pa-col-lg-1-3">Column 2</div>
158
+ <div class="pa-col-100 pa-col-sm-50 pa-col-lg-1-3">Column 3</div>
159
+ </div>
160
+
161
+
162
+ <!-- NESTED GRIDS -->
163
+
164
+ <!-- Grid inside grid -->
165
+ <div class="pa-row">
166
+ <div class="pa-col-50">
167
+ <div class="pa-row">
168
+ <div class="pa-col-50">Nested 1</div>
169
+ <div class="pa-col-50">Nested 2</div>
170
+ </div>
171
+ </div>
172
+ <div class="pa-col-50">
173
+ Outer column
174
+ </div>
175
+ </div>
176
+
177
+
178
+ <!-- ROW MODIFIERS -->
179
+
180
+ <!-- No gutter (remove spacing between columns) -->
181
+ <div class="pa-row pa-row--no-gutter">
182
+ <div class="pa-col-50">No gutter</div>
183
+ <div class="pa-col-50">No gutter</div>
184
+ </div>
185
+
186
+ <!-- Center columns -->
187
+ <div class="pa-row pa-row--center">
188
+ <div class="pa-col-1-3">Centered</div>
189
+ </div>
190
+
191
+ <!-- Space between columns -->
192
+ <div class="pa-row pa-row--between">
193
+ <div class="pa-col-25">Left</div>
194
+ <div class="pa-col-25">Right</div>
195
+ </div>
196
+
197
+ <!-- Same height cards -->
198
+ <div class="pa-row pa-row--same-height">
199
+ <div class="pa-col-1-3">
200
+ <div class="pa-card">
201
+ <div class="pa-card__body">Short</div>
202
+ </div>
203
+ </div>
204
+ <div class="pa-col-1-3">
205
+ <div class="pa-card">
206
+ <div class="pa-card__body">
207
+ <p>Tall content</p>
208
+ <p>More content</p>
209
+ <p>Even more</p>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ <div class="pa-col-1-3">
214
+ <div class="pa-card">
215
+ <div class="pa-card__body">Medium</div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Vertical alignment -->
221
+ <div class="pa-row pa-row--top">
222
+ <div class="pa-col-50">Top aligned</div>
223
+ </div>
224
+
225
+ <div class="pa-row pa-row--middle">
226
+ <div class="pa-col-50">Middle aligned</div>
227
+ </div>
228
+
229
+ <div class="pa-row pa-row--bottom">
230
+ <div class="pa-col-50">Bottom aligned</div>
231
+ </div>
232
+
233
+
234
+ <!-- DASHBOARD LAYOUTS -->
235
+
236
+ <!-- Three-column dashboard (25% + 50% + 25%) -->
237
+ <div class="pa-row">
238
+ <div class="pa-col-100 pa-col-lg-25">Left sidebar</div>
239
+ <div class="pa-col-100 pa-col-lg-50">Main content</div>
240
+ <div class="pa-col-100 pa-col-lg-25">Right sidebar</div>
241
+ </div>
242
+
243
+ <!-- Four-column stats (responsive cards) -->
244
+ <div class="pa-row">
245
+ <div class="pa-col-100 pa-col-sm-50 pa-col-lg-25">Stat card</div>
246
+ <div class="pa-col-100 pa-col-sm-50 pa-col-lg-25">Stat card</div>
247
+ <div class="pa-col-100 pa-col-sm-50 pa-col-lg-25">Stat card</div>
248
+ <div class="pa-col-100 pa-col-sm-50 pa-col-lg-25">Stat card</div>
249
+ </div>
250
+
251
+ <!-- Two-thirds content + one-third sidebar -->
252
+ <div class="pa-row">
253
+ <div class="pa-col-100 pa-col-md-2-3">
254
+ Main content area (2/3)
255
+ </div>
256
+ <div class="pa-col-100 pa-col-md-1-3">
257
+ Sidebar (1/3)
258
+ </div>
259
+ </div>
260
+
261
+
262
+ <!-- OFFSET COLUMNS -->
263
+
264
+ <!-- Offset from left -->
265
+ <div class="pa-row">
266
+ <div class="pa-col-50 pa-offset-25">Offset 25% from left</div>
267
+ </div>
268
+
269
+ <div class="pa-row">
270
+ <div class="pa-col-1-3 pa-offset-35">Offset 35% from left</div>
271
+ </div>
272
+
273
+
274
+ <!-- ALL AVAILABLE CLASSES REFERENCE -->
275
+
276
+ <!-- Container: -->
277
+ <!-- .pa-row -->
278
+
279
+ <!-- Row modifiers: -->
280
+ <!-- .pa-row--no-gutter (remove column spacing) -->
281
+ <!-- .pa-row--center (center columns horizontally) -->
282
+ <!-- .pa-row--end (align columns to right) -->
283
+ <!-- .pa-row--between (space between columns) -->
284
+ <!-- .pa-row--around (space around columns) -->
285
+ <!-- .pa-row--same-height (equal height cards) -->
286
+ <!-- .pa-row--top (align items to top) -->
287
+ <!-- .pa-row--middle (align items to middle) -->
288
+ <!-- .pa-row--bottom (align items to bottom) -->
289
+
290
+ <!-- Column classes - 5% increments: -->
291
+ <!-- .pa-col (auto equal width) -->
292
+ <!-- .pa-col-5 (5%) -->
293
+ <!-- .pa-col-10 (10%) -->
294
+ <!-- .pa-col-15 (15%) -->
295
+ <!-- .pa-col-20 (20%) -->
296
+ <!-- .pa-col-25 (25%) -->
297
+ <!-- .pa-col-30 (30%) -->
298
+ <!-- .pa-col-35 (35%) -->
299
+ <!-- .pa-col-40 (40%) -->
300
+ <!-- .pa-col-45 (45%) -->
301
+ <!-- .pa-col-50 (50%) -->
302
+ <!-- .pa-col-55 (55%) -->
303
+ <!-- .pa-col-60 (60%) -->
304
+ <!-- .pa-col-65 (65%) -->
305
+ <!-- .pa-col-70 (70%) -->
306
+ <!-- .pa-col-75 (75%) -->
307
+ <!-- .pa-col-80 (80%) -->
308
+ <!-- .pa-col-85 (85%) -->
309
+ <!-- .pa-col-90 (90%) -->
310
+ <!-- .pa-col-95 (95%) -->
311
+ <!-- .pa-col-100 (100%) -->
312
+
313
+ <!-- Column classes - fractions (intuitive naming): -->
314
+ <!-- .pa-col-1-2 (50% - 1/2) -->
315
+ <!-- .pa-col-1-3 (33.33% - 1/3) -->
316
+ <!-- .pa-col-2-3 (66.67% - 2/3) -->
317
+ <!-- .pa-col-1-4 (25% - 1/4) -->
318
+ <!-- .pa-col-3-4 (75% - 3/4) -->
319
+ <!-- .pa-col-1-5 (20% - 1/5) -->
320
+ <!-- .pa-col-2-5 (40% - 2/5) -->
321
+ <!-- .pa-col-3-5 (60% - 3/5) -->
322
+ <!-- .pa-col-4-5 (80% - 4/5) -->
323
+ <!-- .pa-col-1-6 (16.67% - 1/6) -->
324
+ <!-- .pa-col-5-6 (83.33% - 5/6) -->
325
+ <!-- .pa-col-1-12 (8.33% - 1/12) -->
326
+ <!-- .pa-col-5-12 (41.67% - 5/12) -->
327
+ <!-- .pa-col-7-12 (58.33% - 7/12) -->
328
+ <!-- .pa-col-11-12 (91.67% - 11/12) -->
329
+
330
+ <!-- Responsive prefixes (add to any column size): -->
331
+ <!-- .pa-col-sm-* (≥576px) -->
332
+ <!-- .pa-col-md-* (≥768px) -->
333
+ <!-- .pa-col-lg-* (≥992px) -->
334
+ <!-- .pa-col-xl-* (≥1200px) -->
335
+
336
+ <!-- Offset classes (5% increments): -->
337
+ <!-- .pa-offset-5 through .pa-offset-95 -->
338
+ <!-- .pa-offset-sm-*, .pa-offset-md-*, .pa-offset-lg-*, .pa-offset-xl-* -->