diff options
Diffstat (limited to 'source/bower_components/foundation/scss/foundation/components/_offcanvas.scss')
| -rw-r--r-- | source/bower_components/foundation/scss/foundation/components/_offcanvas.scss | 513 |
1 files changed, 513 insertions, 0 deletions
diff --git a/source/bower_components/foundation/scss/foundation/components/_offcanvas.scss b/source/bower_components/foundation/scss/foundation/components/_offcanvas.scss new file mode 100644 index 0000000..068d94a --- /dev/null +++ b/source/bower_components/foundation/scss/foundation/components/_offcanvas.scss @@ -0,0 +1,513 @@ +// Foundation by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +@import "global"; +@import "type"; + +// Off Canvas Tab Bar Variables +$include-html-off-canvas-classes: $include-html-classes !default; + +$tabbar-bg: $oil !default; +$tabbar-height: rem-calc(45) !default; +$tabbar-icon-width: $tabbar-height !default; +$tabbar-line-height: $tabbar-height !default; +$tabbar-color: $white !default; +$tabbar-middle-padding: 0 rem-calc(10) !default; + +// Off Canvas Divider Styles +$tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%) !default; +$tabbar-right-section-border: $tabbar-left-section-border; + + +// Off Canvas Tab Bar Headers +$tabbar-header-color: $white !default; +$tabbar-header-weight: $font-weight-bold !default; +$tabbar-header-line-height: $tabbar-height !default; +$tabbar-header-margin: 0 !default; + +// Off Canvas Menu Variables +$off-canvas-width: rem-calc(250) !default; +$off-canvas-bg: $oil !default; +$off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%) !default; + +// Off Canvas Menu List Variables +$off-canvas-label-padding: 0.3rem rem-calc(15) !default; +$off-canvas-label-color: $aluminum !default; +$off-canvas-label-text-transform: uppercase !default; +$off-canvas-label-font-size: rem-calc(12) !default; +$off-canvas-label-font-weight: $font-weight-bold !default; +$off-canvas-label-bg: $tuatara !default; +$off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default; +$off-canvas-label-border-bottom: none !default; +$off-canvas-label-margin:0 !default; +$off-canvas-link-padding: rem-calc(10, 15) !default; +$off-canvas-link-color: rgba($white, 0.7) !default; +$off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%) !default; +$off-canvas-back-bg: #444 !default; +$off-canvas-back-border-top: $off-canvas-label-border-top !default; +$off-canvas-back-border-bottom: $off-canvas-label-border-bottom !default; +$off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%) !default; +$off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default; +$off-canvas-back-hover-border-bottom: none !default; + +// Off Canvas Menu Icon Variables +$tabbar-menu-icon-color: $white !default; +$tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%) !default; + +$tabbar-menu-icon-text-indent: rem-calc(35) !default; +$tabbar-menu-icon-width: $tabbar-icon-width !default; +$tabbar-menu-icon-height: $tabbar-height !default; +$tabbar-menu-icon-padding: 0 !default; + +$tabbar-hamburger-icon-width: rem-calc(16) !default; +$tabbar-hamburger-icon-left: false !default; +$tabbar-hamburger-icon-top: false !default; +$tabbar-hamburger-icon-thickness: 1px !default; +$tabbar-hamburger-icon-gap: 6px !default; + +// Off Canvas Back-Link Overlay +$off-canvas-overlay-transition: background 300ms ease !default; +$off-canvas-overlay-cursor: pointer !default; +$off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5) !default; +$off-canvas-overlay-background: rgba($white, 0.2) !default; +$off-canvas-overlay-background-hover: rgba($white, 0.05) !default; + +// Transition Variables +$menu-slide: "transform 500ms ease" !default; + + +// MIXINS +// Remove transition flicker on phones +@mixin kill-flicker { + // -webkit-transform: translateZ(0x); + -webkit-backface-visibility: hidden; +} + +// Basic properties for the content wraps +@mixin wrap-base { + position: relative; + width: 100%; +} + +@mixin translate3d($tx,$ty,$tz) { + -ms-transform: translate($tx,$ty); + -webkit-transform: translate3d($tx,$ty,$tz); + -moz-transform: translate3d($tx,$ty,$tz); + -ms-transform: translate3d($tx,$ty,$tz); + -o-transform: translate3d($tx,$ty,$tz); + transform: translate3d($tx,$ty,$tz) +} + +// basic styles for off-canvas menu container +@mixin off-canvas-menu($position) { + @include kill-flicker; + * { @include kill-flicker; } + width: $off-canvas-width; + top: 0; + bottom: 0; + position: absolute; + overflow-x: hidden; + overflow-y: auto; + background: $off-canvas-bg; + z-index: 1001; + box-sizing: content-box; + transition: transform 500ms ease 0s; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + + @if $position == left { + @include translate3d(-100.5%,0,0); + left: 0; + } + @if $position == right { + @include translate3d(100.5%,0,0); + right: 0; + } +} + +// OFF CANVAS WRAP +// Wrap visible content and prevent scroll bars +@mixin off-canvas-wrap { + @include kill-flicker; + @include wrap-base; + overflow: hidden; + &.move-right, + &.move-left { min-height: 100%; -webkit-overflow-scrolling: touch; } +} + +// INNER WRAP +// Main content area that moves to reveal the off-canvas nav +@mixin inner-wrap { + @include kill-flicker; + @include wrap-base; + @include clearfix; + -webkit-transition: -webkit-#{$menu-slide}; + -moz-transition: -moz-#{$menu-slide}; + -ms-transition: -ms-#{$menu-slide}; + -o-transition: -o-#{$menu-slide}; + transition: #{$menu-slide}; +} + +// TAB BAR +// This is the tab bar base +@mixin tab-bar-base { + @include kill-flicker; + + // base styles + background: $tabbar-bg; + color: $tabbar-color; + height: $tabbar-height; + line-height: $tabbar-line-height; + + // make sure it's below the .exit-off-canvas link + position: relative; + // z-index: 999; + + // Typography + h1,h2,h3,h4,h5,h6 { + color: $tabbar-header-color; + font-weight: $tabbar-header-weight; + line-height: $tabbar-header-line-height; + margin: $tabbar-header-margin; + } + h1,h2,h3,h4 { font-size: $h5-font-size; } +} + +// SMALL SECTIONS +// These are small sections on the left and right that contain the off-canvas toggle buttons; +@mixin tabbar-small-section($position) { + width: $tabbar-icon-width; + height: $tabbar-height; + position: absolute; + top: 0; + @if $position == left { + border-right: $tabbar-left-section-border; + // box-shadow: 1px 0 0 scale-color($tabbar-bg, $lightness: 13%); + left: 0; + } + @if $position == right { + border-left: $tabbar-right-section-border; + // box-shadow: -1px 0 0 scale-color($tabbar-bg, $lightness: -50%); + right:0; + } +} + +@mixin tab-bar-section { + padding: $tabbar-middle-padding; + position: absolute; + text-align: center; + height: $tabbar-height; + top: 0; + @media #{$medium-up} { + &.left, &.right { text-align: left; } + } + + // still need to make these non-presentational + &.left { + left: 0; + right: $tabbar-icon-width; + } + &.right { + left: $tabbar-icon-width; + right: 0; + } + &.middle { + left: $tabbar-icon-width; + right: $tabbar-icon-width; + } +} + +// OFF CANVAS LIST +// This is the list of links in the off-canvas menu +@mixin off-canvas-list { + list-style-type: none; + padding:0; + margin:0; + + li { + label { + display: block; + padding: $off-canvas-label-padding; + color: $off-canvas-label-color; + text-transform: $off-canvas-label-text-transform; + font-size: $off-canvas-label-font-size; + font-weight: $off-canvas-label-font-weight; + background: $off-canvas-label-bg; + border-top: $off-canvas-label-border-top; + border-bottom: $off-canvas-label-border-bottom; + margin: $off-canvas-label-margin; + } + a { + display: block; + padding: $off-canvas-link-padding; + color: $off-canvas-link-color; + border-bottom: $off-canvas-link-border-bottom; + transition: background 300ms ease; + &:hover { + background: $off-canvas-bg-hover; + } + } + } + +} + +// BACK LINK +// This is an overlay that, when clicked, will toggle off the off canvas menu +@mixin back-link { + @include kill-flicker; + + transition: $off-canvas-overlay-transition; + cursor: $off-canvas-overlay-cursor; + box-shadow: $off-canvas-overlay-box-shadow; + + // fill the screen + display: block; + position: absolute; + background: $off-canvas-overlay-background; + top: 0; + bottom: 0; + left:0; + right:0; + z-index: 1002; + -webkit-tap-highlight-color: rgba(0,0,0,0); + + @media #{$medium-up} { + &:hover { + background: $off-canvas-overlay-background-hover; + } + } +} + +// +// DEFAULT CLASSES +// +@include exports("offcanvas") { + @if $include-html-off-canvas-classes { + + .off-canvas-wrap { @include off-canvas-wrap; } + .inner-wrap { @include inner-wrap; } + + .tab-bar { @include tab-bar-base; } + + .left-small { @include tabbar-small-section($position: left); } + .right-small { @include tabbar-small-section($position: right); } + + .tab-bar-section { @include tab-bar-section; } + + // MENU BUTTON + // This is a little bonus. You don't need it for off canvas to work. Mixins to be written in the future. + .tab-bar .menu-icon { + text-indent: $tabbar-menu-icon-text-indent; + width: $tabbar-menu-icon-width; + height: $tabbar-menu-icon-height; + display: block; + padding: $tabbar-menu-icon-padding; + color: $tabbar-menu-icon-color; + position: relative; + transform: translate3d(0,0,0); + + // @include for the hamburger menu-icon + // + // Arguments as follows: ($width, $left, $top, $thickness, $gap, $color, $hover-color) + // $width - Width of hamburger icon in rem Default: $tabbar-hamburger-icon-width. + // $left - If false, icon will be centered horizontally || explicitly set value in rem Default: $tabbar-hamburger-icon-left= False + // $top - If false, icon will be centered vertically || explicitly set value in rem Default: = False + // $thickness - thickness of lines in hamburger icon, set value in px Default: $tabbar-hamburger-icon-thickness = 1px + // $gap - spacing between the lines in hamburger icon, set value in px Default: $tabbar-hamburger-icon-gap = 6px + // $color - icon color Default: $tabbar-menu-icon-color + // $hover-color - icon color when hovered Default: $tabbar-menu-icon-hover + // $offcanvas - Set to true + @include hamburger($tabbar-hamburger-icon-width, $tabbar-hamburger-icon-left, $tabbar-hamburger-icon-top, $tabbar-hamburger-icon-thickness, $tabbar-hamburger-icon-gap, $tabbar-menu-icon-color, $tabbar-menu-icon-hover, true) + } + + .left-off-canvas-menu { @include off-canvas-menu($position: left); } + .right-off-canvas-menu { @include off-canvas-menu($position: right); } + + ul.off-canvas-list { @include off-canvas-list; } + + + // ANIMATION CLASSES + // These classes are added with JS and trigger the actual animation. + .move-right { + > .inner-wrap { + @include translate3d($off-canvas-width,0,0); + } + .exit-off-canvas { @include back-link;} + } + + .move-left { + > .inner-wrap { + @include translate3d(-($off-canvas-width),0,0); + + } + .exit-off-canvas { @include back-link; } + } + .offcanvas-overlap { + .left-off-canvas-menu, .right-off-canvas-menu { + -ms-transform: none; + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + transform: none; + z-index: 1003; + } + .exit-off-canvas { @include back-link; } + } + .offcanvas-overlap-left { + .right-off-canvas-menu { + -ms-transform: none; + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + transform: none; + z-index: 1003; + } + .exit-off-canvas { @include back-link; } + } + .offcanvas-overlap-right { + .left-off-canvas-menu { + -ms-transform: none; + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + transform: none; + z-index: 1003; + } + .exit-off-canvas { @include back-link; } + } + + // Older browsers + .no-csstransforms { + .left-off-canvas-menu { left: -($off-canvas-width); } + .right-off-canvas-menu { right: -($off-canvas-width); } + + .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); + } + } + } + @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: 0.5rem; + } @else { + margin-right: 0.5rem; + } + } + @if $position == right { + content: "\BB"; + @if $text-direction == rtl { + margin-right: 0.5rem; + } @else { + margin-left: 0.5rem; + } + } + display: inline; +} + +@if $include-html-off-canvas-classes { + .left-submenu { + @include off-canvas-submenu($position: left); + &.move-right { + @include translate3d(0%,0,0); + } + } + + .right-submenu { + @include off-canvas-submenu($position: right); + &.move-left { + @include translate3d(0%,0,0); + } + } + + @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); + } + } +} |