NEW: Reset Button (#154)

closes #154
dwhieb · Jul 17, 2024 · 780374d · 780374d
1 parent 5eb826b
commit 780374d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/classes/button.css b/classes/button.css
@@ -4,9 +4,8 @@
   --gray-saturation: 15%;
 
   background-color: hsl(var(--gray-hue) var(--gray-saturation) 85%);
-  border:           1px solid #CCC;
   border-radius:    var(--border-radius);
-  box-shadow:       inset 0px 0px 3px 2px hsl(var(--gray-hue) var(--gray-saturation) 95%),
+  box-shadow:       inset 0px 0px 2px 1px hsl(var(--gray-hue) var(--gray-saturation) 95%),
                     1px 1px 2px #CCC;
   color:            black;
   cursor:           pointer;
@@ -34,8 +33,7 @@
   --green-saturation: 15%;
 
   background-color: hsl(var(--green-hue) var(--green-saturation) 45%);
-  border:           1px solid var(--asparagus);
-  box-shadow:       inset 0px 0px 3px 2px hsl(var(--green-hue) var(--green-saturation) 55%),
+  box-shadow:       inset 0px 0px 2px 1px hsl(var(--green-hue) var(--green-saturation) 55%),
                     1px 1px 2px #CCC;
   color:            white;
 
@@ -48,4 +46,25 @@
     box-shadow:       inset 0px 1px 2px #000;
   }
 
+}
+
+.button.blue {
+
+  --blue-hue:        180;
+  --blue-saturation: 30%;
+
+  background-color: hsl(var(--blue-hue) var(--blue-saturation) 45%);
+  box-shadow:       inset 0px 0px 2px 1px hsl(var(--blue-hue) var(--blue-saturation) 55%),
+                    1px 1px 2px #CCC;
+  color:            white;
+
+  &:hover {
+    background-color: hsl(var(--blue-hue) var(--blue-saturation) 35%);
+  }
+
+  &:active {
+    background-color: hsl(var(--blue-hue) var(--blue-saturation) 25%);
+    box-shadow:       inset 0px 1px 2px #000;
+  }
+
 }
diff --git a/pages/Search/Search.css b/pages/Search/Search.css
@@ -207,7 +207,13 @@ search {
 }
 
 .search-form {
-  max-inline-size: 30em;
+
+  max-inline-size: 35em;
+
+  & button {
+    inline-size: 5em;
+  }
+
 }
 
 .sort-button {

diff --git a/pages/Search/Search.hbs b/pages/Search/Search.hbs
@@ -17,6 +17,7 @@
           type=search
         >
         <button class='button green' type=submit>Search</button>
+        <button class='button blue' type=reset>Reset</button>
       </div>
       <span class=help-text>Searches forms (in any orthography) and definitions for a match anywhere within the string. Search is not case sensitive. Leave blank and press "Search" to display all components.</span>
     </form>