kempo-css 2.1.3 → 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 +7 -0
- 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 +7 -0
- 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
|
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
|
-
}
|