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

#822 drawer checkpoint with overlay marker classes, before trying to reduce unnecessary code generation.

Browse Source
This commit is contained in:
Kevin Ross 2016-01-15 14:56:11 -06:00
parent ae7a1ca279
commit 798a397b4f
3 changed files with 59 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
scss/_drawer.scss
View File

@ -117,7 +117,10 @@
@each $side in (left right) {
&.mdb-drawer-fixed-#{$side}:not(.mdb-drawer-closed) {
// 1. Push - drawer will push the header and content
// 1. Push - drawer will push the header and content (default behavior)
&,
&.mdb-drawer-push {
> .mdb-layout-header {
width: calc(100% - #{$mdb-layout-drawer-size});
margin-#{$side}: $mdb-layout-drawer-size;
@ -130,9 +133,10 @@
> .mdb-layout-content {
margin-#{$side}: $mdb-layout-drawer-size;
}
}
// 2. Overlay - drawer will overlay content/header push at the pre-configured breakpoint
@include media-breakpoint-down($mdb-layout-drawer-x-overlay-breakpoint) {
// 2. Overlay - drawer will overlay content/header at the pre-configured breakpoint OR if marked as mdb-drawer-overlay
@include media-breakpoint-down-or($mdb-layout-drawer-x-overlay-breakpoint, "&.mdb-drawer-overlay") {
> .mdb-layout-header,
> .mdb-layout-content {
width: 100%;
@ -142,6 +146,12 @@
}
}
}
}
// top bottom
#{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
// mdb-drawer-fixed-(top and bottom) styles
@each $side in (top bottom) {

1
scss/_mixins.scss
View File

@ -1,4 +1,5 @@
@import "mixins/utilities";
@import "mixins/breakpoints";
@import "mixins/animations";
@import "mixins/type";
@import "mixins/drawer";

34
scss/mixins/_breakpoints.scss Normal file
View File

@ -0,0 +1,34 @@
// case where behavior is responsive, or with a marker class
@mixin media-breakpoint-down-or($breakpoint, $name) {
#{unquote($name)} {
@content
}
@include media-breakpoint-down($breakpoint) {
@content
}
}
// case where behavior is responsive, or with a marker class
@mixin media-breakpoint-up-or($breakpoint, $name) {
#{unquote($name)} {
@content
}
@include media-breakpoint-up($breakpoint) {
@content
}
}
// Name of the previous breakpoint, or null
//
// >> breakpoint-next(sm)
// xs
// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
// xs
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
// xs
@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@return if($n > 1, nth($breakpoint-names, $n - 1), null);
}