Update styles for the events

Put these event styles into a plugin sass partial file that can be
reused.
Setting at the top of partial update the colors.

diff --git a/css/app.css b/css/app.css
index 937a327..686ff93 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6933,130 +6933,6 @@ header {
     .page-inside #content-wrapper .action-item {
       margin: 30px 0; } }
 
-#glm-event-wrapper h1 {
-  font-size: 1.5rem;
-  padding: 0 15px; }
-#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: 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: #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 .shortcuts-button-group {
-  list-style: none;
-  margin: 0;
-  left: 0; }
-  #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 .shortcuts-button-group:after {
-    clear: both; }
-  #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group .shortcuts-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: 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 .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 {
-    color: #FFFFFF; }
-#glm-event-wrapper 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: 3px;
-  transition: background-color 300ms ease-out;
-  width: 220px; }
-  #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; }
-#glm-event-wrapper p {
-  margin-left: 15px; }
-
 .edit-wrapper {
   position: relative;
   z-index: 1;
@@ -7254,6 +7130,126 @@ header {
 #ai1ec-calendar {
   padding: 20px 0; }
 
+#glm-event-wrapper h1 {
+  font-size: 1.5rem;
+  padding: 0 15px; }
+#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: 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: #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 .shortcuts-button-group {
+  list-style: none;
+  margin: 0;
+  left: 0; }
+  #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 .shortcuts-button-group:after {
+    clear: both; }
+  #glm-event-wrapper #glm-events-shortcuts .shortcuts-button-group .shortcuts-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: 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 .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 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: 3px;
+  transition: background-color 300ms ease-out;
+  width: 220px; }
+  #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; }
+#glm-event-wrapper p {
+  margin-left: 15px; }
+
 #blog-feed-front .blog-feed-img {
   margin-bottom: 17px; }
   #blog-feed-front .blog-feed-img img {

diff --git a/scss/_main.scss b/scss/_main.scss
index 6d70fbd..1c94944 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -201,78 +201,7 @@
         }
     }
 }
-#glm-event-wrapper {
-    h1 {
-        font-size: 1.5rem;
-        padding: 0 15px;
-    }
-    #glm-events-search-form {
-        .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.
-                3px,
-                // 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 .shortcuts-button-group { 
-        @include button-group-container();
-        .shortcuts-button {
-            @include button(
-                rem-calc(12),
-                $green,
-                true,
-                true,
-                false
-            );
-            margin-bottom: 1px;
-        }
-        & > li {
-            @include button-group-style(
-                $radius:true,
-                $even:false,
-                $float:none
-            );
-        }
-    }
-    ul.pricing-table {
-        li.title {
-            background: $purple;
-            a {
-                color: $white;
-            }
-        }
-    }
-    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.
-                3px,
-                // 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
-              );
-        width: 220px;
-    }
-    p {
-        margin-left: 15px;
-    }
-}
-    
+
 .edit-wrapper {
     position: relative;
     z-index: 1;
@@ -378,4 +307,4 @@
 #footerShareThis, #stOff{
     position: relative;
     top: 6px;
-}
\ No newline at end of file
+}

diff --git a/scss/_plugins.scss b/scss/_plugins.scss
index 0c51822..df0d68f 100644 (file)
--- a/scss/_plugins.scss
+++ b/scss/_plugins.scss
@@ -1,2 +1,3 @@
   @import "plugins/nextgen";
-  @import "plugins/ai1ec";
\ No newline at end of file
+  @import "plugins/ai1ec";
+  @import "plugins/glm-member-db-events";

diff --git a/scss/plugins/_glm-member-db-events.scss b/scss/plugins/_glm-member-db-events.scss
new file mode 100644 (file)
index 0000000..db52604
--- /dev/null
+++ b/scss/plugins/_glm-member-db-events.scss
@@ -0,0 +1,67 @@
+// Setting for the colors
+$nameSearchButtonColor   : $pink;
+$shortcutsButtonColor    : $green;
+$backToSearchButtonColor : $pink;
+
+#glm-event-wrapper {
+    h1 {
+        font-size: 1.5rem;
+        padding: 0 15px;
+    }
+    #glm-events-search-form {
+        .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.
+                $nameSearchButtonColor,
+                // If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
+                3px,
+                // 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 .shortcuts-button-group { 
+        @include button-group-container();
+        .shortcuts-button {
+            @include button(
+                rem-calc(12),
+                $shortcutsButtonColor,
+                true,
+                true,
+                false
+            );
+            margin-bottom: 1px;
+        }
+        & > li {
+            @include button-group-style(
+                $radius:true,
+                $even:false,
+                $float:none
+            );
+        }
+    }
+    // for the back to search button
+    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.
+                $backToSearchButtonColor,
+                // If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
+                3px,
+                // 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
+              );
+        width: 220px;
+    }
+    p {
+        margin-left: 15px;
+    }
+}