geoff
/
stylelite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

label.addon, rework --primary, tweaks & removals

This commit is contained in:
Geoff Doty 2024-01-20 17:19:06 -05:00
parent 938e2f1e7b
commit b737a785d0
6 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/stylelite.map vendored
View File

File diff suppressed because one or more lines are too long

4
dist/stylelite.min.css vendored
View File

File diff suppressed because one or more lines are too long

30
examples/overview.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylelite</title> <title>Stylelite</title>
<link rel="stylesheet" href="../src/stylelite.css"> <link rel="stylesheet" href="../src/stylelite.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css@1.2.0/css/feather.min.css">
<style> <style>
</style> </style>
@ -14,10 +15,10 @@
<main> <main>
<section> <section>
<nav> <nav>
<h1 class="no-margin" style="color: var(--mg);"> <h2 class="no-space" style="color: var(--mg);">
STYLELITE STYLELITE
<span style="color: var(--fg);">CSS</span> <span style="color: var(--fg);">CSS</span>
</h1> </h2>
<ul> <ul>
<li><a href="#type">Typography</a></li> <li><a href="#type">Typography</a></li>
<li><a href="#forms">Forms</a></li> <li><a href="#forms">Forms</a></li>
@ -28,11 +29,13 @@
<li></li> <li></li>
</ul> </ul>
</nav> </nav>
<div class="grid"> <p>
<div style="background: var(--theme);">&nbsp;</div> <div class="grid space">
<div style="background: var(--gray);">&nbsp;</div> <div style="background: var(--theme);">&nbsp;</div>
<div class="outline">&nbsp;</div> <div style="background: var(--gray);">&nbsp;</div>
</div> <div class="outline">&nbsp;</div>
</div>
</p>
</section> </section>
<section> <section>
<a name="overview"></a> <a name="overview"></a>
@ -143,7 +146,12 @@
</div> </div>
<div> <div>
<label for='email'>Email</label> <label for='email'>Email</label>
<input type='email' name='email' id='email' placeholder='email@example.com'> <div class="group">
<input type='email' name='email' id='email' placeholder='email@example.com' autocomplete="off">
<label class="addon">
<i class="ft-mail" style="color: #000"></i>
</label>
</div>
</div> </div>
<div> <div>
<label for='password'>Password</label> <label for='password'>Password</label>
@ -158,7 +166,7 @@
<div> <div>
<label for='selected'>Preferred theme</label> <label for='selected'>Preferred theme</label>
<select name="selected" id=""> <select name="selected" id="selected">
<option value="">Choose One</option> <option value="">Choose One</option>
<option value="light">Light</option> <option value="light">Light</option>
<option value="dark">Dark</option> <option value="dark">Dark</option>
@ -185,9 +193,9 @@
<a name="buttons"></a> <a name="buttons"></a>
<h2>Buttons</h2> <h2>Buttons</h2>
<div class="grid"> <div class="grid">
<button>Theme</button> <button>Default</button>
<button disabled>Disabled</button> <button disabled>Disabled</button>
<button class="default">Default</button> <button class="outline">Outline</button>
<button class="link">Link</button> <button class="link">Link</button>
</div> </div>

0
src/spinner.css → src/extra/spinner.css
View File

0
src/switch.css → src/extra/switch.css
View File

38
src/stylelite.css
View File

@ -1,4 +1,4 @@
/*! Stylelite v:0.6.2 | MIT LICENSE | https://github.com/n2geoff/stylelite */ /*! Stylelite v:0.6.5 | MIT LICENSE | https://github.com/n2geoff/stylelite */
:root { :root {
--size: 1rem; --size: 1rem;
--radius: 0rem; --radius: 0rem;
@ -15,7 +15,6 @@
--theme: steelblue; --theme: steelblue;
--primary: #1F618D;
--warning: #B7950B; --warning: #B7950B;
--danger: #C0392B; --danger: #C0392B;
--success: #1E8449; --success: #1E8449;
@ -47,7 +46,7 @@ html,body {
padding: 0; padding: 0;
} }
div, input, button, textarea, select {margin-bottom: .25rem;} div, label, input, button, textarea, select {margin-bottom: .25rem;}
p {margin: 1rem 0} p {margin: 1rem 0}
@ -65,10 +64,18 @@ label {
display: inline-block; display: inline-block;
font-weight: 600; font-weight: 600;
color: var(--dark); color: var(--dark);
padding: .5rem 0; white-space: nowrap;
vertical-align: top; vertical-align: top;
} }
label.addon {
max-height: 2.5rem;
background: var(--light);
padding: .5rem 1rem;
text-align: center;
border: 1px solid var(--theme);
}
main { main {
margin: 0 auto; margin: 0 auto;
padding: var(--size); padding: var(--size);
@ -127,7 +134,7 @@ blockquote {
padding: var(--size); padding: var(--size);
} }
blockquote.primary {background: #EBF5FB; color: var(--primary); border: 1px solid var(--primary)} blockquote.primary {background: #EBF5FB; color: var(--theme); border: 1px solid var(--theme)}
blockquote.danger {background: #FDEDEC; color: var(--danger); border: 1px solid var(--danger)} blockquote.danger {background: #FDEDEC; color: var(--danger); border: 1px solid var(--danger)}
blockquote.warn {background: #FEF9E7; color: var(--warning) ; border: 1px solid var(--warning)} blockquote.warn {background: #FEF9E7; color: var(--warning) ; border: 1px solid var(--warning)}
blockquote.success {background: #EAFAF1; color: var(--success); border: 1px solid var(--success)} blockquote.success {background: #EAFAF1; color: var(--success); border: 1px solid var(--success)}
@ -214,7 +221,7 @@ input[type="radio"]{
width: 1.1rem; width: 1.1rem;
height: 1.1rem; height: 1.1rem;
margin-right: .5rem; margin-right: .5rem;
margin-top: .65rem; margin-top: .25rem;
} }
button, input[type="reset"],input[type="submit"] { button, input[type="reset"],input[type="submit"] {
@ -248,7 +255,7 @@ button.default {
} }
button.primary { button.primary {
background: var(--primary); background: var(--theme);
color: var(--white); color: var(--white);
} }
@ -274,9 +281,10 @@ a.button:hover, button:hover, input[type="reset"]:hover,input[type="submit"]:hov
cursor: pointer; cursor: pointer;
} }
select:disabled, textarea:disabled,input:disabled { select:disabled, textarea:disabled,input:disabled, input:read-only {
background: #EEE;
cursor: not-allowed; cursor: not-allowed;
pointer-events: none;
border-color: var(--mg);
} }
select:focus,textarea:focus,input:focus { select:focus,textarea:focus,input:focus {
@ -378,22 +386,18 @@ nav.navbar a {color: var(--white)}
/* Utilities */ /* Utilities */
.group {display: flex;} .group {display: flex;}
.cursor {cursor: pointer;} .pointer {cursor: pointer;}
.right {float:right} .right {float:right}
.left {float:left} .left {float:left}
.center {text-align: center;} .center {text-align: center;}
.clear {content:'';display: table;clear:both} .clear {content:'';display: table;clear:both}
.fill {width: 100%; height: 100%} .outline {background: transparent; color: var(--theme); border: 1px solid var(--theme)}
.outline {background-color: transparent; color: var(--theme); border: 1px solid var(--fg)}
.underline {border-bottom: 1px solid var(--mg)} .underline {border-bottom: 1px solid var(--mg)}
.border {border: 1px solid var(--theme)}
.title {margin: 0; padding:0}
.subtitle {margin-top: -.25rem; font-size: smaller};
.sm {font-size: smaller;height: calc(var(--size) * 1.5);padding: 0 calc(var(--size)/ .75);}
.lg {font-size: x-large;height: calc(var(--size) * 4.5);padding: 0 calc(var(--size) / 1.25);}
.rounded {border-radius: calc(var(--size) / 4);} .rounded {border-radius: calc(var(--size) / 4);}
.border {border: 1px solid var(--theme)}
.no-space {margin: 0; padding:0;} .no-space {margin: 0; padding:0;}
.no-border {border: none} .no-border {border: none}
.no-padding {padding: 0} .no-padding {padding: 0}
.no-margin {margin: 0} .no-margin {margin: 0}
.no-theme {--theme: var(--fg)} .no-theme {--theme: var(--fg)}
*:disabled, .disable, .disable {pointer-events: none;}