mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-26 19:44:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

#822 booyah, top and bottom drawers!

Browse Source
This commit is contained in:
Kevin Ross 2016-01-14 17:50:09 -06:00
parent e9d202395e
commit 7788b824e0
2 changed files with 65 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
scss/_drawer.scss
View File

@ -1,15 +1,9 @@
// .mdb-drawer-fixed-left is a marker that both header and content respond to.
//WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!!
// Drawer.
.mdb-layout-drawer {
position: absolute;
top: 0;
z-index: 5; // over a header and content
box-sizing: border-box;
display: flex;
height: 100%;
max-height: 100%;
flex-direction: column;
@ -43,29 +37,51 @@
//
// TODO create a mixin for the below that can generate a named set of styles so that you can use multiple drawer sizes i.e. something like mdb-layout-drawer-100, mdb-drawer-fixed-right-100, etc.
.mdb-layout-drawer {
width: $mdb-layout-drawer-width;
}
// for left or right drawers, setup widths, heights and positions
@each $side in (left right) {
.mdb-drawer-fixed-#{$side} {
> .mdb-layout-drawer {
// position
top: 0;
#{$side}: 0;
.mdb-drawer-fixed-left {
> .mdb-layout-drawer {
left: 0;
transform: translateX(-$mdb-layout-drawer-width - 10px); // initial position of drawer (closed), way off screen
}
width: $mdb-layout-drawer-size;
height: 100%;
> .mdb-layout-content {
margin-left: 0;
@if $side == left {
transform: translateX(-$mdb-layout-drawer-size - 10px); // initial position of drawer (closed), way off screen
} @else {
transform: translateX($mdb-layout-drawer-size + 10px); // initial position of drawer (closed), way off screen
}
}
> .mdb-layout-content {
margin-#{$side}: 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
}
// for top or bottom drawers, setup widths, heights and positions
@each $side in (top bottom) {
.mdb-drawer-fixed-#{$side} {
> .mdb-layout-drawer {
// position
#{$side}: 0;
left: 0;
> .mdb-layout-content {
margin-right: 0;
width: 100%;
height: $mdb-layout-drawer-size;
@if $side == top {
transform: translateY(-$mdb-layout-drawer-size - 10px); // initial position of drawer (closed), way off screen
} @else {
transform: translateY($mdb-layout-drawer-size + 10px); // initial position of drawer (closed), way off screen
}
}
> .mdb-layout-content {
margin-#{$side}: 0;
}
}
}
@ -92,8 +108,8 @@
@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;
width: calc(100% - #{$mdb-layout-drawer-size});
margin-#{$side}: $mdb-layout-drawer-size;
}
> .mdb-layout-drawer {
@ -101,7 +117,29 @@
}
> .mdb-layout-content {
margin-#{$side}: $mdb-layout-drawer-width;
margin-#{$side}: $mdb-layout-drawer-size;
}
}
}
// mdb-drawer-fixed-(top and bottom) styles
@each $side in (top bottom) {
&.mdb-drawer-fixed-#{$side} {
> .mdb-layout-header {
//height: calc(100% - #{$mdb-layout-drawer-size});
@if $side == top { // only add margin-top on a header when the drawer is at the top
margin-#{$side}: $mdb-layout-drawer-size;
}
}
> .mdb-layout-drawer {
transform: translateY(0);
}
> .mdb-layout-content {
@if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom
margin-#{$side}: $mdb-layout-drawer-size;
}
}
}
}

2
scss/variables/_drawer.scss
View File

@ -3,4 +3,4 @@ $mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default;
$mdb-layout-drawer-text-color: rgba($grey-800, 1) !default;
// Sizing
$mdb-layout-drawer-width: 240px !default;
$mdb-layout-drawer-size: 240px !default;