Permalink
Fetching contributors…
Cannot retrieve contributors at this time
170 lines (145 sloc) 5.11 KB
/**
* @copyright 2010-2015, The Titon Project
* @license http://opensource.org/licenses/BSD-3-Clause
* @link http://titon.io
*/
@import "../common";
@include export("off-canvas") {
#{$offCanvas-class} {
position: fixed;
overflow: auto;
top: 0;
height: 100%;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: transform $offCanvas-transition, opacity $offCanvas-transition, visibility $offCanvas-transition;
-webkit-overflow-scrolling: touch;
}
#{$offCanvas-class-content} {
position: relative;
width: 100%;
max-width: 100%;
z-index: 2;
transition: transform $offCanvas-transition, padding $offCanvas-transition;
transform: translate(0, 0);
}
#{$offCanvas-class-wrapper} {
position: relative;
overflow-x: hidden;
}
//-------------------- Modifiers --------------------//
#{$offCanvas-class-modifier-left} {
left: 0;
width: $offCanvas-left-width;
transform: translate(-100%, 0);
&.show { transform: translate(0, 0) !important; }
}
#{$offCanvas-class-modifier-right} {
right: 0;
width: $offCanvas-right-width;
transform: translate(100%, 0);
&.show { transform: translate(0, 0) !important; }
}
//-------------------- Animations --------------------//
#{$offCanvas-class-wrapper} {
@if index($offCanvas-animations, "on-top") or index($offCanvas-animations, "squish") {
&.on-top,
&.squish {
#{$offCanvas-class} { z-index: 3; }
}
}
@if index($offCanvas-animations, "push-reveal") {
&.push-reveal {
#{$offCanvas-class-modifier-left} { transform: translate(-50%, 0); }
#{$offCanvas-class-modifier-right} { transform: translate(50%, 0); }
}
}
@if index($offCanvas-animations, "reverse-push") {
&.reverse-push {
#{$offCanvas-class-modifier-left} { transform: translate(50%, 0); }
#{$offCanvas-class-modifier-right} { transform: translate(-50%, 0); }
}
}
@if index($offCanvas-animations, "reveal") {
&.reveal {
#{$offCanvas-class} { transform: translate(0, 0); }
}
}
@if index($offCanvas-animations, "push-down") {
&.push-down {
#{$offCanvas-class-modifier-left},
#{$offCanvas-class-modifier-right} { transform: translate(0, -100%); }
}
}
@if index($offCanvas-animations, "push") or
index($offCanvas-animations, "push-reveal") or
index($offCanvas-animations, "push-down") or
index($offCanvas-animations, "reverse-push") or
index($offCanvas-animations, "reveal") {
&.push,
&.push-reveal,
&.push-down,
&.reverse-push,
&.reveal {
&.move-left {
#{$offCanvas-class-content} {
transform: translate(-$offCanvas-right-width, 0);
}
}
&.move-right {
#{$offCanvas-class-content} {
transform: translate($offCanvas-left-width, 0);
}
}
}
}
@if index($offCanvas-animations, "squish") {
&.squish {
&.move-left {
#{$offCanvas-class-content} {
padding-right: $offCanvas-right-width;
}
}
&.move-right {
#{$offCanvas-class-content} {
padding-left: $offCanvas-left-width;
}
}
}
}
}
//-------------------- Responsive --------------------//
@include if-max($offCanvas-mobile-breakpoint) {
#{$offCanvas-class-modifier-left} {
width: $offCanvas-left-width-mobile;
}
#{$offCanvas-class-modifier-right} {
width: $offCanvas-right-width-mobile;
}
@if index($offCanvas-animations, "push") or
index($offCanvas-animations, "push-reveal") or
index($offCanvas-animations, "push-down") or
index($offCanvas-animations, "reverse-push") or
index($offCanvas-animations, "reveal") {
#{$offCanvas-class-wrapper} {
&.push,
&.push-reveal,
&.push-down,
&.reverse-push,
&.reveal {
&.move-left {
#{$offCanvas-class-content} {
transform: translate(-$offCanvas-right-width-mobile, 0);
}
}
&.move-right {
#{$offCanvas-class-content} {
transform: translate($offCanvas-left-width-mobile, 0);
}
}
}
}
}
}
}