kempo-css 1.3.13 → 2.1.1
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.
- package/CHANGELOG.md +21 -1
- package/CONTRIBUTING.md +17 -0
- package/README.md +2 -48
- package/dist/kempo.min.css +1 -1
- package/docs/components/ThemePropertyInput.js +2 -2
- package/docs/examples/responsive-grid.html +1 -1
- package/docs/index.html +1401 -25
- package/docs/init.js +1 -1
- package/docs/kempo.css +105 -94
- package/docs/kempo.min.css +1 -1
- package/docs/theme-editor.html +29 -74
- package/llms.txt +205 -0
- package/package.json +1 -1
- package/src/kempo.css +105 -94
- package/tests/colors.browser-test.js +3 -3
- package/tests/components.browser-test.js +0 -13
- package/tests/css_variables.browser-test.js +1 -1
- package/tests/elevation.browser-test.js +239 -0
- package/docs/docs.inc.html +0 -955
package/docs/index.html
CHANGED
|
@@ -2,28 +2,76 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
|
-
<meta
|
|
5
|
+
<meta
|
|
6
|
+
name="viewport"
|
|
7
|
+
content="width=device-width, initial-scale=1.0"
|
|
8
|
+
/>
|
|
6
9
|
<title>Kempo CSS</title>
|
|
7
|
-
<link
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
<link
|
|
11
|
+
rel="icon"
|
|
12
|
+
type="image/png"
|
|
13
|
+
sizes="48x48"
|
|
14
|
+
href="./media/icon48.png"
|
|
15
|
+
>
|
|
16
|
+
<link
|
|
17
|
+
rel="manifest"
|
|
18
|
+
href="./manifest.json"
|
|
19
|
+
/>
|
|
20
|
+
<link
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
href="./kempo.min.css"
|
|
23
|
+
/>
|
|
24
|
+
<link
|
|
25
|
+
rel="stylesheet"
|
|
26
|
+
href="./kempo-hljs.min.css"
|
|
27
|
+
/>
|
|
11
28
|
<script src="./init.js"></script>
|
|
29
|
+
<style>
|
|
30
|
+
.elevation-card {
|
|
31
|
+
display: inline-flex;
|
|
32
|
+
width: 9rem;
|
|
33
|
+
align-items: center;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
aspect-ratio: 1 / 1;
|
|
36
|
+
margin: var(--spacer);
|
|
37
|
+
padding: var(--spacer);
|
|
38
|
+
border-radius: var(--radius);
|
|
39
|
+
vertical-align: top;
|
|
40
|
+
text-wrap: balance;
|
|
41
|
+
text-align: center;
|
|
42
|
+
}
|
|
43
|
+
</style>
|
|
12
44
|
</head>
|
|
13
45
|
<body>
|
|
14
46
|
<nav class="d-f bg-primary fixed">
|
|
15
|
-
<button
|
|
47
|
+
<button
|
|
48
|
+
id="toggleNavSideMenu"
|
|
49
|
+
class="link"
|
|
50
|
+
>
|
|
16
51
|
<k-icon name="menu"></k-icon>
|
|
17
52
|
</button>
|
|
18
|
-
<a
|
|
19
|
-
|
|
53
|
+
<a
|
|
54
|
+
href="./"
|
|
55
|
+
class="d-if ph"
|
|
56
|
+
style="align-items: center"
|
|
57
|
+
>
|
|
58
|
+
<img
|
|
59
|
+
src="./media/icon32.png"
|
|
60
|
+
alt="Kempo CSS Icon"
|
|
61
|
+
class="pr"
|
|
62
|
+
/>
|
|
20
63
|
Kempo CSS
|
|
21
64
|
</a>
|
|
22
65
|
<a href="./theme-editor.html">Theme Editor</a>
|
|
23
66
|
<div class="flex"></div>
|
|
24
|
-
<a
|
|
25
|
-
|
|
26
|
-
|
|
67
|
+
<a
|
|
68
|
+
href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"
|
|
69
|
+
target="_blank"
|
|
70
|
+
><k-icon name="license"></k-icont></a>
|
|
71
|
+
<a
|
|
72
|
+
href="https://github.com/dustinpoissant/kempo-css"
|
|
73
|
+
target="_blank"
|
|
74
|
+
><k-icon name="github-mark"></k-icon></a>
|
|
27
75
|
<k-theme-switcher></k-theme-switcher>
|
|
28
76
|
</nav>
|
|
29
77
|
<div style="width: 100%; height: 4rem;"></div>
|
|
@@ -31,7 +79,10 @@
|
|
|
31
79
|
<menu>
|
|
32
80
|
<div class="ta-center bb mb r0">
|
|
33
81
|
<h1 class="tc-primary">Kempo CSS</h1>
|
|
34
|
-
<img
|
|
82
|
+
<img
|
|
83
|
+
src="./media/icon128.png"
|
|
84
|
+
alt="Kempo UI Icon"
|
|
85
|
+
/>
|
|
35
86
|
</div>
|
|
36
87
|
<h5><a href="#typography">Typography</a></h5>
|
|
37
88
|
<ul class="pl">
|
|
@@ -80,28 +131,1353 @@
|
|
|
80
131
|
<ul class="pl">
|
|
81
132
|
<li><a href="#background">Background</a></li>
|
|
82
133
|
<li><a href="#text-colors">Text Colors</a></li>
|
|
83
|
-
|
|
84
|
-
|
|
134
|
+
</ul>
|
|
135
|
+
<h5><a href="#elevation">Elevation</a></h5>
|
|
136
|
+
<ul class="pl">
|
|
137
|
+
<li><a href="#elevation-z-index">Z-Index</a></li>
|
|
138
|
+
<li><a href="#elevation-shadow">Shadow</a></li>
|
|
139
|
+
<li><a href="#elevation-bg">Elevation Background</a></li>
|
|
140
|
+
<li><a href="#elevation-combined">Combined Example</a></li>
|
|
141
|
+
<li><a href="#elevation-variables">CSS Variables</a></li>
|
|
85
142
|
</ul>
|
|
86
143
|
<h5><a href="#noScroll">Disable Body Scrolling</a></h5>
|
|
87
144
|
<hr />
|
|
88
|
-
<a
|
|
89
|
-
|
|
90
|
-
|
|
145
|
+
<a
|
|
146
|
+
href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20"
|
|
147
|
+
target="_blank"
|
|
148
|
+
><k-icon name="license"></k-icon> Read the Lisence</a><br />
|
|
149
|
+
<a
|
|
150
|
+
href="https://github.com/dustinpoissant/kempo-css"
|
|
151
|
+
target="_blank"
|
|
152
|
+
><k-icon name="github-mark"></k-icon> View on
|
|
91
153
|
GitHub</a>
|
|
92
154
|
<div style="height:33vh"></div>
|
|
93
155
|
</menu>
|
|
94
156
|
</k-side-menu>
|
|
95
157
|
<main>
|
|
96
|
-
<
|
|
158
|
+
<h1 id="typography">Typography</h1>
|
|
159
|
+
|
|
160
|
+
<h2 id="paragraphs">Paragraphs</h2>
|
|
161
|
+
<div class="row -mx">
|
|
162
|
+
<div class="col m-span-12 px">
|
|
163
|
+
<k-card label="HTML">
|
|
164
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum non unde laborum officia doloremque, repudiandae laudantium nihil! Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit, assumenda ipsa esse!<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
|
|
165
|
+
</k-card>
|
|
166
|
+
</div>
|
|
167
|
+
<div class="col m-span-12 px">
|
|
168
|
+
<k-card label="Output">
|
|
169
|
+
<p>
|
|
170
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum
|
|
171
|
+
non unde laborum officia doloremque, repudiandae laudantium nihil!
|
|
172
|
+
Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit,
|
|
173
|
+
assumenda ipsa esse!
|
|
174
|
+
</p>
|
|
175
|
+
</k-card>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<h2 id="headings">Headings</h2>
|
|
180
|
+
<div class="row -mx">
|
|
181
|
+
<div class="col m-span-12 px">
|
|
182
|
+
<k-card label="HTML">
|
|
183
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Heading 1<span class="hljs-tag"></<span class="hljs-name">h1</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Heading 2<span class="hljs-tag"></<span class="hljs-name">h2</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Heading 3<span class="hljs-tag"></<span class="hljs-name">h3</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Heading 4<span class="hljs-tag"></<span class="hljs-name">h4</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h5</span>></span>Heading 5<span class="hljs-tag"></<span class="hljs-name">h5</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Heading 6<span class="hljs-tag"></<span class="hljs-name">h6</span>></span></code></pre>
|
|
184
|
+
</k-card>
|
|
185
|
+
</div>
|
|
186
|
+
<div class="col m-span-12 px">
|
|
187
|
+
<k-card label="Output">
|
|
188
|
+
<h1>Heading 1</h1>
|
|
189
|
+
<h2>Heading 2</h2>
|
|
190
|
+
<h3>Heading 3</h3>
|
|
191
|
+
<h4>Heading 4</h4>
|
|
192
|
+
<h5>Heading 5</h5>
|
|
193
|
+
<h6>Heading 6</h6>
|
|
194
|
+
</k-card>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<h2 id="textmarkup">Text Markup</h2>
|
|
199
|
+
<div class="row -mx">
|
|
200
|
+
<div class="col m-span-12 px">
|
|
201
|
+
<k-card label="HTML">
|
|
202
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>strong<span class="hljs-tag"></<span class="hljs-name">strong</span>></span> <span class="hljs-tag"><<span class="hljs-name">i</span>></span>italics<span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">del</span>></span>strike<span class="hljs-tag"></<span class="hljs-name">del</span>></span> <span class="hljs-tag"><<span class="hljs-name">u</span>></span>underline<span class="hljs-tag"></<span class="hljs-name">u</span>></span> <span class="hljs-tag"><<span class="hljs-name">sub</span>></span>sub<span class="hljs-tag"></<span class="hljs-name">sub</span>></span> Normal <span class="hljs-tag"><<span class="hljs-name">sup</span>></span>super<span class="hljs-tag"></<span class="hljs-name">sup</span>></span> <span class="hljs-tag"><<span class="hljs-name">b</span>></span>bold<span class="hljs-tag"></<span class="hljs-name">b</span>></span> <span class="hljs-tag"><<span class="hljs-name">mark</span>></span>highlighted<span class="hljs-tag"></<span class="hljs-name">mark</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
|
|
203
|
+
</k-card>
|
|
204
|
+
</div>
|
|
205
|
+
<div class="col m-span-12 px">
|
|
206
|
+
<k-card label="Output">
|
|
207
|
+
<p>
|
|
208
|
+
<strong>strong</strong> <i>italics</i> <del>strike</del>
|
|
209
|
+
<u>underline</u> <sub>sub</sub> Normal <sup>super</sup>
|
|
210
|
+
<b>bold</b> <mark>highlighted</mark>
|
|
211
|
+
</p>
|
|
212
|
+
</k-card>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
<h2 id="lists">Lists</h2>
|
|
217
|
+
<div class="row -mx">
|
|
218
|
+
<div class="col m-span-12 px">
|
|
219
|
+
<k-card label="HTML">
|
|
220
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><br> Item 3<br> <span class="hljs-tag"><<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">li</span>></span><br><span class="hljs-tag"></<span class="hljs-name">ol</span>></span></code></pre>
|
|
221
|
+
</k-card>
|
|
222
|
+
</div>
|
|
223
|
+
<div class="col m-span-12 px">
|
|
224
|
+
<k-card label="Output">
|
|
225
|
+
<ol>
|
|
226
|
+
<li>Item 1</li>
|
|
227
|
+
<li>Item 2</li>
|
|
228
|
+
<li>
|
|
229
|
+
Item 3
|
|
230
|
+
<ol>
|
|
231
|
+
<li>Sub Item 1</li>
|
|
232
|
+
<li>Sub Item 2</li>
|
|
233
|
+
<li>Sub Item 3</li>
|
|
234
|
+
</ol>
|
|
235
|
+
</li>
|
|
236
|
+
</ol>
|
|
237
|
+
</k-card>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
<div class="row -mx">
|
|
241
|
+
<div class="col m-span-12 px">
|
|
242
|
+
<k-card label="HTML">
|
|
243
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><br> Item 3<br> <span class="hljs-tag"><<span class="hljs-name">ul</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">li</span>></span><br><span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre>
|
|
244
|
+
</k-card>
|
|
245
|
+
</div>
|
|
246
|
+
<div class="col m-span-12 px">
|
|
247
|
+
<k-card label="Output">
|
|
248
|
+
<ul>
|
|
249
|
+
<li>Item 1</li>
|
|
250
|
+
<li>Item 2</li>
|
|
251
|
+
<li>
|
|
252
|
+
Item 3
|
|
253
|
+
<ul>
|
|
254
|
+
<li>Sub Item 1</li>
|
|
255
|
+
<li>Sub Item 2</li>
|
|
256
|
+
<li>Sub Item 3</li>
|
|
257
|
+
</ul>
|
|
258
|
+
</li>
|
|
259
|
+
</ul>
|
|
260
|
+
</k-card>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
<h1 id="layout">Layout</h1>
|
|
265
|
+
|
|
266
|
+
<h2 id="display">Display</h2>
|
|
267
|
+
<table class="mb">
|
|
268
|
+
<thead>
|
|
269
|
+
<tr>
|
|
270
|
+
<th>Class</th>
|
|
271
|
+
<th>CSS Value</th>
|
|
272
|
+
</tr>
|
|
273
|
+
</thead>
|
|
274
|
+
<tbody>
|
|
275
|
+
<tr>
|
|
276
|
+
<td><code>d-b</code></td>
|
|
277
|
+
<td>block</td>
|
|
278
|
+
</tr>
|
|
279
|
+
<tr>
|
|
280
|
+
<td><code>d-ib</code></td>
|
|
281
|
+
<td>inline-block</td>
|
|
282
|
+
</tr>
|
|
283
|
+
<tr>
|
|
284
|
+
<td><code>d-i</code></td>
|
|
285
|
+
<td>inline</td>
|
|
286
|
+
</tr>
|
|
287
|
+
<tr>
|
|
288
|
+
<td><code>d-f</code></td>
|
|
289
|
+
<td>flex</td>
|
|
290
|
+
</tr>
|
|
291
|
+
<tr>
|
|
292
|
+
<td><code>d-if</code></td>
|
|
293
|
+
<td>inline-flex</td>
|
|
294
|
+
</tr>
|
|
295
|
+
</tbody>
|
|
296
|
+
</table>
|
|
297
|
+
|
|
298
|
+
<h2 id="flexbox">Flexbox</h2>
|
|
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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 100px"</span>></span>100px<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-2"</span>></span>flex-2<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex b"</span>></span>flex<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"flex-3"</span>></span>flex-3<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></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-f mb">
|
|
308
|
+
<div
|
|
309
|
+
style="width: 100px"
|
|
310
|
+
class="b pq mr"
|
|
311
|
+
>100px</div>
|
|
312
|
+
<div class="flex b pq">flex</div>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="d-f mb">
|
|
315
|
+
<div class="flex b pq mr">flex</div>
|
|
316
|
+
<div class="flex b pq">flex</div>
|
|
317
|
+
</div>
|
|
318
|
+
<div class="d-f mb">
|
|
319
|
+
<div class="flex b pq mr">flex</div>
|
|
320
|
+
<div class="flex-2 b pq">flex-2</div>
|
|
321
|
+
</div>
|
|
322
|
+
<div class="d-f">
|
|
323
|
+
<div class="flex b pq mr">flex</div>
|
|
324
|
+
<div class="flex-3 b pq">flex-3</div>
|
|
325
|
+
</div>
|
|
326
|
+
</k-card>
|
|
327
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
<h2 id="grid">Grid System</h2>
|
|
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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span>></span>col<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span>></span>col<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span>></span>col<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col span-4"</span>></span>col span-4<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col span-8"</span>></span>col span-8<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
337
|
+
</k-card>
|
|
338
|
+
</div>
|
|
339
|
+
<div class="col m-span-12 px">
|
|
340
|
+
<k-card label="Output*">
|
|
341
|
+
<div class="row mb">
|
|
342
|
+
<div class="col b pq">col</div>
|
|
343
|
+
<div class="col b pq">col</div>
|
|
344
|
+
<div class="col b pq">col</div>
|
|
345
|
+
</div>
|
|
346
|
+
<div class="row">
|
|
347
|
+
<div class="col span-4 b pq">col span-4</div>
|
|
348
|
+
<div class="col span-8 b pq">col span-8</div>
|
|
349
|
+
</div>
|
|
350
|
+
</k-card>
|
|
351
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
|
|
355
|
+
<h3 id="responsive-grid">Responsive Grid</h3>
|
|
356
|
+
<p>This responsive grid is based on the size of the viewport, not the size of the container. The example below is
|
|
357
|
+
running in an iframe for easy demonstration, but if you need the layout to be responsive to the contianer size see
|
|
358
|
+
the <a href="#min-width-grid">Alternative Responsive Grid</a> below.</p>
|
|
359
|
+
<k-card label="HTML">
|
|
360
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>></span><br /> col d-span-3 t-span-6 m-span-12<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>></span><br /> col d-span-3 t-span-6 m-span-12<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>></span><br /> col d-span-3 t-span-6 m-span-12<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col d-span-3 t-span-6 m-span-12"</span>></span><br /> col d-span-3 t-span-6 m-span-12<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
361
|
+
</k-card>
|
|
362
|
+
<k-resize
|
|
363
|
+
dimension="width"
|
|
364
|
+
class="b0"
|
|
365
|
+
style="min-width: 22rem"
|
|
366
|
+
>
|
|
367
|
+
<k-card
|
|
368
|
+
label="Output*"
|
|
369
|
+
class="mtq"
|
|
370
|
+
>
|
|
371
|
+
<iframe
|
|
372
|
+
src="./examples/responsive-grid.html"
|
|
373
|
+
height="200"
|
|
374
|
+
class="b0"
|
|
375
|
+
></iframe>
|
|
376
|
+
</k-card>
|
|
377
|
+
</k-resize>
|
|
378
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
379
|
+
|
|
380
|
+
<h3 id="min-width-grid">Alternative Responsive Grid</h3>
|
|
381
|
+
<div class="row -mx">
|
|
382
|
+
<div class="col m-span-12 px">
|
|
383
|
+
<k-card label="HTML">
|
|
384
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-width: 150px"</span>></span><br /> col, min-width: 150px<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-width: 200px"</span>></span><br /> col, min-width: 200px<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-width: 300px"</span>></span><br /> col, min-width: 300px<br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
385
|
+
</k-card>
|
|
386
|
+
</div>
|
|
387
|
+
<div class="col m-span-12 px">
|
|
388
|
+
<k-resize
|
|
389
|
+
dimension="width"
|
|
390
|
+
class="b0"
|
|
391
|
+
style="min-width: 22rem; max-width: 688px"
|
|
392
|
+
>
|
|
393
|
+
<k-card
|
|
394
|
+
label="Output*"
|
|
395
|
+
class="mtq"
|
|
396
|
+
>
|
|
397
|
+
<div class="row">
|
|
398
|
+
<div
|
|
399
|
+
class="col b pq"
|
|
400
|
+
style="min-width: 150px"
|
|
401
|
+
>
|
|
402
|
+
col, min-width: 150px
|
|
403
|
+
</div>
|
|
404
|
+
<div
|
|
405
|
+
class="col b pq"
|
|
406
|
+
style="min-width: 200px"
|
|
407
|
+
>
|
|
408
|
+
col, min-width: 200px
|
|
409
|
+
</div>
|
|
410
|
+
<div
|
|
411
|
+
class="col b pq"
|
|
412
|
+
style="min-width: 300px"
|
|
413
|
+
>
|
|
414
|
+
col, min-width: 300px
|
|
415
|
+
</div>
|
|
416
|
+
</div>
|
|
417
|
+
</k-card>
|
|
418
|
+
</k-resize>
|
|
419
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
420
|
+
</div>
|
|
421
|
+
</div>
|
|
422
|
+
|
|
423
|
+
<h2 id="borders-spacing">Borders & Spacing</h2>
|
|
424
|
+
|
|
425
|
+
<h3 id="borders">Borders</h3>
|
|
426
|
+
<div class="row -mx">
|
|
427
|
+
<div class="col m-span-12 px">
|
|
428
|
+
<k-card label="HTML">
|
|
429
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>></span>b<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bt"</span>></span>bt<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"br"</span>></span>br<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bb"</span>></span>bb<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bl"</span>></span>bl<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bx"</span>></span>bx<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"by"</span>></span>by<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
430
|
+
</k-card>
|
|
431
|
+
</div>
|
|
432
|
+
<div class="col m-span-12 px">
|
|
433
|
+
<k-card label="Output*">
|
|
434
|
+
<div class="d-ib bg-alt p mr mb b">b</div>
|
|
435
|
+
<div class="d-ib bg-alt p mr mb bt">bt</div>
|
|
436
|
+
<div class="d-ib bg-alt p mr mb br">br</div>
|
|
437
|
+
<div class="d-ib bg-alt p mr mb bb">bb</div>
|
|
438
|
+
<div class="d-ib bg-alt p mr mb bl">bl</div>
|
|
439
|
+
<div class="d-ib bg-alt p mr mb bx">bx</div>
|
|
440
|
+
<div class="d-ib bg-alt p mr mb by">by</div>
|
|
441
|
+
</k-card>
|
|
442
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
443
|
+
</div>
|
|
444
|
+
</div>
|
|
445
|
+
|
|
446
|
+
<h3 id="border-radius">Border Radius</h3>
|
|
447
|
+
<div class="row -mx">
|
|
448
|
+
<div class="col m-span-12 px">
|
|
449
|
+
<k-card label="HTML">
|
|
450
|
+
<pre><code class="hljs xml"><span class="hljs-comment"><!-- All corners --></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"r"</span>></span>r<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"round"</span>></span>round<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><br /><span class="hljs-comment"><!-- Individual corners --></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rtl"</span>></span>rtl<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rtr"</span>></span>rtr<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rbr"</span>></span>rbr<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rbl"</span>></span>rbl<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><br /><span class="hljs-comment"><!-- Side combinations --></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rt"</span>></span>rt<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rb"</span>></span>rb<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rl"</span>></span>rl<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rr"</span>></span>rr<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
451
|
+
</k-card>
|
|
452
|
+
</div>
|
|
453
|
+
<div class="col m-span-12 px">
|
|
454
|
+
<k-card label="Output*">
|
|
455
|
+
<div class="mb">
|
|
456
|
+
<div class="d-ib bg-alt p mr mb b r">r</div>
|
|
457
|
+
<div class="d-ib bg-alt p mr mb b round">round</div>
|
|
458
|
+
</div>
|
|
459
|
+
<div class="mb">
|
|
460
|
+
<div class="d-ib bg-alt p mr mb b rtl">rtl</div>
|
|
461
|
+
<div class="d-ib bg-alt p mr mb b rtr">rtr</div>
|
|
462
|
+
<div class="d-ib bg-alt p mr mb b rbr">rbr</div>
|
|
463
|
+
<div class="d-ib bg-alt p mr mb b rbl">rbl</div>
|
|
464
|
+
</div>
|
|
465
|
+
<div>
|
|
466
|
+
<div class="d-ib bg-alt p mr mb b rt">rt</div>
|
|
467
|
+
<div class="d-ib bg-alt p mr mb b rb">rb</div>
|
|
468
|
+
<div class="d-ib bg-alt p mr mb b rl">rl</div>
|
|
469
|
+
<div class="d-ib bg-alt p mr mb b rr">rr</div>
|
|
470
|
+
</div>
|
|
471
|
+
</k-card>
|
|
472
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
473
|
+
</div>
|
|
474
|
+
</div>
|
|
475
|
+
<h3>Border Radius Classes</h3>
|
|
476
|
+
<table>
|
|
477
|
+
<thead>
|
|
478
|
+
<tr>
|
|
479
|
+
<th>Class</th>
|
|
480
|
+
<th>Description</th>
|
|
481
|
+
</tr>
|
|
482
|
+
</thead>
|
|
483
|
+
<tbody>
|
|
484
|
+
<tr>
|
|
485
|
+
<td><code>r</code></td>
|
|
486
|
+
<td>All corners (0.25rem)</td>
|
|
487
|
+
</tr>
|
|
488
|
+
<tr>
|
|
489
|
+
<td><code>round</code></td>
|
|
490
|
+
<td>Fully rounded (9999rem)</td>
|
|
491
|
+
</tr>
|
|
492
|
+
<tr>
|
|
493
|
+
<td><code>rtl</code></td>
|
|
494
|
+
<td>Top-left corner only</td>
|
|
495
|
+
</tr>
|
|
496
|
+
<tr>
|
|
497
|
+
<td><code>rtr</code></td>
|
|
498
|
+
<td>Top-right corner only</td>
|
|
499
|
+
</tr>
|
|
500
|
+
<tr>
|
|
501
|
+
<td><code>rbr</code></td>
|
|
502
|
+
<td>Bottom-right corner only</td>
|
|
503
|
+
</tr>
|
|
504
|
+
<tr>
|
|
505
|
+
<td><code>rbl</code></td>
|
|
506
|
+
<td>Bottom-left corner only</td>
|
|
507
|
+
</tr>
|
|
508
|
+
<tr>
|
|
509
|
+
<td><code>rt</code></td>
|
|
510
|
+
<td>Top corners (left + right)</td>
|
|
511
|
+
</tr>
|
|
512
|
+
<tr>
|
|
513
|
+
<td><code>rb</code></td>
|
|
514
|
+
<td>Bottom corners (left + right)</td>
|
|
515
|
+
</tr>
|
|
516
|
+
<tr>
|
|
517
|
+
<td><code>rl</code></td>
|
|
518
|
+
<td>Left corners (top + bottom)</td>
|
|
519
|
+
</tr>
|
|
520
|
+
<tr>
|
|
521
|
+
<td><code>rr</code></td>
|
|
522
|
+
<td>Right corners (top + bottom)</td>
|
|
523
|
+
</tr>
|
|
524
|
+
</tbody>
|
|
525
|
+
</table>
|
|
526
|
+
<p class="mt">
|
|
527
|
+
<small><strong>Note:</strong> Add <code>0</code> suffix (e.g.,
|
|
528
|
+
<code>r0</code>, <code>rt0</code>) to cancel border radius.</small>
|
|
529
|
+
</p>
|
|
530
|
+
|
|
531
|
+
<h2 id="padding">Padding</h2>
|
|
532
|
+
|
|
533
|
+
<k-card>
|
|
534
|
+
<h3>Color Legend</h3>
|
|
535
|
+
<ul>
|
|
536
|
+
<li><strong style="color: #00ff00">Green</strong> = Padding</li>
|
|
537
|
+
<li><strong style="color: #ff8c00">Orange</strong> = Margins</li>
|
|
538
|
+
<li>
|
|
539
|
+
<strong style="color: #ff0000">Red</strong> = Negative Margins
|
|
540
|
+
</li>
|
|
541
|
+
<li>
|
|
542
|
+
<strong style="color: #ff0000">Red Border</strong> = Cancelled
|
|
543
|
+
Margins
|
|
544
|
+
</li>
|
|
545
|
+
</ul>
|
|
546
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
547
|
+
</k-card>
|
|
548
|
+
|
|
549
|
+
<div class="row -mx">
|
|
550
|
+
<div class="col m-span-12 px">
|
|
551
|
+
<k-card label="HTML">
|
|
552
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p"</span>></span>p<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pt"</span>></span>pt<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pr"</span>></span>pr<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pb"</span>></span>pb<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pl"</span>></span>pl<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"px"</span>></span>px<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"py"</span>></span>py<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
553
|
+
</k-card>
|
|
554
|
+
</div>
|
|
555
|
+
<div class="col m-span-12 px">
|
|
556
|
+
<k-card label="Output*">
|
|
557
|
+
<div class="d-ib bg-success mx mb p">
|
|
558
|
+
<div class="d-ib bg-alt pq">p</div>
|
|
559
|
+
</div>
|
|
560
|
+
<div class="d-ib bg-success mx mb pt">
|
|
561
|
+
<div class="d-ib bg-alt pq">pt</div>
|
|
562
|
+
</div>
|
|
563
|
+
<div class="d-ib bg-success mx mb pr">
|
|
564
|
+
<div class="d-ib bg-alt pq">pr</div>
|
|
565
|
+
</div>
|
|
566
|
+
<div class="d-ib bg-success mx mb pb">
|
|
567
|
+
<div class="d-ib bg-alt pq">pb</div>
|
|
568
|
+
</div>
|
|
569
|
+
<div class="d-ib bg-success mx mb pl">
|
|
570
|
+
<div class="d-ib bg-alt pq">pl</div>
|
|
571
|
+
</div>
|
|
572
|
+
<div class="d-ib bg-success mx mb px">
|
|
573
|
+
<div class="d-ib bg-alt pq">px</div>
|
|
574
|
+
</div>
|
|
575
|
+
<div class="d-ib bg-success mx mb py">
|
|
576
|
+
<div class="d-ib bg-alt pq">py</div>
|
|
577
|
+
</div>
|
|
578
|
+
</k-card>
|
|
579
|
+
</div>
|
|
580
|
+
</div>
|
|
581
|
+
|
|
582
|
+
<h3 id="margins">Margins</h3>
|
|
583
|
+
<div class="row -mx">
|
|
584
|
+
<div class="col m-span-12 px">
|
|
585
|
+
<k-card label="HTML">
|
|
586
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m"</span>></span>m<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt"</span>></span>mt<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mr"</span>></span>mr<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb"</span>></span>mb<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ml"</span>></span>ml<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mx"</span>></span>mx<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my"</span>></span>my<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
587
|
+
</k-card>
|
|
588
|
+
</div>
|
|
589
|
+
<div class="col m-span-12 px">
|
|
590
|
+
<k-card label="Output*">
|
|
591
|
+
<div class="d-ib bg-warning mx mb p">
|
|
592
|
+
<div class="d-ib bg-alt pq">m</div>
|
|
593
|
+
</div>
|
|
594
|
+
<div class="d-ib bg-warning mx mb pt">
|
|
595
|
+
<div class="d-ib bg-alt pq">mt</div>
|
|
596
|
+
</div>
|
|
597
|
+
<div class="d-ib bg-warning mx mb pr">
|
|
598
|
+
<div class="d-ib bg-alt pq">mr</div>
|
|
599
|
+
</div>
|
|
600
|
+
<div class="d-ib bg-warning mx mb pb">
|
|
601
|
+
<div class="d-ib bg-alt pq">mb</div>
|
|
602
|
+
</div>
|
|
603
|
+
<div class="d-ib bg-warning mx mb pl">
|
|
604
|
+
<div class="d-ib bg-alt pq">ml</div>
|
|
605
|
+
</div>
|
|
606
|
+
<div class="d-ib bg-warning mx mb px">
|
|
607
|
+
<div class="d-ib bg-alt pq">mx</div>
|
|
608
|
+
</div>
|
|
609
|
+
<div class="d-ib bg-warning mx mb py">
|
|
610
|
+
<div class="d-ib bg-alt pq">my</div>
|
|
611
|
+
</div>
|
|
612
|
+
</k-card>
|
|
613
|
+
</div>
|
|
614
|
+
</div>
|
|
615
|
+
|
|
616
|
+
<h3 id="negative-margins">Negative Margins</h3>
|
|
617
|
+
<div class="row -mx">
|
|
618
|
+
<div class="col m-span-12 px">
|
|
619
|
+
<k-card label="HTML">
|
|
620
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-m"</span>></span>-m<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mt"</span>></span>-mt<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mr"</span>></span>-mr<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mb"</span>></span>-mb<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-ml"</span>></span>-ml<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-mx"</span>></span>-mx<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"-my"</span>></span>-my<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
621
|
+
</k-card>
|
|
622
|
+
</div>
|
|
623
|
+
<div class="col m-span-12 px">
|
|
624
|
+
<k-card label="Output*">
|
|
625
|
+
<div class="d-ib bg-danger mx mb p">
|
|
626
|
+
<div class="d-ib bg-alt pq">-m</div>
|
|
627
|
+
</div>
|
|
628
|
+
<div class="d-ib bg-danger mx mb pt">
|
|
629
|
+
<div class="d-ib bg-alt pq">-mt</div>
|
|
630
|
+
</div>
|
|
631
|
+
<div class="d-ib bg-danger mx mb pr">
|
|
632
|
+
<div class="d-ib bg-alt pq">-mr</div>
|
|
633
|
+
</div>
|
|
634
|
+
<div class="d-ib bg-danger mx mb pb">
|
|
635
|
+
<div class="d-ib bg-alt pq">-mb</div>
|
|
636
|
+
</div>
|
|
637
|
+
<div class="d-ib bg-danger mx mb pl">
|
|
638
|
+
<div class="d-ib bg-alt pq">-ml</div>
|
|
639
|
+
</div>
|
|
640
|
+
<div class="d-ib bg-danger mx mb px">
|
|
641
|
+
<div class="d-ib bg-alt pq">-mx</div>
|
|
642
|
+
</div>
|
|
643
|
+
<div class="d-ib bg-danger mx mb py">
|
|
644
|
+
<div class="d-ib bg-alt pq">-my</div>
|
|
645
|
+
</div>
|
|
646
|
+
</k-card>
|
|
647
|
+
</div>
|
|
648
|
+
</div>
|
|
649
|
+
|
|
650
|
+
<h3 id="cancelled-margins">Cancelled Margins</h3>
|
|
651
|
+
<div class="row -mx">
|
|
652
|
+
<div class="col m-span-12 px">
|
|
653
|
+
<k-card label="HTML">
|
|
654
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m m0"</span>></span>m m0<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mt0"</span>></span>m mt0<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mr0"</span>></span>m mr0<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mb0"</span>></span>m mb0<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m ml0"</span>></span>m ml0<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m mx0"</span>></span>m mx0<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m my0"</span>></span>m my0<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
655
|
+
</k-card>
|
|
656
|
+
</div>
|
|
657
|
+
<div class="col m-span-12 px">
|
|
658
|
+
<k-card label="Output*">
|
|
659
|
+
<div class="d-ib bg-warning mx mb">
|
|
660
|
+
<div
|
|
661
|
+
class="d-ib bg-alt pq b"
|
|
662
|
+
style="border-color: var(--c_danger) !important"
|
|
663
|
+
>
|
|
664
|
+
m m0
|
|
665
|
+
</div>
|
|
666
|
+
</div>
|
|
667
|
+
<div class="d-ib bg-warning mx mb px pb">
|
|
668
|
+
<div
|
|
669
|
+
class="d-ib bg-alt pq bt"
|
|
670
|
+
style="border-color: var(--c_danger) !important"
|
|
671
|
+
>
|
|
672
|
+
m mt0
|
|
673
|
+
</div>
|
|
674
|
+
</div>
|
|
675
|
+
<div class="d-ib bg-warning mx mb py pl">
|
|
676
|
+
<div
|
|
677
|
+
class="d-ib bg-alt pq br"
|
|
678
|
+
style="border-color: var(--c_danger) !important"
|
|
679
|
+
>
|
|
680
|
+
m mr0
|
|
681
|
+
</div>
|
|
682
|
+
</div>
|
|
683
|
+
<div class="d-ib bg-warning mx mb px pt">
|
|
684
|
+
<div
|
|
685
|
+
class="d-ib bg-alt pq bb"
|
|
686
|
+
style="border-color: var(--c_danger) !important"
|
|
687
|
+
>
|
|
688
|
+
m mb0
|
|
689
|
+
</div>
|
|
690
|
+
</div>
|
|
691
|
+
<div class="d-ib bg-warning mx mb py pr">
|
|
692
|
+
<div
|
|
693
|
+
class="d-ib bg-alt pq bl"
|
|
694
|
+
style="border-color: var(--c_danger) !important"
|
|
695
|
+
>
|
|
696
|
+
m ml0
|
|
697
|
+
</div>
|
|
698
|
+
</div>
|
|
699
|
+
<div class="d-ib bg-warning mx mb py">
|
|
700
|
+
<div
|
|
701
|
+
class="d-ib bg-alt pq bx"
|
|
702
|
+
style="border-color: var(--c_danger) !important"
|
|
703
|
+
>
|
|
704
|
+
m mx0
|
|
705
|
+
</div>
|
|
706
|
+
</div>
|
|
707
|
+
<div class="d-ib bg-warning mx mb px">
|
|
708
|
+
<div
|
|
709
|
+
class="d-ib bg-alt pq by"
|
|
710
|
+
style="border-color: var(--c_danger) !important"
|
|
711
|
+
>
|
|
712
|
+
m my0
|
|
713
|
+
</div>
|
|
714
|
+
</div>
|
|
715
|
+
</k-card>
|
|
716
|
+
</div>
|
|
717
|
+
</div>
|
|
718
|
+
|
|
719
|
+
<h1 id="inputs">Inputs</h1>
|
|
720
|
+
|
|
721
|
+
<h2 id="basic-inputs">Basic Inputs</h2>
|
|
722
|
+
<div class="row -mx">
|
|
723
|
+
<div class="col m-span-12 px">
|
|
724
|
+
<k-card label="HTML">
|
|
725
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Input"</span> /></span><br /><span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">select</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 1<span class="hljs-tag"></<span class="hljs-name">option</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 2<span class="hljs-tag"></<span class="hljs-name">option</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 3<span class="hljs-tag"></<span class="hljs-name">option</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">select</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">multiple</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 1<span class="hljs-tag"></<span class="hljs-name">option</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 2<span class="hljs-tag"></<span class="hljs-name">option</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 3<span class="hljs-tag"></<span class="hljs-name">option</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 4<span class="hljs-tag"></<span class="hljs-name">option</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 5<span class="hljs-tag"></<span class="hljs-name">option</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 6<span class="hljs-tag"></<span class="hljs-name">option</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">select</span>></span></code></pre>
|
|
726
|
+
</k-card>
|
|
727
|
+
</div>
|
|
728
|
+
<div class="col m-span-12 px">
|
|
729
|
+
<k-card
|
|
730
|
+
label="Output"
|
|
731
|
+
class="pb"
|
|
732
|
+
>
|
|
733
|
+
<input placeholder="Input" />
|
|
734
|
+
<textarea placeholder="Textarea"></textarea>
|
|
735
|
+
<select>
|
|
736
|
+
<option>Option 1</option>
|
|
737
|
+
<option>Option 2</option>
|
|
738
|
+
<option>Option 3</option>
|
|
739
|
+
</select>
|
|
740
|
+
<select multiple>
|
|
741
|
+
<option>Option 1</option>
|
|
742
|
+
<option>Option 2</option>
|
|
743
|
+
<option>Option 3</option>
|
|
744
|
+
<option>Option 4</option>
|
|
745
|
+
<option>Option 5</option>
|
|
746
|
+
<option>Option 6</option>
|
|
747
|
+
</select>
|
|
748
|
+
</k-card>
|
|
749
|
+
</div>
|
|
750
|
+
</div>
|
|
751
|
+
|
|
752
|
+
<h2 id="labels">Labels</h2>
|
|
753
|
+
<div class="row -mx">
|
|
754
|
+
<div class="col m-span-12 px">
|
|
755
|
+
<k-card label="HTML">
|
|
756
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input"</span>></span>Input:<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input"</span> /></span></code></pre>
|
|
757
|
+
</k-card>
|
|
758
|
+
</div>
|
|
759
|
+
<div class="col m-span-12 px">
|
|
760
|
+
<k-card
|
|
761
|
+
label="Output"
|
|
762
|
+
class="pb"
|
|
763
|
+
>
|
|
764
|
+
<label for="input">Input:</label>
|
|
765
|
+
<input id="input" />
|
|
766
|
+
</k-card>
|
|
767
|
+
</div>
|
|
768
|
+
</div>
|
|
769
|
+
|
|
770
|
+
<h2 id="checkbox-radio">Checkbox / Radio</h2>
|
|
771
|
+
<div class="row -mx">
|
|
772
|
+
<div class="col m-span-12 px">
|
|
773
|
+
<k-card label="HTML">
|
|
774
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"check1"</span> /></span><br /><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"check1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span>Check 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"check2"</span> /></span><br /><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"check2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span>Check 2<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"radios"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rad1"</span> /></span><br /><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"rad1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span>Radio 1<span class="hljs-tag"></<span class="hljs-name">label</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"radios"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"rad2"</span> /></span><br /><span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"rad2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"checkbox"</span>></span>Radio 2<span class="hljs-tag"></<span class="hljs-name">label</span>></span></code></pre>
|
|
775
|
+
</k-card>
|
|
776
|
+
</div>
|
|
777
|
+
<div class="col m-span-12 px">
|
|
778
|
+
<k-card
|
|
779
|
+
label="Output"
|
|
780
|
+
class="pb"
|
|
781
|
+
>
|
|
782
|
+
<input
|
|
783
|
+
type="checkbox"
|
|
784
|
+
id="check1"
|
|
785
|
+
/>
|
|
786
|
+
<label
|
|
787
|
+
for="check1"
|
|
788
|
+
class="checkbox"
|
|
789
|
+
>Check 1</label>
|
|
790
|
+
<input
|
|
791
|
+
type="checkbox"
|
|
792
|
+
id="check2"
|
|
793
|
+
/>
|
|
794
|
+
<label
|
|
795
|
+
for="check2"
|
|
796
|
+
class="checkbox"
|
|
797
|
+
>Check 2</label>
|
|
798
|
+
<br /><br />
|
|
799
|
+
<input
|
|
800
|
+
type="radio"
|
|
801
|
+
name="radios"
|
|
802
|
+
id="rad1"
|
|
803
|
+
/>
|
|
804
|
+
<label
|
|
805
|
+
for="rad1"
|
|
806
|
+
class="checkbox"
|
|
807
|
+
>Radio 1</label>
|
|
808
|
+
<input
|
|
809
|
+
type="radio"
|
|
810
|
+
name="radios"
|
|
811
|
+
id="rad2"
|
|
812
|
+
/>
|
|
813
|
+
<label
|
|
814
|
+
for="rad2"
|
|
815
|
+
class="checkbox"
|
|
816
|
+
>Radio 2</label>
|
|
817
|
+
</k-card>
|
|
818
|
+
</div>
|
|
819
|
+
</div>
|
|
820
|
+
|
|
821
|
+
<h1 id="buttons">Buttons</h1>
|
|
822
|
+
|
|
823
|
+
<h2 id="button-types">Button Types</h2>
|
|
824
|
+
<div class="row -mx">
|
|
825
|
+
<div class="col m-span-12 px">
|
|
826
|
+
<k-card label="HTML">
|
|
827
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span>></span>button<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"input"</span> /></span><br /><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"submit input"</span> /></span><br /><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>a.btn<span class="hljs-tag"></<span class="hljs-name">a</span>></span></code></pre>
|
|
828
|
+
</k-card>
|
|
829
|
+
</div>
|
|
830
|
+
<div class="col m-span-12 px">
|
|
831
|
+
<k-card
|
|
832
|
+
label="Output"
|
|
833
|
+
class="pb"
|
|
834
|
+
>
|
|
835
|
+
<button>button</button>
|
|
836
|
+
<input
|
|
837
|
+
type="button"
|
|
838
|
+
value="input"
|
|
839
|
+
/>
|
|
840
|
+
<input
|
|
841
|
+
type="submit"
|
|
842
|
+
value="submit input"
|
|
843
|
+
/>
|
|
844
|
+
<a
|
|
845
|
+
href="#"
|
|
846
|
+
class="btn"
|
|
847
|
+
>a.btn</a>
|
|
848
|
+
</k-card>
|
|
849
|
+
</div>
|
|
850
|
+
</div>
|
|
851
|
+
|
|
852
|
+
<h2 id="button-colors">Button Colors</h2>
|
|
853
|
+
<div class="row -mx">
|
|
854
|
+
<div class="col m-span-12 px">
|
|
855
|
+
<k-card label="HTML">
|
|
856
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span>></span>Default<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"primary"</span>></span>Primary<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary"</span>></span>Secondary<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success"</span>></span>Success<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning"</span>></span>Warning<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"danger"</span>></span>Danger<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
857
|
+
</k-card>
|
|
858
|
+
</div>
|
|
859
|
+
<div class="col m-span-12 px">
|
|
860
|
+
<k-card
|
|
861
|
+
label="Output"
|
|
862
|
+
class="pb"
|
|
863
|
+
>
|
|
864
|
+
<button>Default</button>
|
|
865
|
+
<button class="primary">Primary</button>
|
|
866
|
+
<button class="secondary">Secondary</button>
|
|
867
|
+
<button class="success">Success</button>
|
|
868
|
+
<button class="warning">Warning</button>
|
|
869
|
+
<button class="danger">Danger</button>
|
|
870
|
+
</k-card>
|
|
871
|
+
</div>
|
|
872
|
+
</div>
|
|
873
|
+
|
|
874
|
+
<h2 id="button-sizes">Button Sizes</h2>
|
|
875
|
+
<div class="row -mx">
|
|
876
|
+
<div class="col m-span-12 px">
|
|
877
|
+
<k-card label="HTML">
|
|
878
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>></span>Small<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span>></span>Normal<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large"</span>></span>Large<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
879
|
+
</k-card>
|
|
880
|
+
</div>
|
|
881
|
+
<div class="col m-span-12 px">
|
|
882
|
+
<k-card
|
|
883
|
+
label="Output"
|
|
884
|
+
class="pb"
|
|
885
|
+
>
|
|
886
|
+
<button class="small">Small</button>
|
|
887
|
+
<button>Normal</button>
|
|
888
|
+
<button class="large">Large</button>
|
|
889
|
+
</k-card>
|
|
890
|
+
</div>
|
|
891
|
+
</div>
|
|
892
|
+
|
|
893
|
+
<h2 id="button-groups">Button Groups</h2>
|
|
894
|
+
<div class="row -mx">
|
|
895
|
+
<div class="col m-span-12 px">
|
|
896
|
+
<k-card label="HTML">
|
|
897
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-grp"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">button</span>></span>Default<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">button</span>></span>Default<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">button</span>></span>Default<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
898
|
+
</k-card>
|
|
899
|
+
</div>
|
|
900
|
+
<div class="col m-span-12 px">
|
|
901
|
+
<k-card
|
|
902
|
+
label="Output"
|
|
903
|
+
class="pb"
|
|
904
|
+
>
|
|
905
|
+
<div class="btn-grp">
|
|
906
|
+
<button>Default</button>
|
|
907
|
+
<button>Default</button>
|
|
908
|
+
<button>Default</button>
|
|
909
|
+
</div>
|
|
910
|
+
</k-card>
|
|
911
|
+
</div>
|
|
912
|
+
</div>
|
|
913
|
+
|
|
914
|
+
<h2 id="no-styles">No Styles</h2>
|
|
915
|
+
<div class="row -mx">
|
|
916
|
+
<div class="col m-span-12 px">
|
|
917
|
+
<k-card label="HTML">
|
|
918
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-style"</span>></span>no-style<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
919
|
+
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-btn"</span>></span>no-btn<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
920
|
+
</k-card>
|
|
921
|
+
</div>
|
|
922
|
+
<div class="col m-span-12 px">
|
|
923
|
+
<k-card
|
|
924
|
+
label="Output"
|
|
925
|
+
class="pb"
|
|
926
|
+
>
|
|
927
|
+
<button class="no-style">no-style</button>
|
|
928
|
+
<button class="no-btn">no-btn</button>
|
|
929
|
+
</k-card>
|
|
930
|
+
</div>
|
|
931
|
+
</div>
|
|
932
|
+
|
|
933
|
+
<h1 id="tables">Tables</h1>
|
|
934
|
+
|
|
935
|
+
<h2 id="basic-table">Basic Table</h2>
|
|
936
|
+
<div class="row -mx">
|
|
937
|
+
<div class="col m-span-12 px">
|
|
938
|
+
<k-card label="HTML">
|
|
939
|
+
<pre style="overflow:auto;max-height:20rem;"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">table</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 1<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 2<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 3<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 4<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">table</span>></span></code></pre>
|
|
940
|
+
</k-card>
|
|
941
|
+
</div>
|
|
942
|
+
<div class="col m-span-12 px">
|
|
943
|
+
<k-card
|
|
944
|
+
label="Output"
|
|
945
|
+
class="pb"
|
|
946
|
+
>
|
|
947
|
+
<table>
|
|
948
|
+
<thead>
|
|
949
|
+
<tr>
|
|
950
|
+
<th>Field 1</th>
|
|
951
|
+
<th>Field 2</th>
|
|
952
|
+
<th>Field 3</th>
|
|
953
|
+
<th>Field 4</th>
|
|
954
|
+
</tr>
|
|
955
|
+
</thead>
|
|
956
|
+
<tbody>
|
|
957
|
+
<tr>
|
|
958
|
+
<td>Row 1 - Data 1</td>
|
|
959
|
+
<td>Row 1 - Data 2</td>
|
|
960
|
+
<td>Row 1 - Data 3</td>
|
|
961
|
+
<td>Row 1 - Data 4</td>
|
|
962
|
+
</tr>
|
|
963
|
+
<tr>
|
|
964
|
+
<td>Row 2 - Data 1</td>
|
|
965
|
+
<td>Row 2 - Data 2</td>
|
|
966
|
+
<td>Row 2 - Data 3</td>
|
|
967
|
+
<td>Row 2 - Data 4</td>
|
|
968
|
+
</tr>
|
|
969
|
+
<tr>
|
|
970
|
+
<td>Row 3 - Data 1</td>
|
|
971
|
+
<td>Row 3 - Data 2</td>
|
|
972
|
+
<td>Row 3 - Data 3</td>
|
|
973
|
+
<td>Row 3 - Data 4</td>
|
|
974
|
+
</tr>
|
|
975
|
+
</tbody>
|
|
976
|
+
</table>
|
|
977
|
+
</k-card>
|
|
978
|
+
</div>
|
|
979
|
+
</div>
|
|
980
|
+
|
|
981
|
+
<h2 id="responsive-table">Responsive Table</h2>
|
|
982
|
+
<div class="row -mx">
|
|
983
|
+
<div class="col m-span-12 px">
|
|
984
|
+
<k-card label="HTML">
|
|
985
|
+
<pre style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table-wrapper"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">table</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 1<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 2<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 3<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 4<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 5<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 6<span class="hljs-tag"></<span class="hljs-name">th</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">thead</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 1 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 2 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 3<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 4<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 5<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Row 3 - Data 6<span class="hljs-tag"></<span class="hljs-name">td</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">table</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
986
|
+
</k-card>
|
|
987
|
+
</div>
|
|
988
|
+
<div class="col m-span-12 px">
|
|
989
|
+
<k-resize
|
|
990
|
+
dimension="width"
|
|
991
|
+
class="b0"
|
|
992
|
+
style="min-width: 22rem; max-width: 688px"
|
|
993
|
+
>
|
|
994
|
+
<k-card
|
|
995
|
+
label="Output*"
|
|
996
|
+
class="mtq"
|
|
997
|
+
>
|
|
998
|
+
<div class="table-wrapper">
|
|
999
|
+
<table>
|
|
1000
|
+
<thead>
|
|
1001
|
+
<tr>
|
|
1002
|
+
<th>Field 1</th>
|
|
1003
|
+
<th>Field 2</th>
|
|
1004
|
+
<th>Field 3</th>
|
|
1005
|
+
<th>Field 4</th>
|
|
1006
|
+
<th>Field 5</th>
|
|
1007
|
+
<th>Field 6</th>
|
|
1008
|
+
</tr>
|
|
1009
|
+
</thead>
|
|
1010
|
+
<tbody>
|
|
1011
|
+
<tr>
|
|
1012
|
+
<td>Row 1 - Data 1</td>
|
|
1013
|
+
<td>Row 1 - Data 2</td>
|
|
1014
|
+
<td>Row 1 - Data 3</td>
|
|
1015
|
+
<td>Row 1 - Data 4</td>
|
|
1016
|
+
<td>Row 1 - Data 5</td>
|
|
1017
|
+
<td>Row 1 - Data 6</td>
|
|
1018
|
+
</tr>
|
|
1019
|
+
<tr>
|
|
1020
|
+
<td>Row 2 - Data 1</td>
|
|
1021
|
+
<td>Row 2 - Data 2</td>
|
|
1022
|
+
<td>Row 2 - Data 3</td>
|
|
1023
|
+
<td>Row 2 - Data 4</td>
|
|
1024
|
+
<td>Row 2 - Data 5</td>
|
|
1025
|
+
<td>Row 2 - Data 6</td>
|
|
1026
|
+
</tr>
|
|
1027
|
+
<tr>
|
|
1028
|
+
<td>Row 3 - Data 1</td>
|
|
1029
|
+
<td>Row 3 - Data 2</td>
|
|
1030
|
+
<td>Row 3 - Data 3</td>
|
|
1031
|
+
<td>Row 3 - Data 4</td>
|
|
1032
|
+
<td>Row 3 - Data 5</td>
|
|
1033
|
+
<td>Row 3 - Data 6</td>
|
|
1034
|
+
</tr>
|
|
1035
|
+
</tbody>
|
|
1036
|
+
</table>
|
|
1037
|
+
</div>
|
|
1038
|
+
</k-card>
|
|
1039
|
+
</k-resize>
|
|
1040
|
+
</div>
|
|
1041
|
+
</div>
|
|
1042
|
+
|
|
1043
|
+
<h1 id="colors">Colors</h1>
|
|
1044
|
+
|
|
1045
|
+
<h2 id="background">Background</h2>
|
|
1046
|
+
<div class="row -mx">
|
|
1047
|
+
<div class="col m-span-12 px">
|
|
1048
|
+
<k-card label="HTML">
|
|
1049
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span>></span>Alternate<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-inv"</span>></span>Inverse<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-primary"</span>></span>Primary<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-secondary"</span>></span>Secondary<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-success"</span>></span>Success<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-warning"</span>></span>Warning<span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-danger"</span>></span>Danger<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1050
|
+
</k-card>
|
|
1051
|
+
</div>
|
|
1052
|
+
<div class="col m-span-12 px">
|
|
1053
|
+
<k-card
|
|
1054
|
+
label="Output"
|
|
1055
|
+
class="pb"
|
|
1056
|
+
>
|
|
1057
|
+
<div class="bg-alt p">Alternate</div>
|
|
1058
|
+
<div class="bg-inv p">Inverse</div>
|
|
1059
|
+
<div class="bg-primary p">Primary</div>
|
|
1060
|
+
<div class="bg-secondary p">Secondary</div>
|
|
1061
|
+
<div class="bg-success p">Success</div>
|
|
1062
|
+
<div class="bg-warning p">Warning</div>
|
|
1063
|
+
<div class="bg-danger p">Danger</div>
|
|
1064
|
+
</k-card>
|
|
1065
|
+
</div>
|
|
1066
|
+
</div>
|
|
1067
|
+
|
|
1068
|
+
<h2 id="text-colors">Text Colors</h2>
|
|
1069
|
+
<div class="row -mx">
|
|
1070
|
+
<div class="col m-span-12 px">
|
|
1071
|
+
<k-card label="HTML">
|
|
1072
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Normal<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted"</span>></span>Muted<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-inv"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background: grey"</span>></span>Inverse<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-primary"</span>></span>Primary<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-secondary"</span>></span>Secondary<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-success"</span>></span>Success<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-warning"</span>></span>Warning<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-danger"</span>></span>Danger<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
|
|
1073
|
+
</k-card>
|
|
1074
|
+
</div>
|
|
1075
|
+
<div class="col m-span-12 px">
|
|
1076
|
+
<k-card label="Output">
|
|
1077
|
+
<p>Normal</p>
|
|
1078
|
+
<p class="tc-muted">Muted</p>
|
|
1079
|
+
<p
|
|
1080
|
+
class="tc-inv"
|
|
1081
|
+
style="background: grey"
|
|
1082
|
+
>Inverse</p>
|
|
1083
|
+
<p class="tc-primary">Primary</p>
|
|
1084
|
+
<p class="tc-secondary">Secondary</p>
|
|
1085
|
+
<p class="tc-success">Success</p>
|
|
1086
|
+
<p class="tc-warning">Warning</p>
|
|
1087
|
+
<p class="tc-danger">Danger</p>
|
|
1088
|
+
</k-card>
|
|
1089
|
+
</div>
|
|
1090
|
+
</div>
|
|
1091
|
+
|
|
1092
|
+
<h1 id="elevation">Elevation</h1>
|
|
1093
|
+
<p>The elevation system provides three independent utilities that work together to create visual depth and control
|
|
1094
|
+
stacking order. Level 2 is the default page level (z-index 20). Levels 0–1 are below page level, and levels 3–10
|
|
1095
|
+
are
|
|
1096
|
+
above. Each level increments z-index by 10, leaving room for fine-tuning between levels.</p>
|
|
1097
|
+
<h2 id="elevation-z-index">Z-Index (<code>elevation-*</code>)</h2>
|
|
1098
|
+
<p>Sets <code>z-index</code> only. Use on positioned elements (navbars, dialogs, drawers) to control stacking order.
|
|
1099
|
+
</p>
|
|
1100
|
+
<div class="row -mx">
|
|
1101
|
+
<div class="col m-span-12 px">
|
|
1102
|
+
<k-card label="HTML">
|
|
1103
|
+
<pre
|
|
1104
|
+
style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 0<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 0<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 1<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 10<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 2<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 20<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 3<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 30<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 4<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 40<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 5<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 50<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>(6–10 same)<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1105
|
+
</k-card>
|
|
1106
|
+
</div>
|
|
1107
|
+
<div class="col m-span-12 px">
|
|
1108
|
+
<k-card label="Output">
|
|
1109
|
+
<div class="elevation-0 shadow elevation-card">
|
|
1110
|
+
<div>
|
|
1111
|
+
<strong>Level 0</strong><br>
|
|
1112
|
+
<span class="tc-muted small">z-index: 0</span>
|
|
1113
|
+
</div>
|
|
1114
|
+
</div>
|
|
1115
|
+
<div class="elevation-1 shadow elevation-card">
|
|
1116
|
+
<div>
|
|
1117
|
+
<strong>Level 1</strong><br>
|
|
1118
|
+
<span class="tc-muted small">z-index: 10</span>
|
|
1119
|
+
</div>
|
|
1120
|
+
</div>
|
|
1121
|
+
<div class="elevation-2 shadow elevation-card">
|
|
1122
|
+
<div>
|
|
1123
|
+
<strong>Level 2</strong><br>
|
|
1124
|
+
<span class="tc-muted small">z-index: 20</span>
|
|
1125
|
+
|
|
1126
|
+
</div>
|
|
1127
|
+
</div>
|
|
1128
|
+
<div class="elevation-3 shadow elevation-card">
|
|
1129
|
+
<div>
|
|
1130
|
+
<strong>Level 3</strong><br>
|
|
1131
|
+
<span class="tc-muted small">z-index: 30</span>
|
|
1132
|
+
</div>
|
|
1133
|
+
</div>
|
|
1134
|
+
<div class="elevation-4 shadow elevation-card">
|
|
1135
|
+
<div>
|
|
1136
|
+
<strong>Level 4</strong><br>
|
|
1137
|
+
<span class="tc-muted small">z-index: 40</span>
|
|
1138
|
+
</div>
|
|
1139
|
+
</div>
|
|
1140
|
+
<div class="elevation-5 shadow elevation-card">
|
|
1141
|
+
<div>
|
|
1142
|
+
<strong>Level 5</strong><br>
|
|
1143
|
+
<span class="tc-muted small">z-index: 50</span><br />
|
|
1144
|
+
<span class="tc-muted small">(6–10 same)</span>
|
|
1145
|
+
</div>
|
|
1146
|
+
</div>
|
|
1147
|
+
</k-card>
|
|
1148
|
+
</div>
|
|
1149
|
+
</div>
|
|
1150
|
+
<div class="table-wrapper mb">
|
|
1151
|
+
<table>
|
|
1152
|
+
<thead>
|
|
1153
|
+
<tr>
|
|
1154
|
+
<th>Class</th>
|
|
1155
|
+
<th>z-index</th>
|
|
1156
|
+
</tr>
|
|
1157
|
+
</thead>
|
|
1158
|
+
<tbody>
|
|
1159
|
+
<tr>
|
|
1160
|
+
<td><code>elevation-0</code></td>
|
|
1161
|
+
<td>0</td>
|
|
1162
|
+
</tr>
|
|
1163
|
+
<tr>
|
|
1164
|
+
<td><code>elevation-1</code></td>
|
|
1165
|
+
<td>10</td>
|
|
1166
|
+
</tr>
|
|
1167
|
+
<tr>
|
|
1168
|
+
<td><code>elevation-2</code></td>
|
|
1169
|
+
<td>20 (page default)</td>
|
|
1170
|
+
</tr>
|
|
1171
|
+
<tr>
|
|
1172
|
+
<td><code>elevation-3</code></td>
|
|
1173
|
+
<td>30</td>
|
|
1174
|
+
</tr>
|
|
1175
|
+
<tr>
|
|
1176
|
+
<td><code>elevation-4</code></td>
|
|
1177
|
+
<td>40</td>
|
|
1178
|
+
</tr>
|
|
1179
|
+
<tr>
|
|
1180
|
+
<td><code>elevation-5</code></td>
|
|
1181
|
+
<td>50</td>
|
|
1182
|
+
</tr>
|
|
1183
|
+
<tr>
|
|
1184
|
+
<td><code>elevation-6</code></td>
|
|
1185
|
+
<td>60</td>
|
|
1186
|
+
</tr>
|
|
1187
|
+
<tr>
|
|
1188
|
+
<td><code>elevation-7</code></td>
|
|
1189
|
+
<td>70</td>
|
|
1190
|
+
</tr>
|
|
1191
|
+
<tr>
|
|
1192
|
+
<td><code>elevation-8</code></td>
|
|
1193
|
+
<td>80</td>
|
|
1194
|
+
</tr>
|
|
1195
|
+
<tr>
|
|
1196
|
+
<td><code>elevation-9</code></td>
|
|
1197
|
+
<td>90</td>
|
|
1198
|
+
</tr>
|
|
1199
|
+
<tr>
|
|
1200
|
+
<td><code>elevation-10</code></td>
|
|
1201
|
+
<td>100</td>
|
|
1202
|
+
</tr>
|
|
1203
|
+
</tbody>
|
|
1204
|
+
</table>
|
|
1205
|
+
</div>
|
|
1206
|
+
<h2 id="elevation-shadow">Shadow (<code>shadow</code>)</h2>
|
|
1207
|
+
<p>Combine with an <code>elevation-*</code> class to apply a depth shadow. Levels 0–1 use inset shadows (sunk),
|
|
1208
|
+
level 2 has no shadow (page level), levels 3–5 use progressively larger outset drop shadows, and levels 6–10
|
|
1209
|
+
use the same shadow as level 5.</p>
|
|
1210
|
+
<div class="row -mx">
|
|
1211
|
+
<div class="col m-span-12 px">
|
|
1212
|
+
<k-card label="HTML">
|
|
1213
|
+
<pre
|
|
1214
|
+
style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 0<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Deep Inset Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 1<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Shallow Inset Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 2<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>No Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 3<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Small Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 4<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Medium Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 5<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Large Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Max (6–10 same)<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1215
|
+
</k-card>
|
|
1216
|
+
</div>
|
|
1217
|
+
<div class="col m-span-12 px">
|
|
1218
|
+
<k-card label="Output">
|
|
1219
|
+
<div class="elevation-0 shadow elevation-card">
|
|
1220
|
+
<div>
|
|
1221
|
+
<strong>Level 0</strong><br>
|
|
1222
|
+
<span class="tc-muted small">Deep Inset Shadow</span>
|
|
1223
|
+
</div>
|
|
1224
|
+
</div>
|
|
1225
|
+
<div class="elevation-1 shadow elevation-card">
|
|
1226
|
+
<div>
|
|
1227
|
+
<strong>Level 1</strong><br>
|
|
1228
|
+
<span class="tc-muted small">Shallow Inset Shadow</span>
|
|
1229
|
+
</div>
|
|
1230
|
+
</div>
|
|
1231
|
+
<div class="elevation-2 shadow elevation-card">
|
|
1232
|
+
<div>
|
|
1233
|
+
<strong>Level 2</strong><br>
|
|
1234
|
+
<span class="tc-muted small">No Shadow</span>
|
|
1235
|
+
</div>
|
|
1236
|
+
</div>
|
|
1237
|
+
<div class="elevation-3 shadow elevation-card">
|
|
1238
|
+
<div>
|
|
1239
|
+
<strong>Level 3</strong><br>
|
|
1240
|
+
<span class="tc-muted small">Small Drop Shadow</span>
|
|
1241
|
+
</div>
|
|
1242
|
+
</div>
|
|
1243
|
+
<div class="elevation-4 shadow elevation-card">
|
|
1244
|
+
<div>
|
|
1245
|
+
<strong>Level 4</strong><br>
|
|
1246
|
+
<span class="tc-muted small">Medium Drop Shadow</span>
|
|
1247
|
+
</div>
|
|
1248
|
+
</div>
|
|
1249
|
+
<div class="elevation-5 shadow elevation-card">
|
|
1250
|
+
<div>
|
|
1251
|
+
<strong>Level 5</strong><br>
|
|
1252
|
+
<span class="tc-muted small">Large Drop Shadow</span><br>
|
|
1253
|
+
<span class="tc-muted small">Max (6–10 same)</span>
|
|
1254
|
+
</div>
|
|
1255
|
+
</div>
|
|
1256
|
+
</k-card>
|
|
1257
|
+
</div>
|
|
1258
|
+
</div>
|
|
1259
|
+
<h2 id="elevation-bg">Elevation Background (<code>bg-elevation</code>)</h2>
|
|
1260
|
+
<p>Combine with an <code>elevation-*</code> class to apply an elevation-appropriate background color. In dark mode,
|
|
1261
|
+
higher elevations are progressively lighter (simulating ambient light from above). Levels 6–10 use the same
|
|
1262
|
+
background as level 5.</p>
|
|
1263
|
+
<div class="row -mx">
|
|
1264
|
+
<div class="col m-span-12 px">
|
|
1265
|
+
<k-card label="HTML">
|
|
1266
|
+
<pre
|
|
1267
|
+
style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 0<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Darkest<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 1<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Darker<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 2<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Page default<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 3<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>A Little Lighter<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 4<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Lighter<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 5<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Lightest<span class="hljs-tag"><<span class="hljs-name">br</span> /></span>(6–10 same)<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1268
|
+
</k-card>
|
|
1269
|
+
</div>
|
|
1270
|
+
<div class="col m-span-12 px">
|
|
1271
|
+
<k-card label="Output">
|
|
1272
|
+
<div class="elevation-0 bg-elevation elevation-card">
|
|
1273
|
+
<div>
|
|
1274
|
+
<strong>Level 0</strong><br>
|
|
1275
|
+
<span class="tc-muted small">Darkest</span>
|
|
1276
|
+
</div>
|
|
1277
|
+
</div>
|
|
1278
|
+
<div class="elevation-1 bg-elevation elevation-card">
|
|
1279
|
+
<div>
|
|
1280
|
+
<strong>Level 1</strong><br>
|
|
1281
|
+
<span class="tc-muted small">Darker</span>
|
|
1282
|
+
</div>
|
|
1283
|
+
</div>
|
|
1284
|
+
<div class="elevation-2 bg-elevation elevation-card">
|
|
1285
|
+
<div>
|
|
1286
|
+
<strong>Level 2</strong><br>
|
|
1287
|
+
<span class="tc-muted small">Page default</span>
|
|
1288
|
+
</div>
|
|
1289
|
+
</div>
|
|
1290
|
+
<div class="elevation-3 bg-elevation elevation-card">
|
|
1291
|
+
<div>
|
|
1292
|
+
<strong>Level 3</strong><br>
|
|
1293
|
+
<span class="tc-muted small">A Little Lighter</span>
|
|
1294
|
+
</div>
|
|
1295
|
+
</div>
|
|
1296
|
+
<div class="elevation-4 bg-elevation elevation-card">
|
|
1297
|
+
<div>
|
|
1298
|
+
<strong>Level 4</strong><br>
|
|
1299
|
+
<span class="tc-muted small">Lighter</span>
|
|
1300
|
+
</div>
|
|
1301
|
+
</div>
|
|
1302
|
+
<div class="elevation-5 bg-elevation elevation-card">
|
|
1303
|
+
<div>
|
|
1304
|
+
<strong>Level 5</strong><br>
|
|
1305
|
+
<span class="tc-muted small">Lightest<br />(6–10 same)</span>
|
|
1306
|
+
</div>
|
|
1307
|
+
</div>
|
|
1308
|
+
</k-card>
|
|
1309
|
+
</div>
|
|
1310
|
+
</div>
|
|
1311
|
+
<h2 id="elevation-combined">Combined Example</h2>
|
|
1312
|
+
<p>Use all three classes together on a positioned element to get z-index stacking, a matching shadow depth, and the
|
|
1313
|
+
correct background color for that level.</p>
|
|
1314
|
+
<div class="row -mx">
|
|
1315
|
+
<div class="col m-span-12 px">
|
|
1316
|
+
<k-card label="HTML">
|
|
1317
|
+
<pre style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 0<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 0<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Deep Inset Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Darkest<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 1<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 10<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Shallow Inset Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Darker<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 2<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 20<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>No Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Page default<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 3<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 30<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Small Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>A Little Lighter<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 4<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 40<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Medium Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Lighter<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 5<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 50<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Large Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Lightest<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>(6–10 same)<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
1318
|
+
</k-card>
|
|
1319
|
+
</div>
|
|
1320
|
+
<div class="col m-span-12 px">
|
|
1321
|
+
<k-card label="Output">
|
|
1322
|
+
<div class="elevation-0 shadow bg-elevation elevation-card">
|
|
1323
|
+
<div><strong>Level 0</strong><br>
|
|
1324
|
+
<span class="tc-muted small">z-index: 0</span><br />
|
|
1325
|
+
<span class="tc-muted small">Deep Inset Shadow</span>
|
|
1326
|
+
<span class="tc-muted small">Darkest</span>
|
|
1327
|
+
</div>
|
|
1328
|
+
</div>
|
|
1329
|
+
<div class="elevation-1 shadow bg-elevation elevation-card">
|
|
1330
|
+
<div><strong>Level 1</strong><br>
|
|
1331
|
+
<span class="tc-muted small">z-index: 10</span><br />
|
|
1332
|
+
<span class="tc-muted small">Shallow Inset Shadow</span><br />
|
|
1333
|
+
<span class="tc-muted small">Darker</span>
|
|
1334
|
+
</div>
|
|
1335
|
+
</div>
|
|
1336
|
+
<div class="elevation-2 shadow bg-elevation elevation-card">
|
|
1337
|
+
<div><strong>Level 2</strong><br>
|
|
1338
|
+
<span class="tc-muted small">z-index: 20</span><br />
|
|
1339
|
+
<span class="tc-muted small">No Shadow</span><br />
|
|
1340
|
+
<span class="tc-muted small">Page default</span>
|
|
1341
|
+
</div>
|
|
1342
|
+
</div>
|
|
1343
|
+
<div class="elevation-3 shadow bg-elevation elevation-card">
|
|
1344
|
+
<div><strong>Level 3</strong><br>
|
|
1345
|
+
<span class="tc-muted small">z-index: 30</span><br />
|
|
1346
|
+
<span class="tc-muted small">Small Drop Shadow</span><br />
|
|
1347
|
+
<span class="tc-muted small">A Little Lighter</span>
|
|
1348
|
+
</div>
|
|
1349
|
+
</div>
|
|
1350
|
+
<div class="elevation-4 shadow bg-elevation elevation-card">
|
|
1351
|
+
<div><strong>Level 4</strong><br>
|
|
1352
|
+
<span class="tc-muted small">z-index: 40</span><br />
|
|
1353
|
+
<span class="tc-muted small">Medium Drop Shadow</span><br />
|
|
1354
|
+
<span class="tc-muted small">Lighter</span><br />
|
|
1355
|
+
</div>
|
|
1356
|
+
</div>
|
|
1357
|
+
<div class="elevation-5 shadow bg-elevation elevation-card">
|
|
1358
|
+
<div><strong>Level 5</strong><br>
|
|
1359
|
+
<span class="tc-muted small">z-index: 50</span><br />
|
|
1360
|
+
<span class="tc-muted small">Large Drop Shadow</span><br />
|
|
1361
|
+
<span class="tc-muted small">Lightest</span><br />
|
|
1362
|
+
<span class="tc-muted small">(6–10 same)</span>
|
|
1363
|
+
</div>
|
|
1364
|
+
</div>
|
|
1365
|
+
</k-card>
|
|
1366
|
+
</div>
|
|
1367
|
+
</div>
|
|
1368
|
+
<h2 id="elevation-variables">Elevation CSS Variables</h2>
|
|
1369
|
+
<div class="table-wrapper mb">
|
|
1370
|
+
<table>
|
|
1371
|
+
<thead>
|
|
1372
|
+
<tr>
|
|
1373
|
+
<th>Variable</th>
|
|
1374
|
+
<th>Description</th>
|
|
1375
|
+
</tr>
|
|
1376
|
+
</thead>
|
|
1377
|
+
<tbody>
|
|
1378
|
+
<tr>
|
|
1379
|
+
<td><code>--c_bg_elevation_0</code></td>
|
|
1380
|
+
<td>Background for level 0 (darkest / deepest)</td>
|
|
1381
|
+
</tr>
|
|
1382
|
+
<tr>
|
|
1383
|
+
<td><code>--c_bg_elevation_1</code></td>
|
|
1384
|
+
<td>Background for level 1 (sunk below page)</td>
|
|
1385
|
+
</tr>
|
|
1386
|
+
<tr>
|
|
1387
|
+
<td><code>--c_bg_elevation_2</code></td>
|
|
1388
|
+
<td>Background for level 2 — equals <code>var(--c_bg)</code> (page default)</td>
|
|
1389
|
+
</tr>
|
|
1390
|
+
<tr>
|
|
1391
|
+
<td><code>--c_bg_elevation_3</code></td>
|
|
1392
|
+
<td>Background for level 3</td>
|
|
1393
|
+
</tr>
|
|
1394
|
+
<tr>
|
|
1395
|
+
<td><code>--c_bg_elevation_4</code></td>
|
|
1396
|
+
<td>Background for level 4</td>
|
|
1397
|
+
</tr>
|
|
1398
|
+
<tr>
|
|
1399
|
+
<td><code>--c_bg_elevation_5</code></td>
|
|
1400
|
+
<td>Background for level 5</td>
|
|
1401
|
+
</tr>
|
|
1402
|
+
<tr>
|
|
1403
|
+
<td><code>--c_bg_elevation_6</code> – <code>--c_bg_elevation_10</code></td>
|
|
1404
|
+
<td>Same as <code>--c_bg_elevation_5</code> (levels 6–10 do not get lighter)</td>
|
|
1405
|
+
</tr>
|
|
1406
|
+
<tr>
|
|
1407
|
+
<td><code>--shadow_0</code></td>
|
|
1408
|
+
<td>Shadow for level 0 (deep inset)</td>
|
|
1409
|
+
</tr>
|
|
1410
|
+
<tr>
|
|
1411
|
+
<td><code>--shadow_1</code></td>
|
|
1412
|
+
<td>Shadow for level 1 (shallow inset)</td>
|
|
1413
|
+
</tr>
|
|
1414
|
+
<tr>
|
|
1415
|
+
<td><code>--shadow_3</code></td>
|
|
1416
|
+
<td>Shadow for level 3 (very small outset)</td>
|
|
1417
|
+
</tr>
|
|
1418
|
+
<tr>
|
|
1419
|
+
<td><code>--shadow_4</code></td>
|
|
1420
|
+
<td>Shadow for level 4 (small outset)</td>
|
|
1421
|
+
</tr>
|
|
1422
|
+
<tr>
|
|
1423
|
+
<td><code>--shadow_5</code></td>
|
|
1424
|
+
<td>Shadow for level 5 (medium-small outset)</td>
|
|
1425
|
+
</tr>
|
|
1426
|
+
<tr>
|
|
1427
|
+
<td><code>--shadow_6</code> – <code>--shadow_10</code></td>
|
|
1428
|
+
<td>Same as <code>--shadow_5</code> (levels 6–10 do not get deeper)</td>
|
|
1429
|
+
</tr>
|
|
1430
|
+
</tbody>
|
|
1431
|
+
</table>
|
|
1432
|
+
</div>
|
|
1433
|
+
|
|
1434
|
+
<h1 id="noScroll">Disable Body Scrolling</h1>
|
|
1435
|
+
<p>Add the <code>no-scroll</code> class to the body to temparily disable body scrolling, this is used for things
|
|
1436
|
+
like dialogs and side menus that temporarily take over the page.</p>
|
|
1437
|
+
<div class="row -mx">
|
|
1438
|
+
<div class="col m-span-12 px">
|
|
1439
|
+
<k-card label="HTML">
|
|
1440
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"document.body.classList.toggle('no-scroll')"</span>></span>Toggle Body Scrolling<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
1441
|
+
</k-card>
|
|
1442
|
+
</div>
|
|
1443
|
+
<div class="col m-span-12 px">
|
|
1444
|
+
<k-card label="Output">
|
|
1445
|
+
<button
|
|
1446
|
+
class="mb"
|
|
1447
|
+
onclick="document.body.classList.toggle('no-scroll')"
|
|
1448
|
+
>Toggle Body Scrolling</button>
|
|
1449
|
+
</k-card>
|
|
1450
|
+
</div>
|
|
1451
|
+
</div>
|
|
97
1452
|
</main>
|
|
98
1453
|
<div style="height:33vh"></div>
|
|
99
|
-
<script
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
<script
|
|
104
|
-
|
|
105
|
-
|
|
1454
|
+
<script
|
|
1455
|
+
src="./nav.js"
|
|
1456
|
+
type="module"
|
|
1457
|
+
></script>
|
|
1458
|
+
<script
|
|
1459
|
+
type="module"
|
|
1460
|
+
src="https://cdn.jsdelivr.net/npm/kempo-ui@0.1.6/dist/components/SideMenu.js"
|
|
1461
|
+
></script>
|
|
1462
|
+
<script
|
|
1463
|
+
type="module"
|
|
1464
|
+
src="https://cdn.jsdelivr.net/npm/kempo-ui@0.1.6/dist/components/Icon.js"
|
|
1465
|
+
></script>
|
|
1466
|
+
<script
|
|
1467
|
+
type="module"
|
|
1468
|
+
src="https://cdn.jsdelivr.net/npm/kempo-ui@0.1.6/dist/components/ThemeSwitcher.js"
|
|
1469
|
+
></script>
|
|
1470
|
+
<script
|
|
1471
|
+
type="module"
|
|
1472
|
+
src="https://cdn.jsdelivr.net/npm/kempo-ui@0.1.6/dist/components/Import.js"
|
|
1473
|
+
></script>
|
|
1474
|
+
<script
|
|
1475
|
+
type="module"
|
|
1476
|
+
src="https://cdn.jsdelivr.net/npm/kempo-ui@0.1.6/dist/components/Resize.js"
|
|
1477
|
+
></script>
|
|
1478
|
+
<script
|
|
1479
|
+
type="module"
|
|
1480
|
+
src="https://cdn.jsdelivr.net/npm/kempo-ui@0.1.6/dist/components/Card.js"
|
|
1481
|
+
></script>
|
|
106
1482
|
</body>
|
|
107
1483
|
</html>
|