More adaptable and optimized off-canvas arrows

diff --git a/css/app.css b/css/app.css
index 5a79bb0..aa494d7 100755 (executable)
--- a/css/app.css
+++ b/css/app.css
@@ -5561,6 +5561,105 @@ th.hide-for-touch {
   th.show-for-print {
     display: table-cell !important; } }
 
+/* Images */
+img.aligncenter {
+  display: block;
+  clear: both;
+  float: none;
+  padding: 0;
+  margin-left: auto;
+  margin-right: auto; }
+
+img.alignright {
+  padding: 0;
+  margin: 0 0 6px 11px;
+  display: inline; }
+
+blockquote.alignleft, img.alignleft, .wp-caption.alignleft {
+  margin: 0.4375rem 2.1875rem 0.4375rem 0; }
+
+blockquote.alignright, img.alignright, .wp-caption.alignright {
+  margin: 0.4375rem 0 0.4375rem 2.1875rem; }
+
+img.alignleft {
+  padding: 0;
+  /*    margin: 0 11px 6px 0;*/
+  display: inline; }
+
+img.alignleft, img.alignright, img.aligncenter, div.wp-caption img {
+  border: 1px solid #008000; }
+
+.alignright {
+  float: right; }
+
+.alignnone {
+  float: none; }
+
+.alignleft {
+  float: left; }
+
+.wp-caption {
+  background: #008000;
+  width: auto; }
+
+.wp-caption-text {
+  font-family: Open Sans, sans-serif;
+  font-size: 9px !important;
+  color: #fff;
+  font-style: italic;
+  margin: 0;
+  padding: 0 5px; }
+
+.gallery-one-title {
+  height: 45px;
+  font-size: 0.8em;
+  text-align: center;
+  font-family: sans-serif;
+  padding: 5px; }
+
+.gallery-holder {
+  margin: 10px 0 20px 0; }
+
+@media (max-width: 640px) {
+  img.alignright, img.alignleft, img.aligncenter {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+    text-align: center; }
+  div.wp-caption.alignright, div.wp-caption.alignleft {
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+    text-align: center; }
+  div.wp-caption.aligncenter {
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+    text-align: center; }
+  div.wp-caption.alignnone {
+    float: none; }
+  div.wp-caption.alignright, div.wp-caption.alignleft, div.wp-caption.aligncenter {
+    width: 100%; } }
+
+@media (min-width: 40.063em) {
+  img.aligncenter, img.alignnone {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+    text-align: center; }
+  div.wp-caption.aligncenter {
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+    text-align: center; }
+  div.wp-caption.aligncenter {
+    width: 100%; }
+  div.wp-caption.alignnone {
+    float: none; } }
+
+/* End Images */
 body {
   background-image: url(../assets/background.png);
   background-repeat: repeat-y; }
@@ -6467,6 +6566,7 @@ img.alignleft, img.alignright, img.aligncenter, div.wp-caption img {
 /* End Blog & Search */
 /* for the mobile menu */
 aside.left-off-canvas-menu {
+  content: "lalalalalalalalalalalalala";
   background: transparent;
   background-color: #008CBA;
   color: white; }
@@ -6488,9 +6588,6 @@ aside.left-off-canvas-menu .off-canvas-list ul li a:hover {
   color: black; }
 
 aside.left-off-canvas-menu li.page_item_has_children a.toggle {
-  /*  background: url('../assets/cceoem-arrow-mmenu.png');
-  background-repeat: no-repeat;
-  background-position: 50% 3px;*/
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-top: 20px solid #e7e7e7;
@@ -6504,14 +6601,23 @@ aside.left-off-canvas-menu li.page_item_has_children a.toggle {
   top: 13px;
   width: 0; }
 
+aside.left-off-canvas-menu li.page_item_has_children:hover a.toggle {
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+  border-top: 20px solid #008CBA;
+  border-bottom: 0; }
+
 aside.left-off-canvas-menu li.page_item_has_children a.toggle.open {
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-bottom: 20px solid #e7e7e7;
   border-top: 0; }
 
-aside.left-off-canvas-menu li.page_item_has_children a.toggle.open:hover {
-  background-color: #008CBA; }
+aside.left-off-canvas-menu li.page_item_has_children:hover a.toggle.open {
+  border-left: 15px solid transparent;
+  border-right: 15px solid transparent;
+  border-bottom: 20px solid #008CBA;
+  border-top: 0; }
 
 aside.left-off-canvas-menu ul.children {
   display: none; }
@@ -6616,103 +6722,4 @@ a[href^=tel] {
   color: inherit;
   text-decoration: none; }
 
-/* */
-/* Images */
-img.aligncenter {
-  display: block;
-  clear: both;
-  float: none;
-  padding: 0;
-  margin-left: auto;
-  margin-right: auto; }
-
-img.alignright {
-  padding: 0;
-  margin: 0 0 6px 11px;
-  display: inline; }
-
-blockquote.alignleft, img.alignleft, .wp-caption.alignleft {
-  margin: 0.4375rem 2.1875rem 0.4375rem 0; }
-
-blockquote.alignright, img.alignright, .wp-caption.alignright {
-  margin: 0.4375rem 0 0.4375rem 2.1875rem; }
-
-img.alignleft {
-  padding: 0;
-  /*    margin: 0 11px 6px 0;*/
-  display: inline; }
-
-img.alignleft, img.alignright, img.aligncenter, div.wp-caption img {
-  border: 1px solid #008000; }
-
-.alignright {
-  float: right; }
-
-.alignnone {
-  float: none; }
-
-.alignleft {
-  float: left; }
-
-.wp-caption {
-  background: #008000;
-  width: auto; }
-
-.wp-caption-text {
-  font-family: Open Sans, sans-serif;
-  font-size: 9px !important;
-  color: #fff;
-  font-style: italic;
-  margin: 0;
-  padding: 0 5px; }
-
-.gallery-one-title {
-  height: 45px;
-  font-size: 0.8em;
-  text-align: center;
-  font-family: sans-serif;
-  padding: 5px; }
-
-.gallery-holder {
-  margin: 10px 0 20px 0; }
-
-@media (max-width: 640px) {
-  img.alignright, img.alignleft, img.aligncenter {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    float: none;
-    text-align: center; }
-  div.wp-caption.alignright, div.wp-caption.alignleft {
-    margin-left: auto;
-    margin-right: auto;
-    float: none;
-    text-align: center; }
-  div.wp-caption.aligncenter {
-    margin-left: auto;
-    margin-right: auto;
-    float: none;
-    text-align: center; }
-  div.wp-caption.alignnone {
-    float: none; }
-  div.wp-caption.alignright, div.wp-caption.alignleft, div.wp-caption.aligncenter {
-    width: 100%; } }
-
-@media (min-width: 40.063em) {
-  img.aligncenter, img.alignnone {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    float: none;
-    text-align: center; }
-  div.wp-caption.aligncenter {
-    margin-left: auto;
-    margin-right: auto;
-    float: none;
-    text-align: center; }
-  div.wp-caption.aligncenter {
-    width: 100%; }
-  div.wp-caption.alignnone {
-    float: none; } }
-
-/* End Images */
\ No newline at end of file
+/* */
\ No newline at end of file

diff --git a/scss/_structure.scss b/scss/_structure.scss
index 8c74f81..595a3da 100755 (executable)
--- a/scss/_structure.scss
+++ b/scss/_structure.scss
@@ -990,10 +990,7 @@ aside.left-off-canvas-menu .off-canvas-list ul li a:hover {
   color: black;
 }
 aside.left-off-canvas-menu li.page_item_has_children a.toggle {
-/*  background: url('../assets/cceoem-arrow-mmenu.png');
-  background-repeat: no-repeat;
-  background-position: 50% 3px;*/
-  @include off-canvas-arrow(down);
+  @include off-canvas-arrow(down, $secondary-color);
   font-size: 0;
   height: 0;
   line-height: 0;
@@ -1003,11 +1000,14 @@ aside.left-off-canvas-menu li.page_item_has_children a.toggle {
   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);
+    @include off-canvas-arrow(up, $secondary-color);
 }
-aside.left-off-canvas-menu li.page_item_has_children a.toggle.open:hover {
-    background-color: $primary-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 ul.children {
   display: none;

diff --git a/scss/mixins/_off-canvas-arrow.scss b/scss/mixins/_off-canvas-arrow.scss
index 9712a25..f7dc46f 100644 (file)
--- a/scss/mixins/_off-canvas-arrow.scss
+++ b/scss/mixins/_off-canvas-arrow.scss
@@ -1,13 +1,12 @@
-$direction: down;
-@mixin off-canvas-arrow($direction) {
+@mixin off-canvas-arrow($direction: down, $color: white) {
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
    @if $direction == 'up' {
-    border-bottom: 20px solid $secondary-color;
+    border-bottom: 20px solid $color;
     border-top: 0;
     // if width is not passed, or empty do this
    } @else {
-    border-top: 20px solid $secondary-color;
+    border-top: 20px solid $color;
     border-bottom: 0;
    }
 }
\ No newline at end of file