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

reducing vars

This commit is contained in:
Geoff Doty 2024-01-20 14:30:29 -05:00
parent 2cc5aaa19f
commit 281f186510
2 changed files with 25 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
examples/overview.html
View File

@ -13,14 +13,7 @@
<body>
<main>
<section>
<!-- <div class="grid">
<div style="background: var(--fg);">&nbsp;</div>
<div style="background: var(--gray);">&nbsp;</div>
<div class="outline">&nbsp;</div>
</div> -->
<!-- <br> -->
<nav>
<!-- <h1 class="no-margin">Styles</h1> -->
<h1 class="no-margin" style="color: var(--mg);">
STYLELITE
<span style="color: var(--fg);">CSS</span>
@ -35,20 +28,11 @@
<li></li>
</ul>
</nav>
<!-- <br> -->
<!-- <div>
<h1 style="color: var(--mg);">
STYLELITE
<span style="color: var(--fg);">CSS</span>
</h1>
<div class="">CSS for Minimalist</div>
</div> -->
<!-- <br> -->
<!-- <div class="grid">
<div style="background: var(--fg);">&nbsp;</div>
<div class="grid">
<div style="background: var(--theme);">&nbsp;</div>
<div style="background: var(--gray);">&nbsp;</div>
<div class="outline">&nbsp;</div>
</div> -->
</div>
</section>
<section>
<a name="overview"></a>
@ -199,7 +183,7 @@
<br>
<section>
<a name="buttons"></a>
<h3>Buttons</h3>
<h2>Buttons</h2>
<div class="grid">
<button>Theme</button>
<button disabled>Disabled</button>

44
src/stylelite.css
View File

@ -1,6 +1,5 @@
/*! Stylelite v:0.6.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */
:root {
--space: 1rem;
--size: 1rem;
--radius: 0rem;
--fg: #17202A;
@ -20,7 +19,6 @@
--warning: #B7950B;
--danger: #C0392B;
--success: #1E8449;
--default: #EEE;
}
[data-theme=dark] {
@ -67,7 +65,7 @@ label {
main {
margin: 0 auto;
padding: var(--space);
padding: var(--size);
max-width: 1140px;
}
@ -117,10 +115,10 @@ legend {
}
blockquote {
margin: var(--space) 0;
margin: var(--size) 0;
color: var(--black);
background: var(--default);
padding: var(--space);
background: var(--light);
padding: var(--size);
}
blockquote.primary {background: #EBF5FB; color: var(--primary); border: 1px solid var(--primary)}
@ -162,21 +160,22 @@ section, article {
article {
border: 1px solid rgba(0,0,0,.125);
background: var(--default);
padding: var(--space);
background: var(--light);
padding: var(--size);
}
/* Forms */
details {
margin: var(--space) 0;
color: var(--black);
margin: var(--size) 0;
color: var(--fg);
cursor: pointer;
}
details[open] {
background-color: var(--default);
margin-bottom: var(--space);
background-color: var(--bg);
margin-bottom: var(--size);
border: 1px solid var(--theme);
}
details>* {
@ -187,7 +186,7 @@ details>* {
summary {
color: var(--theme);
height: 40px;
background-color: var(--default);
background-color: var(--bg);
border: 1px solid var(--theme);
}
@ -240,7 +239,7 @@ a.button, button {
}
button.default {
background: var(--default);
background: var(--light);
color: var(--black);
}
@ -272,8 +271,7 @@ a.button:hover, button:hover, input[type="reset"]:hover,input[type="submit"]:hov
}
select:disabled, textarea:disabled,input:disabled {
color: #404040;
background: #EBEDEF;
background: #EEE;
cursor: not-allowed;
}
@ -293,14 +291,14 @@ select,textarea {
color: var(--fg);
background: var(--bg);
border-radius: var(--radius);
padding: 0 var(--space);
padding: 0 var(--size);
cursor: pointer;
}
select {
background: var(--bg) no-repeat 100%;
color: var(--fg);
padding: 0 clamp(.5rem, var(--space), 2rem);
padding: 0 clamp(.5rem, var(--size), 2rem);
appearance: none;
background-size: 1ex;
background-origin: content-box;
@ -312,7 +310,7 @@ textarea {
resize: vertical;
border: 1px solid var(--theme);
height: calc(var(--size) * 6rem);;
padding: clamp(.5rem, var(--space), 2rem);
padding: clamp(.5rem, var(--size), 2rem);
cursor: text;
color: var(--fg);
}
@ -332,12 +330,12 @@ nav > ul {
}
nav ul li a {
font-size: 1rem;
padding: .5rem;
text-decoration: none;
vertical-align: sub;
}
nav ul li a:hover {opacity: .75;}
nav ul li a:hover {color: var(--dark);}
/* Grid System */
@ -386,8 +384,8 @@ nav ul li a:hover {opacity: .75;}
.outline {background-color: transparent; color: var(--theme); border: 1px solid var(--fg)}
.underline {border-bottom: 1px solid var(--mg)}
.border {border: 1px solid var(--theme)}
.padding {padding: var(--space)}
.margin {margin: var(--space)}
.padding {padding: var(--size)}
.margin {margin: var(--size)}
.title {margin: 0; padding:0}
.subtitle {margin-top: -.25rem; font-size: smaller};
.spaceless {margin: 0; padding:0}