I fixed the search button
authorIan Weller <ian@gaslightmedia.com>
Wed, 29 Mar 2017 14:43:01 +0000 (10:43 -0400)
committerIan Weller <ian@gaslightmedia.com>
Wed, 29 Mar 2017 14:43:01 +0000 (10:43 -0400)
I styled the search button in the off canvas to be a different font
color than the rest of the site buttons.

css/app.css
scss/_left-off-canvas.scss
scss/_settings.scss

index a1a7d0d..4f8f5bb 100644 (file)
@@ -1569,12 +1569,12 @@ button, .button {
   font-size: 1rem;
   background-color: #ffc742;
   border-color: #ffc742;
-  color: #690433;
+  color: #FFFFFF;
   transition: background-color 300ms ease-out; }
   button:hover, button:focus, .button:hover, .button:focus {
     background-color: #ffc742; }
   button:hover, button:focus, .button:hover, .button:focus {
-    color: #690433; }
+    color: #FFFFFF; }
   button.secondary, .button.secondary {
     background-color: #e7e7e7;
     border-color: #b9b9b9;
@@ -1586,27 +1586,27 @@ button, .button {
   button.success, .button.success {
     background-color: #43AC6A;
     border-color: #368a55;
-    color: #690433; }
+    color: #FFFFFF; }
     button.success:hover, button.success:focus, .button.success:hover, .button.success:focus {
       background-color: #368a55; }
     button.success:hover, button.success:focus, .button.success:hover, .button.success:focus {
-      color: #690433; }
+      color: #FFFFFF; }
   button.alert, .button.alert {
     background-color: #f04124;
     border-color: #cf2a0e;
-    color: #690433; }
+    color: #FFFFFF; }
     button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
       background-color: #cf2a0e; }
     button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
-      color: #690433; }
+      color: #FFFFFF; }
   button.warning, .button.warning {
     background-color: #f08a24;
     border-color: #cf6e0e;
-    color: #690433; }
+    color: #FFFFFF; }
     button.warning:hover, button.warning:focus, .button.warning:hover, .button.warning:focus {
       background-color: #cf6e0e; }
     button.warning:hover, button.warning:focus, .button.warning:hover, .button.warning:focus {
-      color: #690433; }
+      color: #FFFFFF; }
   button.info, .button.info {
     background-color: #a0d3e8;
     border-color: #61b6d9;
@@ -1614,7 +1614,7 @@ button, .button {
     button.info:hover, button.info:focus, .button.info:hover, .button.info:focus {
       background-color: #61b6d9; }
     button.info:hover, button.info:focus, .button.info:hover, .button.info:focus {
-      color: #690433; }
+      color: #FFFFFF; }
   button.large, .button.large {
     padding: 1.125rem 2.25rem 1.1875rem 2.25rem;
     font-size: 1.25rem; }
@@ -1641,14 +1641,14 @@ button, .button {
   button.disabled, button[disabled], .button.disabled, .button[disabled] {
     background-color: #ffc742;
     border-color: #ffc742;
-    color: #690433;
+    color: #FFFFFF;
     box-shadow: none;
     cursor: default;
     opacity: 0.7; }
     button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
       background-color: #ffc742; }
     button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
-      color: #690433; }
+      color: #FFFFFF; }
     button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
       background-color: #ffc742; }
     button.disabled.secondary, button[disabled].secondary, .button.disabled.secondary, .button[disabled].secondary {
@@ -1667,40 +1667,40 @@ button, .button {
     button.disabled.success, button[disabled].success, .button.disabled.success, .button[disabled].success {
       background-color: #43AC6A;
       border-color: #368a55;
-      color: #690433;
+      color: #FFFFFF;
       box-shadow: none;
       cursor: default;
       opacity: 0.7; }
       button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
         background-color: #368a55; }
       button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
-        color: #690433; }
+        color: #FFFFFF; }
       button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
         background-color: #43AC6A; }
     button.disabled.alert, button[disabled].alert, .button.disabled.alert, .button[disabled].alert {
       background-color: #f04124;
       border-color: #cf2a0e;
-      color: #690433;
+      color: #FFFFFF;
       box-shadow: none;
       cursor: default;
       opacity: 0.7; }
       button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
         background-color: #cf2a0e; }
       button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
-        color: #690433; }
+        color: #FFFFFF; }
       button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
         background-color: #f04124; }
     button.disabled.warning, button[disabled].warning, .button.disabled.warning, .button[disabled].warning {
       background-color: #f08a24;
       border-color: #cf6e0e;
-      color: #690433;
+      color: #FFFFFF;
       box-shadow: none;
       cursor: default;
       opacity: 0.7; }
       button.disabled.warning:hover, button.disabled.warning:focus, button[disabled].warning:hover, button[disabled].warning:focus, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus {
         background-color: #cf6e0e; }
       button.disabled.warning:hover, button.disabled.warning:focus, button[disabled].warning:hover, button[disabled].warning:focus, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus {
-        color: #690433; }
+        color: #FFFFFF; }
       button.disabled.warning:hover, button.disabled.warning:focus, button[disabled].warning:hover, button[disabled].warning:focus, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus {
         background-color: #f08a24; }
     button.disabled.info, button[disabled].info, .button.disabled.info, .button[disabled].info {
@@ -1713,7 +1713,7 @@ button, .button {
       button.disabled.info:hover, button.disabled.info:focus, button[disabled].info:hover, button[disabled].info:focus, .button.disabled.info:hover, .button.disabled.info:focus, .button[disabled].info:hover, .button[disabled].info:focus {
         background-color: #61b6d9; }
       button.disabled.info:hover, button.disabled.info:focus, button[disabled].info:hover, button[disabled].info:focus, .button.disabled.info:hover, .button.disabled.info:focus, .button[disabled].info:hover, .button[disabled].info:focus {
-        color: #690433; }
+        color: #FFFFFF; }
       button.disabled.info:hover, button.disabled.info:focus, button[disabled].info:hover, button[disabled].info:focus, .button.disabled.info:hover, .button.disabled.info:focus, .button[disabled].info:hover, .button[disabled].info:focus {
         background-color: #a0d3e8; }
 
@@ -4591,11 +4591,11 @@ meta.foundation-mq-topbar {
         padding-right: 0.8333333333rem;
         background-color: #008CBA;
         border-color: #007095;
-        color: #690433; }
+        color: #FFFFFF; }
         .top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
           background-color: #007095; }
         .top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
-          color: #690433; }
+          color: #FFFFFF; }
       .top-bar-section ul li > a.button.secondary {
         background-color: #e7e7e7;
         border-color: #b9b9b9;
@@ -4607,27 +4607,27 @@ meta.foundation-mq-topbar {
       .top-bar-section ul li > a.button.success {
         background-color: #43AC6A;
         border-color: #368a55;
-        color: #690433; }
+        color: #FFFFFF; }
         .top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
           background-color: #368a55; }
         .top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
-          color: #690433; }
+          color: #FFFFFF; }
       .top-bar-section ul li > a.button.alert {
         background-color: #f04124;
         border-color: #cf2a0e;
-        color: #690433; }
+        color: #FFFFFF; }
         .top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
           background-color: #cf2a0e; }
         .top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
-          color: #690433; }
+          color: #FFFFFF; }
       .top-bar-section ul li > a.button.warning {
         background-color: #f08a24;
         border-color: #cf6e0e;
-        color: #690433; }
+        color: #FFFFFF; }
         .top-bar-section ul li > a.button.warning:hover, .top-bar-section ul li > a.button.warning:focus {
           background-color: #cf6e0e; }
         .top-bar-section ul li > a.button.warning:hover, .top-bar-section ul li > a.button.warning:focus {
-          color: #690433; }
+          color: #FFFFFF; }
       .top-bar-section ul li > a.button.info {
         background-color: #a0d3e8;
         border-color: #61b6d9;
@@ -4635,18 +4635,18 @@ meta.foundation-mq-topbar {
         .top-bar-section ul li > a.button.info:hover, .top-bar-section ul li > a.button.info:focus {
           background-color: #61b6d9; }
         .top-bar-section ul li > a.button.info:hover, .top-bar-section ul li > a.button.info:focus {
-          color: #690433; }
+          color: #FFFFFF; }
     .top-bar-section ul li > button {
       font-size: 1.125rem;
       padding-left: 0.8333333333rem;
       padding-right: 0.8333333333rem;
       background-color: #008CBA;
       border-color: #007095;
-      color: #690433; }
+      color: #FFFFFF; }
       .top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
         background-color: #007095; }
       .top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
-        color: #690433; }
+        color: #FFFFFF; }
       .top-bar-section ul li > button.secondary {
         background-color: #e7e7e7;
         border-color: #b9b9b9;
@@ -4658,27 +4658,27 @@ meta.foundation-mq-topbar {
       .top-bar-section ul li > button.success {
         background-color: #43AC6A;
         border-color: #368a55;
-        color: #690433; }
+        color: #FFFFFF; }
         .top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
           background-color: #368a55; }
         .top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
-          color: #690433; }
+          color: #FFFFFF; }
       .top-bar-section ul li > button.alert {
         background-color: #f04124;
         border-color: #cf2a0e;
-        color: #690433; }
+        color: #FFFFFF; }
         .top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
           background-color: #cf2a0e; }
         .top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
-          color: #690433; }
+          color: #FFFFFF; }
       .top-bar-section ul li > button.warning {
         background-color: #f08a24;
         border-color: #cf6e0e;
-        color: #690433; }
+        color: #FFFFFF; }
         .top-bar-section ul li > button.warning:hover, .top-bar-section ul li > button.warning:focus {
           background-color: #cf6e0e; }
         .top-bar-section ul li > button.warning:hover, .top-bar-section ul li > button.warning:focus {
-          color: #690433; }
+          color: #FFFFFF; }
       .top-bar-section ul li > button.info {
         background-color: #a0d3e8;
         border-color: #61b6d9;
@@ -4686,7 +4686,7 @@ meta.foundation-mq-topbar {
         .top-bar-section ul li > button.info:hover, .top-bar-section ul li > button.info:focus {
           background-color: #61b6d9; }
         .top-bar-section ul li > button.info:hover, .top-bar-section ul li > button.info:focus {
-          color: #690433; }
+          color: #FFFFFF; }
     .top-bar-section ul li:hover:not(.has-form) > a {
       background-color: #1479b0;
       color: #FFFFFF;
@@ -6431,14 +6431,14 @@ h1, h2, h3, h4, h5, h6 {
     font-size: 1rem;
     background-color: #ffc742;
     border-color: #ffc742;
-    color: #690433;
+    color: #FFFFFF;
     transition: background-color 300ms ease-out;
     display: block;
     margin: 0 auto; }
     .ninja-forms-form-wrap input[type=submit]:hover, .ninja-forms-form-wrap input[type=submit]:focus {
       background-color: #ffc742; }
     .ninja-forms-form-wrap input[type=submit]:hover, .ninja-forms-form-wrap input[type=submit]:focus {
-      color: #690433; }
+      color: #FFFFFF; }
 
 /* For fixing cellphones not showing phone numbers because of /helpful/ auto-coloring */
 a[href^=tel] {
@@ -7108,14 +7108,14 @@ h2#slide-text {
     font-size: 1rem;
     background-color: #ffc742;
     border-color: #ffc742;
-    color: #690433;
+    color: #FFFFFF;
     transition: background-color 300ms ease-out;
     display: block;
     margin: 0 auto; }
     .ninja-forms-form-wrap input[type=submit]:hover, .ninja-forms-form-wrap input[type=submit]:focus {
       background-color: #ffc742; }
     .ninja-forms-form-wrap input[type=submit]:hover, .ninja-forms-form-wrap input[type=submit]:focus {
-      color: #690433; }
+      color: #FFFFFF; }
 
 #ui-datepicker-div .ui-datepicker-header, #ui-datepicker-div .ui-datepicker-calendar th, #ui-datepicker-div .ui-datepicker-calendar td {
   padding: 1px !important; }
@@ -7248,13 +7248,13 @@ h2#slide-text {
   padding: 0.75rem 1.5rem 0.8125rem 1.5rem;
   background-color: #690433;
   border-color: #540329;
-  color: #690433;
+  color: #FFFFFF;
   border-radius: 3px;
   transition: background-color 300ms ease-out; }
   #glm-event-wrapper #glm-events-search-form .button:hover, #glm-event-wrapper #glm-events-search-form .button:focus {
     background-color: #540329; }
   #glm-event-wrapper #glm-events-search-form .button:hover, #glm-event-wrapper #glm-events-search-form .button:focus {
-    color: #690433; }
+    color: #FFFFFF; }
 #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group {
   list-style: none;
   margin: 0;
@@ -7287,14 +7287,14 @@ h2#slide-text {
     width: 100%;
     background-color: #690433;
     border-color: #540329;
-    color: #690433;
+    color: #FFFFFF;
     border-radius: 3px;
     transition: background-color 300ms ease-out;
     margin-bottom: 1px; }
     #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group .shortcuts-button:hover, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group .shortcuts-button:focus {
       background-color: #540329; }
     #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group .shortcuts-button:hover, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group .shortcuts-button:focus {
-      color: #690433; }
+      color: #FFFFFF; }
   #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li {
     float: none;
     display: list-item;
@@ -7336,14 +7336,14 @@ h2#slide-text {
   padding: 0.75rem 1.5rem 0.8125rem 1.5rem;
   background-color: #008752;
   border-color: #006c42;
-  color: #690433;
+  color: #FFFFFF;
   border-radius: 3px;
   transition: background-color 300ms ease-out;
   width: 220px; }
   #glm-event-wrapper button#glm-event-add-event:hover, #glm-event-wrapper button#glm-event-add-event:focus {
     background-color: #006c42; }
   #glm-event-wrapper button#glm-event-add-event:hover, #glm-event-wrapper button#glm-event-add-event:focus {
-    color: #690433; }
+    color: #FFFFFF; }
 #glm-event-wrapper p {
   margin-left: 15px; }
 #glm-event-wrapper .glm-event-day-row {
@@ -8141,7 +8141,8 @@ aside.left-off-canvas-menu ul.open {
 
 input.button {
   margin-left: 25px;
-  padding: 10px; }
+  padding: 10px;
+  color: #690433; }
 
 .offcavas-social-list {
   list-style: none;
index 1497fc3..db71f93 100644 (file)
@@ -82,6 +82,7 @@ aside.left-off-canvas-menu ul.open {
 input.button {
     margin-left: 25px;
     padding: 10px;
+    color: $maroon;
 }
 
 .offcavas-social-list {
index bd9e56e..9ebfa5f 100644 (file)
@@ -451,7 +451,7 @@ $small-font-color: scale-color($header-font-color, $lightness: 35%);
 
 // We use these to control button text styles.
 // $button-font-family: $body-font-family;
- $button-font-color: $maroon;
+// $button-font-color: $white;
 // $button-font-color-alt: $oil;
 // $button-font-tny: rem-calc(11);
 // $button-font-sml: rem-calc(13);