155 lines
3.0 KiB
SCSS
155 lines
3.0 KiB
SCSS
/*!
|
|
* Slidebars - A jQuery Framework for Off-Canvas Menus and Sidebars
|
|
* Version: 2.0.2
|
|
* Url: http://www.adchsm.com/slidebars/
|
|
* Author: Adam Charles Smith
|
|
* Author url: http://www.adchsm.com/
|
|
* License: MIT
|
|
* License url: http://www.adchsm.com/slidebars/license/
|
|
*/
|
|
|
|
/**
|
|
* Box Model, Html & Body
|
|
*/
|
|
|
|
html, body, [canvas=container], [off-canvas] {
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/**
|
|
* Canvas
|
|
*/
|
|
|
|
[canvas] {
|
|
z-index: 1;
|
|
}
|
|
|
|
[canvas=container] {
|
|
width: 100%;
|
|
//height: 100%;
|
|
min-height: 100%;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
background-color: white; /* Basic background color, overwrite this in your own css. */
|
|
-webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */
|
|
}
|
|
|
|
[canvas=container]:before, [canvas=container]:after {
|
|
clear: both;
|
|
content: '';
|
|
display: table;
|
|
}
|
|
|
|
/**
|
|
* Off-Canavs
|
|
*/
|
|
|
|
[off-canvas] {
|
|
display: none;
|
|
position: fixed;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
background-color: black; /* Basic background color, overwrite this in your own css. */
|
|
color: white; /* Basic colors, overwrite this in your own css. */
|
|
-webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */
|
|
}
|
|
|
|
[off-canvas*=top] {
|
|
width: 100%;
|
|
height: 255px;
|
|
top: 0;
|
|
}
|
|
|
|
[off-canvas*=right] {
|
|
width: 255px;
|
|
height: 100%;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
[off-canvas*=bottom] {
|
|
width: 100%;
|
|
height: 255px;
|
|
bottom: 0;
|
|
}
|
|
|
|
[off-canvas*=left] {
|
|
width: 255px;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
[off-canvas*=reveal] {
|
|
z-index: 0;
|
|
}
|
|
|
|
[off-canvas*=push] {
|
|
z-index: 1;
|
|
}
|
|
|
|
[off-canvas*=overlay] {
|
|
z-index: 9999;
|
|
}
|
|
|
|
[off-canvas*=shift] {
|
|
z-index: 0;
|
|
}
|
|
|
|
/**
|
|
* Animation
|
|
*/
|
|
|
|
[canvas], [off-canvas] {
|
|
-webkit-transform: translate( 0px, 0px );
|
|
-ms-transform: translate( 0px, 0px );
|
|
transform: translate( 0px, 0px );
|
|
-webkit-transition: -webkit-transform 300ms;
|
|
transition: transform 300ms ease-in-out;
|
|
-webkit-backface-visibility: hidden; /* Prevents flickering, may be removed if experiencing problems with fixed background images in Chrome. */
|
|
}
|
|
|
|
[off-canvas*=shift][off-canvas*=top] {
|
|
-webkit-transform: translate( 0px, 50% );
|
|
transform: translate( 0px, 50% );
|
|
}
|
|
|
|
[off-canvas*=shift][off-canvas*=right] {
|
|
-webkit-transform: translate( -50%, 0px );
|
|
transform: translate( -50%, 0px );
|
|
}
|
|
|
|
[off-canvas*=shift][off-canvas*=bottom] {
|
|
-webkit-transform: translate( 0px, -50% );
|
|
transform: translate( 0px, -50% );
|
|
}
|
|
|
|
[off-canvas*=shift][off-canvas*=left] {
|
|
-webkit-transform: translate( 50%, 0px );
|
|
transform: translate( 50%, 0px );
|
|
}
|
|
|
|
/**
|
|
* Print
|
|
*/
|
|
|
|
@media print {
|
|
[canvas] {
|
|
-webkit-transform: translate( 0px, 0px ) !important;
|
|
-ms-transform: translate( 0px, 0px ) !important;
|
|
transform: translate( 0px, 0px ) !important;
|
|
}
|
|
|
|
[off-canvas] {
|
|
display: none !important;
|
|
}
|
|
} |