mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-02 21:04: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

34
scss/_drawer.scss
View File

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