jquery-drawer
Version:
Flexible drawer menu using jQuery, iScroll and CSS.
70 lines (57 loc) • 1.53 kB
CSS
/*!------------------------------------*\
Sidebar
\*!------------------------------------*/
.drawer--sidebar {
background-color: var(--drawer-bgColor);
}
.drawer--sidebar .drawer-contents {
background-color: var(--drawer-pageContents-bgColor);
}
@media (--drawer-viewport-md) {
.drawer--sidebar .drawer-hamburger {
display: none;
visibility: hidden;
}
.drawer--sidebar .drawer-nav {
display: block;
transform: none;
position: fixed;
width: var(--drawer-width-md);
height: 100%;
}
/*! Left */
.drawer--sidebar.drawer--left .drawer-nav {
left: 0;
border-right: 1px solid var(--drawer-borderColor);
}
.drawer--sidebar.drawer--left .drawer-contents {
margin-left: var(--drawer-width-md);
}
/*! Right */
.drawer--sidebar.drawer--right .drawer-nav {
right: 0;
border-left: 1px solid var(--drawer-borderColor);
}
.drawer--sidebar.drawer--right .drawer-contents {
margin-right: var(--drawer-width-md);
}
/*! container */
.drawer--sidebar .drawer-container {
max-width: var(--drawer-container-maxWidth-sm);
}
}
@media (--drawer-viewport-lg) {
.drawer--sidebar .drawer-nav {
width: var(--drawer-width-lg);
}
.drawer--sidebar.drawer--left .drawer-contents {
margin-left: var(--drawer-width-lg);
}
.drawer--sidebar.drawer--right .drawer-contents {
margin-right: var(--drawer-width-lg);
}
/*! container */
.drawer--sidebar .drawer-container {
max-width: var(--drawer-container-maxWidth-md);
}
}