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 y overlay with a marker class (non-responsive) and responsive

Browse Source
This commit is contained in:
Kevin Ross 2016-01-15 16:30:10 -06:00
parent 59831c66f0
commit da8515583d
1 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
scss/_drawer.scss
View File

@ -199,14 +199,24 @@
overflow: hidden;
}
}
//@mixin drawer-y-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 {
overflow: hidden;
}
> .mdb-layout-header {
@if $side == top { // only add margin-top on a header when the drawer is at the top
margin-#{$side}: 0;
}
}
> .mdb-layout-content {
@if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom
margin-#{$side}: 0;
}
}
}
&.mdb-drawer-overlay {
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
@ -231,23 +241,23 @@
}
//// 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)
// }
// }
// }
//}
@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)
}
}
}
}
}
}
}