Add scss files for the left and right off canvas menu

diff --git a/root/scss/_left-off-canvas.scss b/root/scss/_left-off-canvas.scss
new file mode 100644 (file)
index 0000000..d92b462
--- /dev/null
+++ b/root/scss/_left-off-canvas.scss
@@ -0,0 +1,88 @@
+/* for the mobile menu */
+aside.left-off-canvas-menu {
+  background: transparent;
+  background-color: $primary-color;
+  color: white;
+}
+aside.left-off-canvas-menu li.page_item {
+  display: block;
+  overflow: hidden;
+  position: relative;
+  padding: 4px 8px;
+}
+aside.left-off-canvas-menu .off-canvas-list ul li a {
+  line-height: 20px;
+  color: white;
+  border-bottom: 1px solid #b1b3b6;
+  background-repeat: no-repeat;
+  background-position: 3px 50%;
+}
+aside.left-off-canvas-menu .off-canvas-list ul li a:hover {
+  background-color: $secondary-color;
+  color: black;
+}
+aside.left-off-canvas-menu li.page_item_has_children a.toggle {
+  @include off-canvas-arrow(down, $secondary-color);
+  font-size: 0;
+  height: 0;
+  line-height: 0;
+  padding: 0;
+  position: absolute;
+  right: 10px;
+  top: 13px;
+  width: 0;
+}
+aside.left-off-canvas-menu li.page_item_has_children:hover > a.toggle {
+    @include off-canvas-arrow(down, $primary-color);
+}
+aside.left-off-canvas-menu li.page_item_has_children a.toggle.open {
+    @include off-canvas-arrow(up, $secondary-color);
+}
+aside.left-off-canvas-menu li.page_item_has_children:hover > a.toggle.open {
+    @include off-canvas-arrow(up, $primary-color);
+}
+aside.left-off-canvas-menu li.page_item_has_children a.toggle.open:hover {
+    background-color: $primary-color;
+}
+aside.left-off-canvas-menu ul.children {
+  display: none;
+}
+aside.left-off-canvas-menu .off-canvas-list ul li > ul li > a {
+  padding-left: 10px;
+  margin-left: 25px;
+  line-height: 18px;
+}
+aside.left-off-canvas-menu ul.open {
+  display: block;
+}
+.left-off-canvas-menu {
+        list-style: none;
+        li {
+            a {
+                color: $white;
+                font-size: rem-calc(20);
+                line-height: 150%;
+                border-color: white;
+            }
+            a:hover {
+                color: black;
+            }
+            .dropdown {
+                list-style: none;
+            }
+        }
+        ul {
+            list-style: none;
+
+            padding: 10px 0;
+            li {
+                a {
+                    color: $white;
+                }
+                ul {
+                    list-style: none;
+                }
+            }
+        }
+}
+/* End Mobile Menu */

diff --git a/root/scss/_right-off-canvas.scss b/root/scss/_right-off-canvas.scss
new file mode 100644 (file)
index 0000000..de383d1
--- /dev/null
+++ b/root/scss/_right-off-canvas.scss
@@ -0,0 +1,88 @@
+/* for the mobile menu */
+aside.right-off-canvas-menu {
+  background: transparent;
+  background-color: $primary-color;
+  color: white;
+}
+aside.right-off-canvas-menu li.page_item {
+  display: block;
+  overflow: hidden;
+  position: relative;
+  padding: 4px 8px;
+}
+aside.right-off-canvas-menu .off-canvas-list ul li a {
+  line-height: 20px;
+  color: white;
+  border-bottom: 1px solid #b1b3b6;
+  background-repeat: no-repeat;
+  background-position: 3px 50%;
+}
+aside.right-off-canvas-menu .off-canvas-list ul li a:hover {
+  background-color: $secondary-color;
+  color: black;
+}
+aside.right-off-canvas-menu li.page_item_has_children a.toggle {
+  @include off-canvas-arrow(down, $secondary-color);
+  font-size: 0;
+  height: 0;
+  line-height: 0;
+  padding: 0;
+  position: absolute;
+  right: 10px;
+  top: 13px;
+  width: 0;
+}
+aside.right-off-canvas-menu li.page_item_has_children:hover > a.toggle {
+    @include off-canvas-arrow(down, $primary-color);
+}
+aside.right-off-canvas-menu li.page_item_has_children a.toggle.open {
+    @include off-canvas-arrow(up, $secondary-color);
+}
+aside.right-off-canvas-menu li.page_item_has_children:hover > a.toggle.open {
+    @include off-canvas-arrow(up, $primary-color);
+}
+aside.right-off-canvas-menu li.page_item_has_children a.toggle.open:hover {
+    background-color: $primary-color;
+}
+aside.right-off-canvas-menu ul.children {
+  display: none;
+}
+aside.right--menu .off-canvas-list ul li > ul li > a {
+  padding-left: 10px;
+  margin-left: 25px;
+  line-height: 18px;
+}
+aside.right-off-canvas-menu ul.open {
+  display: block;
+}
+.right-off-canvas-menu {
+        list-style: none;
+        li {
+            a {
+                color: $white;
+                font-size: rem-calc(20);
+                line-height: 150%;
+                border-color: white;
+            }
+            a:hover {
+                color: black;
+            }
+            .dropdown {
+                list-style: none;
+            }
+        }
+        ul {
+            list-style: none;
+
+            padding: 10px 0;
+            li {
+                a {
+                    color: $white;
+                }
+                ul {
+                    list-style: none;
+                }
+            }
+        }
+}
+/* End Mobile Menu */

diff --git a/root/scss/_structure.scss b/root/scss/_structure.scss
index 184b0b8..d366264 100644 (file)
--- a/root/scss/_structure.scss
+++ b/root/scss/_structure.scss
@@ -1,17 +1,3 @@
-@mixin gradient($from, $to) {
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, $from), color-stop(1, $to));
-    background: -moz-linear-gradient(top, $from 5%, $to 100%);
-    filter: progid:DXIm-ageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr'#{$to}');
-}
-@mixin gradient2($from, $to) {
-    background: -webkit-gradient(linear, left , right, color-stop(0.5, $from), color-stop(1, $to));
-    background: -moz-linear-gradient(right, $from 50%, $to 100%);
-    filter: progid:DXIm-ageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr'#{$to}');
-}
-//@font-face {
-//    font-family: "Rage Italic";
-//    src: url('assets/Rage Italic.ttf') format ('truetype'); 
-//
 body {
     background: #e6e7e9;
     #page-wrapper {
@@ -39,7 +25,7 @@ body {
                         padding: 0 rem-calc(10);
                         font-size: rem-calc(15);
                     }
-                    
+
                 }
                 #logo_wrapper {
                     @media #{$small-only} {
@@ -75,28 +61,28 @@ body {
                         top: 3px;
                     }
                 }
-                    
+
 /*                #magnifying-glass {
-                        font-size: 10em;  This controls the size.  
-                        display: inline-block; 
-                        width: rem-calc(10); 
+                        font-size: 10em;  This controls the size.
+                        display: inline-block;
+                        width: rem-calc(10);
                         height: rem-calc(10);
-                        border: rem-calc(2) solid $black; 
-                        position: absolute; 
+                        border: rem-calc(2) solid $black;
+                        position: absolute;
                         border-radius: 0.35em;
                         top: rem-calc(2);
                         right: rem-calc(8);
                         &:before {
-                            content: ""; 
-                            display: inline-block; 
-                            position: absolute; 
-                            right: rem-calc(-7); 
-                            bottom: rem-calc(-4); 
-                            border-width: 0; 
-                            background: $black; 
-                            width: rem-calc(8); 
-                            height: rem-calc(2); 
-                            -webkit-transform: rotate(45deg); 
+                            content: "";
+                            display: inline-block;
+                            position: absolute;
+                            right: rem-calc(-7);
+                            bottom: rem-calc(-4);
+                            border-width: 0;
+                            background: $black;
+                            width: rem-calc(8);
+                            height: rem-calc(2);
+                            -webkit-transform: rotate(45deg);
                             -moz-transform: rotate(45deg);
                             -ms-transform: rotate(45deg);
                             transform: rotate(45deg);
@@ -136,7 +122,7 @@ body {
                                     }
                                     a {
                                         margin-top: -49px;
-                                        background: transparent;                            
+                                        background: transparent;
                                     }
                                 }
                             }
@@ -203,7 +189,7 @@ body {
                 }
                 #content-wrapper {
                     padding: 25px;
-                    h1#Emer {    
+                    h1#Emer {
                         color: $red;
                         font-family: Times, sans-serif;
                         font-style: italic;
@@ -214,7 +200,7 @@ body {
                         img {
                             border: 5px solid $green;
                             margin-bottom: 14px;
-                            box-shadow: 0 3px 4px 0 grey; 
+                            box-shadow: 0 3px 4px 0 grey;
                         }
                         p {
                             margin-bottom: 14px;
@@ -274,7 +260,7 @@ body {
                     padding: 15px 0 0;
                     position: relative;
                     text-align: center;
-                    
+
                 }
             }
             #searchform_container {
@@ -307,7 +293,7 @@ body {
                 margin-top: 80px;
                 padding-bottom: 20px;
                 text-align: center;
-                div {    
+                div {
                     #address {
                         margin-top: rem-calc(145);
                         h2 {
@@ -327,7 +313,7 @@ body {
                         }
                     }
                 }
-                #connect { 
+                #connect {
                     background: #4C4D4F;
                     #emmet {
                         h1 {
@@ -404,92 +390,3 @@ body {
     margin: 0;
 }
 /* End Google Map */
-
-/* for the mobile menu */
-aside.left-off-canvas-menu {
-  background: transparent;
-  background-color: $primary-color;
-  color: white;
-}
-aside.left-off-canvas-menu li.page_item {
-  display: block;
-  overflow: hidden;
-  position: relative;
-  padding: 4px 8px;
-}
-aside.left-off-canvas-menu .off-canvas-list ul li a {
-  line-height: 20px;
-  color: white;
-  border-bottom: 1px solid #b1b3b6;
-  background-repeat: no-repeat;
-  background-position: 3px 50%;
-}
-aside.left-off-canvas-menu .off-canvas-list ul li a:hover {
-  background-color: $secondary-color;
-  color: black;
-}
-aside.left-off-canvas-menu li.page_item_has_children a.toggle {
-  @include off-canvas-arrow(down, $secondary-color);
-  font-size: 0;
-  height: 0;
-  line-height: 0;
-  padding: 0;
-  position: absolute;
-  right: 10px;
-  top: 13px;
-  width: 0;
-}
-aside.left-off-canvas-menu li.page_item_has_children:hover > a.toggle {
-    @include off-canvas-arrow(down, $primary-color);
-}
-aside.left-off-canvas-menu li.page_item_has_children a.toggle.open {
-    @include off-canvas-arrow(up, $secondary-color);
-}
-aside.left-off-canvas-menu li.page_item_has_children:hover > a.toggle.open {
-    @include off-canvas-arrow(up, $primary-color);
-}
-aside.left-off-canvas-menu li.page_item_has_children a.toggle.open:hover {
-    background-color: $primary-color;
-}
-aside.left-off-canvas-menu ul.children {
-  display: none;
-}
-aside.left-off-canvas-menu .off-canvas-list ul li > ul li > a {
-  padding-left: 10px;
-  margin-left: 25px;
-  line-height: 18px;
-}
-aside.left-off-canvas-menu ul.open {
-  display: block;
-}
-.left-off-canvas-menu {
-        list-style: none;
-        li {
-            a {
-                color: $white;
-                font-size: rem-calc(20);
-                line-height: 150%;
-                border-color: white;
-            }
-            a:hover {
-                color: black;
-            }
-            .dropdown {
-                list-style: none;
-            }
-        }
-        ul {
-            list-style: none;
-            
-            padding: 10px 0;
-            li {
-                a {
-                    color: $white;
-                }
-                ul {
-                    list-style: none;
-                }
-            }
-        }
-}
-/* End Mobile Menu */
\ No newline at end of file

diff --git a/root/scss/app.scss b/root/scss/app.scss
index 23e65b3..5cedc67 100644 (file)
--- a/root/scss/app.scss
+++ b/root/scss/app.scss
@@ -2,6 +2,8 @@
 @import "settings";
 @import "foundation";
 @import "structure";
+@import "left-off-canvas";
+//@import "right-off-canvas";
 @import "wordpress";
 
 // Or selectively include components