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,508 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Elevation - Kempo CSS</title>
|
|
8
|
+
<link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
|
|
9
|
+
<link rel="manifest" href="./manifest.json" />
|
|
10
|
+
<link rel="stylesheet" href="./kempo.min.css" />
|
|
11
|
+
<link rel="stylesheet" href="./kempo-hljs.min.css" />
|
|
12
|
+
<script>
|
|
13
|
+
window.kempo = {
|
|
14
|
+
pathToStylesheet: './kempo.min.css',
|
|
15
|
+
pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons']
|
|
16
|
+
};
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<style>
|
|
20
|
+
.elevation-card {
|
|
21
|
+
display: inline-flex;
|
|
22
|
+
width: 9rem;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
aspect-ratio: 1 / 1;
|
|
26
|
+
margin: var(--spacer);
|
|
27
|
+
padding: var(--spacer);
|
|
28
|
+
border-radius: var(--radius);
|
|
29
|
+
vertical-align: top;
|
|
30
|
+
text-wrap: balance;
|
|
31
|
+
text-align: center;
|
|
32
|
+
}
|
|
33
|
+
</style>
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
</head>
|
|
37
|
+
<body>
|
|
38
|
+
|
|
39
|
+
<k-nav fixed class="bg-primary">
|
|
40
|
+
<button id="toggleNavSideMenu" class="link">
|
|
41
|
+
<k-icon name="menu"></k-icon>
|
|
42
|
+
</button>
|
|
43
|
+
<a href="./" class="d-if ph" style="align-items: center">
|
|
44
|
+
<img src="./media/icon32.png" alt="Kempo CSS Icon" class="pr" />
|
|
45
|
+
Kempo CSS
|
|
46
|
+
</a>
|
|
47
|
+
<a href="./theme-editor.html">Theme Editor</a>
|
|
48
|
+
<div class="flex"></div>
|
|
49
|
+
<a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon></a>
|
|
50
|
+
<a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon></a>
|
|
51
|
+
<a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon></a>
|
|
52
|
+
<k-theme-switcher></k-theme-switcher>
|
|
53
|
+
</k-nav>
|
|
54
|
+
<div style="width: 100%; height: 4rem;"></div>
|
|
55
|
+
<k-aside id="navSideMenu" main="overlay" state="offscreen">
|
|
56
|
+
<menu>
|
|
57
|
+
<div class="ta-center bb mb r0">
|
|
58
|
+
<h1 class="tc-primary">Kempo CSS</h1>
|
|
59
|
+
<img src="./media/icon128.png" alt="Kempo CSS Icon" />
|
|
60
|
+
</div>
|
|
61
|
+
<h5><a href="./typography.html">Typography</a></h5>
|
|
62
|
+
<div class="ml mb -mt">
|
|
63
|
+
<a href="./typography.html#paragraphs" class="d-b">Paragraphs</a>
|
|
64
|
+
<a href="./typography.html#headings" class="d-b">Headings</a>
|
|
65
|
+
<a href="./typography.html#textmarkup" class="d-b">Text Markup</a>
|
|
66
|
+
<a href="./typography.html#lists" class="d-b">Lists</a>
|
|
67
|
+
</div>
|
|
68
|
+
<h5><a href="./layout.html">Layout</a></h5>
|
|
69
|
+
<div class="ml mb -mt">
|
|
70
|
+
<a href="./layout.html#display" class="d-b">Display</a>
|
|
71
|
+
<a href="./layout.html#flexbox" class="d-b">Flexbox</a>
|
|
72
|
+
<a href="./layout.html#grid" class="d-b">Grid System</a>
|
|
73
|
+
<a href="./layout.html#responsive-grid" class="d-b">Responsive Grid</a>
|
|
74
|
+
<a href="./layout.html#min-width-grid" class="d-b">Alternative Responsive Grid</a>
|
|
75
|
+
</div>
|
|
76
|
+
<h5><a href="./borders-spacing.html">Borders & Spacing</a></h5>
|
|
77
|
+
<div class="ml mb -mt">
|
|
78
|
+
<a href="./borders-spacing.html#borders" class="d-b">Borders</a>
|
|
79
|
+
<a href="./borders-spacing.html#border-radius" class="d-b">Border Radius</a>
|
|
80
|
+
<a href="./borders-spacing.html#padding" class="d-b">Padding</a>
|
|
81
|
+
<a href="./borders-spacing.html#margins" class="d-b">Margins</a>
|
|
82
|
+
<a href="./borders-spacing.html#negative-margins" class="d-b">Negative Margins</a>
|
|
83
|
+
<a href="./borders-spacing.html#cancelled-margins" class="d-b">Cancelled Margins</a>
|
|
84
|
+
</div>
|
|
85
|
+
<h5><a href="./inputs.html">Inputs</a></h5>
|
|
86
|
+
<div class="ml mb -mt">
|
|
87
|
+
<a href="./inputs.html#basic-inputs" class="d-b">Basic Inputs</a>
|
|
88
|
+
<a href="./inputs.html#labels" class="d-b">Labels</a>
|
|
89
|
+
<a href="./inputs.html#checkbox-radio" class="d-b">Checkbox / Radio</a>
|
|
90
|
+
</div>
|
|
91
|
+
<h5><a href="./buttons.html">Buttons</a></h5>
|
|
92
|
+
<div class="ml mb -mt">
|
|
93
|
+
<a href="./buttons.html#button-types" class="d-b">Button Types</a>
|
|
94
|
+
<a href="./buttons.html#button-colors" class="d-b">Button Colors</a>
|
|
95
|
+
<a href="./buttons.html#button-sizes" class="d-b">Button Sizes</a>
|
|
96
|
+
<a href="./buttons.html#button-groups" class="d-b">Button Groups</a>
|
|
97
|
+
<a href="./buttons.html#no-styles" class="d-b">No Styles</a>
|
|
98
|
+
</div>
|
|
99
|
+
<h5><a href="./tables.html">Tables</a></h5>
|
|
100
|
+
<div class="ml mb -mt">
|
|
101
|
+
<a href="./tables.html#basic-table" class="d-b">Basic Table</a>
|
|
102
|
+
<a href="./tables.html#responsive-table" class="d-b">Responsive Table</a>
|
|
103
|
+
</div>
|
|
104
|
+
<h5><a href="./colors.html">Colors</a></h5>
|
|
105
|
+
<div class="ml mb -mt">
|
|
106
|
+
<a href="./colors.html#background" class="d-b">Background</a>
|
|
107
|
+
<a href="./colors.html#text-colors" class="d-b">Text Colors</a>
|
|
108
|
+
</div>
|
|
109
|
+
<h5><a href="./elevation.html">Elevation</a></h5>
|
|
110
|
+
<div class="ml mb -mt">
|
|
111
|
+
<a href="./elevation.html#elevation-z-index" class="d-b">Z-Index</a>
|
|
112
|
+
<a href="./elevation.html#elevation-shadow" class="d-b">Shadow</a>
|
|
113
|
+
<a href="./elevation.html#elevation-bg" class="d-b">Elevation Background</a>
|
|
114
|
+
<a href="./elevation.html#elevation-combined" class="d-b">Combined Example</a>
|
|
115
|
+
<a href="./elevation.html#elevation-variables" class="d-b">CSS Variables</a>
|
|
116
|
+
</div>
|
|
117
|
+
<h5><a href="./utilities.html">Utilities</a></h5>
|
|
118
|
+
<div class="ml mb -mt">
|
|
119
|
+
<a href="./utilities.html#noScroll" class="d-b">Disable Body Scrolling</a>
|
|
120
|
+
</div>
|
|
121
|
+
<hr />
|
|
122
|
+
<a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon> Read the License</a><br />
|
|
123
|
+
<a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon> View on NPM</a><br />
|
|
124
|
+
<a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon> View on GitHub</a>
|
|
125
|
+
<div style="height:33vh"></div>
|
|
126
|
+
</menu>
|
|
127
|
+
</k-aside>
|
|
128
|
+
<script type="module">
|
|
129
|
+
document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
|
|
130
|
+
await window.customElements.whenDefined('k-aside');
|
|
131
|
+
document.getElementById('navSideMenu').toggle();
|
|
132
|
+
});
|
|
133
|
+
document.addEventListener('click', function(e) {
|
|
134
|
+
if (e.target.matches('a[href^="#"]')) {
|
|
135
|
+
e.preventDefault();
|
|
136
|
+
const targetId = e.target.getAttribute('href').replace('#', '');
|
|
137
|
+
const target = document.getElementById(targetId);
|
|
138
|
+
if (target) {
|
|
139
|
+
target.scrollIntoView({ behavior: 'smooth' });
|
|
140
|
+
history.replaceState(null, '', window.location.pathname + window.location.search + '#' + targetId);
|
|
141
|
+
document.getElementById('navSideMenu').hide();
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
});
|
|
145
|
+
const fixedNav = document.querySelector('k-nav[fixed]');
|
|
146
|
+
if (fixedNav) {
|
|
147
|
+
const updateNavShadow = () => fixedNav.classList.toggle('scrolled', window.scrollY > 0);
|
|
148
|
+
window.addEventListener('scroll', updateNavShadow, { passive: true });
|
|
149
|
+
updateNavShadow();
|
|
150
|
+
}
|
|
151
|
+
</script>
|
|
152
|
+
|
|
153
|
+
<k-main>
|
|
154
|
+
<main>
|
|
155
|
+
<h1 class="ta-center">Elevation</h1>
|
|
156
|
+
|
|
157
|
+
<p>The elevation system provides three independent utilities that work together to create visual depth and control
|
|
158
|
+
stacking order. Level 2 is the default page level (z-index 20). Levels 0–1 are below page level, and levels 3–10
|
|
159
|
+
are
|
|
160
|
+
above. Each level increments z-index by 10, leaving room for fine-tuning between levels.</p>
|
|
161
|
+
<h2 id="elevation-z-index">Z-Index (<code>elevation-*</code>)</h2>
|
|
162
|
+
<p>Sets <code>z-index</code> only. Use on positioned elements (navbars, dialogs, drawers) to control stacking order.
|
|
163
|
+
</p>
|
|
164
|
+
<div class="row -mx">
|
|
165
|
+
<div class="col m-span-12 px">
|
|
166
|
+
<k-card label="HTML">
|
|
167
|
+
<pre
|
|
168
|
+
style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 0<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 0<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 1<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 10<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 2<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 20<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 3<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 30<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 4<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 40<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 5<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 50<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>(6–10 same)<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
169
|
+
</k-card>
|
|
170
|
+
</div>
|
|
171
|
+
<div class="col m-span-12 px">
|
|
172
|
+
<k-card label="Output">
|
|
173
|
+
<div class="elevation-0 shadow elevation-card">
|
|
174
|
+
<div>
|
|
175
|
+
<strong>Level 0</strong><br>
|
|
176
|
+
<span class="tc-muted small">z-index: 0</span>
|
|
177
|
+
</div>
|
|
178
|
+
</div>
|
|
179
|
+
<div class="elevation-1 shadow elevation-card">
|
|
180
|
+
<div>
|
|
181
|
+
<strong>Level 1</strong><br>
|
|
182
|
+
<span class="tc-muted small">z-index: 10</span>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
<div class="elevation-2 shadow elevation-card">
|
|
186
|
+
<div>
|
|
187
|
+
<strong>Level 2</strong><br>
|
|
188
|
+
<span class="tc-muted small">z-index: 20</span>
|
|
189
|
+
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="elevation-3 shadow elevation-card">
|
|
193
|
+
<div>
|
|
194
|
+
<strong>Level 3</strong><br>
|
|
195
|
+
<span class="tc-muted small">z-index: 30</span>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
<div class="elevation-4 shadow elevation-card">
|
|
199
|
+
<div>
|
|
200
|
+
<strong>Level 4</strong><br>
|
|
201
|
+
<span class="tc-muted small">z-index: 40</span>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
<div class="elevation-5 shadow elevation-card">
|
|
205
|
+
<div>
|
|
206
|
+
<strong>Level 5</strong><br>
|
|
207
|
+
<span class="tc-muted small">z-index: 50</span><br />
|
|
208
|
+
<span class="tc-muted small">(6–10 same)</span>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
</k-card>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="table-wrapper mb">
|
|
215
|
+
<table>
|
|
216
|
+
<thead>
|
|
217
|
+
<tr>
|
|
218
|
+
<th>Class</th>
|
|
219
|
+
<th>z-index</th>
|
|
220
|
+
</tr>
|
|
221
|
+
</thead>
|
|
222
|
+
<tbody>
|
|
223
|
+
<tr>
|
|
224
|
+
<td><code>elevation-0</code></td>
|
|
225
|
+
<td>0</td>
|
|
226
|
+
</tr>
|
|
227
|
+
<tr>
|
|
228
|
+
<td><code>elevation-1</code></td>
|
|
229
|
+
<td>10</td>
|
|
230
|
+
</tr>
|
|
231
|
+
<tr>
|
|
232
|
+
<td><code>elevation-2</code></td>
|
|
233
|
+
<td>20 (page default)</td>
|
|
234
|
+
</tr>
|
|
235
|
+
<tr>
|
|
236
|
+
<td><code>elevation-3</code></td>
|
|
237
|
+
<td>30</td>
|
|
238
|
+
</tr>
|
|
239
|
+
<tr>
|
|
240
|
+
<td><code>elevation-4</code></td>
|
|
241
|
+
<td>40</td>
|
|
242
|
+
</tr>
|
|
243
|
+
<tr>
|
|
244
|
+
<td><code>elevation-5</code></td>
|
|
245
|
+
<td>50</td>
|
|
246
|
+
</tr>
|
|
247
|
+
<tr>
|
|
248
|
+
<td><code>elevation-6</code></td>
|
|
249
|
+
<td>60</td>
|
|
250
|
+
</tr>
|
|
251
|
+
<tr>
|
|
252
|
+
<td><code>elevation-7</code></td>
|
|
253
|
+
<td>70</td>
|
|
254
|
+
</tr>
|
|
255
|
+
<tr>
|
|
256
|
+
<td><code>elevation-8</code></td>
|
|
257
|
+
<td>80</td>
|
|
258
|
+
</tr>
|
|
259
|
+
<tr>
|
|
260
|
+
<td><code>elevation-9</code></td>
|
|
261
|
+
<td>90</td>
|
|
262
|
+
</tr>
|
|
263
|
+
<tr>
|
|
264
|
+
<td><code>elevation-10</code></td>
|
|
265
|
+
<td>100</td>
|
|
266
|
+
</tr>
|
|
267
|
+
</tbody>
|
|
268
|
+
</table>
|
|
269
|
+
</div>
|
|
270
|
+
<h2 id="elevation-shadow">Shadow (<code>shadow</code>)</h2>
|
|
271
|
+
<p>Combine with an <code>elevation-*</code> class to apply a depth shadow. Levels 0–1 use inset shadows (sunk),
|
|
272
|
+
level 2 has no shadow (page level), levels 3–5 use progressively larger outset drop shadows, and levels 6–10
|
|
273
|
+
use the same shadow as level 5.</p>
|
|
274
|
+
<div class="row -mx">
|
|
275
|
+
<div class="col m-span-12 px">
|
|
276
|
+
<k-card label="HTML">
|
|
277
|
+
<pre
|
|
278
|
+
style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 0<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Deep Inset Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 1<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Shallow Inset Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 2<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>No Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 3<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Small Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 4<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Medium Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 shadow elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 5<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Large Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Max (6–10 same)<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
279
|
+
</k-card>
|
|
280
|
+
</div>
|
|
281
|
+
<div class="col m-span-12 px">
|
|
282
|
+
<k-card label="Output">
|
|
283
|
+
<div class="elevation-0 shadow elevation-card">
|
|
284
|
+
<div>
|
|
285
|
+
<strong>Level 0</strong><br>
|
|
286
|
+
<span class="tc-muted small">Deep Inset Shadow</span>
|
|
287
|
+
</div>
|
|
288
|
+
</div>
|
|
289
|
+
<div class="elevation-1 shadow elevation-card">
|
|
290
|
+
<div>
|
|
291
|
+
<strong>Level 1</strong><br>
|
|
292
|
+
<span class="tc-muted small">Shallow Inset Shadow</span>
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
<div class="elevation-2 shadow elevation-card">
|
|
296
|
+
<div>
|
|
297
|
+
<strong>Level 2</strong><br>
|
|
298
|
+
<span class="tc-muted small">No Shadow</span>
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
<div class="elevation-3 shadow elevation-card">
|
|
302
|
+
<div>
|
|
303
|
+
<strong>Level 3</strong><br>
|
|
304
|
+
<span class="tc-muted small">Small Drop Shadow</span>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
<div class="elevation-4 shadow elevation-card">
|
|
308
|
+
<div>
|
|
309
|
+
<strong>Level 4</strong><br>
|
|
310
|
+
<span class="tc-muted small">Medium Drop Shadow</span>
|
|
311
|
+
</div>
|
|
312
|
+
</div>
|
|
313
|
+
<div class="elevation-5 shadow elevation-card">
|
|
314
|
+
<div>
|
|
315
|
+
<strong>Level 5</strong><br>
|
|
316
|
+
<span class="tc-muted small">Large Drop Shadow</span><br>
|
|
317
|
+
<span class="tc-muted small">Max (6–10 same)</span>
|
|
318
|
+
</div>
|
|
319
|
+
</div>
|
|
320
|
+
</k-card>
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
<h2 id="elevation-bg">Elevation Background (<code>bg-elevation</code>)</h2>
|
|
324
|
+
<p>Combine with an <code>elevation-*</code> class to apply an elevation-appropriate background color. In dark mode,
|
|
325
|
+
higher elevations are progressively lighter (simulating ambient light from above). Levels 6–10 use the same
|
|
326
|
+
background as level 5.</p>
|
|
327
|
+
<div class="row -mx">
|
|
328
|
+
<div class="col m-span-12 px">
|
|
329
|
+
<k-card label="HTML">
|
|
330
|
+
<pre
|
|
331
|
+
style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 0<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Darkest<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 1<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Darker<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 2<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Page default<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 3<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>A Little Lighter<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 4<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Lighter<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 5<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Lightest<span class="hljs-tag"><<span class="hljs-name">br</span> /></span>(6–10 same)<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
332
|
+
</k-card>
|
|
333
|
+
</div>
|
|
334
|
+
<div class="col m-span-12 px">
|
|
335
|
+
<k-card label="Output">
|
|
336
|
+
<div class="elevation-0 bg-elevation elevation-card">
|
|
337
|
+
<div>
|
|
338
|
+
<strong>Level 0</strong><br>
|
|
339
|
+
<span class="tc-muted small">Darkest</span>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
<div class="elevation-1 bg-elevation elevation-card">
|
|
343
|
+
<div>
|
|
344
|
+
<strong>Level 1</strong><br>
|
|
345
|
+
<span class="tc-muted small">Darker</span>
|
|
346
|
+
</div>
|
|
347
|
+
</div>
|
|
348
|
+
<div class="elevation-2 bg-elevation elevation-card">
|
|
349
|
+
<div>
|
|
350
|
+
<strong>Level 2</strong><br>
|
|
351
|
+
<span class="tc-muted small">Page default</span>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
<div class="elevation-3 bg-elevation elevation-card">
|
|
355
|
+
<div>
|
|
356
|
+
<strong>Level 3</strong><br>
|
|
357
|
+
<span class="tc-muted small">A Little Lighter</span>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
360
|
+
<div class="elevation-4 bg-elevation elevation-card">
|
|
361
|
+
<div>
|
|
362
|
+
<strong>Level 4</strong><br>
|
|
363
|
+
<span class="tc-muted small">Lighter</span>
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
<div class="elevation-5 bg-elevation elevation-card">
|
|
367
|
+
<div>
|
|
368
|
+
<strong>Level 5</strong><br>
|
|
369
|
+
<span class="tc-muted small">Lightest<br />(6–10 same)</span>
|
|
370
|
+
</div>
|
|
371
|
+
</div>
|
|
372
|
+
</k-card>
|
|
373
|
+
</div>
|
|
374
|
+
</div>
|
|
375
|
+
<h2 id="elevation-combined">Combined Example</h2>
|
|
376
|
+
<p>Use all three classes together on a positioned element to get z-index stacking, a matching shadow depth, and the
|
|
377
|
+
correct background color for that level.</p>
|
|
378
|
+
<div class="row -mx">
|
|
379
|
+
<div class="col m-span-12 px">
|
|
380
|
+
<k-card label="HTML">
|
|
381
|
+
<pre style="overflow:auto;max-height:20rem"><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-0 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 0<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 0<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Deep Inset Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Darkest<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 1<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 10<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Shallow Inset Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Darker<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 2<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 20<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>No Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Page default<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 3<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 30<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Small Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>A Little Lighter<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 4<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 40<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Medium Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Lighter<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 shadow bg-elevation elevation-card"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>Level 5<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>z-index: 50<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Large Drop Shadow<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>Lightest<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"><<span class="hljs-name">br</span> /></span><br /> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>></span>(6–10 same)<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br /> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
|
382
|
+
</k-card>
|
|
383
|
+
</div>
|
|
384
|
+
<div class="col m-span-12 px">
|
|
385
|
+
<k-card label="Output">
|
|
386
|
+
<div class="elevation-0 shadow bg-elevation elevation-card">
|
|
387
|
+
<div><strong>Level 0</strong><br>
|
|
388
|
+
<span class="tc-muted small">z-index: 0</span><br />
|
|
389
|
+
<span class="tc-muted small">Deep Inset Shadow</span>
|
|
390
|
+
<span class="tc-muted small">Darkest</span>
|
|
391
|
+
</div>
|
|
392
|
+
</div>
|
|
393
|
+
<div class="elevation-1 shadow bg-elevation elevation-card">
|
|
394
|
+
<div><strong>Level 1</strong><br>
|
|
395
|
+
<span class="tc-muted small">z-index: 10</span><br />
|
|
396
|
+
<span class="tc-muted small">Shallow Inset Shadow</span><br />
|
|
397
|
+
<span class="tc-muted small">Darker</span>
|
|
398
|
+
</div>
|
|
399
|
+
</div>
|
|
400
|
+
<div class="elevation-2 shadow bg-elevation elevation-card">
|
|
401
|
+
<div><strong>Level 2</strong><br>
|
|
402
|
+
<span class="tc-muted small">z-index: 20</span><br />
|
|
403
|
+
<span class="tc-muted small">No Shadow</span><br />
|
|
404
|
+
<span class="tc-muted small">Page default</span>
|
|
405
|
+
</div>
|
|
406
|
+
</div>
|
|
407
|
+
<div class="elevation-3 shadow bg-elevation elevation-card">
|
|
408
|
+
<div><strong>Level 3</strong><br>
|
|
409
|
+
<span class="tc-muted small">z-index: 30</span><br />
|
|
410
|
+
<span class="tc-muted small">Small Drop Shadow</span><br />
|
|
411
|
+
<span class="tc-muted small">A Little Lighter</span>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
414
|
+
<div class="elevation-4 shadow bg-elevation elevation-card">
|
|
415
|
+
<div><strong>Level 4</strong><br>
|
|
416
|
+
<span class="tc-muted small">z-index: 40</span><br />
|
|
417
|
+
<span class="tc-muted small">Medium Drop Shadow</span><br />
|
|
418
|
+
<span class="tc-muted small">Lighter</span><br />
|
|
419
|
+
</div>
|
|
420
|
+
</div>
|
|
421
|
+
<div class="elevation-5 shadow bg-elevation elevation-card">
|
|
422
|
+
<div><strong>Level 5</strong><br>
|
|
423
|
+
<span class="tc-muted small">z-index: 50</span><br />
|
|
424
|
+
<span class="tc-muted small">Large Drop Shadow</span><br />
|
|
425
|
+
<span class="tc-muted small">Lightest</span><br />
|
|
426
|
+
<span class="tc-muted small">(6–10 same)</span>
|
|
427
|
+
</div>
|
|
428
|
+
</div>
|
|
429
|
+
</k-card>
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
<h2 id="elevation-variables">Elevation CSS Variables</h2>
|
|
433
|
+
<div class="table-wrapper mb">
|
|
434
|
+
<table>
|
|
435
|
+
<thead>
|
|
436
|
+
<tr>
|
|
437
|
+
<th>Variable</th>
|
|
438
|
+
<th>Description</th>
|
|
439
|
+
</tr>
|
|
440
|
+
</thead>
|
|
441
|
+
<tbody>
|
|
442
|
+
<tr>
|
|
443
|
+
<td><code>--c_bg_elevation_0</code></td>
|
|
444
|
+
<td>Background for level 0 (darkest / deepest)</td>
|
|
445
|
+
</tr>
|
|
446
|
+
<tr>
|
|
447
|
+
<td><code>--c_bg_elevation_1</code></td>
|
|
448
|
+
<td>Background for level 1 (sunk below page)</td>
|
|
449
|
+
</tr>
|
|
450
|
+
<tr>
|
|
451
|
+
<td><code>--c_bg_elevation_2</code></td>
|
|
452
|
+
<td>Background for level 2 — equals <code>var(--c_bg)</code> (page default)</td>
|
|
453
|
+
</tr>
|
|
454
|
+
<tr>
|
|
455
|
+
<td><code>--c_bg_elevation_3</code></td>
|
|
456
|
+
<td>Background for level 3</td>
|
|
457
|
+
</tr>
|
|
458
|
+
<tr>
|
|
459
|
+
<td><code>--c_bg_elevation_4</code></td>
|
|
460
|
+
<td>Background for level 4</td>
|
|
461
|
+
</tr>
|
|
462
|
+
<tr>
|
|
463
|
+
<td><code>--c_bg_elevation_5</code></td>
|
|
464
|
+
<td>Background for level 5</td>
|
|
465
|
+
</tr>
|
|
466
|
+
<tr>
|
|
467
|
+
<td><code>--c_bg_elevation_6</code> – <code>--c_bg_elevation_10</code></td>
|
|
468
|
+
<td>Same as <code>--c_bg_elevation_5</code> (levels 6–10 do not get lighter)</td>
|
|
469
|
+
</tr>
|
|
470
|
+
<tr>
|
|
471
|
+
<td><code>--shadow_0</code></td>
|
|
472
|
+
<td>Shadow for level 0 (deep inset)</td>
|
|
473
|
+
</tr>
|
|
474
|
+
<tr>
|
|
475
|
+
<td><code>--shadow_1</code></td>
|
|
476
|
+
<td>Shadow for level 1 (shallow inset)</td>
|
|
477
|
+
</tr>
|
|
478
|
+
<tr>
|
|
479
|
+
<td><code>--shadow_3</code></td>
|
|
480
|
+
<td>Shadow for level 3 (very small outset)</td>
|
|
481
|
+
</tr>
|
|
482
|
+
<tr>
|
|
483
|
+
<td><code>--shadow_4</code></td>
|
|
484
|
+
<td>Shadow for level 4 (small outset)</td>
|
|
485
|
+
</tr>
|
|
486
|
+
<tr>
|
|
487
|
+
<td><code>--shadow_5</code></td>
|
|
488
|
+
<td>Shadow for level 5 (medium-small outset)</td>
|
|
489
|
+
</tr>
|
|
490
|
+
<tr>
|
|
491
|
+
<td><code>--shadow_6</code> – <code>--shadow_10</code></td>
|
|
492
|
+
<td>Same as <code>--shadow_5</code> (levels 6–10 do not get deeper)</td>
|
|
493
|
+
</tr>
|
|
494
|
+
</tbody>
|
|
495
|
+
</table>
|
|
496
|
+
</div>
|
|
497
|
+
|
|
498
|
+
</main>
|
|
499
|
+
<div style="height:33vh"></div>
|
|
500
|
+
</k-main>
|
|
501
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Nav.js"></script>
|
|
502
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Aside.js"></script>
|
|
503
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Icon.js"></script>
|
|
504
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/ThemeSwitcher.js"></script>
|
|
505
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Card.js"></script>
|
|
506
|
+
|
|
507
|
+
</body>
|
|
508
|
+
</html>
|
|
@@ -28,6 +28,6 @@
|
|
|
28
28
|
col d-span-3 t-span-6 m-span-12
|
|
29
29
|
</div>
|
|
30
30
|
</div>
|
|
31
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.
|
|
31
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/ThemeSwitcher.js"></script>
|
|
32
32
|
</body>
|
|
33
33
|
</html>
|