From 713578c75383f1d9dbcc192faedba3ab688a717f Mon Sep 17 00:00:00 2001 From: Jaie Wilson Date: Thu, 26 Feb 2015 11:47:12 +1100 Subject: [PATCH] (chore): cleanup structure Move the mixins above the css classes and also move the .right-submen and text-direction inside the exports --- scss/foundation/components/_offcanvas.scss | 230 ++++++++++----------- 1 file changed, 114 insertions(+), 116 deletions(-) diff --git a/scss/foundation/components/_offcanvas.scss b/scss/foundation/components/_offcanvas.scss index 06c8a424a..11da4d164 100644 --- a/scss/foundation/components/_offcanvas.scss +++ b/scss/foundation/components/_offcanvas.scss @@ -285,6 +285,97 @@ $menu-slide: "transform 500ms ease" !default; } } +// +// Off-Canvas Submenu Classes +// +@mixin off-canvas-submenu($position) { + @include kill-flicker; + * { @include kill-flicker; } + width: $off-canvas-width; + top: 0; + bottom: 0; + position: absolute; + margin: 0; + overflow-x: hidden; + overflow-y: auto; + background: $off-canvas-bg; + z-index: 1002; + box-sizing: content-box; + -webkit-overflow-scrolling: touch; + @if $position == left { + @include translate3d(-100%,0,0); + left: 0; + } + @if $position == right { + @include translate3d(100%,0,0); + right: 0; + } + -webkit-transition: -webkit-#{$menu-slide}; + -moz-transition: -moz-#{$menu-slide}; + -ms-transition: -ms-#{$menu-slide}; + -o-transition: -o-#{$menu-slide}; + transition: #{$menu-slide}; + + //back button style like label + .back > a { + padding: $off-canvas-label-padding; + color: $off-canvas-label-color; + text-transform: $off-canvas-label-text-transform; + font-weight: $off-canvas-label-font-weight; + background: $off-canvas-back-bg; + border-top: $off-canvas-back-border-top; + border-bottom: $off-canvas-back-border-bottom; + &:hover { + background: $off-canvas-back-hover-bg; + border-top: $off-canvas-back-hover-border-top; + border-bottom: $off-canvas-back-hover-border-bottom; + } + margin: $off-canvas-label-margin; + @if $position == right { + @if $text-direction == rtl { + &:before { + @include icon-double-arrows($position: left); + } + } @else { + &:after { + @include icon-double-arrows($position: right); + } + } + } + @if $position == left { + @if $text-direction == rtl { + &:after { + @include icon-double-arrows($position: right); + } + } @else { + &:before { + @include icon-double-arrows($position: left); + } + } + } + } +} +//Left double angle quote or Right double angle quote chars +@mixin icon-double-arrows ($position) { + @if $position == left { + content: "\AB"; + @if $text-direction == rtl { + margin-left: .5rem; + } @else { + margin-right: .5rem; + } + } + @if $position == right { + content: "\BB"; + @if $text-direction == rtl { + margin-right: .5rem; + } @else { + margin-left: .5rem; + } + } + display: inline; +} + // // DEFAULT CLASSES // @@ -391,129 +482,36 @@ $menu-slide: "transform 500ms ease" !default; .move-left > .inner-wrap { right: $off-canvas-width; } .move-right > .inner-wrap { left: $off-canvas-width; } } - - } -} - -// -// Off-Canvas Submenu Classes -// -@mixin off-canvas-submenu($position) { - @include kill-flicker; - * { @include kill-flicker; } - width: $off-canvas-width; - top: 0; - bottom: 0; - position: absolute; - margin: 0; - overflow-x: hidden; - overflow-y: auto; - background: $off-canvas-bg; - z-index: 1002; - box-sizing: content-box; - -webkit-overflow-scrolling: touch; - @if $position == left { - @include translate3d(-100%,0,0); - left: 0; - } - @if $position == right { - @include translate3d(100%,0,0); - right: 0; - } - -webkit-transition: -webkit-#{$menu-slide}; - -moz-transition: -moz-#{$menu-slide}; - -ms-transition: -ms-#{$menu-slide}; - -o-transition: -o-#{$menu-slide}; - transition: #{$menu-slide}; - - //back button style like label - .back > a { - padding: $off-canvas-label-padding; - color: $off-canvas-label-color; - text-transform: $off-canvas-label-text-transform; - font-weight: $off-canvas-label-font-weight; - background: $off-canvas-back-bg; - border-top: $off-canvas-back-border-top; - border-bottom: $off-canvas-back-border-bottom; - &:hover { - background: $off-canvas-back-hover-bg; - border-top: $off-canvas-back-hover-border-top; - border-bottom: $off-canvas-back-hover-border-bottom; - } - margin: $off-canvas-label-margin; - @if $position == right { - @if $text-direction == rtl { - &:before { - @include icon-double-arrows($position: left); - } - } @else { - &:after { - @include icon-double-arrows($position: right); - } + + .left-submenu { + @include off-canvas-submenu($position: left); + &.move-right, &.offcanvas-overlap-right, &.offcanvas-overlap { + @include translate3d(0%,0,0); } } - @if $position == left { - @if $text-direction == rtl { - &:after { - @include icon-double-arrows($position: right); - } - } @else { - &:before { - @include icon-double-arrows($position: left); - } + + .right-submenu { + @include off-canvas-submenu($position: right); + &.move-left, &.offcanvas-overlap-left, &.offcanvas-overlap { + @include translate3d(0%,0,0); } } - } -} -//Left double angle quote or Right double angle quote chars -@mixin icon-double-arrows ($position) { - @if $position == left { - content: "\AB"; - @if $text-direction == rtl { - margin-left: .5rem; - } @else { - margin-right: .5rem; - } - } - @if $position == right { - content: "\BB"; + @if $text-direction == rtl { - margin-right: .5rem; + .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { + @include icon-double-arrows($position: left); + } + .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { + @include icon-double-arrows($position: right); + } } @else { - margin-left: .5rem; - } - } - display: inline; -} - -@if $include-html-off-canvas-classes { - .left-submenu { - @include off-canvas-submenu($position: left); - &.move-right, &.offcanvas-overlap-right, &.offcanvas-overlap { - @include translate3d(0%,0,0); - } - } - - .right-submenu { - @include off-canvas-submenu($position: right); - &.move-left, &.offcanvas-overlap-left, &.offcanvas-overlap { - @include translate3d(0%,0,0); + .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { + @include icon-double-arrows($position: right); + } + .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { + @include icon-double-arrows($position: left); + } } - } - @if $text-direction == rtl { - .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { - @include icon-double-arrows($position: left); - } - .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { - @include icon-double-arrows($position: right); - } - } @else { - .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { - @include icon-double-arrows($position: right); - } - .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { - @include icon-double-arrows($position: left); - } } } -- 2.47.2