working with foundation mixin

diff --git a/css/app.css b/css/app.css
index fe14acf..2e2c784 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6933,16 +6933,98 @@ header {
 
 #glm-event-wrapper h1 {
   font-size: 1.5rem; }
-#glm-event-wrapper #glm-events-search-form form input.button.radius {
-  background-color: #db1f5d; }
-#glm-event-wrapper #glm-events-shortcuts ul.stack.button-group li a.button {
-  background-color: #57b649; }
+#glm-event-wrapper #glm-events-search-form .button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border-radius: 0;
+  border-style: solid;
+  border-width: 0;
+  cursor: pointer;
+  font-family: "Lato";
+  font-weight: normal;
+  line-height: normal;
+  margin: 0 0 1.25rem;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.75rem 1.5rem 0.8125rem 1.5rem;
+  background-color: #db1f5d;
+  border-color: #af194a;
+  color: #FFFFFF;
+  border-radius: 10px;
+  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: #af194a; }
+  #glm-event-wrapper #glm-events-search-form .button:hover, #glm-event-wrapper #glm-events-search-form .button:focus {
+    color: #FFFFFF; }
+#glm-event-wrapper #glm-events-shortcuts ul {
+  list-style: none;
+  margin: 0;
+  left: 0; }
+  #glm-event-wrapper #glm-events-shortcuts ul:before, #glm-event-wrapper #glm-events-shortcuts ul:after {
+    content: " ";
+    display: table; }
+  #glm-event-wrapper #glm-events-shortcuts ul:after {
+    clear: both; }
+  #glm-event-wrapper #glm-events-shortcuts ul .button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border-radius: 0;
+    border-style: solid;
+    border-width: 0;
+    cursor: pointer;
+    font-family: "Lato";
+    font-weight: normal;
+    line-height: normal;
+    margin: 0 0 1.25rem;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    padding: 0.75rem 1.5rem 0.8125rem 1.5rem;
+    padding-bottom: 0.8125rem;
+    padding-top: 0.75rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    width: 100%;
+    background-color: #57b649;
+    border-color: #46923a;
+    color: #FFFFFF;
+    border-radius: 10px;
+    transition: background-color 300ms ease-out; }
+    #glm-event-wrapper #glm-events-shortcuts ul .button:hover, #glm-event-wrapper #glm-events-shortcuts ul .button:focus {
+      background-color: #46923a; }
+    #glm-event-wrapper #glm-events-shortcuts ul .button:hover, #glm-event-wrapper #glm-events-shortcuts ul .button:focus {
+      color: #FFFFFF; }
 #glm-event-wrapper ul.pricing-table li.title {
   background: #2c296d; }
   #glm-event-wrapper ul.pricing-table li.title a {
     color: #FFFFFF; }
 #glm-event-wrapper button {
-  background-color: #db1f5d; }
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border-radius: 0;
+  border-style: solid;
+  border-width: 0;
+  cursor: pointer;
+  font-family: "Lato";
+  font-weight: normal;
+  line-height: normal;
+  margin: 0 0 1.25rem;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0.75rem 1.5rem 0.8125rem 1.5rem;
+  background-color: #db1f5d;
+  border-color: #af194a;
+  color: #FFFFFF;
+  transition: background-color 300ms ease-out; }
+  #glm-event-wrapper button:hover, #glm-event-wrapper button:focus {
+    background-color: #af194a; }
+  #glm-event-wrapper button:hover, #glm-event-wrapper button:focus {
+    color: #FFFFFF; }
 
 .edit-wrapper {
   position: relative;

diff --git a/scss/_main.scss b/scss/_main.scss
index 96f72ab..d7c9f19 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -204,21 +204,48 @@
         font-size: 1.5rem;
     }
     #glm-events-search-form {
-        form {
-            input.button.radius {
-                background-color: $pink;
+        .button {
+              @include button(
+                  
+//                 $padding - Used to build padding for buttons Default: $button-med or rem-calc(12)
+                rem-calc(12),
+                // Background color. We can set $bg:false for a transparent background. Default: $primary-color.
+                $pink,
+                // If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
+                10px,
+                // We can set $full-width:true to remove side padding extend width. Default:false
+                false,
+                // We can set $disabled:true to create a disabled transparent button. Default:false
+                false
+              );
             }
-        }
         
     }
     #glm-events-shortcuts {
-        ul.stack.button-group {
-            li {
-                a.button {
-                    background-color: $green;
-                }
+        ul {
+            @include button-group-container(
+                // we use this to add styles for a button group container. Default: true
+                true,
+                // We use this if we want the button group container floated. It relies on the $default-float scss variable. Default: false;
+                false
+              );
+            .button {
+              @include button(
+                  
+//                 $padding - Used to build padding for buttons Default: $button-med or rem-calc(12)
+                rem-calc(12),
+                // Background color. We can set $bg:false for a transparent background. Default: $primary-color.
+                $green,
+                // If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
+                10px,
+                // We can set $full-width:true to remove side padding extend width. Default:false
+                true,
+                // We can set $disabled:true to create a disabled transparent button. Default:false
+                false
+              );
             }
         }
+        
     }
     ul.pricing-table {
         li.title {
@@ -229,7 +256,19 @@
         }
     }
     button {
-        background-color: $pink;
+              @include button(
+                  
+//                 $padding - Used to build padding for buttons Default: $button-med or rem-calc(12)
+                rem-calc(12),
+                // Background color. We can set $bg:false for a transparent background. Default: $primary-color.
+                $pink,
+                // If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
+                false,
+                // We can set $full-width:true to remove side padding extend width. Default:false
+                false,
+                // We can set $disabled:true to create a disabled transparent button. Default:false
+                false
+              );
     }
 }