kempo-css 2.1.2 → 2.1.4

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 (40) hide show
  1. package/.vscode/settings.json +2 -0
  2. package/CHANGELOG.md +7 -0
  3. package/dist/kempo.min.css +1 -1
  4. package/docs/borders-spacing.html +445 -0
  5. package/docs/buttons.html +261 -0
  6. package/docs/colors.html +198 -0
  7. package/docs/components/ThemePropertyInput.js +2 -2
  8. package/docs/elevation.html +508 -0
  9. package/docs/examples/responsive-grid.html +1 -1
  10. package/docs/index.html +236 -1477
  11. package/docs/inputs.html +251 -0
  12. package/docs/kempo.css +48 -32
  13. package/docs/kempo.min.css +1 -1
  14. package/docs/layout.html +310 -0
  15. package/docs/tables.html +261 -0
  16. package/docs/theme-editor.html +935 -802
  17. package/docs/typography.html +255 -0
  18. package/docs/utilities.html +171 -0
  19. package/docs-src/.config.js +26 -0
  20. package/docs-src/borders-spacing.page.html +297 -0
  21. package/docs-src/buttons.page.html +113 -0
  22. package/docs-src/colors.page.html +50 -0
  23. package/docs-src/default.template.html +22 -0
  24. package/docs-src/elevation.page.html +361 -0
  25. package/docs-src/examples/responsive-grid.html +33 -0
  26. package/docs-src/head.fragment.html +16 -0
  27. package/docs-src/index.page.html +95 -0
  28. package/docs-src/inputs.page.html +103 -0
  29. package/docs-src/layout.page.html +163 -0
  30. package/docs-src/nav.fragment.html +115 -0
  31. package/docs-src/tables.page.html +114 -0
  32. package/docs-src/theme-editor.page.html +850 -0
  33. package/docs-src/theme-editor.template.html +11 -0
  34. package/docs-src/typography.page.html +107 -0
  35. package/docs-src/utilities.page.html +26 -0
  36. package/package.json +3 -2
  37. package/scripts/build.js +7 -1
  38. package/src/kempo.css +48 -32
  39. package/docs/init.js +0 -4
  40. package/docs/nav.js +0 -33
package/docs/borders-spacing.html ADDED
@@ -0,0 +1,445 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Borders & Spacing - Kempo CSS</title>
8
+ <link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
9
+ <link rel="manifest" href="./manifest.json" />
10
+ <link rel="stylesheet" href="./kempo.min.css" />
11
+ <link rel="stylesheet" href="./kempo-hljs.min.css" />
12
+ <script>
13
+ window.kempo = {
14
+ pathToStylesheet: './kempo.min.css',
15
+ pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons']
16
+ };
17
+ </script>
18
+
19
+
20
+ </head>
21
+ <body>
22
+
23
+ <k-nav fixed class="bg-primary">
24
+ <button id="toggleNavSideMenu" class="link">
25
+ <k-icon name="menu"></k-icon>
26
+ </button>
27
+ <a href="./" class="d-if ph" style="align-items: center">
28
+ <img src="./media/icon32.png" alt="Kempo CSS Icon" class="pr" />
29
+ Kempo CSS
30
+ </a>
31
+ <a href="./theme-editor.html">Theme Editor</a>
32
+ <div class="flex"></div>
33
+ <a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon></a>
34
+ <a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon></a>
35
+ <a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon></a>
36
+ <k-theme-switcher></k-theme-switcher>
37
+ </k-nav>
38
+ <div style="width: 100%; height: 4rem;"></div>
39
+ <k-aside id="navSideMenu" main="overlay" state="offscreen">
40
+ <menu>
41
+ <div class="ta-center bb mb r0">
42
+ <h1 class="tc-primary">Kempo CSS</h1>
43
+ <img src="./media/icon128.png" alt="Kempo CSS Icon" />
44
+ </div>
45
+ <h5><a href="./typography.html">Typography</a></h5>
46
+ <div class="ml mb -mt">
47
+ <a href="./typography.html#paragraphs" class="d-b">Paragraphs</a>
48
+ <a href="./typography.html#headings" class="d-b">Headings</a>
49
+ <a href="./typography.html#textmarkup" class="d-b">Text Markup</a>
50
+ <a href="./typography.html#lists" class="d-b">Lists</a>
51
+ </div>
52
+ <h5><a href="./layout.html">Layout</a></h5>
53
+ <div class="ml mb -mt">
54
+ <a href="./layout.html#display" class="d-b">Display</a>
55
+ <a href="./layout.html#flexbox" class="d-b">Flexbox</a>
56
+ <a href="./layout.html#grid" class="d-b">Grid System</a>
57
+ <a href="./layout.html#responsive-grid" class="d-b">Responsive Grid</a>
58
+ <a href="./layout.html#min-width-grid" class="d-b">Alternative Responsive Grid</a>
59
+ </div>
60
+ <h5><a href="./borders-spacing.html">Borders &amp; Spacing</a></h5>
61
+ <div class="ml mb -mt">
62
+ <a href="./borders-spacing.html#borders" class="d-b">Borders</a>
63
+ <a href="./borders-spacing.html#border-radius" class="d-b">Border Radius</a>
64
+ <a href="./borders-spacing.html#padding" class="d-b">Padding</a>
65
+ <a href="./borders-spacing.html#margins" class="d-b">Margins</a>
66
+ <a href="./borders-spacing.html#negative-margins" class="d-b">Negative Margins</a>
67
+ <a href="./borders-spacing.html#cancelled-margins" class="d-b">Cancelled Margins</a>
68
+ </div>
69
+ <h5><a href="./inputs.html">Inputs</a></h5>
70
+ <div class="ml mb -mt">
71
+ <a href="./inputs.html#basic-inputs" class="d-b">Basic Inputs</a>
72
+ <a href="./inputs.html#labels" class="d-b">Labels</a>
73
+ <a href="./inputs.html#checkbox-radio" class="d-b">Checkbox / Radio</a>
74
+ </div>
75
+ <h5><a href="./buttons.html">Buttons</a></h5>
76
+ <div class="ml mb -mt">
77
+ <a href="./buttons.html#button-types" class="d-b">Button Types</a>
78
+ <a href="./buttons.html#button-colors" class="d-b">Button Colors</a>
79
+ <a href="./buttons.html#button-sizes" class="d-b">Button Sizes</a>
80
+ <a href="./buttons.html#button-groups" class="d-b">Button Groups</a>
81
+ <a href="./buttons.html#no-styles" class="d-b">No Styles</a>
82
+ </div>
83
+ <h5><a href="./tables.html">Tables</a></h5>
84
+ <div class="ml mb -mt">
85
+ <a href="./tables.html#basic-table" class="d-b">Basic Table</a>
86
+ <a href="./tables.html#responsive-table" class="d-b">Responsive Table</a>
87
+ </div>
88
+ <h5><a href="./colors.html">Colors</a></h5>
89
+ <div class="ml mb -mt">
90
+ <a href="./colors.html#background" class="d-b">Background</a>
91
+ <a href="./colors.html#text-colors" class="d-b">Text Colors</a>
92
+ </div>
93
+ <h5><a href="./elevation.html">Elevation</a></h5>
94
+ <div class="ml mb -mt">
95
+ <a href="./elevation.html#elevation-z-index" class="d-b">Z-Index</a>
96
+ <a href="./elevation.html#elevation-shadow" class="d-b">Shadow</a>
97
+ <a href="./elevation.html#elevation-bg" class="d-b">Elevation Background</a>
98
+ <a href="./elevation.html#elevation-combined" class="d-b">Combined Example</a>
99
+ <a href="./elevation.html#elevation-variables" class="d-b">CSS Variables</a>
100
+ </div>
101
+ <h5><a href="./utilities.html">Utilities</a></h5>
102
+ <div class="ml mb -mt">
103
+ <a href="./utilities.html#noScroll" class="d-b">Disable Body Scrolling</a>
104
+ </div>
105
+ <hr />
106
+ <a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon> Read the License</a><br />
107
+ <a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon> View on NPM</a><br />
108
+ <a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon> View on GitHub</a>
109
+ <div style="height:33vh"></div>
110
+ </menu>
111
+ </k-aside>
112
+ <script type="module">
113
+ document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
114
+ await window.customElements.whenDefined('k-aside');
115
+ document.getElementById('navSideMenu').toggle();
116
+ });
117
+ document.addEventListener('click', function(e) {
118
+ if (e.target.matches('a[href^="#"]')) {
119
+ e.preventDefault();
120
+ const targetId = e.target.getAttribute('href').replace('#', '');
121
+ const target = document.getElementById(targetId);
122
+ if (target) {
123
+ target.scrollIntoView({ behavior: 'smooth' });
124
+ history.replaceState(null, '', window.location.pathname + window.location.search + '#' + targetId);
125
+ document.getElementById('navSideMenu').hide();
126
+ }
127
+ }
128
+ });
129
+ const fixedNav = document.querySelector('k-nav[fixed]');
130
+ if (fixedNav) {
131
+ const updateNavShadow = () => fixedNav.classList.toggle('scrolled', window.scrollY > 0);
132
+ window.addEventListener('scroll', updateNavShadow, { passive: true });
133
+ updateNavShadow();
134
+ }
135
+ </script>
136
+
137
+ <k-main>
138
+ <main>
139
+ <h1 class="ta-center">Borders & Spacing</h1>
140
+
141
+ <h3 id="borders">Borders</h3>
142
+ <div class="row -mx">
143
+ <div class="col m-span-12 px">
144
+ <k-card label="HTML">
145
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>&gt;</span>b<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bt"</span>&gt;</span>bt<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"br"</span>&gt;</span>br<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bb"</span>&gt;</span>bb<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bl"</span>&gt;</span>bl<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bx"</span>&gt;</span>bx<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"by"</span>&gt;</span>by<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
146
+ </k-card>
147
+ </div>
148
+ <div class="col m-span-12 px">
149
+ <k-card label="Output*">
150
+ <div class="d-ib bg-alt p mr mb b">b</div>
151
+ <div class="d-ib bg-alt p mr mb bt">bt</div>
152
+ <div class="d-ib bg-alt p mr mb br">br</div>
153
+ <div class="d-ib bg-alt p mr mb bb">bb</div>
154
+ <div class="d-ib bg-alt p mr mb bl">bl</div>
155
+ <div class="d-ib bg-alt p mr mb bx">bx</div>
156
+ <div class="d-ib bg-alt p mr mb by">by</div>
157
+ </k-card>
158
+ <p>*<small>Additional styles applied for demonstration purposes.</small></p>
159
+ </div>
160
+ </div>
161
+
162
+ <h3 id="border-radius">Border Radius</h3>
163
+ <div class="row -mx">
164
+ <div class="col m-span-12 px">
165
+ <k-card label="HTML">
166
+ <pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- All corners --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"r"</span>&gt;</span>r<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"round"</span>&gt;</span>round<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- Individual corners --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rtl"</span>&gt;</span>rtl<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rtr"</span>&gt;</span>rtr<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rbr"</span>&gt;</span>rbr<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rbl"</span>&gt;</span>rbl<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- Side combinations --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rt"</span>&gt;</span>rt<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rb"</span>&gt;</span>rb<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rl"</span>&gt;</span>rl<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rr"</span>&gt;</span>rr<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
167
+ </k-card>
168
+ </div>
169
+ <div class="col m-span-12 px">
170
+ <k-card label="Output*">
171
+ <div class="mb">
172
+ <div class="d-ib bg-alt p mr mb b r">r</div>
173
+ <div class="d-ib bg-alt p mr mb b round">round</div>
174
+ </div>
175
+ <div class="mb">
176
+ <div class="d-ib bg-alt p mr mb b rtl">rtl</div>
177
+ <div class="d-ib bg-alt p mr mb b rtr">rtr</div>
178
+ <div class="d-ib bg-alt p mr mb b rbr">rbr</div>
179
+ <div class="d-ib bg-alt p mr mb b rbl">rbl</div>
180
+ </div>
181
+ <div>
182
+ <div class="d-ib bg-alt p mr mb b rt">rt</div>
183
+ <div class="d-ib bg-alt p mr mb b rb">rb</div>
184
+ <div class="d-ib bg-alt p mr mb b rl">rl</div>
185
+ <div class="d-ib bg-alt p mr mb b rr">rr</div>
186
+ </div>
187
+ </k-card>
188
+ <p>*<small>Additional styles applied for demonstration purposes.</small></p>
189
+ </div>
190
+ </div>
191
+ <h3>Border Radius Classes</h3>
192
+ <table>
193
+ <thead>
194
+ <tr>
195
+ <th>Class</th>
196
+ <th>Description</th>
197
+ </tr>
198
+ </thead>
199
+ <tbody>
200
+ <tr>
201
+ <td><code>r</code></td>
202
+ <td>All corners (0.25rem)</td>
203
+ </tr>
204
+ <tr>
205
+ <td><code>round</code></td>
206
+ <td>Fully rounded (9999rem)</td>
207
+ </tr>
208
+ <tr>
209
+ <td><code>rtl</code></td>
210
+ <td>Top-left corner only</td>
211
+ </tr>
212
+ <tr>
213
+ <td><code>rtr</code></td>
214
+ <td>Top-right corner only</td>
215
+ </tr>
216
+ <tr>
217
+ <td><code>rbr</code></td>
218
+ <td>Bottom-right corner only</td>
219
+ </tr>
220
+ <tr>
221
+ <td><code>rbl</code></td>
222
+ <td>Bottom-left corner only</td>
223
+ </tr>
224
+ <tr>
225
+ <td><code>rt</code></td>
226
+ <td>Top corners (left + right)</td>
227
+ </tr>
228
+ <tr>
229
+ <td><code>rb</code></td>
230
+ <td>Bottom corners (left + right)</td>
231
+ </tr>
232
+ <tr>
233
+ <td><code>rl</code></td>
234
+ <td>Left corners (top + bottom)</td>
235
+ </tr>
236
+ <tr>
237
+ <td><code>rr</code></td>
238
+ <td>Right corners (top + bottom)</td>
239
+ </tr>
240
+ </tbody>
241
+ </table>
242
+ <p class="mt">
243
+ <small><strong>Note:</strong> Add <code>0</code> suffix (e.g.,
244
+ <code>r0</code>, <code>rt0</code>) to cancel border radius.</small>
245
+ </p>
246
+
247
+ <h2 id="padding">Padding</h2>
248
+
249
+ <k-card>
250
+ <h3>Color Legend</h3>
251
+ <ul>
252
+ <li><strong style="color: #00ff00">Green</strong> = Padding</li>
253
+ <li><strong style="color: #ff8c00">Orange</strong> = Margins</li>
254
+ <li>
255
+ <strong style="color: #ff0000">Red</strong> = Negative Margins
256
+ </li>
257
+ <li>
258
+ <strong style="color: #ff0000">Red Border</strong> = Cancelled
259
+ Margins
260
+ </li>
261
+ </ul>
262
+ <p>*<small>Additional styles applied for demonstration purposes.</small></p>
263
+ </k-card>
264
+
265
+ <div class="row -mx">
266
+ <div class="col m-span-12 px">
267
+ <k-card label="HTML">
268
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>&gt;</span>p<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pt"</span>&gt;</span>pt<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pr"</span>&gt;</span>pr<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pb"</span>&gt;</span>pb<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pl"</span>&gt;</span>pl<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px"</span>&gt;</span>px<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py"</span>&gt;</span>py<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
269
+ </k-card>
270
+ </div>
271
+ <div class="col m-span-12 px">
272
+ <k-card label="Output*">
273
+ <div class="d-ib bg-success mx mb p">
274
+ <div class="d-ib bg-alt pq">p</div>
275
+ </div>
276
+ <div class="d-ib bg-success mx mb pt">
277
+ <div class="d-ib bg-alt pq">pt</div>
278
+ </div>
279
+ <div class="d-ib bg-success mx mb pr">
280
+ <div class="d-ib bg-alt pq">pr</div>
281
+ </div>
282
+ <div class="d-ib bg-success mx mb pb">
283
+ <div class="d-ib bg-alt pq">pb</div>
284
+ </div>
285
+ <div class="d-ib bg-success mx mb pl">
286
+ <div class="d-ib bg-alt pq">pl</div>
287
+ </div>
288
+ <div class="d-ib bg-success mx mb px">
289
+ <div class="d-ib bg-alt pq">px</div>
290
+ </div>
291
+ <div class="d-ib bg-success mx mb py">
292
+ <div class="d-ib bg-alt pq">py</div>
293
+ </div>
294
+ </k-card>
295
+ </div>
296
+ </div>
297
+
298
+ <h3 id="margins">Margins</h3>
299
+ <div class="row -mx">
300
+ <div class="col m-span-12 px">
301
+ <k-card label="HTML">
302
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>&gt;</span>m<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt"</span>&gt;</span>mt<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mr"</span>&gt;</span>mr<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span>&gt;</span>mb<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ml"</span>&gt;</span>ml<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mx"</span>&gt;</span>mx<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my"</span>&gt;</span>my<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
303
+ </k-card>
304
+ </div>
305
+ <div class="col m-span-12 px">
306
+ <k-card label="Output*">
307
+ <div class="d-ib bg-warning mx mb p">
308
+ <div class="d-ib bg-alt pq">m</div>
309
+ </div>
310
+ <div class="d-ib bg-warning mx mb pt">
311
+ <div class="d-ib bg-alt pq">mt</div>
312
+ </div>
313
+ <div class="d-ib bg-warning mx mb pr">
314
+ <div class="d-ib bg-alt pq">mr</div>
315
+ </div>
316
+ <div class="d-ib bg-warning mx mb pb">
317
+ <div class="d-ib bg-alt pq">mb</div>
318
+ </div>
319
+ <div class="d-ib bg-warning mx mb pl">
320
+ <div class="d-ib bg-alt pq">ml</div>
321
+ </div>
322
+ <div class="d-ib bg-warning mx mb px">
323
+ <div class="d-ib bg-alt pq">mx</div>
324
+ </div>
325
+ <div class="d-ib bg-warning mx mb py">
326
+ <div class="d-ib bg-alt pq">my</div>
327
+ </div>
328
+ </k-card>
329
+ </div>
330
+ </div>
331
+
332
+ <h3 id="negative-margins">Negative Margins</h3>
333
+ <div class="row -mx">
334
+ <div class="col m-span-12 px">
335
+ <k-card label="HTML">
336
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-m"</span>&gt;</span>-m<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mt"</span>&gt;</span>-mt<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mr"</span>&gt;</span>-mr<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mb"</span>&gt;</span>-mb<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-ml"</span>&gt;</span>-ml<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mx"</span>&gt;</span>-mx<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-my"</span>&gt;</span>-my<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
337
+ </k-card>
338
+ </div>
339
+ <div class="col m-span-12 px">
340
+ <k-card label="Output*">
341
+ <div class="d-ib bg-danger mx mb p">
342
+ <div class="d-ib bg-alt pq">-m</div>
343
+ </div>
344
+ <div class="d-ib bg-danger mx mb pt">
345
+ <div class="d-ib bg-alt pq">-mt</div>
346
+ </div>
347
+ <div class="d-ib bg-danger mx mb pr">
348
+ <div class="d-ib bg-alt pq">-mr</div>
349
+ </div>
350
+ <div class="d-ib bg-danger mx mb pb">
351
+ <div class="d-ib bg-alt pq">-mb</div>
352
+ </div>
353
+ <div class="d-ib bg-danger mx mb pl">
354
+ <div class="d-ib bg-alt pq">-ml</div>
355
+ </div>
356
+ <div class="d-ib bg-danger mx mb px">
357
+ <div class="d-ib bg-alt pq">-mx</div>
358
+ </div>
359
+ <div class="d-ib bg-danger mx mb py">
360
+ <div class="d-ib bg-alt pq">-my</div>
361
+ </div>
362
+ </k-card>
363
+ </div>
364
+ </div>
365
+
366
+ <h3 id="cancelled-margins">Cancelled Margins</h3>
367
+ <div class="row -mx">
368
+ <div class="col m-span-12 px">
369
+ <k-card label="HTML">
370
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m m0"</span>&gt;</span>m m0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mt0"</span>&gt;</span>m mt0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mr0"</span>&gt;</span>m mr0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mb0"</span>&gt;</span>m mb0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m ml0"</span>&gt;</span>m ml0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mx0"</span>&gt;</span>m mx0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m my0"</span>&gt;</span>m my0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
371
+ </k-card>
372
+ </div>
373
+ <div class="col m-span-12 px">
374
+ <k-card label="Output*">
375
+ <div class="d-ib bg-warning mx mb">
376
+ <div
377
+ class="d-ib bg-alt pq b"
378
+ style="border-color: var(--c_danger) !important"
379
+ >
380
+ m m0
381
+ </div>
382
+ </div>
383
+ <div class="d-ib bg-warning mx mb px pb">
384
+ <div
385
+ class="d-ib bg-alt pq bt"
386
+ style="border-color: var(--c_danger) !important"
387
+ >
388
+ m mt0
389
+ </div>
390
+ </div>
391
+ <div class="d-ib bg-warning mx mb py pl">
392
+ <div
393
+ class="d-ib bg-alt pq br"
394
+ style="border-color: var(--c_danger) !important"
395
+ >
396
+ m mr0
397
+ </div>
398
+ </div>
399
+ <div class="d-ib bg-warning mx mb px pt">
400
+ <div
401
+ class="d-ib bg-alt pq bb"
402
+ style="border-color: var(--c_danger) !important"
403
+ >
404
+ m mb0
405
+ </div>
406
+ </div>
407
+ <div class="d-ib bg-warning mx mb py pr">
408
+ <div
409
+ class="d-ib bg-alt pq bl"
410
+ style="border-color: var(--c_danger) !important"
411
+ >
412
+ m ml0
413
+ </div>
414
+ </div>
415
+ <div class="d-ib bg-warning mx mb py">
416
+ <div
417
+ class="d-ib bg-alt pq bx"
418
+ style="border-color: var(--c_danger) !important"
419
+ >
420
+ m mx0
421
+ </div>
422
+ </div>
423
+ <div class="d-ib bg-warning mx mb px">
424
+ <div
425
+ class="d-ib bg-alt pq by"
426
+ style="border-color: var(--c_danger) !important"
427
+ >
428
+ m my0
429
+ </div>
430
+ </div>
431
+ </k-card>
432
+ </div>
433
+ </div>
434
+
435
+ </main>
436
+ <div style="height:33vh"></div>
437
+ </k-main>
438
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Nav.js"></script>
439
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Aside.js"></script>
440
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Icon.js"></script>
441
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/ThemeSwitcher.js"></script>
442
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Card.js"></script>
443
+
444
+ </body>
445
+ </html>