mirror of https://github.com/n2geoff/stylelite.git
new stylelite, simpiler, smaller, powerful
This commit is contained in:
parent
586ee19473
commit
99655ce656
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,378 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Example</title>
|
||||||
|
<link rel="stylesheet" href="../src/main.css">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css@1.2.0/css/feather.min.css">
|
||||||
|
<script src="../src/components/theme-toggle.js"></script>
|
||||||
|
<style>
|
||||||
|
.fill {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-margin {margin:0}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body >
|
||||||
|
<article class="container">
|
||||||
|
<header>
|
||||||
|
<section class="no-margin">
|
||||||
|
<nav class="underline">
|
||||||
|
<strong class="text-primary brand">
|
||||||
|
STYLELITE
|
||||||
|
<span class="text-secondary">CSS</span>
|
||||||
|
</strong>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#type">Typography</a></li>
|
||||||
|
<li><a href="#forms">Forms</a></li>
|
||||||
|
<li><a href="#table">Tables</a></li>
|
||||||
|
<li><a href="#components">Components</a></li>
|
||||||
|
<li><theme-toggle /></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<p>
|
||||||
|
<div class="grid space">
|
||||||
|
<div class="primary"> </div>
|
||||||
|
<div class="default"> </div>
|
||||||
|
<div class="border"> </div>
|
||||||
|
</div>
|
||||||
|
</p>
|
||||||
|
<hr>
|
||||||
|
</section>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<a name="overview"></a>
|
||||||
|
<h2 class="underline">Overview</h2>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<kbd>DIV</kbd> is not the only tag available to your designs.
|
||||||
|
<abbr title="progressive classless css">Stylelite</abbr> mimics traditional <kbd>.container</kbd> class by just using a <kbd>MAIN</kbd> tag,
|
||||||
|
which by default centers your content to an <strong>1140px</strong> width.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Need to divide major sections of your code, eh...use <kbd>SECTION</kbd> tag.
|
||||||
|
Need little extra content flair, wrap in an <kbd>ARTICLE</kbd> tag.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Use <i>AS-IS</i> or <a href="#customize">Customize</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<a name="type"></a>
|
||||||
|
<h2 class="underline">Typography</h2>
|
||||||
|
<div>
|
||||||
|
<blockquote>
|
||||||
|
The alternative to good design is always bad design. there is no such thing as no design.
|
||||||
|
Simplicity carried to an extreme, becomes elegance.
|
||||||
|
<cite>-- Adam Judge</cite>
|
||||||
|
</blockquote>
|
||||||
|
<p>
|
||||||
|
<kbd>P</kbd>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum luctus arcu,
|
||||||
|
eu faucibus ex. Ut consequat lorem eget aliquet semper. Praesent quis vestibulum ante,
|
||||||
|
id tristique leo. Etiam sed congue lacus. Nunc ut ornare metus. Suspendisse tincidunt in
|
||||||
|
odio eu faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
|
||||||
|
facilisi.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<kbd>STRONG</kbd>
|
||||||
|
<strong id="generated">Generated 1 paragraph, 52 words, 354 bytes of
|
||||||
|
<a href="https://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a>
|
||||||
|
</strong>
|
||||||
|
</p>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
<div class="grid">
|
||||||
|
<div>
|
||||||
|
<h1><kbd>H1</kbd> Heading...</h1>
|
||||||
|
<h2><kbd>H2</kbd> Heading...</h2>
|
||||||
|
<h3><kbd>H3</kbd> Heading...</h3>
|
||||||
|
<h4><kbd>H4</kbd> Heading...</h4>
|
||||||
|
<h5><kbd>H5</kbd> Heading...</h5>
|
||||||
|
<h6><kbd>H6</kbd> Heading...</h6>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p><kbd>P</kbd> can simply be a paragraph</p>
|
||||||
|
<p><kbd>A</kbd> can be a <a href="./">link</a></p>
|
||||||
|
<p><kbd>STRONG</kbd> can be <strong>bold</strong></p>
|
||||||
|
<p><kbd>U</kbd> can be <u>underlined</u></p>
|
||||||
|
<p><kbd>EM</kbd> can be <em>emphasized</em></p>
|
||||||
|
<p><kbd>KBD</kbd> acts like a <kbd>tag</kbd></p>
|
||||||
|
<p><kbd>SMALL</kbd> can be <small>small</small></p>
|
||||||
|
<p><kbd>CODE</kbd> can be <code>code</code></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<kbd>IMG</kbd>
|
||||||
|
</div>
|
||||||
|
<img src='https://placehold.co/340x280' alt='Example image'>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<kbd>HR</kbd>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<a name="buttons"></a>
|
||||||
|
<h2 class="underline">Buttons</h2>
|
||||||
|
<p>
|
||||||
|
<kbd>button</kbd> can be customize by applying a color class.
|
||||||
|
</p>
|
||||||
|
<p class="grid">
|
||||||
|
<a href="#" class="button">Link</a>
|
||||||
|
<button>Default</button>
|
||||||
|
<button class="primary">.primary</button>
|
||||||
|
<button class="secondary">.secondary</button>
|
||||||
|
<button class="success">.success</button>
|
||||||
|
<button class="warning">.warning</button>
|
||||||
|
<button class="danger">.danger</button>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<a name="nav"></a>
|
||||||
|
<h2 class="underline">Navigation</h2>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<kbd>nav</kbd> provides a convenient way to build navigation systems
|
||||||
|
using <kbd>ul</kbd> and <kbd>li</kbd>. Internally elements <kbd>nav</kbd>
|
||||||
|
divide, so you can put an empty <kbd>div</kbd> before the <kbd>ul</kbd>
|
||||||
|
to make the nav on the right side or <kbd>div</kbd> on both sides
|
||||||
|
to center
|
||||||
|
</p>
|
||||||
|
<nav class="primary">
|
||||||
|
<ul>
|
||||||
|
<li>One</li>
|
||||||
|
<li>Two</li>
|
||||||
|
<li>Three</li>
|
||||||
|
<li>Four</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav class="default">
|
||||||
|
<div></div>
|
||||||
|
<ul>
|
||||||
|
<li>One</li>
|
||||||
|
<li>Two</li>
|
||||||
|
<li>Three</li>
|
||||||
|
<li>Four</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav class="dark">
|
||||||
|
<div></div>
|
||||||
|
<ul>
|
||||||
|
<li>One</li>
|
||||||
|
<li>Two</li>
|
||||||
|
<li>Three</li>
|
||||||
|
<li>Four</li>
|
||||||
|
</ul>
|
||||||
|
<div></div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<a name="forms"></a>
|
||||||
|
<h2 class="underline">Forms</h2>
|
||||||
|
<form class="">
|
||||||
|
<details>
|
||||||
|
<summary>Details Summary</summary>
|
||||||
|
<div>
|
||||||
|
Default <kbd>details</kbd> and <kbd>summary</kbd> behavior.
|
||||||
|
wrap content in tag, like <kbd>div</kbd>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for='id'>User id (read only)</label>
|
||||||
|
<input name='id' id='id' value='R2D2' readonly>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for='email'>Email</label>
|
||||||
|
<input type='email' name='email' id='email' placeholder='email@example.com' autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for='password'>Password</label>
|
||||||
|
<input type='password' name='password' id='password'>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for='disabled'>Random disabled input</label>
|
||||||
|
<input disabled name='disabled' id='disabled'
|
||||||
|
placeholder='Because why not?'>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for='selected'>Preferred theme</label>
|
||||||
|
<select name="selected" id="selected">
|
||||||
|
<option value="">Choose One</option>
|
||||||
|
<option value="light">Light</option>
|
||||||
|
<option value="dark">Dark</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for='about'>About me</label>
|
||||||
|
<textarea name='about' id='about'
|
||||||
|
placeholder='I am a textarea...'></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input type='checkbox' name='remember' id='remember' checked>
|
||||||
|
<label for='remember'>
|
||||||
|
Remember Me
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<input class="right" type="submit"></input>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<a name="table"></a>
|
||||||
|
<h2 class="underline">Tables</h2>
|
||||||
|
<p><kbd>TABLE</kbd> is clean by default</p>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr >
|
||||||
|
<th>One</th>
|
||||||
|
<th>Two</th>
|
||||||
|
<th>There</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Data</td>
|
||||||
|
<td>Data</td>
|
||||||
|
<td>Data</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Data</td>
|
||||||
|
<td>Data</td>
|
||||||
|
<td>Data</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Data</td>
|
||||||
|
<td>Data</td>
|
||||||
|
<td>Data</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<a name="components"></a>
|
||||||
|
<h2 class="underline">Components</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
These are native UI components that typically do not have any
|
||||||
|
style
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<section class="border">
|
||||||
|
<header class="primary">
|
||||||
|
<strong>Dialogs</strong>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
A native modal UI element exists as <code>dialog</code>
|
||||||
|
and is supported with a little javascript.
|
||||||
|
<p>
|
||||||
|
SEE: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_NEW">
|
||||||
|
MDN Documentation
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
<footer class="default">
|
||||||
|
<button class="fill" id="dialog">Open Modal</button>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
<section class="grid border">
|
||||||
|
<div class="center">
|
||||||
|
More...
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="grid border">
|
||||||
|
<div class="center">
|
||||||
|
More...
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<dialog>
|
||||||
|
<header class="primary">Default Dialog Modal</header>
|
||||||
|
<footer>
|
||||||
|
<form method="dialog">
|
||||||
|
<button>Close</button>
|
||||||
|
</form>
|
||||||
|
</footer>
|
||||||
|
</dialog>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2 class="underline">Dark Mode</h2>
|
||||||
|
<p>
|
||||||
|
Add <code>data-theme="dark"</code> to your <kbd>html</kbd> tag
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<br>
|
||||||
|
<section>
|
||||||
|
<h2 class="underline">Custom Theme</h2>
|
||||||
|
<p>
|
||||||
|
Create a custom theme by overriding variables in <kbd>:root</kbd> stylesheet
|
||||||
|
</p>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Variable</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Default</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tr>
|
||||||
|
<th><code>--primary</code></th>
|
||||||
|
<td>Designing a site around primary theme color, set here</td>
|
||||||
|
<td><code>#5499C7</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th><code>--radius</code></th>
|
||||||
|
<td>Prefer rounded-corners, try <code>.4rem</code></td>
|
||||||
|
<td><code>.3rem</code></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<a name="utilities"></a>
|
||||||
|
<h2 class="underline">Utilities</h2>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th><code>.grid</code></th>
|
||||||
|
<td>
|
||||||
|
a <code>display:grid</code> layout helper, that acts a lot like
|
||||||
|
<code>.row</code> but without the column control
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th><code>.group</code></th>
|
||||||
|
<td>
|
||||||
|
really just <code>display:flex</code> however used on
|
||||||
|
<kbd>input</kbd> groups provides form element designs
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</article>
|
||||||
|
<footer class="primary"> </footer>
|
||||||
|
<script>
|
||||||
|
const $ = document.querySelector.bind(document);
|
||||||
|
|
||||||
|
$("#dialog").addEventListener("click", () => (
|
||||||
|
$("dialog").showModal()
|
||||||
|
));
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,431 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" data-theme="light">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Stylelite</title>
|
|
||||||
<link rel="stylesheet" href="../src/main.css">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css@1.2.0/css/feather.min.css">
|
|
||||||
<script src="../src/components/theme-toggle.js"></script>
|
|
||||||
<style>
|
|
||||||
.fill {height: 100%; width: 100%}
|
|
||||||
.grid-center {align-self: center; justify-self: center;}
|
|
||||||
.border {border: 1px solid var(--theme)}
|
|
||||||
.no-space {margin: 0; padding:0;}
|
|
||||||
header, footer {line-height: 3rem; height: 3rem;}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="">
|
|
||||||
<main>
|
|
||||||
<section>
|
|
||||||
<nav>
|
|
||||||
<h2 class="no-space" style="color: var(--mg);">
|
|
||||||
STYLELITE
|
|
||||||
<span style="color: var(--fg);">CSS</span>
|
|
||||||
</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#type">Typography</a></li>
|
|
||||||
<li><a href="#forms">Forms</a></li>
|
|
||||||
<li><a href="#table">Tables</a></li>
|
|
||||||
<li><a href="#components">Components</a></li>
|
|
||||||
<li><a href="#utilities">Utilities</a></li>
|
|
||||||
<li><a href="#customize">Customize</a></li>
|
|
||||||
<li><theme-toggle /></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<p>
|
|
||||||
<div class="grid space">
|
|
||||||
<div style="background: var(--theme);"> </div>
|
|
||||||
<div style="background: var(--mg);"> </div>
|
|
||||||
<div class="border"> </div>
|
|
||||||
</div>
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<a name="overview"></a>
|
|
||||||
<h2>Overview</h2>
|
|
||||||
<div>
|
|
||||||
<p>
|
|
||||||
<code>DIV</code> is not the only tag available to your designs.
|
|
||||||
Mimic traditional <code>.container</code> class by just using a <code>MAIN</code> tag,
|
|
||||||
which by default centers your content to an 1140 width.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Need to divide major sections of your code, eh...use <code>SECTION</code> tag.
|
|
||||||
Need little extra content flair, wrap in an <code>ARTICLE</code> tag.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Use <i>AS-IS</i> or <a href="#customize">Customize</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<a name="nav"></a>
|
|
||||||
<h2>Navigation</h2>
|
|
||||||
<div>
|
|
||||||
<p>
|
|
||||||
<code>nav</code> provides a convenient way to build navigation systems
|
|
||||||
using <code>ul</code> and <code>li</code>. Internally elements <code>nav</code>
|
|
||||||
divide, so you can put an empty <code>div</code> before the <code>ul</code>
|
|
||||||
to make the nav on the right side or <code>div</code> on both sides
|
|
||||||
to center
|
|
||||||
|
|
||||||
</p>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li>One</li>
|
|
||||||
<li>Two</li>
|
|
||||||
<li>Three</li>
|
|
||||||
<li>Four</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<nav>
|
|
||||||
<div></div>
|
|
||||||
<ul>
|
|
||||||
<li>One</li>
|
|
||||||
<li>Two</li>
|
|
||||||
<li>Three</li>
|
|
||||||
<li>Four</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<nav>
|
|
||||||
<div></div>
|
|
||||||
<ul>
|
|
||||||
<li>One</li>
|
|
||||||
<li>Two</li>
|
|
||||||
<li>Three</li>
|
|
||||||
<li>Four</li>
|
|
||||||
</ul>
|
|
||||||
<div></div>
|
|
||||||
</nav>
|
|
||||||
<nav class="navbar">
|
|
||||||
<ul>
|
|
||||||
<li>One</li>
|
|
||||||
<li>Two</li>
|
|
||||||
<li>Three</li>
|
|
||||||
<li>Four</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<a name="type"></a>
|
|
||||||
<h2>Typography</h2>
|
|
||||||
<div>
|
|
||||||
<blockquote>
|
|
||||||
The alternative to good design is always bad design. there is no such thing as no design.
|
|
||||||
Simplicity carried to an extreme, becomes elegance.
|
|
||||||
<cite>-- Adam Judge</cite>
|
|
||||||
</blockquote>
|
|
||||||
<p>
|
|
||||||
<code>P</code>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum luctus arcu,
|
|
||||||
eu faucibus ex. Ut consequat lorem eget aliquet semper. Praesent quis vestibulum ante,
|
|
||||||
id tristique leo. Etiam sed congue lacus. Nunc ut ornare metus. Suspendisse tincidunt in
|
|
||||||
odio eu faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
|
|
||||||
facilisi.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<code>STRONG</code>
|
|
||||||
<strong id="generated">Generated 1 paragraph, 52 words, 354 bytes of
|
|
||||||
<a href="https://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a>
|
|
||||||
</strong>
|
|
||||||
</p>
|
|
||||||
<hr>
|
|
||||||
</div>
|
|
||||||
<div class="grid">
|
|
||||||
<div>
|
|
||||||
<h1><code>H1</code> Heading...</h1>
|
|
||||||
<h2><code>H2</code> Heading...</h2>
|
|
||||||
<h3><code>H3</code> Heading...</h3>
|
|
||||||
<h4><code>H4</code> Heading...</h4>
|
|
||||||
<h5><code>H5</code> Heading...</h5>
|
|
||||||
<h6><code>H6</code> Heading...</h6>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p><code>P</code> can simply be a paragraph</p>
|
|
||||||
<p><code>A</code> can be a <a href="./">link</a></p>
|
|
||||||
<p><code>STRONG</code> can be <strong>bold</strong></p>
|
|
||||||
<p><code>U</code> can be <u>underlined</u></p>
|
|
||||||
<p><code>EM</code> can be <em>emphasized</em></p>
|
|
||||||
<p><code>SMALL</code> can be <small>small</small></p>
|
|
||||||
<p><code>CODE</code> can be <code>code</code></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<code>HR</code>
|
|
||||||
<hr>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<code>IMG</code>
|
|
||||||
</div>
|
|
||||||
<img src='https://placehold.co/340x280' alt='Example image'>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<a name="lists"></a>
|
|
||||||
<h2>Lists</h2>
|
|
||||||
<article class="grid">
|
|
||||||
<div>
|
|
||||||
<code>UL</code>
|
|
||||||
<ul>
|
|
||||||
<li><code>LI</code>List Item</li>
|
|
||||||
<li><code>LI</code>List Item</li>
|
|
||||||
<li><code>LI</code>List Item</li>
|
|
||||||
<li><code>LI</code>List Item</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<code>OL</code>
|
|
||||||
<ol>
|
|
||||||
<li><code>LI</code>List Item</li>
|
|
||||||
<li><code>LI</code>List Item</li>
|
|
||||||
<li><code>LI</code>List Item</li>
|
|
||||||
<li><code>LI</code>List Item</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<a name="forms"></a>
|
|
||||||
<h2>Forms</h2>
|
|
||||||
<form class="">
|
|
||||||
<details>
|
|
||||||
<summary>Details Summary</summary>
|
|
||||||
<div>
|
|
||||||
Default <code>details</code> and <code>summary</code> behavior.
|
|
||||||
wrap content in tag, like <code>div</code>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for='id'>User id (read only)</label>
|
|
||||||
<input name='id' id='id' value='R2D2' readonly>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for='email'>Email</label>
|
|
||||||
<div class="group">
|
|
||||||
<input type='email' name='email' id='email' placeholder='email@example.com' autocomplete="off">
|
|
||||||
<label class="addon">
|
|
||||||
<i class="ft-mail"></i>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for='password'>Password</label>
|
|
||||||
<input type='password' name='password' id='password'>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for='disabled'>Random disabled input</label>
|
|
||||||
<input disabled name='disabled' id='disabled'
|
|
||||||
placeholder='Because why not?'>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for='selected'>Preferred theme</label>
|
|
||||||
<select name="selected" id="selected">
|
|
||||||
<option value="">Choose One</option>
|
|
||||||
<option value="light">Light</option>
|
|
||||||
<option value="dark">Dark</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for='about'>About me</label>
|
|
||||||
<textarea name='about' id='about'
|
|
||||||
placeholder='I am a textarea...'></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<input type='checkbox' name='remember' id='remember' checked>
|
|
||||||
<label for='remember'>
|
|
||||||
Remember Me
|
|
||||||
</label>
|
|
||||||
<input class="right" type="submit"></input>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<a name="buttons"></a>
|
|
||||||
<h2>Buttons</h2>
|
|
||||||
<div class="grid">
|
|
||||||
<button>Default</button>
|
|
||||||
<button disabled>Disabled</button>
|
|
||||||
<button class="outline">Outline</button>
|
|
||||||
<button class="link">Link</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<a name="table"></a>
|
|
||||||
<h2>Tables</h2>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>One</th>
|
|
||||||
<th>Two</th>
|
|
||||||
<th>There</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Data</td>
|
|
||||||
<td>Data</td>
|
|
||||||
<td>Data</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Data</td>
|
|
||||||
<td>Data</td>
|
|
||||||
<td>Data</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Data</td>
|
|
||||||
<td>Data</td>
|
|
||||||
<td>Data</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<a name="components"></a>
|
|
||||||
<h2>Components</h2>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
These are native UI components that typically do not have any
|
|
||||||
style
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="grid">
|
|
||||||
<section class="border">
|
|
||||||
<header style="background: var(--theme); padding: 0 1rem; color: #FFF">
|
|
||||||
<strong>Dialogs</strong>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
A native modal UI element exists as <code>dialog</code>
|
|
||||||
and is supported with a little javascript.
|
|
||||||
<p>
|
|
||||||
SEE: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_NEW">
|
|
||||||
MDN Documentation
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</main>
|
|
||||||
<footer class="grid">
|
|
||||||
<button class="fill" id="dialog">Open Modal</button>
|
|
||||||
</footer>
|
|
||||||
</section>
|
|
||||||
<section class="grid border">
|
|
||||||
<div class="grid-center">
|
|
||||||
More...
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section class="grid border">
|
|
||||||
<div class="grid-center">
|
|
||||||
More...
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<dialog>
|
|
||||||
<p>Default Dialog Modal</p>
|
|
||||||
<form method="dialog">
|
|
||||||
<button>Close</button>
|
|
||||||
</form>
|
|
||||||
</dialog>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<a name="utilities"></a>
|
|
||||||
<h2>Misc Utility Classes</h2>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<th><code>.grid</code></th>
|
|
||||||
<td>
|
|
||||||
a <code>display:grid</code> layout helper, that acts a lot like
|
|
||||||
<code>.row</code> but without the column control
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th><code>.group</code></th>
|
|
||||||
<td>
|
|
||||||
really just <code>display:flex</code> however used on
|
|
||||||
<code>input</code> groups provides form element designs
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<a name="customize"></a>
|
|
||||||
<hr>
|
|
||||||
<h1>Customize</h1>
|
|
||||||
<hr>
|
|
||||||
<p>
|
|
||||||
<code>/extras</code> provides some useful styles that complement
|
|
||||||
<strong>Stylelite</strong> and have been removed to keep it focused
|
|
||||||
closer to a classless css solution -- and smaller.
|
|
||||||
</p>
|
|
||||||
<blockquote>
|
|
||||||
<strong>NOTE:</strong> Some extras exist in <strong>Stylelite</strong>,
|
|
||||||
but are also useful in isolation
|
|
||||||
</blockquote>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h4>CSS Variables</h4>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Variable</th>
|
|
||||||
<th>Description</th>
|
|
||||||
<th>Default</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tr>
|
|
||||||
<th><code>--theme</code> (color)</th>
|
|
||||||
<td>Designing a site around a theme color, set here</td>
|
|
||||||
<td><code>steelblue</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th><code>--radius</code></th>
|
|
||||||
<td>Prefer rounded-corners, try <code>.4rem</code></td>
|
|
||||||
<td><code>0rem</code></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h4>Dark Mode</h4>
|
|
||||||
Add <code>data-theme="dark"</code> to your <code>html</code> tag
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<h4>Colors</h4>
|
|
||||||
<p>
|
|
||||||
Customize with your own styles or some examples available extras like
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<blockquote>
|
|
||||||
Bootstrap-inspired color classes found
|
|
||||||
in <code>extras/colors.css</code>
|
|
||||||
</blockquote>
|
|
||||||
|
|
||||||
<div class="grid">
|
|
||||||
<button class="info">Info</button>
|
|
||||||
<button class="warning">Warning</button>
|
|
||||||
<button class="danger">Danger</button>
|
|
||||||
<button class="success">Success</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
<script>
|
|
||||||
const $ = document.querySelector.bind(document);
|
|
||||||
|
|
||||||
$("#dialog").addEventListener("click", () => (
|
|
||||||
$("dialog").showModal()
|
|
||||||
));
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "stylelite",
|
"name": "stylelite",
|
||||||
"version": "0.8.2",
|
"version": "1.0.0",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "stylelite",
|
"name": "stylelite",
|
||||||
"version": "0.8.2",
|
"version": "1.0.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"csso-cli": "^4.0.2"
|
"csso-cli": "^4.0.2"
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "stylelite",
|
"name": "stylelite",
|
||||||
"version": "0.9.10",
|
"version": "1.0.0",
|
||||||
"description": "a class-lite stylesheet on the light-side",
|
"description": "a class-lite stylesheet on the light-side",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "npx csso-cli .\\src\\stylelite.css --comments first-exclamation --output .\\dist\\stylelite.min.css -s .\\dist\\stylelite.map"
|
"build": "npx csso-cli .\\src\\stylelite.css --comments first-exclamation --output .\\dist\\stylelite.min.css -s .\\dist\\stylelite.map"
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,12 @@
|
||||||
max-width: 1140px;
|
max-width: 1140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
display: grid;
|
||||||
|
min-height: 100%;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
/* Old Stylelite Shim */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--theme: #d69711;
|
||||||
|
|
||||||
|
/* real --theme (for now) */
|
||||||
|
--primary: #d69711;
|
||||||
|
--default: #d69711;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {margin: 0 auto;}
|
||||||
|
button {color: var(--light);background: var(--primary);}
|
||||||
|
label.addon {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--light);
|
||||||
|
background: var(--primary);
|
||||||
|
margin: 0 0 .5rem -2px;
|
||||||
|
min-width: fit-content;
|
||||||
|
padding: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {color: var(--primary)}
|
||||||
|
|
@ -1,156 +1,95 @@
|
||||||
/*! Stylelite v:0.9.10 | MIT LICENSE | https://github.com/n2geoff/stylelite */
|
/*! Stylelite v:1.0.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */
|
||||||
:root {
|
:root {
|
||||||
--theme: steelblue;
|
|
||||||
--size: 1rem;
|
--size: 1rem;
|
||||||
--radius: 0rem;
|
--radius: .3rem;
|
||||||
|
|
||||||
--fg: #17202A;
|
--foreground: #111;
|
||||||
--bg: #FDFEFE;
|
--background: #FFF;
|
||||||
--mg: #99A3A4;
|
|
||||||
|
|
||||||
--white: #FFF;
|
--light: #F0F0F0;
|
||||||
--black: #000;
|
--dark: #404040;
|
||||||
|
|
||||||
--light: #EEE;
|
--default: #F0F0F0;
|
||||||
--dark: #222;
|
--primary: #5499C7; /* 0000EE */
|
||||||
|
--secondary: #404040;
|
||||||
|
|
||||||
|
--success: #198754;
|
||||||
|
--warning: #fbc02d;
|
||||||
|
--danger: #C62828;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme=dark] {
|
[data-theme=dark] {
|
||||||
--theme: #5499C7;
|
--foreground: #FFF;
|
||||||
|
--background: #222;
|
||||||
|
|
||||||
--mg: #6B7280;
|
--default: #333;
|
||||||
--bg: #1A1A1A;
|
|
||||||
--fg: #E0E0E0;
|
|
||||||
|
|
||||||
--white: #FFF;
|
|
||||||
--black: #000;
|
|
||||||
|
|
||||||
--dark: #D4D4D4;
|
|
||||||
--light: #272727;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
* {margin:0}
|
html, body {
|
||||||
|
color: var(--foreground);
|
||||||
*,*::before,*::after {
|
background: var(--background);
|
||||||
box-sizing: border-box;
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||||
}
|
|
||||||
|
|
||||||
html,body {
|
|
||||||
background: var(--bg);
|
|
||||||
color: var(--fg);
|
|
||||||
accent-color: var(--theme);
|
|
||||||
font-family: system-ui, sans-serif;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
letter-spacing: 0.0125em;
|
letter-spacing: 0.0125em;
|
||||||
|
height: 100%;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
span,div, input, button, a,textarea, select {margin-bottom: .25rem;margin-top: .25rem;}
|
|
||||||
|
|
||||||
p {margin: 1rem 0}
|
|
||||||
|
|
||||||
img,embed,iframe,object,audio,video {
|
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol, ul {margin-left: 1rem}
|
|
||||||
|
|
||||||
li {margin-left: 1rem}
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
color: var(--fg);
|
margin: .25rem;
|
||||||
white-space: nowrap;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
label.addon {
|
ol, ul, li {margin-left: 1rem}
|
||||||
max-height: 2.5rem;
|
|
||||||
background: var(--theme);
|
section {margin: 1rem 0;}
|
||||||
padding: .5rem 1rem;
|
|
||||||
margin-top: .25rem;
|
cite,strong {
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: .5rem 0rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre,code {
|
pre,code,kbd {
|
||||||
background: var(--light);
|
font-family: monospace;
|
||||||
color: var(--dark);
|
font-size: smaller;
|
||||||
padding: .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: var(--size);
|
|
||||||
max-width: 1140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
background: var(--bg);
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
table>thead>tr>th {
|
|
||||||
border-bottom: 2px solid var(--theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,td {
|
|
||||||
padding: .5rem;
|
|
||||||
border-bottom: 1px solid var(--theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
table.striped tbody>:nth-child(2n-1) {
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.condensed td, table.condensed th {padding:0}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
background: var(--bg);
|
|
||||||
padding: 1rem;
|
|
||||||
border: 1px solid var(--theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
font-size: larger;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--theme);
|
|
||||||
background: var(--bg);
|
|
||||||
display: block;
|
|
||||||
width: fit-content;
|
|
||||||
padding: .25rem .5rem;
|
padding: .25rem .5rem;
|
||||||
margin: 0;
|
background: var(--default);
|
||||||
line-height: inherit;
|
color: var(--foreground);
|
||||||
border: 1px solid var(--theme);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
abbr {
|
||||||
margin: var(--size) 0;
|
border-bottom: 1px dotted;
|
||||||
color: var(--dark);
|
cursor: help;
|
||||||
background: var(--light);
|
}
|
||||||
padding: var(--size);
|
|
||||||
border-left: 8px solid var(--theme);
|
kbd {
|
||||||
|
font-style: normal;
|
||||||
|
color: var(--light);
|
||||||
|
background: var(--primary);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
i {vertical-align: middle;}
|
||||||
color: var(--theme);
|
|
||||||
border: 1px solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,h2,h3,h4,h5,h6 {
|
select,option,textarea,input,header,footer,button,main,blockquote {padding: calc(var(--size)/2) var(--size)}
|
||||||
color: var(--theme);
|
|
||||||
margin: var(--size) 0;
|
select,option,textarea,input {
|
||||||
padding-bottom: calc(var(--size) / 2);
|
display: inline-block;
|
||||||
text-transform: capitalize;
|
box-sizing: border-box;
|
||||||
|
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||||
|
font-size: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
border: var(--default) 2px solid;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
|
select:hover {cursor: pointer;}
|
||||||
|
|
||||||
h1 {font-size: 2.2rem}
|
h1 {font-size: 2.2rem}
|
||||||
h2 {font-size: 1.8rem}
|
h2 {font-size: 1.8rem}
|
||||||
|
|
@ -158,37 +97,89 @@ h3 {font-size: 1.4rem}
|
||||||
h4 {font-size: 1.2rem}
|
h4 {font-size: 1.2rem}
|
||||||
h5 {font-size: 1.1rem}
|
h5 {font-size: 1.1rem}
|
||||||
h6 {font-size: 1rem}
|
h6 {font-size: 1rem}
|
||||||
|
h1,h2,h3,h4,h5,h6 {margin-top: 1rem;margin-bottom: .5rem;}
|
||||||
|
|
||||||
a {color: var(--theme);}
|
hr {margin: 1rem 0; border-color: var(--primary)}
|
||||||
a:hover {color: var(--dark);}
|
|
||||||
|
|
||||||
section, article {
|
blockquote {
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
article, aside {
|
|
||||||
border: 1px solid rgba(0,0,0,.125);
|
|
||||||
background: var(--light);
|
|
||||||
color: var(--dark);
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Forms */
|
|
||||||
|
|
||||||
input:user-invalid {
|
|
||||||
outline: 2px solid var(--theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
details {
|
|
||||||
margin: var(--size) 0;
|
margin: var(--size) 0;
|
||||||
color: var(--fg);
|
color: var(--foreground);
|
||||||
|
font-style: italic;
|
||||||
|
padding: calc(var(--size) * 1.5);
|
||||||
|
border: var(--default) 1px solid;
|
||||||
|
border-left: var(--default) 1rem solid;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
|
||||||
|
button {font-family: Verdana, Geneva, Tahoma, sans-serif;border-radius: var(--radius);}
|
||||||
|
|
||||||
|
button:hover, input[type="reset"]:hover,input[type="submit"]:hover {
|
||||||
|
filter:brightness(90%) !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button,input[type="submit"],input[type="reset"] {
|
||||||
|
border: unset;
|
||||||
|
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
a.button {padding: calc(var(--size)/2) var(--size);text-align: center;}
|
||||||
|
|
||||||
|
a {display: inline-block;vertical-align: middle; color: var(--primary)}
|
||||||
|
a:hover {color: var(--foreground)}
|
||||||
|
a[name] {display: none;} /* fix anchors */
|
||||||
|
|
||||||
|
input:user-invalid {
|
||||||
|
outline: 2px solid var(--danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"]{
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
*:disabled {background: #F0F0F0; }
|
||||||
|
*:disabled:hover {cursor: not-allowed}
|
||||||
|
|
||||||
|
/* Tables */
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
border-top: var(--default) 2px solid;
|
||||||
|
border-bottom: var(--default) 2px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {text-align: left}
|
||||||
|
|
||||||
|
th,td {
|
||||||
|
padding: .25rem;
|
||||||
|
border-bottom: 1px solid var(--default);
|
||||||
|
}
|
||||||
|
|
||||||
|
table.striped tbody>:nth-child(2n-1) {background: var(--default)}
|
||||||
|
|
||||||
|
/* Details */
|
||||||
|
|
||||||
|
details {
|
||||||
|
color: var(--dark);
|
||||||
|
background: var(--light);
|
||||||
|
margin: var(--size) 0;
|
||||||
|
cursor: pointer;
|
||||||
|
border: var(--default) 2px solid;
|
||||||
|
}
|
||||||
|
|
||||||
details[open] {
|
details[open] {
|
||||||
background-color: var(--bg);
|
|
||||||
margin-bottom: var(--size);
|
margin-bottom: var(--size);
|
||||||
border: 1px solid var(--theme);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
details>* {
|
details>* {
|
||||||
|
|
@ -196,155 +187,9 @@ details>* {
|
||||||
padding: .5rem 1rem;
|
padding: .5rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
summary {
|
|
||||||
color: var(--theme);
|
|
||||||
height: 40px;
|
|
||||||
background-color: var(--bg);
|
|
||||||
border: 1px solid var(--theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
summary:hover {cursor: pointer;}
|
summary:hover {cursor: pointer;}
|
||||||
details:not(summary):hover {cursor: default}
|
details:not(summary):hover {cursor: default}
|
||||||
|
|
||||||
a.button,button, input {
|
|
||||||
display: inline-block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-decoration: none;
|
|
||||||
outline: none;
|
|
||||||
font-size: 1rem;
|
|
||||||
background: var(--bg);
|
|
||||||
color: var(--fg);
|
|
||||||
min-width: fit-content;
|
|
||||||
width: 100%;
|
|
||||||
height: 2.5rem;
|
|
||||||
border: 1px solid var(--theme);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
padding: .5rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=color] {padding: .25rem}
|
|
||||||
|
|
||||||
input[type="checkbox"],
|
|
||||||
input[type="radio"]{
|
|
||||||
padding: 0;
|
|
||||||
width: 1.1rem;
|
|
||||||
height: 1.1rem;
|
|
||||||
margin-right: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input::placeholder {color: var(--mg)}
|
|
||||||
|
|
||||||
button, input[type="reset"],input[type="submit"] {
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
width: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
button[disabled], button[disabled]:hover {
|
|
||||||
filter: brightness(75%);
|
|
||||||
cursor: not-allowed;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.link {
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
color: var(--theme);
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.link:hover {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--theme);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.button, button, input[type="submit"] {
|
|
||||||
background: var(--theme);
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
button.outline {
|
|
||||||
background: none;
|
|
||||||
outline: var(--theme);
|
|
||||||
color: var(--fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
a.button:hover, button:hover, input[type="reset"]:hover,input[type="submit"]:hover {
|
|
||||||
filter:brightness(90%) !important;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
select:disabled, textarea:disabled,input:disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
pointer-events: none;
|
|
||||||
filter: brightness(95%);
|
|
||||||
}
|
|
||||||
|
|
||||||
select:focus,textarea:focus,input:focus {
|
|
||||||
border: 2px solid var(--theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
option { line-height: 1rem; vertical-align: center;}
|
|
||||||
|
|
||||||
select,textarea {
|
|
||||||
display: inline-block;
|
|
||||||
outline: none;
|
|
||||||
font-size: var(--size);
|
|
||||||
height: 2.5rem;
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid var(--theme);
|
|
||||||
color: var(--fg);
|
|
||||||
background: var(--bg);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
padding: 0 var(--size);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
background: var(--bg) no-repeat 100%;
|
|
||||||
color: var(--fg);
|
|
||||||
padding: 0 clamp(.5rem, var(--size), 2rem);
|
|
||||||
appearance: none;
|
|
||||||
background-size: 1ex;
|
|
||||||
background-origin: content-box;
|
|
||||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>");
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto;
|
|
||||||
resize: vertical;
|
|
||||||
border: 1px solid var(--theme);
|
|
||||||
height: calc(var(--size) * 6rem);;
|
|
||||||
padding: clamp(.5rem, var(--size), 2rem);
|
|
||||||
cursor: text;
|
|
||||||
color: var(--fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
*:disabled, .disable, .disable {pointer-events: none;}
|
|
||||||
|
|
||||||
/* Navigation */
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 2rem;
|
|
||||||
border-bottom: 1px solid var(--theme);
|
|
||||||
}
|
|
||||||
nav.navbar {
|
|
||||||
background: var(--theme);
|
|
||||||
color: var(--white);
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.navbar li:hover {background: var(--white);color: var(--black); cursor: pointer;}
|
|
||||||
.navbar li a {color: inherit;}
|
|
||||||
|
|
||||||
nav ul {display: flex;list-style-type: none;margin:0;padding:0; line-height: 2rem}
|
|
||||||
nav ul li {padding:0rem .5rem;margin:0}
|
|
||||||
nav ul li:first-child {margin-left:0;margin-left:0}
|
|
||||||
nav a {text-decoration: none;}
|
|
||||||
|
|
||||||
/* Dialog */
|
/* Dialog */
|
||||||
|
|
||||||
dialog[open] {
|
dialog[open] {
|
||||||
|
|
@ -352,12 +197,57 @@ dialog[open] {
|
||||||
}
|
}
|
||||||
|
|
||||||
dialog {
|
dialog {
|
||||||
border: 1px solid var(--theme);
|
border: 1px solid var(--dark);
|
||||||
box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
border-radius: var(--radius);
|
||||||
padding: calc(var(--size) * 2);
|
padding:0;
|
||||||
|
margin:0;
|
||||||
max-width: 85%;
|
max-width: 85%;
|
||||||
|
min-width: 340px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dialog::backdrop {
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation */
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0rem .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav .brand {
|
||||||
|
margin:0;
|
||||||
|
font-size: x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {text-decoration: none;}
|
||||||
|
nav > ul > li > a:hover, .active {
|
||||||
|
margin-top: -1px; /* fix page bounce */
|
||||||
|
border-bottom: currentColor 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {display: flex;list-style-type: none;margin:0;padding:0; line-height: 2rem}
|
||||||
|
nav ul li {padding:0rem .5rem;margin:0}
|
||||||
|
nav ul li:first-child {margin-left:0;margin-left:0}
|
||||||
|
nav a {text-decoration: none;color: var(--primary)}
|
||||||
|
|
||||||
|
/* Colors */
|
||||||
|
|
||||||
|
.primary {color: var(--light); background: var(--primary);}
|
||||||
|
.secondary {color: var(--light); background: var(--secondary);}
|
||||||
|
.default {color: var(--dark); background: var(--light);}
|
||||||
|
.dark {color: var(--light); background: var(--dark);}
|
||||||
|
.light {color: var(--dark); background: var(--light);}
|
||||||
|
|
||||||
|
blockquote.primary {border-color: var(--primary);}
|
||||||
|
blockquote.secondary {border-color: var(--secondary);}
|
||||||
|
|
||||||
|
.text-primary {color: var(--primary)}
|
||||||
|
.text-secondary {color: var(--secondary)}
|
||||||
|
.text-default, .weak {color: var(--default)}
|
||||||
|
|
||||||
/* Layout Utilities */
|
/* Layout Utilities */
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
|
|
@ -367,6 +257,15 @@ dialog {
|
||||||
}
|
}
|
||||||
|
|
||||||
.group {display: flex}
|
.group {display: flex}
|
||||||
.right {float:right}
|
|
||||||
.left {float:left}
|
.container {
|
||||||
.center {text-align: center}
|
margin: 0 auto;
|
||||||
|
padding: var(--size);
|
||||||
|
max-width: 1140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.underline {border-bottom: currentColor 1px solid}
|
||||||
|
.border {border: var(--default) 2px solid;border-radius: var(--radius);}
|
||||||
|
.indent {margin-left: .25rem;}
|
||||||
|
.pointer {cursor: pointer;}
|
||||||
|
.center {align-self: center; justify-self: center;}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue