kempo-css 2.1.2 → 2.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.vscode/settings.json +2 -0
- package/CHANGELOG.md +7 -0
- package/dist/kempo.min.css +1 -1
- package/docs/borders-spacing.html +445 -0
- package/docs/buttons.html +261 -0
- package/docs/colors.html +198 -0
- package/docs/components/ThemePropertyInput.js +2 -2
- package/docs/elevation.html +508 -0
- package/docs/examples/responsive-grid.html +1 -1
- package/docs/index.html +236 -1477
- package/docs/inputs.html +251 -0
- package/docs/kempo.css +48 -32
- package/docs/kempo.min.css +1 -1
- package/docs/layout.html +310 -0
- package/docs/tables.html +261 -0
- package/docs/theme-editor.html +935 -802
- package/docs/typography.html +255 -0
- package/docs/utilities.html +171 -0
- package/docs-src/.config.js +26 -0
- package/docs-src/borders-spacing.page.html +297 -0
- package/docs-src/buttons.page.html +113 -0
- package/docs-src/colors.page.html +50 -0
- package/docs-src/default.template.html +22 -0
- package/docs-src/elevation.page.html +361 -0
- package/docs-src/examples/responsive-grid.html +33 -0
- package/docs-src/head.fragment.html +16 -0
- package/docs-src/index.page.html +95 -0
- package/docs-src/inputs.page.html +103 -0
- package/docs-src/layout.page.html +163 -0
- package/docs-src/nav.fragment.html +115 -0
- package/docs-src/tables.page.html +114 -0
- package/docs-src/theme-editor.page.html +850 -0
- package/docs-src/theme-editor.template.html +11 -0
- package/docs-src/typography.page.html +107 -0
- package/docs-src/utilities.page.html +26 -0
- package/package.json +3 -2
- package/scripts/build.js +7 -1
- package/src/kempo.css +48 -32
- package/docs/init.js +0 -4
- package/docs/nav.js +0 -33
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
<page pageName="Typography" title="Typography - Kempo CSS">
|
|
2
|
+
<content>
|
|
3
|
+
<h2 id="paragraphs">Paragraphs</h2>
|
|
4
|
+
<div class="row -mx">
|
|
5
|
+
<div class="col m-span-12 px">
|
|
6
|
+
<k-card label="HTML">
|
|
7
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum non unde laborum officia doloremque, repudiandae laudantium nihil! Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit, assumenda ipsa esse!<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
|
|
8
|
+
</k-card>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="col m-span-12 px">
|
|
11
|
+
<k-card label="Output">
|
|
12
|
+
<p>
|
|
13
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum
|
|
14
|
+
non unde laborum officia doloremque, repudiandae laudantium nihil!
|
|
15
|
+
Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit,
|
|
16
|
+
assumenda ipsa esse!
|
|
17
|
+
</p>
|
|
18
|
+
</k-card>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<h2 id="headings">Headings</h2>
|
|
23
|
+
<div class="row -mx">
|
|
24
|
+
<div class="col m-span-12 px">
|
|
25
|
+
<k-card label="HTML">
|
|
26
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Heading 1<span class="hljs-tag"></<span class="hljs-name">h1</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Heading 2<span class="hljs-tag"></<span class="hljs-name">h2</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Heading 3<span class="hljs-tag"></<span class="hljs-name">h3</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Heading 4<span class="hljs-tag"></<span class="hljs-name">h4</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h5</span>></span>Heading 5<span class="hljs-tag"></<span class="hljs-name">h5</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Heading 6<span class="hljs-tag"></<span class="hljs-name">h6</span>></span></code></pre>
|
|
27
|
+
</k-card>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="col m-span-12 px">
|
|
30
|
+
<k-card label="Output">
|
|
31
|
+
<h1>Heading 1</h1>
|
|
32
|
+
<h2>Heading 2</h2>
|
|
33
|
+
<h3>Heading 3</h3>
|
|
34
|
+
<h4>Heading 4</h4>
|
|
35
|
+
<h5>Heading 5</h5>
|
|
36
|
+
<h6>Heading 6</h6>
|
|
37
|
+
</k-card>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<h2 id="textmarkup">Text Markup</h2>
|
|
42
|
+
<div class="row -mx">
|
|
43
|
+
<div class="col m-span-12 px">
|
|
44
|
+
<k-card label="HTML">
|
|
45
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>strong<span class="hljs-tag"></<span class="hljs-name">strong</span>></span> <span class="hljs-tag"><<span class="hljs-name">i</span>></span>italics<span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">del</span>></span>strike<span class="hljs-tag"></<span class="hljs-name">del</span>></span> <span class="hljs-tag"><<span class="hljs-name">u</span>></span>underline<span class="hljs-tag"></<span class="hljs-name">u</span>></span> <span class="hljs-tag"><<span class="hljs-name">sub</span>></span>sub<span class="hljs-tag"></<span class="hljs-name">sub</span>></span> Normal <span class="hljs-tag"><<span class="hljs-name">sup</span>></span>super<span class="hljs-tag"></<span class="hljs-name">sup</span>></span> <span class="hljs-tag"><<span class="hljs-name">b</span>></span>bold<span class="hljs-tag"></<span class="hljs-name">b</span>></span> <span class="hljs-tag"><<span class="hljs-name">mark</span>></span>highlighted<span class="hljs-tag"></<span class="hljs-name">mark</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
|
|
46
|
+
</k-card>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="col m-span-12 px">
|
|
49
|
+
<k-card label="Output">
|
|
50
|
+
<p>
|
|
51
|
+
<strong>strong</strong> <i>italics</i> <del>strike</del>
|
|
52
|
+
<u>underline</u> <sub>sub</sub> Normal <sup>super</sup>
|
|
53
|
+
<b>bold</b> <mark>highlighted</mark>
|
|
54
|
+
</p>
|
|
55
|
+
</k-card>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<h2 id="lists">Lists</h2>
|
|
60
|
+
<div class="row -mx">
|
|
61
|
+
<div class="col m-span-12 px">
|
|
62
|
+
<k-card label="HTML">
|
|
63
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><br> Item 3<br> <span class="hljs-tag"><<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">li</span>></span><br><span class="hljs-tag"></<span class="hljs-name">ol</span>></span></code></pre>
|
|
64
|
+
</k-card>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="col m-span-12 px">
|
|
67
|
+
<k-card label="Output">
|
|
68
|
+
<ol>
|
|
69
|
+
<li>Item 1</li>
|
|
70
|
+
<li>Item 2</li>
|
|
71
|
+
<li>
|
|
72
|
+
Item 3
|
|
73
|
+
<ol>
|
|
74
|
+
<li>Sub Item 1</li>
|
|
75
|
+
<li>Sub Item 2</li>
|
|
76
|
+
<li>Sub Item 3</li>
|
|
77
|
+
</ol>
|
|
78
|
+
</li>
|
|
79
|
+
</ol>
|
|
80
|
+
</k-card>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="row -mx">
|
|
84
|
+
<div class="col m-span-12 px">
|
|
85
|
+
<k-card label="HTML">
|
|
86
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><br> Item 3<br> <span class="hljs-tag"><<span class="hljs-name">ul</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">li</span>></span><br><span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre>
|
|
87
|
+
</k-card>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="col m-span-12 px">
|
|
90
|
+
<k-card label="Output">
|
|
91
|
+
<ul>
|
|
92
|
+
<li>Item 1</li>
|
|
93
|
+
<li>Item 2</li>
|
|
94
|
+
<li>
|
|
95
|
+
Item 3
|
|
96
|
+
<ul>
|
|
97
|
+
<li>Sub Item 1</li>
|
|
98
|
+
<li>Sub Item 2</li>
|
|
99
|
+
<li>Sub Item 3</li>
|
|
100
|
+
</ul>
|
|
101
|
+
</li>
|
|
102
|
+
</ul>
|
|
103
|
+
</k-card>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</content>
|
|
107
|
+
</page>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<page
|
|
2
|
+
pageName="Utilities"
|
|
3
|
+
title="Utilities - Kempo CSS"
|
|
4
|
+
>
|
|
5
|
+
<content>
|
|
6
|
+
<div style="height:50vh"></div>
|
|
7
|
+
<p>Add the <code>no-scroll</code> class to the body to temparily disable body scrolling, this is used for things
|
|
8
|
+
like dialogs and side menus that temporarily take over the page.</p>
|
|
9
|
+
<div class="row -mx">
|
|
10
|
+
<div class="col m-span-12 px">
|
|
11
|
+
<k-card label="HTML">
|
|
12
|
+
<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>
|
|
13
|
+
</k-card>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="col m-span-12 px">
|
|
16
|
+
<k-card label="Output">
|
|
17
|
+
<button
|
|
18
|
+
class="mb"
|
|
19
|
+
onclick="document.body.classList.toggle('no-scroll')"
|
|
20
|
+
>Toggle Body Scrolling</button>
|
|
21
|
+
</k-card>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
<div style="height:50vh"></div>
|
|
25
|
+
</content>
|
|
26
|
+
</page>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kempo-css",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.4",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "scripts/build.js",
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"build": "node scripts/build.js",
|
|
9
9
|
"build:watch": "node scripts/build.js --watch",
|
|
10
10
|
"test": "npx kempo-test",
|
|
11
|
+
"dev": "npx kempo-server --root docs-src --port 4048",
|
|
11
12
|
"docs": "npx kempo-server --root docs --port 4048"
|
|
12
13
|
},
|
|
13
14
|
"keywords": [],
|
|
@@ -15,7 +16,7 @@
|
|
|
15
16
|
"license": "MIT",
|
|
16
17
|
"devDependencies": {
|
|
17
18
|
"clean-css-cli": "^5.6.3",
|
|
18
|
-
"kempo-server": "^
|
|
19
|
+
"kempo-server": "^3.0.3",
|
|
19
20
|
"kempo-testing-framework": "^1.4.0",
|
|
20
21
|
"terser": "^5.44.1"
|
|
21
22
|
},
|
package/scripts/build.js
CHANGED
|
@@ -4,6 +4,7 @@ import { execSync } from 'child_process';
|
|
|
4
4
|
import fs from 'fs';
|
|
5
5
|
import path from 'path';
|
|
6
6
|
import { minify } from 'terser';
|
|
7
|
+
import { renderDir } from 'kempo-server/templating';
|
|
7
8
|
|
|
8
9
|
// Check for watch flag
|
|
9
10
|
const isWatchMode = process.argv.includes('--watch');
|
|
@@ -107,7 +108,7 @@ async function processComponents(){
|
|
|
107
108
|
}
|
|
108
109
|
}
|
|
109
110
|
|
|
110
|
-
processComponents().then(() => {
|
|
111
|
+
processComponents().then(async () => {
|
|
111
112
|
|
|
112
113
|
// Copy CSS to docs
|
|
113
114
|
const cssFiles = ['src/kempo.css', 'src/kempo-hljs.css'];
|
|
@@ -133,6 +134,11 @@ minifiedFiles.forEach(file => {
|
|
|
133
134
|
|
|
134
135
|
console.log('\nBuild complete!');
|
|
135
136
|
console.log(`Minified files are in the ${outputDir}/ directory`);
|
|
137
|
+
|
|
138
|
+
// Render docs from docs-src
|
|
139
|
+
console.log('\nRendering docs...');
|
|
140
|
+
const docsCount = await renderDir('./docs-src', './docs');
|
|
141
|
+
console.log(`Rendered ${docsCount} doc pages`);
|
|
136
142
|
}).catch(error => {
|
|
137
143
|
console.error('Build error:', error);
|
|
138
144
|
process.exit(1);
|
package/src/kempo.css
CHANGED
|
@@ -373,6 +373,13 @@ summary:focus {
|
|
|
373
373
|
.fixed.scrolled {
|
|
374
374
|
box-shadow: var(--elevation_2_shadow);
|
|
375
375
|
}
|
|
376
|
+
k-nav[fixed] {
|
|
377
|
+
box-shadow: none;
|
|
378
|
+
transition: box-shadow var(--animation_ms);
|
|
379
|
+
}
|
|
380
|
+
k-nav[fixed].scrolled {
|
|
381
|
+
box-shadow: var(--elevation_2_shadow);
|
|
382
|
+
}
|
|
376
383
|
|
|
377
384
|
/*
|
|
378
385
|
Typography
|
|
@@ -496,64 +503,73 @@ li ul {
|
|
|
496
503
|
Spacing, Borders and Radius
|
|
497
504
|
*/
|
|
498
505
|
.p { padding: var(--spacer) !important }
|
|
506
|
+
.ph { padding: var(--spacer_h) !important }
|
|
507
|
+
.pq { padding: var(--spacer_q) !important }
|
|
508
|
+
.p0 { padding: 0.1px !important }
|
|
499
509
|
.pt, .py { padding-top: var(--spacer) !important }
|
|
500
510
|
.pr, .px { padding-right: var(--spacer) !important }
|
|
501
511
|
.pb, .py { padding-bottom: var(--spacer) !important }
|
|
502
512
|
.pl, .px { padding-left: var(--spacer) !important }
|
|
503
|
-
.ph { padding: var(--spacer_h) !important }
|
|
504
513
|
.pth, .pyh { padding-top: var(--spacer_h) !important }
|
|
505
514
|
.prh, .pxh { padding-right: var(--spacer_h) !important }
|
|
506
515
|
.pbh, .pyh { padding-bottom: var(--spacer_h) !important }
|
|
507
516
|
.plh, .pxh { padding-left: var(--spacer_h) !important }
|
|
508
|
-
.pq { padding: var(--spacer_q) !important }
|
|
509
517
|
.ptq, .pyq { padding-top: var(--spacer_q) !important }
|
|
510
518
|
.prq, .pxq { padding-right: var(--spacer_q) !important }
|
|
511
519
|
.pbq, .pyq { padding-bottom: var(--spacer_q) !important }
|
|
512
520
|
.plq, .pxq { padding-left: var(--spacer_q) !important }
|
|
513
|
-
.
|
|
514
|
-
.
|
|
515
|
-
.
|
|
516
|
-
.
|
|
521
|
+
.pt0, .py0 { padding-top: 0.1px !important }
|
|
522
|
+
.pr0, .px0 { padding-right: 0.1px !important }
|
|
523
|
+
.pb0, .py0 { padding-bottom: 0.1px !important }
|
|
524
|
+
.pl0, .px0 { padding-left: 0.1px !important }
|
|
525
|
+
|
|
517
526
|
.m { margin: var(--spacer) !important }
|
|
527
|
+
.mh { margin: var(--spacer_h) !important }
|
|
528
|
+
.mq { margin: var(--spacer_q) !important }
|
|
529
|
+
.m0 { margin: 0 !important }
|
|
530
|
+
.-m { margin: calc(-1 * var(--spacer)) !important }
|
|
518
531
|
.mt, .my { margin-top: var(--spacer) !important }
|
|
519
532
|
.mr, .mx { margin-right: var(--spacer) !important }
|
|
520
533
|
.mb, .my { margin-bottom: var(--spacer) !important }
|
|
521
534
|
.ml, .mx { margin-left: var(--spacer) !important }
|
|
522
|
-
.mh { margin: var(--spacer_h) !important }
|
|
523
535
|
.mth, .myh { margin-top: var(--spacer_h) !important }
|
|
524
536
|
.mrh, .mxh { margin-right: var(--spacer_h) !important }
|
|
525
537
|
.mbh, .myh { margin-bottom: var(--spacer_h) !important }
|
|
526
538
|
.mlh, .mxh { margin-left: var(--spacer_h) !important }
|
|
527
|
-
.mq { margin: var(--spacer_q) !important }
|
|
528
539
|
.mtq, .myq { margin-top: var(--spacer_q) !important }
|
|
529
540
|
.mrq, .mxq { margin-right: var(--spacer_q) !important }
|
|
530
541
|
.mbq, .myq { margin-bottom: var(--spacer_q) !important }
|
|
531
542
|
.mlq, .mxq { margin-left: var(--spacer_q) !important }
|
|
532
|
-
.
|
|
533
|
-
.
|
|
534
|
-
.
|
|
535
|
-
.
|
|
536
|
-
.-
|
|
537
|
-
.-
|
|
538
|
-
.-
|
|
539
|
-
.-
|
|
540
|
-
.b
|
|
541
|
-
.
|
|
542
|
-
.
|
|
543
|
-
.
|
|
544
|
-
.
|
|
545
|
-
.
|
|
546
|
-
.
|
|
547
|
-
.
|
|
548
|
-
.
|
|
549
|
-
.
|
|
550
|
-
.r
|
|
551
|
-
.
|
|
552
|
-
.r0, .rtl0, .rt0, .rl0 { border-top-left-radius: 0 !important }
|
|
553
|
-
.r0, .rtr0, .rt0, .rr0 { border-top-right-radius: 0 !important }
|
|
554
|
-
.r0, .rbr0, .rb0, .rr0 { border-bottom-right-radius: 0 !important }
|
|
555
|
-
.r0, .rbl0, .rb0, .rl0 { border-bottom-left-radius: 0 !important }
|
|
543
|
+
.mt0, .my0 { margin-top: 0 !important }
|
|
544
|
+
.mr0, .mx0 { margin-right: 0 !important }
|
|
545
|
+
.mb0, .my0 { margin-bottom: 0 !important }
|
|
546
|
+
.ml0, .mx0 { margin-left: 0 !important }
|
|
547
|
+
.-mt, .-my { margin-top: calc(-1 * var(--spacer)) !important }
|
|
548
|
+
.-mr, .-mx { margin-right: calc(-1 * var(--spacer)) !important }
|
|
549
|
+
.-mb, .-my { margin-bottom: calc(-1 * var(--spacer)) !important }
|
|
550
|
+
.-ml, .-mx { margin-left: calc(-1 * var(--spacer)) !important }
|
|
551
|
+
.b { border: 1px solid var(--c_border) !important }
|
|
552
|
+
.b0 { border: none !important }
|
|
553
|
+
.bt, .by { border-top: 1px solid var(--c_border) !important }
|
|
554
|
+
.br, .bx { border-right: 1px solid var(--c_border) !important }
|
|
555
|
+
.bb, .by { border-bottom: 1px solid var(--c_border) !important }
|
|
556
|
+
.bl, .bx { border-left: 1px solid var(--c_border) !important }
|
|
557
|
+
.bt0, .by0 { border-top: none !important }
|
|
558
|
+
.br0, .bx0 { border-right: none !important }
|
|
559
|
+
.bb0, .by0 { border-bottom: none !important }
|
|
560
|
+
.bl0, .bx0 { border-left: none !important }
|
|
561
|
+
.r { border-radius: var(--radius) !important }
|
|
562
|
+
.r0 { border-radius: 0 !important }
|
|
556
563
|
.round { border-radius: 9999rem !important }
|
|
564
|
+
.rtl, .rt, .rl { border-top-left-radius: var(--radius) !important }
|
|
565
|
+
.rtr, .rt, .rr { border-top-right-radius: var(--radius) !important }
|
|
566
|
+
.rbr, .rb, .rr { border-bottom-right-radius: var(--radius) !important }
|
|
567
|
+
.rbl, .rb, .rl { border-bottom-left-radius: var(--radius) !important }
|
|
568
|
+
.rtl0, .rt0, .rl0 { border-top-left-radius: 0 !important }
|
|
569
|
+
.rtr0, .rt0, .rr0 { border-top-right-radius: 0 !important }
|
|
570
|
+
.rbr0, .rb0, .rr0 { border-bottom-right-radius: 0 !important }
|
|
571
|
+
.rbl0, .rb0, .rl0 { border-bottom-left-radius: 0 !important }
|
|
572
|
+
|
|
557
573
|
|
|
558
574
|
/*
|
|
559
575
|
Rows and Columns
|
package/docs/init.js
DELETED
package/docs/nav.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
|
|
2
|
-
await window.customElements.whenDefined('k-side-menu');
|
|
3
|
-
document.getElementById('navSideMenu').toggle();
|
|
4
|
-
});
|
|
5
|
-
document.addEventListener('click', function(e) {
|
|
6
|
-
if (e.target.matches('a[href^="#"]')) {
|
|
7
|
-
e.preventDefault();
|
|
8
|
-
const targetId = e.target.getAttribute('href').replace('#', '');
|
|
9
|
-
const target = document.getElementById(targetId);
|
|
10
|
-
if (target) {
|
|
11
|
-
target.scrollIntoView({ behavior: 'smooth' });
|
|
12
|
-
const url = window.location.pathname + window.location.search + '#' + targetId;
|
|
13
|
-
history.replaceState(null, '', url);
|
|
14
|
-
document.getElementById('navSideMenu').close();
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
/*
|
|
20
|
-
Fixed Nav Shadow on Scroll
|
|
21
|
-
*/
|
|
22
|
-
const fixedNav = document.querySelector('nav.fixed');
|
|
23
|
-
if(fixedNav){
|
|
24
|
-
const updateNavShadow = () => {
|
|
25
|
-
if(window.scrollY > 0){
|
|
26
|
-
fixedNav.classList.add('scrolled');
|
|
27
|
-
} else {
|
|
28
|
-
fixedNav.classList.remove('scrolled');
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
window.addEventListener('scroll', updateNavShadow, { passive: true });
|
|
32
|
-
updateNavShadow();
|
|
33
|
-
}
|