geoff
/
stylelite
mirror of https://github.com/n2geoff/stylelite.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tweak buttons 

removes default & primary, now theme and info
This commit is contained in:
Geoff Doty 2024-05-17 14:19:44 -04:00
parent e6b0db6e82
commit 8300a9d56a
2 changed files with 31 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
examples/overview.html
View File

@ -10,6 +10,7 @@
<style>
.fill {height: 100%; width: 100%}
.grid-center {align-self: center; justify-self: center;}
header, footer {line-height: 3rem; height: 3rem;}
</style>
</head>
<body>
@ -200,7 +201,7 @@
</div>
<div class="grid">
<button class="primary">Primary</button>
<button class="info">Info</button>
<button class="warning">Warning</button>
<button class="danger">Danger</button>
<button class="success">Success</button>
@ -242,30 +243,28 @@
<h2 class="underline">Components</h2>
<div class="grid">
<div>
<div class="border">
<header style="background: var(--theme); padding: 0 1rem; color: #FFF">
<strong>Dialogs</strong>
</header>
<main style="background: #FFF">
The native dialog
element is supported
</main>
<footer class="grid">
<button class="" id="dialog">Open Modal</button>
</footer>
</div>
</div>
<div class="grid border">
<article class="border">
<header style="background: var(--theme); padding: 0 1rem; color: #FFF">
<strong>Dialogs</strong>
</header>
<main>
The native dialog
element is supported
</main>
<footer class="grid">
<button class="fill no-space" id="dialog">Open Modal</button>
</footer>
</article>
<section class="grid border">
<div class="grid-center">
More...
</div>
</div>
<div class="grid border">
</section>
<section class="grid border">
<div class="grid-center">
More...
</div>
</div>
</section>
</div>
<dialog>
<p>Default Dialog Modal</p>

41
src/stylelite.css
View File

@ -15,6 +15,7 @@
--theme: steelblue;
--info: steelblue;
--warning: #B7950B;
--danger: #C0392B;
--success: #1E8449;
@ -130,7 +131,7 @@ blockquote {
padding: var(--size);
}
blockquote.primary {background: #EBF5FB; color: var(--theme); border: 1px solid var(--theme)}
blockquote.info {background: #EBF5FB; color: var(--info); 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)}
@ -250,43 +251,27 @@ button.link:hover {
text-decoration: underline;
}
a.button, button {
a.button, button, input[type="submit"] {
background: var(--theme);
color: var(--white);
}
button.default {
background: var(--light);
color: var(--black);
}
button.primary {
background: var(--theme);
color: var(--white);
}
button.warning {
background: var(--warning);
color: var(--white);
}
button.danger {
background: var(--danger);
color: var(--white);
}
button.success {
background: var(--success);
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 {
background: var(--dark);
border: 2px solid var(--theme);
color: var(--light);
filter:brightness(90%) !important;
cursor: pointer;
}
button.info {background: var(--info);color: var(--white);}
button.warning {background: var(--warning);color: var(--white);}
button.danger {background: var(--danger);color: var(--white);}
button.success {background: var(--success);color: var(--white);}
select:disabled, textarea:disabled,input:disabled {
cursor: not-allowed;
pointer-events: none;