From 640a9a81798b1dcf4c4e43293f1a70e6e753e999 Mon Sep 17 00:00:00 2001 From: Steve Sutton Date: Wed, 25 Mar 2015 10:59:09 -0400 Subject: [PATCH] Add left off canvas navigation arrows --- scss/_left-off-canvas.scss | 88 ++++++++++++++++++++++++++++++++++++++ scss/app.scss | 5 ++- 2 files changed, 91 insertions(+), 2 deletions(-) create mode 100644 scss/_left-off-canvas.scss diff --git a/scss/_left-off-canvas.scss b/scss/_left-off-canvas.scss new file mode 100644 index 0000000..af670ab --- /dev/null +++ b/scss/_left-off-canvas.scss @@ -0,0 +1,88 @@ +/* for the mobile menu */ +aside.left-off-canvas-menu { + /*background: transparent;*/ + background-color: rgba(0, 0, 0, 0.7); + 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/scss/app.scss b/scss/app.scss index dfb448c..a07d467 100644 --- a/scss/app.scss +++ b/scss/app.scss @@ -1,8 +1,9 @@ @import "settings"; @import "foundation"; -@import "structure"; -@import "wordpress"; @import "mixins"; +@import "wordpress"; +@import "structure"; +@import "left-off-canvas"; // Or selectively include components // @import -- 2.17.1