_offcanvas.scss in TokiCLI-0.3.0

- old
+ new

@@ -6,66 +6,74 @@
 @import "type";
 
 // Off Canvas Tab Bar Variables
 $include-html-off-canvas-classes: $include-html-classes !default;
 
-$tabbar-bg: #333 !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: #fff !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: #fff !default;
+$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: #333 !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: #999 !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: #444 !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(#FFF, 0.7) !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: #FFF !default;
+$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-height !default;
+$tabbar-menu-icon-width: $tabbar-icon-width !default;
 $tabbar-menu-icon-height: $tabbar-height !default;
-$tabbar-menu-icon-line-height: rem-calc(33) !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;
-$tapbar-hamburger-icon-thickness: 1px !default;
-$tapbar-hamburger-icon-gap: 6px !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(#000, 0.5), 4px 0 4px rgba(#000, 0.5) !default;
-$off-canvas-overlay-background: rgba(#FFF, 0.2) !default;
-$off-canvas-overlay-background-hover: rgba(#FFF, 0.05) !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;
 
 
@@ -97,22 +105,25 @@
   * { @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);
+    @include translate3d(-100.5%,0,0);
     left: 0;
   }
   @if $position == right {
-    @include translate3d(100%,0,0);
+    @include translate3d(100.5%,0,0);
     right: 0;
   }
 }
 
 // OFF CANVAS WRAP
@@ -145,13 +156,13 @@
 
   // base styles
   background: $tabbar-bg;
   color: $tabbar-color;
   height: $tabbar-height;
-  line-height: $tabbar-height;
+  line-height: $tabbar-line-height;
 
-  // make sure it's below the .exit-offcanvas link
+  // make sure it's below the .exit-off-canvas link
   position: relative;
   // z-index: 999;
 
   // Typography
   h1,h2,h3,h4,h5,h6 {
@@ -164,11 +175,11 @@
 }
 
 // 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-height;
+  width: $tabbar-icon-width;
   height: $tabbar-height;
   position: absolute;
   top: 0;
   @if $position == left {
     border-right: $tabbar-left-section-border;
@@ -186,24 +197,26 @@
   padding: $tabbar-middle-padding;
   position: absolute;
   text-align: center;
   height: $tabbar-height;
   top: 0;
-  @media #{$medium-up} { text-align: left; }
+  @media #{$medium-up} {
+    &.left, &.right { text-align: left; }
+  }
 
   // still need to make these non-presentational
   &.left {
     left: 0;
-    right: $tabbar-height;
+    right: $tabbar-icon-width;
   }
   &.right {
-    left: $tabbar-height;
+    left: $tabbar-icon-width;
     right: 0;
   }
   &.middle {
-    left: $tabbar-height;
-    right: $tabbar-height;
+    left: $tabbar-icon-width;
+    right: $tabbar-icon-width;
   }
 }
 
 // OFF CANVAS LIST
 // This is the list of links in the off-canvas menu
@@ -212,13 +225,15 @@
   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;
@@ -226,12 +241,14 @@
     a {
       display: block;
       padding: $off-canvas-link-padding;
       color: $off-canvas-link-color;
       border-bottom: $off-canvas-link-border-bottom;
-      &:hover { background: scale-color($tabbar-bg, $lightness: -30%); }
       transition: background 300ms ease;
+      &:hover {
+        background: $off-canvas-bg-hover;
+      }
     }
   }
 
 }
 
@@ -280,14 +297,13 @@
 
     // 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-height;
-      height: $tabbar-height;
+      width: $tabbar-menu-icon-width;
+      height: $tabbar-menu-icon-height;
       display: block;
-      line-height: $tabbar-menu-icon-line-height;
       padding: $tabbar-menu-icon-padding;
       color: $tabbar-menu-icon-color;
       position: relative;
       transform: translate3d(0,0,0);
 
@@ -295,16 +311,16 @@
       //
       // 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: $tapbar-hamburger-icon-thickness = 1px
-      // $gap - spacing between the lines in hamburger icon, set value in px Default: $tapbar-hamburger-icon-gap = 6px
+      // $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, $tapbar-hamburger-icon-thickness, $tapbar-hamburger-icon-gap, $tabbar-menu-icon-color, $tabbar-menu-icon-hover, 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); }
 
@@ -334,22 +350,164 @@
         -moz-transform: none;
         -o-transform: none;
         transform: none;
         z-index: 1003;
       }
-      .exit-offcanvas-menu {
-        @include back-link;
-        z-index: 1002;
+      .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);
+    }
   }
 }