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

#822 drawer overlay below breakpoint

Browse Source
This commit is contained in:
Kevin Ross 2016-01-15 11:38:29 -06:00
parent 344fbb2357
commit 0fdc0f8329
5 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/examples/dashboard/example.js
View File

@ -29,7 +29,7 @@ function setDrawerPosition(position){
var $container = $('.mdb-layout-container') var $container = $('.mdb-layout-container')
// once clicked, just do away with responsive marker // once clicked, just do away with responsive marker
$container.removeClass('mdb-drawer-open-md') //$container.removeClass('mdb-drawer-open-md')
var $icon = $(this).find('.material-icons') var $icon = $(this).find('.material-icons')
if($icon.text() == 'visibility_off'){ if($icon.text() == 'visibility_off'){

11
scss/_drawer.scss
View File

@ -36,6 +36,7 @@
// Sizing and positioning below here // Sizing and positioning below here
// //
// 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. // 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.
// These should definitely be passed in as args: $mdb-layout-drawer-x-overlay-breakpoint, $mdb-layout-drawer-size
// for left or right drawers, setup widths, heights and positions // for left or right drawers, setup widths, heights and positions
@each $side in (left right) { @each $side in (left right) {
@ -119,6 +120,16 @@
> .mdb-layout-content { > .mdb-layout-content {
margin-#{$side}: $mdb-layout-drawer-size; margin-#{$side}: $mdb-layout-drawer-size;
} }
// switch drawer to overlay instead of a content/header push at the pre-configured breakpoint
@include media-breakpoint-down($mdb-layout-drawer-x-overlay-breakpoint) {
> .mdb-layout-header,
> .mdb-layout-content {
width: 100%;
margin-#{$side}: 0;
overflow: hidden;
}
}
} }
} }

2
scss/_layout.scss
View File

@ -26,7 +26,7 @@
// Header layout (fixed top), belongs in a mdb-layout-container // Header layout (fixed top), belongs in a mdb-layout-container
.mdb-layout-header { .mdb-layout-header {
// FIXME: it would be nice to stick this directly on a .navbar, but .navbars are not flex ready, so this is relegated to be a container at this time. // FIXME: it would be nice to stick this directly on a .navbar, but .navbars are not flex ready, so this is relegated to be a container at this time.
z-index: 2; // above content z-index: 3;
display: flex; display: flex;
width: 100%; width: 100%;
max-height: 1000px; max-height: 1000px;

1
scss/_navbar.scss
View File

@ -1,4 +1,5 @@
.navbar { .navbar {
margin-bottom: .25rem; // required to provide space for the shadow to render (need is visible in mobile drawer overlay)
border: 0; border: 0;
border-radius: 0; border-radius: 0;
@include shadow-2dp(); @include shadow-2dp();

3
scss/variables/_drawer.scss
View File

@ -2,5 +2,8 @@
$mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default; $mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default;
$mdb-layout-drawer-text-color: rgba($grey-800, 1) !default; $mdb-layout-drawer-text-color: rgba($grey-800, 1) !default;
// when media-breakpoint-down(md), make the drawer overlay instead of push the content/header (left right)
$mdb-layout-drawer-x-overlay-breakpoint: md;
// Sizing // Sizing
$mdb-layout-drawer-size: 240px !default; $mdb-layout-drawer-size: 240px !default;