mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-10-30 23:47:42 +03:00
#822 implementation of x overlay with a marker class (non-responsive)
This commit is contained in:
Kevin Ross
parent
798a397b4f
commit
59831c66f0
|
|
@ -9,7 +9,7 @@ js: example.js
|
||||||
<link href="example.css" rel="stylesheet">
|
<link href="example.css" rel="stylesheet">
|
||||||
|
|
||||||
<div class="mdb-layout-canvas">
|
<div class="mdb-layout-canvas">
|
||||||
<div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open-lg">
|
<div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg">
|
||||||
<header class="mdb-layout-header">
|
<header class="mdb-layout-header">
|
||||||
<!--
|
<!--
|
||||||
<div class="collapse" id="navbar-header">
|
<div class="collapse" id="navbar-header">
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// Implementation specification in https://github.com/FezVrasta/bootstrap-material-design/issues/822
|
||||||
|
|
||||||
// Drawer.
|
// Drawer.
|
||||||
.mdb-layout-drawer {
|
.mdb-layout-drawer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -89,96 +91,164 @@
|
||||||
// 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).
|
||||||
//
|
//
|
||||||
// To create these, we need iterate over the standard grid breakpoints, but we also need styles for the simpler
|
//
|
||||||
// `mdb-drawer-open` without a size (for triggered openings). Since the xs size is 0,
|
// mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
|
||||||
// instead of using `mdb-drawer-open-xs` (which is mostly meaningless), we can just use `mdb-drawer-open`
|
// We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-open`
|
||||||
// a.k.a always open.
|
// without a size (for triggered openings). Since the xs size is 0, instead of using `mdb-drawer-open-xs`
|
||||||
// Therefore, this will generate: mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
|
// (which is mostly meaningless), we create `mdb-drawer-open` meaning always open.
|
||||||
|
//
|
||||||
|
// NOTE: mdb-drawer-open-* uses media-breakpoint-up()
|
||||||
|
//
|
||||||
//
|
//
|
||||||
// mdb-drawer-closed
|
// mdb-drawer-closed
|
||||||
// Note that this also makes a provision for mdb-drawer-closed, a marker class that will _force_ the drawer closed,
|
// A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some
|
||||||
// regardless of the responsive class present. If (for some strange reason) both mdb-drawer-closed and mdb-drawer-open
|
// strange reason) both mdb-drawer-closed and mdb-drawer-open are present, it appears that the closed option wins.
|
||||||
// are present, it appears that the closed option wins.
|
|
||||||
//
|
//
|
||||||
.mdb-drawer-open {
|
//
|
||||||
|
// mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
|
||||||
|
// We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-overlay`.
|
||||||
|
// Since the xs size is 0, instead of using `mdb-drawer-overlay-xs`, we create `mdb-drawer-overlay` meaning always overlay.
|
||||||
|
//
|
||||||
|
// NOTE: mdb-drawer-overlay-* uses media-breakpoint-down() - this is because we usually want a responsive overlay to be used in small screen scenarios.
|
||||||
|
//
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Drawer open positioning, and style options (push is default, overlay is optional)
|
||||||
|
// - first eliminate positioning or sizing rules if the drawer is already forced closed (which is the default behavior above)
|
||||||
|
:not(.mdb-drawer-closed) {
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||||
|
|
||||||
|
// e.g. &, &-sm, &-md, &-lg
|
||||||
$name: "&-#{$breakpoint}";
|
$name: "&-#{$breakpoint}";
|
||||||
@if $breakpoint == xs {
|
@if $breakpoint == xs {
|
||||||
$name: "&";
|
$name: "&";
|
||||||
}
|
}
|
||||||
|
|
||||||
// e.g. &, &-sm, &-md, &-lg
|
&.mdb-drawer-open {
|
||||||
#{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
|
$name: "&-#{$breakpoint}";
|
||||||
|
@if $breakpoint == xs {
|
||||||
|
$name: "&";
|
||||||
|
}
|
||||||
|
// e.g. &, &-sm, &-md, &-lg
|
||||||
|
#{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
|
||||||
|
|
||||||
@include media-breakpoint-up($breakpoint) {
|
@include media-breakpoint-up($breakpoint) {
|
||||||
|
|
||||||
// mdb-drawer-fixed-(left and right) styles
|
// mdb-drawer-fixed-(left and right) styles
|
||||||
@each $side in (left right) {
|
@each $side in (left right) {
|
||||||
|
|
||||||
&.mdb-drawer-fixed-#{$side}:not(.mdb-drawer-closed) {
|
&.mdb-drawer-fixed-#{$side} {
|
||||||
|
|
||||||
// 1. Push - drawer will push the header and content (default behavior)
|
// 1. Push - drawer will push the header and content (default behavior)
|
||||||
&,
|
&,
|
||||||
&.mdb-drawer-push {
|
&.mdb-drawer-push {
|
||||||
> .mdb-layout-header {
|
> .mdb-layout-header {
|
||||||
width: calc(100% - #{$mdb-layout-drawer-size});
|
width: calc(100% - #{$mdb-layout-drawer-size});
|
||||||
margin-#{$side}: $mdb-layout-drawer-size;
|
margin-#{$side}: $mdb-layout-drawer-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .mdb-layout-drawer {
|
> .mdb-layout-drawer {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
> .mdb-layout-content {
|
> .mdb-layout-content {
|
||||||
margin-#{$side}: $mdb-layout-drawer-size;
|
margin-#{$side}: $mdb-layout-drawer-size;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// 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%;
|
|
||||||
margin-#{$side}: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// mdb-drawer-fixed-(top and bottom) styles
|
||||||
|
@each $side in (top bottom) {
|
||||||
|
|
||||||
|
&.mdb-drawer-fixed-#{$side} {
|
||||||
|
|
||||||
// top bottom
|
// 1. Push - drawer will push the header or content
|
||||||
#{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
|
> .mdb-layout-header {
|
||||||
|
//height: calc(100% - #{$mdb-layout-drawer-size});
|
||||||
// mdb-drawer-fixed-(top and bottom) styles
|
@if $side == top { // only add margin-top on a header when the drawer is at the top
|
||||||
@each $side in (top bottom) {
|
margin-#{$side}: $mdb-layout-drawer-size;
|
||||||
|
}
|
||||||
&.mdb-drawer-fixed-#{$side}:not(.mdb-drawer-closed) {
|
|
||||||
|
|
||||||
// 1. Push - drawer will push the header or content
|
|
||||||
> .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 {
|
> .mdb-layout-drawer {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
> .mdb-layout-content {
|
> .mdb-layout-content {
|
||||||
@if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom
|
@if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom
|
||||||
margin-#{$side}: $mdb-layout-drawer-size;
|
margin-#{$side}: $mdb-layout-drawer-size;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Overlay - left/right responsive overlay classes and marker class
|
||||||
|
//
|
||||||
|
@mixin drawer-x-overlay($side) {
|
||||||
|
> .mdb-layout-header,
|
||||||
|
> .mdb-layout-content {
|
||||||
|
width: 100%;
|
||||||
|
margin-#{$side}: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//@mixin drawer-y-overlay($side) {
|
||||||
|
// > .mdb-layout-header,
|
||||||
|
// > .mdb-layout-content {
|
||||||
|
// width: 100%;
|
||||||
|
// margin-#{$side}: 0;
|
||||||
|
// overflow: hidden;
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
|
||||||
|
&.mdb-drawer-overlay {
|
||||||
|
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
|
||||||
|
|
||||||
|
// x - left/right
|
||||||
|
@each $side in (left right) {
|
||||||
|
&.mdb-drawer-fixed-#{$side} {
|
||||||
|
|
||||||
|
@if $breakpoint == xs { // overlay marker class (non-responsive)
|
||||||
|
|
||||||
|
// Must double up on the .mdb-drawer-overlay class to increase specificity otherwise the
|
||||||
|
// responsive mdb-drawer-open-* media queries above win (and overlay is ignored)
|
||||||
|
&.mdb-drawer-overlay {
|
||||||
|
@include drawer-x-overlay($side)
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
@include media-breakpoint-down($breakpoint) { // overlay responsive class
|
||||||
|
@include drawer-x-overlay($side)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//// y - top/bottom
|
||||||
|
//@each $side in (top bottom) {
|
||||||
|
// &.mdb-drawer-fixed-#{$side} {
|
||||||
|
//
|
||||||
|
// @if $breakpoint == xs { // overlay marker class (non-responsive)
|
||||||
|
//
|
||||||
|
// // Must double up on the .mdb-drawer-overlay class to increase specificity otherwise the
|
||||||
|
// // responsive mdb-drawer-open-* media queries above win (and overlay is ignored)
|
||||||
|
// &.mdb-drawer-overlay {
|
||||||
|
// @include drawer-y-overlay($side)
|
||||||
|
// }
|
||||||
|
// } @else {
|
||||||
|
// @include media-breakpoint-down($breakpoint) { // overlay responsive class
|
||||||
|
// @include drawer-y-overlay($side)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,34 @@
|
||||||
// case where behavior is responsive, or with a marker class
|
//// case where behavior is responsive, or with a marker class
|
||||||
@mixin media-breakpoint-down-or($breakpoint, $name) {
|
//@mixin media-breakpoint-down-or($breakpoint, $name) {
|
||||||
#{unquote($name)} {
|
// #{unquote($name)} {
|
||||||
@content
|
// @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)
|
// @include media-breakpoint-down($breakpoint) {
|
||||||
// xs
|
// @content
|
||||||
// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
|
// }
|
||||||
// xs
|
//}
|
||||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
|
//
|
||||||
// xs
|
//// case where behavior is responsive, or with a marker class
|
||||||
@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
//@mixin media-breakpoint-up-or($breakpoint, $name) {
|
||||||
$n: index($breakpoint-names, $name);
|
// #{unquote($name)} {
|
||||||
@return if($n > 1, nth($breakpoint-names, $n - 1), null);
|
// @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);
|
||||||
|
//}
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,5 @@
|
||||||
$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)
|
|
||||||
// note: a good combo appears to be mdb-drawer-open-lg and md for the value below
|
|
||||||
$mdb-layout-drawer-x-overlay-breakpoint: md;
|
|
||||||
|
|
||||||
// Sizing
|
// Sizing
|
||||||
$mdb-layout-drawer-size: 240px !default;
|
$mdb-layout-drawer-size: 240px !default;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user