Update for the button styles for events

working on the styles for shortcut section

diff --git a/css/app.css b/css/app.css
index 2e2c784..d9862de 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6958,16 +6958,16 @@ header {
     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 {
+#glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group {
   list-style: none;
   margin: 0;
   left: 0; }
-  #glm-event-wrapper #glm-events-shortcuts ul:before, #glm-event-wrapper #glm-events-shortcuts ul:after {
+  #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group:before, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group:after {
     content: " ";
     display: table; }
-  #glm-event-wrapper #glm-events-shortcuts ul:after {
+  #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group:after {
     clear: both; }
-  #glm-event-wrapper #glm-events-shortcuts ul .button {
+  #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group .shortcuts-button {
     -webkit-appearance: none;
     -moz-appearance: none;
     border-radius: 0;
@@ -6991,12 +6991,36 @@ header {
     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 {
+    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: #46923a; }
-    #glm-event-wrapper #glm-events-shortcuts ul .button:hover, #glm-event-wrapper #glm-events-shortcuts ul .button:focus {
+    #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: #FFFFFF; }
+  #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li {
+    float: none;
+    display: list-item;
+    margin: 0; }
+    #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li > button, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li .button {
+      border-left: 1px solid;
+      border-color: rgba(255, 255, 255, 0.5); }
+    #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li:first-child button, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li:first-child .button {
+      border-left: 0; }
+    #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li:first-child {
+      margin-left: 0; }
+    #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li > a, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li > button, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li > .button {
+      border-radius: 0; }
+    #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li:first-child, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li:first-child > a, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li:first-child > button, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li:first-child > .button {
+      -webkit-border-bottom-left-radius: 3px;
+      -webkit-border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+      border-top-left-radius: 3px; }
+    #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li:last-child, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li:last-child > a, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li:last-child > button, #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group > li:last-child > .button {
+      -webkit-border-bottom-right-radius: 3px;
+      -webkit-border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+      border-top-right-radius: 3px; }
 #glm-event-wrapper ul.pricing-table li.title {
   background: #2c296d; }
   #glm-event-wrapper ul.pricing-table li.title a {

diff --git a/scss/_main.scss b/scss/_main.scss
index d7c9f19..abba884 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -221,31 +221,25 @@
             }
         
     }
-    #glm-events-shortcuts {
-        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)
+    #glm-events-shortcuts .shortcuts-button-group { 
+        @include button-group-container();
+        .shortcuts-button {
+            @include button(
                 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
+                true,
                 false
-              );
-            }
+            );
+            margin-bottom: 1px;
+        }
+        & > li {
+            @include button-group-style(
+                $radius:true,
+                $even:false,
+                $float:none
+            );
         }
-        
     }
     ul.pricing-table {
         li.title {