kempo-css 1.0.6 → 1.0.7
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/dist/kempo.min.css +1 -1
- package/examples/responsive-grid.html +31 -0
- package/index.html +96 -322
- package/kempo.css +4 -0
- package/media/hexagon.svg +22 -0
- package/media/icon-maskable.png +0 -0
- package/media/icon.svg +1 -0
- package/media/icon128.png +0 -0
- package/media/icon144.png +0 -0
- package/media/icon152.png +0 -0
- package/media/icon16-48.svg +19 -0
- package/media/icon16.png +0 -0
- package/media/icon192.png +0 -0
- package/media/icon256.png +0 -0
- package/media/icon32.png +0 -0
- package/media/icon384.png +0 -0
- package/media/icon48.png +0 -0
- package/media/icon512.png +0 -0
- package/media/icon64.png +0 -0
- package/media/icon72.png +0 -0
- package/media/icon96.png +0 -0
- package/media/kempo-fist.svg +21 -0
- package/package.json +4 -1
- package/src/ColorEditor.js +26 -0
- package/src/CssVar.js +56 -0
- package/src/lit-all.min.js +120 -0
- package/theme-builder.html +286 -0
- package/LICENSE +0 -21
package/index.html
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
main {
|
|
11
11
|
position: relative;
|
|
12
12
|
}
|
|
13
|
+
|
|
13
14
|
#theme-sticky {
|
|
14
15
|
display: block;
|
|
15
16
|
position: sticky;
|
|
@@ -17,7 +18,7 @@
|
|
|
17
18
|
container-type: scroll-state;
|
|
18
19
|
float: right;
|
|
19
20
|
|
|
20
|
-
>
|
|
21
|
+
>theme-btn button {
|
|
21
22
|
opacity: 1;
|
|
22
23
|
will-change: opacity box-shadow;
|
|
23
24
|
transition: opacity var(--animation_ms, 256ms),
|
|
@@ -47,22 +48,27 @@
|
|
|
47
48
|
<div class="mb">
|
|
48
49
|
<div class="card p mb">
|
|
49
50
|
<h2 class="mt0">How to use Kempo CSS</h2>
|
|
50
|
-
|
|
51
|
+
|
|
51
52
|
<div class="mb">
|
|
52
53
|
<h4>NPM</h4>
|
|
53
54
|
<pre><code class="d-block mb-sm">npm install kempo-css</code></pre>
|
|
54
|
-
<p>Then include it in your build system, or import it directly from
|
|
55
|
+
<p>Then include it in your build system, or import it directly from
|
|
56
|
+
<code>node_modules/kempo-css/dist/kempo.css</code>.
|
|
57
|
+
</p>
|
|
55
58
|
</div>
|
|
56
59
|
<hr />
|
|
57
60
|
<h4>Direct Download</h4>
|
|
58
|
-
<a href="./kempo.css" download="kempo.css" class="btn primary mb">
|
|
61
|
+
<a href="./kempo.min.css" download="kempo.min.css" class="btn primary mb">
|
|
59
62
|
Download kempo.css
|
|
60
63
|
</a><br />
|
|
61
|
-
<a href="./kempo-hljs.css" download="kempo-hljs.css" class="btn secondary mb">
|
|
64
|
+
<a href="./kempo-hljs.min.css" download="kempo-hljs.min.css" class="btn secondary mb">
|
|
62
65
|
Download kempo-hljs.css
|
|
63
66
|
</a><br />
|
|
64
67
|
<a href="https://github.com/dustinpoissant/kempo-css" target="_blank" class="btn">
|
|
65
|
-
<svg height="1.15em" viewBox="0 0 173.18974 46.836636"xmlns="http://www.w3.org/2000/svg"
|
|
68
|
+
<svg height="1.15em" viewBox="0 0 173.18974 46.836636" xmlns="http://www.w3.org/2000/svg">
|
|
69
|
+
<path fill="#0f0e0f"
|
|
70
|
+
d="M 19.681725,2.6489257e-8 C 9.9664034,2.6489257e-8 3.7329102e-7,4.133725 3.7329102e-7,24.004338 3.7329102e-7,43.87543 11.41032,46.836632 21.025631,46.836632 c 7.961227,0 12.790338,-3.402023 12.790338,-3.402023 0.199066,-0.109629 0.221166,-0.388163 0.221166,-0.515586 V 20.726985 c 0,-0.375534 -0.304869,-0.680404 -0.680402,-0.680404 H 18.803398 c -0.375535,0 -0.680406,0.30487 -0.680406,0.680404 v 7.115371 c 0,0.375533 0.304871,0.681108 0.680406,0.681108 h 5.677081 v 8.84033 c 0,0 -1.274214,0.43388 -4.798754,0.43388 -4.157802,0 -9.9665886,-1.518345 -9.9665886,-14.291314 0,-12.775371 6.0485566,-14.456837 11.7267656,-14.456837 4.915121,0 7.032378,0.86574 8.379683,1.282626 0.423618,0.129343 0.815642,-0.292192 0.815642,-0.667726 l 1.623532,-6.874482 c 0,-0.175983 -0.05988,-0.388016 -0.259906,-0.531787 C 31.453659,1.867714 28.115616,2.6489257e-8 19.681725,2.6489257e-8 Z M 77.169581,1.696786 c -0.372654,0 -0.676181,0.305506 -0.676181,0.683926 v 42.880284 c 0,0.377938 0.303527,0.685335 0.676181,0.685335 h 8.194438 c 0.375052,0 0.676181,-0.307397 0.676181,-0.685335 V 26.919652 h 12.772731 c 0,0 -0.0219,18.339901 -0.0219,18.341344 0,0.377938 0.30347,0.685335 0.679,0.685335 h 8.213449 c 0.37505,0 0.67522,-0.307397 0.67618,-0.685335 V 2.380712 c 0,-0.37842 -0.29994,-0.683926 -0.67547,-0.683926 h -8.194439 c -0.37457,0 -0.6783,0.305506 -0.6783,0.683926 l 0.002,15.836664 H 86.0402 V 2.380712 c 0,-0.37842 -0.30112,-0.683926 -0.676172,-0.683926 z m 67.904519,0 c -0.37361,0 -0.67759,0.305506 -0.67759,0.683926 v 42.880284 c 0,0.378418 0.30372,0.686039 0.67829,0.686039 h 5.70174 c 0.25676,0 0.45141,-0.132379 0.59518,-0.36415 0.14185,-0.230323 0.34584,-1.977117 0.34584,-1.977117 0,0 3.36047,3.184376 9.72147,3.184376 7.46837,0 11.75072,-3.788626 11.75072,-17.005889 0,-13.217261 -6.84012,-14.944248 -11.46193,-14.944248 -4.61845,0 -7.75986,2.060935 -7.75986,2.060935 V 2.380712 c 0,-0.37842 -0.30305,-0.683926 -0.67618,-0.683926 z M 43.536035,2.673019 c -2.915798,0 -5.28335,2.384348 -5.28335,5.334766 0,2.947533 2.367552,5.338289 5.28335,5.338289 2.918684,0 5.284054,-2.390756 5.284054,-5.338289 0,-2.950418 -2.36537,-5.334766 -5.284054,-5.334766 z m 13.20309,4.480387 c -0.325527,0 -0.500089,0.143395 -0.500089,0.45642 v 8.391657 c 0,0 -4.198103,1.013046 -4.481798,1.095268 -0.282732,0.08174 -0.490933,0.342537 -0.490933,0.653639 v 5.273489 c 0,0.378899 0.303016,0.68463 0.677588,0.68463 h 4.295143 v 12.6868 c 0,9.422492 6.609133,10.348349 11.068901,10.348349 2.038269,0 4.476588,-0.654384 4.87905,-0.802963 0.243303,-0.08943 0.38528,-0.341783 0.38528,-0.6149 l 0.0064,-5.801048 c 0,-0.378418 -0.319329,-0.684631 -0.678995,-0.684631 -0.358225,0 -1.275308,0.145097 -2.218711,0.145097 -3.019179,0 -4.04228,-1.403214 -4.04228,-3.220299 V 23.708509 h 6.146885 c 0.374574,0 0.678996,-0.305731 0.678996,-0.68463 v -6.605418 c 0,-0.37842 -0.304422,-0.683224 -0.678996,-0.683224 h -6.146883 c 0,0 -0.0091,-8.119262 -0.0091,-8.121185 0,-0.307256 -0.158356,-0.460646 -0.514178,-0.460646 z m -17.351023,8.585353 c -0.375053,0 -0.71069,0.386095 -0.71069,0.762109 v 28.358647 c 0,0.83281 0.519552,1.08118 1.191764,1.08118 h 7.359781 c 0.807326,0 1.005111,-0.396869 1.005111,-1.094563 V 36.215698 16.421982 c 0,-0.375534 -0.302536,-0.683223 -0.677588,-0.683223 z m 73.668948,0.0648 c -0.37217,0 -0.67759,0.306915 -0.67759,0.685333 V 36.21288 c 0,8.527652 4.75283,10.613889 11.29077,10.613889 5.36423,0 9.68837,-2.963916 9.68837,-2.963916 0,0 0.20559,1.562375 0.29936,1.747499 0.0928,0.184642 0.33545,0.371195 0.59799,0.371195 l 5.25024,-0.02325 c 0.37217,0 0.67759,-0.307655 0.67759,-0.684632 l -0.003,-28.784778 c 0,-0.378418 -0.30373,-0.685334 -0.67831,-0.685334 h -8.13167 c -0.37314,0 -0.67618,0.306916 -0.67618,0.685334 v 21.025629 c 0,0 -2.06665,1.511541 -4.99879,1.511541 -2.93215,0 -3.70982,-1.330382 -3.70982,-4.201462 v -18.33571 c 0,-0.378418 -0.30306,-0.685334 -0.67619,-0.685334 z m 46.02028,6.852646 c 2.5018,0.0892 4.66211,1.530523 4.66211,7.64293 0,7.36595 -1.27349,8.820115 -5.21925,8.700868 -2.8206,-0.08607 -4.73324,-1.36574 -4.73324,-1.36574 V 24.055057 c 0,0 1.88715,-1.156867 4.20286,-1.363627 0.36604,-0.03276 0.73012,-0.04795 1.08752,-0.03522 z" />
|
|
71
|
+
</svg>
|
|
66
72
|
</a>
|
|
67
73
|
</div>
|
|
68
74
|
</div>
|
|
@@ -101,9 +107,7 @@
|
|
|
101
107
|
</details>
|
|
102
108
|
<details>
|
|
103
109
|
<summary class="ml pl">
|
|
104
|
-
<a href="#borders-spacing" class="d-ib pyh pxq"
|
|
105
|
-
>Borders & Spacing</a
|
|
106
|
-
>
|
|
110
|
+
<a href="#borders-spacing" class="d-ib pyh pxq">Borders & Spacing</a>
|
|
107
111
|
</summary>
|
|
108
112
|
<div class="pl">
|
|
109
113
|
<ul class="ml">
|
|
@@ -164,6 +168,9 @@
|
|
|
164
168
|
</ul>
|
|
165
169
|
</div>
|
|
166
170
|
</details>
|
|
171
|
+
<div class="ml pl pt">
|
|
172
|
+
<a href="#noScroll">Disable Body Scrolling</a>
|
|
173
|
+
</div>
|
|
167
174
|
</div>
|
|
168
175
|
</details>
|
|
169
176
|
|
|
@@ -322,26 +329,11 @@
|
|
|
322
329
|
<div class="col m-span-12 px">
|
|
323
330
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
324
331
|
<div class="card">
|
|
325
|
-
<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>
|
|
326
|
-
<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>
|
|
327
|
-
<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>
|
|
328
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
329
|
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span>
|
|
330
|
-
<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>
|
|
331
|
-
<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>
|
|
332
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
333
|
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span>
|
|
334
|
-
<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>
|
|
335
|
-
<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>
|
|
336
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
337
|
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-f"</span>></span>
|
|
338
|
-
<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>
|
|
339
|
-
<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>
|
|
340
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
332
|
+
<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>
|
|
341
333
|
</div>
|
|
342
334
|
</div>
|
|
343
335
|
<div class="col m-span-12 px">
|
|
344
|
-
<div class="d-ib b r -mb ml pq bg-default">Output
|
|
336
|
+
<div class="d-ib b r -mb ml pq bg-default">Output*</div>
|
|
345
337
|
<div class="card pb">
|
|
346
338
|
<div class="d-f mb">
|
|
347
339
|
<div style="width: 100px" class="b pq mr">100px</div>
|
|
@@ -360,27 +352,21 @@
|
|
|
360
352
|
<div class="flex-3 b pq">flex-3</div>
|
|
361
353
|
</div>
|
|
362
354
|
</div>
|
|
355
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
363
356
|
</div>
|
|
364
357
|
</div>
|
|
365
358
|
|
|
359
|
+
|
|
366
360
|
<h2 id="grid">Grid System</h2>
|
|
367
361
|
<div class="row -mx">
|
|
368
362
|
<div class="col m-span-12 px">
|
|
369
363
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
370
364
|
<div class="card">
|
|
371
|
-
<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>
|
|
372
|
-
<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>
|
|
373
|
-
<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>
|
|
374
|
-
<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>
|
|
375
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
376
|
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>
|
|
377
|
-
<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>
|
|
378
|
-
<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>
|
|
379
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
365
|
+
<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>
|
|
380
366
|
</div>
|
|
381
367
|
</div>
|
|
382
368
|
<div class="col m-span-12 px">
|
|
383
|
-
<div class="d-ib b r -mb ml pq bg-default">Output
|
|
369
|
+
<div class="d-ib b r -mb ml pq bg-default">Output*</div>
|
|
384
370
|
<div class="card pb">
|
|
385
371
|
<div class="row mb">
|
|
386
372
|
<div class="col b pq">col</div>
|
|
@@ -392,72 +378,35 @@
|
|
|
392
378
|
<div class="col span-8 b pq">col span-8</div>
|
|
393
379
|
</div>
|
|
394
380
|
</div>
|
|
381
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
395
382
|
</div>
|
|
396
383
|
</div>
|
|
397
384
|
|
|
385
|
+
|
|
398
386
|
<h3 id="responsive-grid">Responsive Grid</h3>
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
<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>
|
|
404
|
-
<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>
|
|
405
|
-
col d-span-3 t-span-6 m-span-12
|
|
406
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
407
|
-
<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>
|
|
408
|
-
col d-span-3 t-span-6 m-span-12
|
|
409
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
410
|
-
<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>
|
|
411
|
-
col d-span-3 t-span-6 m-span-12
|
|
412
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
413
|
-
<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>
|
|
414
|
-
col d-span-3 t-span-6 m-span-12
|
|
415
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
416
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
417
|
-
</div>
|
|
418
|
-
</div>
|
|
419
|
-
<div class="col m-span-12 px">
|
|
420
|
-
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
421
|
-
<div class="card pb">
|
|
422
|
-
<div class="row">
|
|
423
|
-
<div class="col d-span-3 t-span-6 m-span-12 b pq">
|
|
424
|
-
col d-span-3 t-span-6 m-span-12
|
|
425
|
-
</div>
|
|
426
|
-
<div class="col d-span-3 t-span-6 m-span-12 b pq">
|
|
427
|
-
col d-span-3 t-span-6 m-span-12
|
|
428
|
-
</div>
|
|
429
|
-
<div class="col d-span-3 t-span-6 m-span-12 b pq">
|
|
430
|
-
col d-span-3 t-span-6 m-span-12
|
|
431
|
-
</div>
|
|
432
|
-
<div class="col d-span-3 t-span-6 m-span-12 b pq">
|
|
433
|
-
col d-span-3 t-span-6 m-span-12
|
|
434
|
-
</div>
|
|
435
|
-
</div>
|
|
436
|
-
</div>
|
|
437
|
-
</div>
|
|
387
|
+
|
|
388
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
389
|
+
<div class="card">
|
|
390
|
+
<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>
|
|
438
391
|
</div>
|
|
439
392
|
|
|
393
|
+
<div class="d-ib b r -mb ml pq bg-default">Output*</div>
|
|
394
|
+
<div class="card pb" style="resize:horizontal;overflow:hidden;max-width:100%;min-width:340px">
|
|
395
|
+
<iframe src="./examples/responsive-grid.html" height="160"></iframe>
|
|
396
|
+
</div>
|
|
397
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
398
|
+
|
|
440
399
|
<h3 id="min-width-grid">Alternative Responsive Grid</h3>
|
|
441
400
|
<div class="row -mx">
|
|
442
401
|
<div class="col m-span-12 px">
|
|
443
402
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
444
403
|
<div class="card">
|
|
445
|
-
<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>
|
|
446
|
-
<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>
|
|
447
|
-
col, min-width: 150px
|
|
448
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
449
|
-
<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>
|
|
450
|
-
col, min-width: 200px
|
|
451
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
452
|
-
<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>
|
|
453
|
-
col, min-width: 300px
|
|
454
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
|
455
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
404
|
+
<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>
|
|
456
405
|
</div>
|
|
457
406
|
</div>
|
|
458
407
|
<div class="col m-span-12 px">
|
|
459
|
-
<div class="d-ib b r -mb ml pq bg-default">Output
|
|
460
|
-
<div class="card pb">
|
|
408
|
+
<div class="d-ib b r -mb ml pq bg-default">Output*</div>
|
|
409
|
+
<div class="card pb" style="resize:horizontal;overflow:hidden;max-width:688px;min-width:320px">
|
|
461
410
|
<div class="row">
|
|
462
411
|
<div class="col b pq" style="min-width: 150px">
|
|
463
412
|
col, min-width: 150px
|
|
@@ -470,6 +419,7 @@
|
|
|
470
419
|
</div>
|
|
471
420
|
</div>
|
|
472
421
|
</div>
|
|
422
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
473
423
|
</div>
|
|
474
424
|
</div>
|
|
475
425
|
|
|
@@ -480,17 +430,11 @@
|
|
|
480
430
|
<div class="col m-span-12 px">
|
|
481
431
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
482
432
|
<div class="card">
|
|
483
|
-
<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>
|
|
484
|
-
<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>
|
|
485
|
-
<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>
|
|
486
|
-
<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>
|
|
487
|
-
<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>
|
|
488
|
-
<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>
|
|
489
|
-
<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>
|
|
433
|
+
<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>
|
|
490
434
|
</div>
|
|
491
435
|
</div>
|
|
492
436
|
<div class="col m-span-12 px">
|
|
493
|
-
<div class="d-ib b r -mb ml pq bg-default">Output
|
|
437
|
+
<div class="d-ib b r -mb ml pq bg-default">Output*</div>
|
|
494
438
|
<div class="card">
|
|
495
439
|
<div class="d-ib bg-alt p mr mb b">b</div>
|
|
496
440
|
<div class="d-ib bg-alt p mr mb bt">bt</div>
|
|
@@ -500,6 +444,7 @@
|
|
|
500
444
|
<div class="d-ib bg-alt p mr mb bx">bx</div>
|
|
501
445
|
<div class="d-ib bg-alt p mr mb by">by</div>
|
|
502
446
|
</div>
|
|
447
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
503
448
|
</div>
|
|
504
449
|
</div>
|
|
505
450
|
|
|
@@ -508,25 +453,11 @@
|
|
|
508
453
|
<div class="col m-span-12 px">
|
|
509
454
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
510
455
|
<div class="card">
|
|
511
|
-
<pre><code class="hljs xml"><span class="hljs-comment"><!-- All corners --></span>
|
|
512
|
-
<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>
|
|
513
|
-
<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>
|
|
514
|
-
|
|
515
|
-
<span class="hljs-comment"><!-- Individual corners --></span>
|
|
516
|
-
<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>
|
|
517
|
-
<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>
|
|
518
|
-
<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>
|
|
519
|
-
<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>
|
|
520
|
-
|
|
521
|
-
<span class="hljs-comment"><!-- Side combinations --></span>
|
|
522
|
-
<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>
|
|
523
|
-
<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>
|
|
524
|
-
<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>
|
|
525
|
-
<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>
|
|
456
|
+
<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>
|
|
526
457
|
</div>
|
|
527
458
|
</div>
|
|
528
459
|
<div class="col m-span-12 px">
|
|
529
|
-
<div class="d-ib b r -mb ml pq bg-default">Output
|
|
460
|
+
<div class="d-ib b r -mb ml pq bg-default">Output*</div>
|
|
530
461
|
<div class="card">
|
|
531
462
|
<div class="mb">
|
|
532
463
|
<div class="d-ib bg-alt p mr mb b r">r</div>
|
|
@@ -545,6 +476,7 @@
|
|
|
545
476
|
<div class="d-ib bg-alt p mr mb b rr">rr</div>
|
|
546
477
|
</div>
|
|
547
478
|
</div>
|
|
479
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
548
480
|
</div>
|
|
549
481
|
</div>
|
|
550
482
|
<h3>Border Radius Classes</h3>
|
|
@@ -599,10 +531,8 @@
|
|
|
599
531
|
</tbody>
|
|
600
532
|
</table>
|
|
601
533
|
<p class="mt">
|
|
602
|
-
<small
|
|
603
|
-
|
|
604
|
-
<code>r0</code>, <code>rt0</code>) to cancel border radius.</small
|
|
605
|
-
>
|
|
534
|
+
<small><strong>Note:</strong> Add <code>0</code> suffix (e.g.,
|
|
535
|
+
<code>r0</code>, <code>rt0</code>) to cancel border radius.</small>
|
|
606
536
|
</p>
|
|
607
537
|
|
|
608
538
|
<h2 id="padding">Padding</h2>
|
|
@@ -620,29 +550,18 @@
|
|
|
620
550
|
Margins
|
|
621
551
|
</li>
|
|
622
552
|
</ul>
|
|
623
|
-
<p>
|
|
624
|
-
<small
|
|
625
|
-
>Additional styles may be added to the example output (borders,
|
|
626
|
-
spacing, colors) for demonstration.</small
|
|
627
|
-
>
|
|
628
|
-
</p>
|
|
553
|
+
<p>*<small>Additional styles applied for demonstration purposes.</small></p>
|
|
629
554
|
</div>
|
|
630
555
|
|
|
631
556
|
<div class="row -mx">
|
|
632
557
|
<div class="col m-span-12 px">
|
|
633
558
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
634
559
|
<div class="card">
|
|
635
|
-
<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>
|
|
636
|
-
<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>
|
|
637
|
-
<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>
|
|
638
|
-
<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>
|
|
639
|
-
<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>
|
|
640
|
-
<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>
|
|
641
|
-
<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>
|
|
560
|
+
<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>
|
|
642
561
|
</div>
|
|
643
562
|
</div>
|
|
644
563
|
<div class="col m-span-12 px">
|
|
645
|
-
<div class="d-ib b r -mb ml pq bg-default">Output
|
|
564
|
+
<div class="d-ib b r -mb ml pq bg-default">Output*</div>
|
|
646
565
|
<div class="card">
|
|
647
566
|
<div class="d-ib bg-success mx mb p">
|
|
648
567
|
<div class="d-ib bg-alt pq">p</div>
|
|
@@ -674,17 +593,11 @@
|
|
|
674
593
|
<div class="col m-span-12 px">
|
|
675
594
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
676
595
|
<div class="card">
|
|
677
|
-
<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>
|
|
678
|
-
<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>
|
|
679
|
-
<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>
|
|
680
|
-
<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>
|
|
681
|
-
<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>
|
|
682
|
-
<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>
|
|
683
|
-
<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>
|
|
596
|
+
<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>
|
|
684
597
|
</div>
|
|
685
598
|
</div>
|
|
686
599
|
<div class="col m-span-12 px">
|
|
687
|
-
<div class="d-ib b r -mb ml pq bg-default">Output
|
|
600
|
+
<div class="d-ib b r -mb ml pq bg-default">Output*</div>
|
|
688
601
|
<div class="card">
|
|
689
602
|
<div class="d-ib bg-warning mx mb p">
|
|
690
603
|
<div class="d-ib bg-alt pq">m</div>
|
|
@@ -716,17 +629,11 @@
|
|
|
716
629
|
<div class="col m-span-12 px">
|
|
717
630
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
718
631
|
<div class="card">
|
|
719
|
-
<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>
|
|
720
|
-
<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>
|
|
721
|
-
<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>
|
|
722
|
-
<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>
|
|
723
|
-
<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>
|
|
724
|
-
<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>
|
|
725
|
-
<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>
|
|
632
|
+
<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>
|
|
726
633
|
</div>
|
|
727
634
|
</div>
|
|
728
635
|
<div class="col m-span-12 px">
|
|
729
|
-
<div class="d-ib b r -mb ml pq bg-default">Output
|
|
636
|
+
<div class="d-ib b r -mb ml pq bg-default">Output*</div>
|
|
730
637
|
<div class="card">
|
|
731
638
|
<div class="d-ib bg-danger mx mb p">
|
|
732
639
|
<div class="d-ib bg-alt pq">-m</div>
|
|
@@ -758,71 +665,44 @@
|
|
|
758
665
|
<div class="col m-span-12 px">
|
|
759
666
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
760
667
|
<div class="card">
|
|
761
|
-
<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>
|
|
762
|
-
<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>
|
|
763
|
-
<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>
|
|
764
|
-
<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>
|
|
765
|
-
<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>
|
|
766
|
-
<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>
|
|
767
|
-
<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>
|
|
668
|
+
<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>
|
|
768
669
|
</div>
|
|
769
670
|
</div>
|
|
770
671
|
<div class="col m-span-12 px">
|
|
771
|
-
<div class="d-ib b r -mb ml pq bg-default">Output
|
|
672
|
+
<div class="d-ib b r -mb ml pq bg-default">Output*</div>
|
|
772
673
|
<div class="card">
|
|
773
674
|
<div class="d-ib bg-warning mx mb">
|
|
774
|
-
<div
|
|
775
|
-
class="d-ib bg-alt pq b"
|
|
776
|
-
style="border-color: var(--c_danger) !important"
|
|
777
|
-
>
|
|
675
|
+
<div class="d-ib bg-alt pq b" style="border-color: var(--c_danger) !important">
|
|
778
676
|
m m0
|
|
779
677
|
</div>
|
|
780
678
|
</div>
|
|
781
679
|
<div class="d-ib bg-warning mx mb px pb">
|
|
782
|
-
<div
|
|
783
|
-
class="d-ib bg-alt pq bt"
|
|
784
|
-
style="border-color: var(--c_danger) !important"
|
|
785
|
-
>
|
|
680
|
+
<div class="d-ib bg-alt pq bt" style="border-color: var(--c_danger) !important">
|
|
786
681
|
m mt0
|
|
787
682
|
</div>
|
|
788
683
|
</div>
|
|
789
684
|
<div class="d-ib bg-warning mx mb py pl">
|
|
790
|
-
<div
|
|
791
|
-
class="d-ib bg-alt pq br"
|
|
792
|
-
style="border-color: var(--c_danger) !important"
|
|
793
|
-
>
|
|
685
|
+
<div class="d-ib bg-alt pq br" style="border-color: var(--c_danger) !important">
|
|
794
686
|
m mr0
|
|
795
687
|
</div>
|
|
796
688
|
</div>
|
|
797
689
|
<div class="d-ib bg-warning mx mb px pt">
|
|
798
|
-
<div
|
|
799
|
-
class="d-ib bg-alt pq bb"
|
|
800
|
-
style="border-color: var(--c_danger) !important"
|
|
801
|
-
>
|
|
690
|
+
<div class="d-ib bg-alt pq bb" style="border-color: var(--c_danger) !important">
|
|
802
691
|
m mb0
|
|
803
692
|
</div>
|
|
804
693
|
</div>
|
|
805
694
|
<div class="d-ib bg-warning mx mb py pr">
|
|
806
|
-
<div
|
|
807
|
-
class="d-ib bg-alt pq bl"
|
|
808
|
-
style="border-color: var(--c_danger) !important"
|
|
809
|
-
>
|
|
695
|
+
<div class="d-ib bg-alt pq bl" style="border-color: var(--c_danger) !important">
|
|
810
696
|
m ml0
|
|
811
697
|
</div>
|
|
812
698
|
</div>
|
|
813
699
|
<div class="d-ib bg-warning mx mb py">
|
|
814
|
-
<div
|
|
815
|
-
class="d-ib bg-alt pq bx"
|
|
816
|
-
style="border-color: var(--c_danger) !important"
|
|
817
|
-
>
|
|
700
|
+
<div class="d-ib bg-alt pq bx" style="border-color: var(--c_danger) !important">
|
|
818
701
|
m mx0
|
|
819
702
|
</div>
|
|
820
703
|
</div>
|
|
821
704
|
<div class="d-ib bg-warning mx mb px">
|
|
822
|
-
<div
|
|
823
|
-
class="d-ib bg-alt pq by"
|
|
824
|
-
style="border-color: var(--c_danger) !important"
|
|
825
|
-
>
|
|
705
|
+
<div class="d-ib bg-alt pq by" style="border-color: var(--c_danger) !important">
|
|
826
706
|
m my0
|
|
827
707
|
</div>
|
|
828
708
|
</div>
|
|
@@ -837,21 +717,7 @@
|
|
|
837
717
|
<div class="col m-span-12 px">
|
|
838
718
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
839
719
|
<div class="card">
|
|
840
|
-
<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>
|
|
841
|
-
<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>
|
|
842
|
-
<span class="hljs-tag"><<span class="hljs-name">select</span>></span>
|
|
843
|
-
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 1<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
844
|
-
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 2<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
845
|
-
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 3<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
846
|
-
<span class="hljs-tag"></<span class="hljs-name">select</span>></span>
|
|
847
|
-
<span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">multiple</span>></span>
|
|
848
|
-
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 1<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
849
|
-
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 2<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
850
|
-
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 3<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
851
|
-
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 4<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
852
|
-
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 5<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
853
|
-
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Option 6<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
|
854
|
-
<span class="hljs-tag"></<span class="hljs-name">select</span>></span></code></pre>
|
|
720
|
+
<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>
|
|
855
721
|
</div>
|
|
856
722
|
</div>
|
|
857
723
|
<div class="col m-span-12 px">
|
|
@@ -881,8 +747,7 @@
|
|
|
881
747
|
<div class="col m-span-12 px">
|
|
882
748
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
883
749
|
<div class="card">
|
|
884
|
-
<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>
|
|
885
|
-
<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>
|
|
750
|
+
<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>
|
|
886
751
|
</div>
|
|
887
752
|
</div>
|
|
888
753
|
<div class="col m-span-12 px">
|
|
@@ -899,15 +764,7 @@
|
|
|
899
764
|
<div class="col m-span-12 px">
|
|
900
765
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
901
766
|
<div class="card">
|
|
902
|
-
<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>
|
|
903
|
-
<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>
|
|
904
|
-
<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>
|
|
905
|
-
<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>
|
|
906
|
-
|
|
907
|
-
<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>
|
|
908
|
-
<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>
|
|
909
|
-
<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>
|
|
910
|
-
<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>
|
|
767
|
+
<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>
|
|
911
768
|
</div>
|
|
912
769
|
</div>
|
|
913
770
|
<div class="col m-span-12 px">
|
|
@@ -933,10 +790,7 @@
|
|
|
933
790
|
<div class="col m-span-12 px">
|
|
934
791
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
935
792
|
<div class="card">
|
|
936
|
-
<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>
|
|
937
|
-
<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>
|
|
938
|
-
<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>
|
|
939
|
-
<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>
|
|
793
|
+
<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>
|
|
940
794
|
</div>
|
|
941
795
|
</div>
|
|
942
796
|
<div class="col m-span-12 px">
|
|
@@ -955,12 +809,7 @@
|
|
|
955
809
|
<div class="col m-span-12 px">
|
|
956
810
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
957
811
|
<div class="card">
|
|
958
|
-
<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>
|
|
959
|
-
<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>
|
|
960
|
-
<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>
|
|
961
|
-
<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>
|
|
962
|
-
<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>
|
|
963
|
-
<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>
|
|
812
|
+
<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>
|
|
964
813
|
</div>
|
|
965
814
|
</div>
|
|
966
815
|
<div class="col m-span-12 px">
|
|
@@ -981,9 +830,7 @@
|
|
|
981
830
|
<div class="col m-span-12 px">
|
|
982
831
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
983
832
|
<div class="card">
|
|
984
|
-
<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>
|
|
985
|
-
<span class="hljs-tag"><<span class="hljs-name">button</span>></span>Normal<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
986
|
-
<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>
|
|
833
|
+
<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>
|
|
987
834
|
</div>
|
|
988
835
|
</div>
|
|
989
836
|
<div class="col m-span-12 px">
|
|
@@ -1001,11 +848,7 @@
|
|
|
1001
848
|
<div class="col m-span-12 px">
|
|
1002
849
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
1003
850
|
<div class="card">
|
|
1004
|
-
<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>
|
|
1005
|
-
<span class="hljs-tag"><<span class="hljs-name">button</span>></span>Default<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
1006
|
-
<span class="hljs-tag"><<span class="hljs-name">button</span>></span>Default<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
1007
|
-
<span class="hljs-tag"><<span class="hljs-name">button</span>></span>Default<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
|
1008
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
851
|
+
<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>
|
|
1009
852
|
</div>
|
|
1010
853
|
</div>
|
|
1011
854
|
<div class="col m-span-12 px">
|
|
@@ -1045,36 +888,7 @@
|
|
|
1045
888
|
<div class="col m-span-12 px">
|
|
1046
889
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
1047
890
|
<div class="card">
|
|
1048
|
-
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">table</span>></span>
|
|
1049
|
-
<span class="hljs-tag"><<span class="hljs-name">thead</span>></span>
|
|
1050
|
-
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1051
|
-
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 1<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1052
|
-
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 2<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1053
|
-
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 3<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1054
|
-
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 4<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1055
|
-
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1056
|
-
<span class="hljs-tag"></<span class="hljs-name">thead</span>></span>
|
|
1057
|
-
<span class="hljs-tag"><<span class="hljs-name">tbody</span>></span>
|
|
1058
|
-
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1059
|
-
<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>
|
|
1060
|
-
<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>
|
|
1061
|
-
<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>
|
|
1062
|
-
<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>
|
|
1063
|
-
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1064
|
-
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1065
|
-
<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>
|
|
1066
|
-
<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>
|
|
1067
|
-
<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>
|
|
1068
|
-
<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>
|
|
1069
|
-
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1070
|
-
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1071
|
-
<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>
|
|
1072
|
-
<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>
|
|
1073
|
-
<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>
|
|
1074
|
-
<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>
|
|
1075
|
-
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1076
|
-
<span class="hljs-tag"></<span class="hljs-name">tbody</span>></span>
|
|
1077
|
-
<span class="hljs-tag"></<span class="hljs-name">table</span>></span></code></pre>
|
|
891
|
+
<pre><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>
|
|
1078
892
|
</div>
|
|
1079
893
|
</div>
|
|
1080
894
|
<div class="col m-span-12 px">
|
|
@@ -1119,55 +933,12 @@
|
|
|
1119
933
|
<div class="col m-span-12 px">
|
|
1120
934
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
1121
935
|
<div class="card">
|
|
1122
|
-
<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">"table-wrapper"</span>></span>
|
|
1123
|
-
<span class="hljs-tag"><<span class="hljs-name">table</span>></span>
|
|
1124
|
-
<span class="hljs-tag"><<span class="hljs-name">thead</span>></span>
|
|
1125
|
-
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1126
|
-
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 1<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1127
|
-
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 2<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1128
|
-
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 3<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1129
|
-
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 4<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1130
|
-
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 5<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1131
|
-
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>Field 6<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
|
1132
|
-
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1133
|
-
<span class="hljs-tag"></<span class="hljs-name">thead</span>></span>
|
|
1134
|
-
<span class="hljs-tag"><<span class="hljs-name">tbody</span>></span>
|
|
1135
|
-
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1136
|
-
<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>
|
|
1137
|
-
<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>
|
|
1138
|
-
<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>
|
|
1139
|
-
<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>
|
|
1140
|
-
<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>
|
|
1141
|
-
<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>
|
|
1142
|
-
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1143
|
-
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1144
|
-
<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>
|
|
1145
|
-
<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>
|
|
1146
|
-
<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>
|
|
1147
|
-
<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>
|
|
1148
|
-
<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>
|
|
1149
|
-
<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>
|
|
1150
|
-
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1151
|
-
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
|
1152
|
-
<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>
|
|
1153
|
-
<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>
|
|
1154
|
-
<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>
|
|
1155
|
-
<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>
|
|
1156
|
-
<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>
|
|
1157
|
-
<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>
|
|
1158
|
-
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
|
1159
|
-
<span class="hljs-tag"></<span class="hljs-name">tbody</span>></span>
|
|
1160
|
-
<span class="hljs-tag"></<span class="hljs-name">table</span>></span>
|
|
1161
|
-
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
936
|
+
<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">"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>
|
|
1162
937
|
</div>
|
|
1163
938
|
</div>
|
|
1164
939
|
<div class="col m-span-12 px">
|
|
1165
940
|
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
1166
|
-
<div
|
|
1167
|
-
class="card pb"
|
|
1168
|
-
id="resizable-table-card"
|
|
1169
|
-
style="resize: horizontal; overflow: auto; min-width: 200px"
|
|
1170
|
-
>
|
|
941
|
+
<div class="card pb" id="resizable-table-card" style="resize: horizontal; overflow: auto; min-width: 200px">
|
|
1171
942
|
<div class="table-wrapper">
|
|
1172
943
|
<table>
|
|
1173
944
|
<thead>
|
|
@@ -1219,13 +990,7 @@
|
|
|
1219
990
|
<div class="col m-span-12 px">
|
|
1220
991
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
1221
992
|
<div class="card">
|
|
1222
|
-
<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>
|
|
1223
|
-
<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>
|
|
1224
|
-
<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>
|
|
1225
|
-
<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>
|
|
1226
|
-
<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>
|
|
1227
|
-
<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>
|
|
1228
|
-
<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>
|
|
993
|
+
<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>
|
|
1229
994
|
</div>
|
|
1230
995
|
</div>
|
|
1231
996
|
<div class="col m-span-12 px">
|
|
@@ -1247,14 +1012,7 @@
|
|
|
1247
1012
|
<div class="col m-span-12 px">
|
|
1248
1013
|
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
1249
1014
|
<div class="card">
|
|
1250
|
-
<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>
|
|
1251
|
-
<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>
|
|
1252
|
-
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-inv"</span>></span>Inverse<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
|
1253
|
-
<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>
|
|
1254
|
-
<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>
|
|
1255
|
-
<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>
|
|
1256
|
-
<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>
|
|
1257
|
-
<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>
|
|
1015
|
+
<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>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>
|
|
1258
1016
|
</div>
|
|
1259
1017
|
</div>
|
|
1260
1018
|
<div class="col m-span-12 px">
|
|
@@ -1271,7 +1029,27 @@
|
|
|
1271
1029
|
</div>
|
|
1272
1030
|
</div>
|
|
1273
1031
|
</div>
|
|
1032
|
+
|
|
1033
|
+
<h2 id="noScroll">Disable Body Scrolling</h2>
|
|
1034
|
+
<p>Add the <code>no-scroll</code> class to the body to temparily disable body scrolling, this is used for things
|
|
1035
|
+
like dialogs and side menus that temporarily take over the page.</p>
|
|
1036
|
+
<div class="row -mx">
|
|
1037
|
+
<div class="col m-span-12 px">
|
|
1038
|
+
<div class="d-ib b r -mb ml pq bg-default">HTML</div>
|
|
1039
|
+
<div class="card">
|
|
1040
|
+
<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>
|
|
1041
|
+
</div>
|
|
1042
|
+
</div>
|
|
1043
|
+
<div class="col m-span-12 px">
|
|
1044
|
+
<div class="d-ib b r -mb ml pq bg-default">Output</div>
|
|
1045
|
+
<div class="card">
|
|
1046
|
+
<button class="mb" onclick="document.body.classList.toggle('no-scroll')">Toggle Body Scrolling</button>
|
|
1047
|
+
</div>
|
|
1048
|
+
</div>
|
|
1049
|
+
</div>
|
|
1050
|
+
|
|
1274
1051
|
</main>
|
|
1052
|
+
<div style="height:33vh"></div>
|
|
1275
1053
|
<script>
|
|
1276
1054
|
// Initialize theme from localStorage on page load
|
|
1277
1055
|
function initializeTheme() {
|
|
@@ -1314,14 +1092,10 @@
|
|
|
1314
1092
|
}
|
|
1315
1093
|
set theme(v) {
|
|
1316
1094
|
document.documentElement.setAttribute("theme", v);
|
|
1317
|
-
// Save theme to localStorage
|
|
1318
1095
|
localStorage.setItem("kempo-css-theme", v);
|
|
1319
1096
|
}
|
|
1320
1097
|
}
|
|
1321
|
-
);
|
|
1322
|
-
if (resizableCard) {
|
|
1323
|
-
resizableCard.style.maxWidth = resizableCard.offsetWidth + "px";
|
|
1324
|
-
}
|
|
1098
|
+
);
|
|
1325
1099
|
</script>
|
|
1326
1100
|
</body>
|
|
1327
|
-
</html>
|
|
1101
|
+
</html>
|