mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-02 12:54:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

#822 support left and right drawers

Browse Source
This commit is contained in:
Kevin Ross 2016-01-14 17:23:03 -06:00
parent bf0ce02782
commit e9d202395e
1 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
scss/_drawer.scss
View File

@ -6,7 +6,6 @@
.mdb-layout-drawer {
position: absolute;
top: 0;
left: 0;
z-index: 5; // over a header and content
box-sizing: border-box;
display: flex;
@ -48,20 +47,28 @@
width: $mdb-layout-drawer-width;
}
// initial position of drawer (closed)
.mdb-drawer-fixed-left {
// Responsive Drawer Width
> .mdb-layout-drawer {
transform: translateX(-$mdb-layout-drawer-width - 10px); // initially way off screen
left: 0;
transform: translateX(-$mdb-layout-drawer-width - 10px); // initial position of drawer (closed), way off screen
}
// Responsive Content with fixed drawer
> .mdb-layout-content {
margin-left: 0;
}
}
.mdb-drawer-fixed-right {
> .mdb-layout-drawer {
right: 0;
transform: translateX($mdb-layout-drawer-width + 10px); // initial position of drawer (closed), way off screen
}
> .mdb-layout-content {
margin-right: 0;
}
}
// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.mdb-drawer-open')), as well
// as responsive sizes (i.e. mdb-drawer-open-md will open once the browser is wider than 768px).
//
@ -77,24 +84,25 @@
$name: "&";
}
// e.g. &, &-sm, &-md, &-lg
#{unquote($name)} {
@include media-breakpoint-up($breakpoint) {
//
&.mdb-drawer-fixed-left {
// Responsive Header
> .mdb-layout-header {
width: calc(100% - #{$mdb-layout-drawer-width});
margin-left: $mdb-layout-drawer-width;
}
// Responsive Drawer Width
> .mdb-layout-drawer {
transform: translateX(0);
}
// mdb-drawer-fixed-(left and right) styles
@each $side in (left right) {
&.mdb-drawer-fixed-#{$side} {
> .mdb-layout-header {
width: calc(100% - #{$mdb-layout-drawer-width});
margin-#{$side}: $mdb-layout-drawer-width;
}
// Responsive Content with fixed drawer
> .mdb-layout-content {
margin-left: $mdb-layout-drawer-width;
> .mdb-layout-drawer {
transform: translateX(0);
}
> .mdb-layout-content {
margin-#{$side}: $mdb-layout-drawer-width;
}
}
}
}