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

21
examples/overview.html
View File

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

41
src/stylelite.css
View File

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