123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515 |
- // 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%,0,0);
- left: 0;
- }
- @if $position == right {
- @include translate3d(100%,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;
- // removed for now till chrome fixes backface issue
- @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 { text-align: left; }
- &.right { text-align: right; }
- }
- // 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, &.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);
- }
- }
- @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);
- }
- }
- }
|