mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-09 00:00:41 +03:00
#822 Refactored drawer creation to allow for simplified custom drawer creation.
This commit is contained in:
Kevin Ross
parent
642dc96cc4
commit
880cf63001
|
|
@ -74,65 +74,37 @@
|
|||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
|
||||
// e.g. &, &-sm, &-md, &-lg
|
||||
$name: mdb-drawer-breakpoint-name($breakpoint);
|
||||
|
||||
@include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint);
|
||||
@include mdb-drawer-y-open-up($mdb-layout-drawer-y-size, $breakpoint);
|
||||
|
||||
//
|
||||
// Overlay - left/right responsive overlay classes and marker class
|
||||
//
|
||||
&.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 mdb-drawer-x-overlay($side)
|
||||
}
|
||||
} @else {
|
||||
@include media-breakpoint-down($breakpoint) { // overlay responsive class
|
||||
@include mdb-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 mdb-drawer-y-overlay($side)
|
||||
}
|
||||
} @else {
|
||||
@include media-breakpoint-down($breakpoint) { // overlay responsive class
|
||||
@include mdb-drawer-y-overlay($side)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include mdb-drawer-x-overlay-down($breakpoint);
|
||||
@include mdb-drawer-y-overlay-down($breakpoint);
|
||||
}
|
||||
}
|
||||
|
||||
//// Example: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-open-lg
|
||||
//@include mdb-drawer-x-closed(500px, ".kitchen-sink-drawer");
|
||||
//
|
||||
////----
|
||||
//// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-open-lg and allows for triggers mdb-drawer-open && mdb-drawer-closed
|
||||
////
|
||||
//// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg kitchen-sink-drawer">
|
||||
////
|
||||
//.kitchen-sink-drawer:not(.mdb-drawer-closed) {
|
||||
// @include mdb-drawer-x-open-up(500px, lg);
|
||||
// @each $breakpoint in (xs lg) {
|
||||
// // xs gives us the static marker class i.e. mdb-drawer-open && mdb-drawer-closed, while lg gives us a responsive open/overlay
|
||||
// @include mdb-drawer-x-closed(500px);
|
||||
// @include mdb-drawer-x-open-up(500px, $breakpoint);
|
||||
// }
|
||||
// // Create a responsive overlay at mdb-drawer-overlay-md - this specificity is required
|
||||
// @include mdb-drawer-x-overlay-down(md);
|
||||
//}
|
||||
//
|
||||
////----
|
||||
//// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-open && mdb-drawer-closed
|
||||
////
|
||||
//// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open kitchen-sink-drawer-triggered">
|
||||
////
|
||||
//.kitchen-sink-drawer-triggered:not(.mdb-drawer-closed) {
|
||||
// @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-closed
|
||||
// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-open
|
||||
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
|
||||
//}
|
||||
// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg kitchen-sink-drawer">
|
||||
|
||||
|
|
|
|||
|
|
@ -19,18 +19,16 @@
|
|||
flex-direction: column; // allows for sticky header and footer
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
-webkit-overflow-scrolling: touch; // TODO: why?
|
||||
}
|
||||
|
||||
// Header layout (fixed top), belongs in a mdb-layout-container
|
||||
.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.
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-height: 1000px;
|
||||
flex-direction: column;
|
||||
flex-direction: column; // since this is a column, it is necessary that something like an actual navbar is a child
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
|
|
|
|||
|
|
@ -1,66 +1,77 @@
|
|||
// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time
|
||||
//
|
||||
// Example: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-open-lg
|
||||
// @include mdb-drawer-x-closed(500px, ".kitchen-sink-drawer");
|
||||
|
||||
//----
|
||||
// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-open-lg and allows for triggers mdb-drawer-open && mdb-drawer-closed
|
||||
//
|
||||
// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg kitchen-sink-drawer">
|
||||
//
|
||||
// .kitchen-sink-drawer:not(.mdb-drawer-closed) {
|
||||
// @include mdb-drawer-x-open-up(500px, lg);
|
||||
// @each $breakpoint in (xs lg) {
|
||||
// // xs gives us the static marker class i.e. mdb-drawer-open && mdb-drawer-closed, while lg gives us a responsive open/overlay
|
||||
// @include mdb-drawer-x-closed(500px);
|
||||
// @include mdb-drawer-x-open-up(500px, $breakpoint);
|
||||
// }
|
||||
// // Create a responsive overlay at mdb-drawer-overlay-md - this specificity is required
|
||||
// @include mdb-drawer-x-overlay-down(md);
|
||||
// }
|
||||
//
|
||||
// <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg kitchen-sink-drawer">
|
||||
//
|
||||
|
||||
// $parent -null or something enclosing it i.e. "&"
|
||||
@mixin mdb-drawer-x-closed($size, $parent: "") {
|
||||
//----
|
||||
// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-open && mdb-drawer-closed
|
||||
//
|
||||
// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open kitchen-sink-drawer-triggered">
|
||||
//
|
||||
// .kitchen-sink-drawer-triggered:not(.mdb-drawer-closed) {
|
||||
// @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-closed
|
||||
// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-open
|
||||
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
|
||||
// }
|
||||
|
||||
@mixin mdb-drawer-x-closed($size) {
|
||||
@each $side in (left right) {
|
||||
#{unquote($parent)} {
|
||||
&.mdb-drawer-fixed-#{$side} {
|
||||
> .mdb-layout-drawer {
|
||||
// position
|
||||
top: 0;
|
||||
#{$side}: 0;
|
||||
&.mdb-drawer-fixed-#{$side} {
|
||||
> .mdb-layout-drawer {
|
||||
// position
|
||||
top: 0;
|
||||
#{$side}: 0;
|
||||
|
||||
width: $size;
|
||||
height: 100%;
|
||||
width: $size;
|
||||
height: 100%;
|
||||
|
||||
@if $side == left {
|
||||
transform: translateX(-$size - 10px); // initial position of drawer (closed), way off screen
|
||||
} @else {
|
||||
transform: translateX($size + 10px); // initial position of drawer (closed), way off screen
|
||||
}
|
||||
@if $side == left {
|
||||
transform: translateX(-$size - 10px); // initial position of drawer (closed), way off screen
|
||||
} @else {
|
||||
transform: translateX($size + 10px); // initial position of drawer (closed), way off screen
|
||||
}
|
||||
}
|
||||
|
||||
> .mdb-layout-content {
|
||||
margin-#{$side}: 0;
|
||||
}
|
||||
> .mdb-layout-content {
|
||||
margin-#{$side}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// $parent -null or something enclosing it i.e. "&"
|
||||
@mixin mdb-drawer-y-closed($size, $parent: "") {
|
||||
@mixin mdb-drawer-y-closed($size) {
|
||||
@each $side in (top bottom) {
|
||||
#{unquote($parent)} {
|
||||
&.mdb-drawer-fixed-#{$side} {
|
||||
> .mdb-layout-drawer {
|
||||
// position
|
||||
#{$side}: 0;
|
||||
left: 0;
|
||||
&.mdb-drawer-fixed-#{$side} {
|
||||
> .mdb-layout-drawer {
|
||||
// position
|
||||
#{$side}: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: $size;
|
||||
width: 100%;
|
||||
height: $size;
|
||||
|
||||
@if $side == top {
|
||||
transform: translateY(-$size - 10px); // initial position of drawer (closed), way off screen
|
||||
} @else {
|
||||
transform: translateY($size + 10px); // initial position of drawer (closed), way off screen
|
||||
}
|
||||
@if $side == top {
|
||||
transform: translateY(-$size - 10px); // initial position of drawer (closed), way off screen
|
||||
} @else {
|
||||
transform: translateY($size + 10px); // initial position of drawer (closed), way off screen
|
||||
}
|
||||
}
|
||||
|
||||
> .mdb-layout-content {
|
||||
margin-#{$side}: 0;
|
||||
}
|
||||
> .mdb-layout-content {
|
||||
margin-#{$side}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -129,13 +140,18 @@
|
|||
$name: mdb-drawer-breakpoint-name($breakpoint);
|
||||
|
||||
&.mdb-drawer-open {
|
||||
// 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) {
|
||||
|
||||
// mdb-drawer-fixed-(left and right) styles
|
||||
@if $breakpoint == xs {
|
||||
// mdb-drawer-open marker class (non-responsive)
|
||||
@include mdb-drawer-x-open($size);
|
||||
} @else {
|
||||
|
||||
// responsive class
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
// mdb-drawer-fixed-(left and right) styles
|
||||
@include mdb-drawer-x-open($size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -147,41 +163,111 @@
|
|||
$name: mdb-drawer-breakpoint-name($breakpoint);
|
||||
|
||||
&.mdb-drawer-open {
|
||||
// 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) {
|
||||
// mdb-drawer-fixed-(top and bottom) styles
|
||||
@if $breakpoint == xs {
|
||||
// mdb-drawer-open marker class (non-responsive)
|
||||
@include mdb-drawer-y-open($size);
|
||||
} @else {
|
||||
|
||||
// responsive class
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
// mdb-drawer-fixed-(left and right) styles
|
||||
@include mdb-drawer-y-open($size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-drawer-x-overlay($side) {
|
||||
> .mdb-layout-header,
|
||||
> .mdb-layout-content {
|
||||
width: 100%;
|
||||
margin-#{$side}: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-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;
|
||||
@mixin mdb-drawer-x-overlay() {
|
||||
@each $side in (left right) {
|
||||
&.mdb-drawer-fixed-#{$side} {
|
||||
> .mdb-layout-header,
|
||||
> .mdb-layout-content {
|
||||
width: 100%;
|
||||
margin-#{$side}: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-drawer-y-overlay() {
|
||||
@each $side in (top bottom) {
|
||||
&.mdb-drawer-fixed-#{$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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-drawer-x-overlay-down($breakpoint) {
|
||||
// e.g. &, &-sm, &-md, &-lg
|
||||
$name: mdb-drawer-breakpoint-name($breakpoint);
|
||||
|
||||
//
|
||||
// Overlay - left/right responsive overlay classes and marker class
|
||||
//
|
||||
&.mdb-drawer-overlay {
|
||||
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
|
||||
|
||||
// x - left/right
|
||||
|
||||
@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 mdb-drawer-x-overlay()
|
||||
}
|
||||
} @else {
|
||||
@include media-breakpoint-down($breakpoint) { // overlay responsive class
|
||||
@include mdb-drawer-x-overlay()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-drawer-y-overlay-down($breakpoint) {
|
||||
// e.g. &, &-sm, &-md, &-lg
|
||||
$name: mdb-drawer-breakpoint-name($breakpoint);
|
||||
|
||||
//
|
||||
// Overlay - top/bottom responsive overlay classes and marker class
|
||||
//
|
||||
&.mdb-drawer-overlay {
|
||||
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
|
||||
//// y - top/bottom
|
||||
|
||||
@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 mdb-drawer-y-overlay();
|
||||
}
|
||||
} @else {
|
||||
@include media-breakpoint-down($breakpoint) { // overlay responsive class
|
||||
@include mdb-drawer-y-overlay();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user