From 8300a9d56a5fa602e408d9d605cf81b62b825c7a Mon Sep 17 00:00:00 2001 From: Geoff Doty Date: Fri, 17 May 2024 14:19:44 -0400 Subject: [PATCH] tweak buttons removes default & primary, now theme and info --- examples/overview.html | 37 ++++++++++++++++++------------------- src/stylelite.css | 41 +++++++++++++---------------------------- 2 files changed, 31 insertions(+), 47 deletions(-) diff --git a/examples/overview.html b/examples/overview.html index fb8f874..657a15e 100644 --- a/examples/overview.html +++ b/examples/overview.html @@ -10,6 +10,7 @@ @@ -200,7 +201,7 @@
- + @@ -242,30 +243,28 @@

Components

-
-
-
- Dialogs -
-
- The native dialog - element is supported -
-
- -
-
-
-
+
+
+ Dialogs +
+
+ The native dialog + element is supported +
+
+ +
+
+
More...
-
-
+ +
More...
-
+

Default Dialog Modal

diff --git a/src/stylelite.css b/src/stylelite.css index 1088596..ca969e3 100644 --- a/src/stylelite.css +++ b/src/stylelite.css @@ -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;