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">
<title>Stylelite</title>
<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>
@ -14,10 +15,10 @@
<main>
<section>
<nav>
<h1 class="no-margin" style="color: var(--mg);">
<h2 class="no-space" style="color: var(--mg);">
STYLELITE
<span style="color: var(--fg);">CSS</span>
</h1>
</h2>
<ul>
<li><a href="#type">Typography</a></li>
<li><a href="#forms">Forms</a></li>
@ -28,11 +29,13 @@
<li></li>
</ul>
</nav>
<div class="grid">
<div style="background: var(--theme);">&nbsp;</div>
<div style="background: var(--gray);">&nbsp;</div>
<div class="outline">&nbsp;</div>
</div>
<p>
<div class="grid space">
<div style="background: var(--theme);">&nbsp;</div>
<div style="background: var(--gray);">&nbsp;</div>
<div class="outline">&nbsp;</div>
</div>
</p>
</section>
<section>
<a name="overview"></a>
@ -143,7 +146,12 @@
</div>
<div>
<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>
<label for='password'>Password</label>
@ -158,7 +166,7 @@
<div>
<label for='selected'>Preferred theme</label>
<select name="selected" id="">
<select name="selected" id="selected">
<option value="">Choose One</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
@ -185,9 +193,9 @@
<a name="buttons"></a>
<h2>Buttons</h2>
<div class="grid">
<button>Theme</button>
<button>Default</button>
<button disabled>Disabled</button>
<button class="default">Default</button>
<button class="outline">Outline</button>
<button class="link">Link</button>
</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 {
--size: 1rem;
--radius: 0rem;
@ -15,7 +15,6 @@
--theme: steelblue;
--primary: #1F618D;
--warning: #B7950B;
--danger: #C0392B;
--success: #1E8449;
@ -47,7 +46,7 @@ html,body {
padding: 0;
}
div, input, button, textarea, select {margin-bottom: .25rem;}
div, label, input, button, textarea, select {margin-bottom: .25rem;}
p {margin: 1rem 0}
@ -65,10 +64,18 @@ label {
display: inline-block;
font-weight: 600;
color: var(--dark);
padding: .5rem 0;
white-space: nowrap;
vertical-align: top;
}
label.addon {
max-height: 2.5rem;
background: var(--light);
padding: .5rem 1rem;
text-align: center;
border: 1px solid var(--theme);
}
main {
margin: 0 auto;
padding: var(--size);
@ -127,7 +134,7 @@ blockquote {
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.warn {background: #FEF9E7; color: var(--warning) ; border: 1px solid var(--warning)}
blockquote.success {background: #EAFAF1; color: var(--success); border: 1px solid var(--success)}
@ -214,7 +221,7 @@ input[type="radio"]{
width: 1.1rem;
height: 1.1rem;
margin-right: .5rem;
margin-top: .65rem;
margin-top: .25rem;
}
button, input[type="reset"],input[type="submit"] {
@ -248,7 +255,7 @@ button.default {
}
button.primary {
background: var(--primary);
background: var(--theme);
color: var(--white);
}
@ -274,9 +281,10 @@ a.button:hover, button:hover, input[type="reset"]:hover,input[type="submit"]:hov
cursor: pointer;
}
select:disabled, textarea:disabled,input:disabled {
background: #EEE;
select:disabled, textarea:disabled,input:disabled, input:read-only {
cursor: not-allowed;
pointer-events: none;
border-color: var(--mg);
}
select:focus,textarea:focus,input:focus {
@ -378,22 +386,18 @@ nav.navbar a {color: var(--white)}
/* Utilities */
.group {display: flex;}
.cursor {cursor: pointer;}
.pointer {cursor: pointer;}
.right {float:right}
.left {float:left}
.center {text-align: center;}
.clear {content:'';display: table;clear:both}
.fill {width: 100%; height: 100%}
.outline {background-color: transparent; color: var(--theme); border: 1px solid var(--fg)}
.outline {background: transparent; color: var(--theme); border: 1px solid var(--theme)}
.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);}
.border {border: 1px solid var(--theme)}
.no-space {margin: 0; padding:0;}
.no-border {border: none}
.no-padding {padding: 0}
.no-margin {margin: 0}
.no-theme {--theme: var(--fg)}
*:disabled, .disable, .disable {pointer-events: none;}