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

#822 drawer - used in instead of open and out instead of closed to be more inline with bootstrap terminology

Browse Source
This commit is contained in:
Kevin Ross 2016-01-19 14:17:08 -06:00
parent 79e7f1403b
commit 773fd112d2
6 changed files with 57 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,17 +27,17 @@ $(document).ready(function() { // document ready is a little convoluted because
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-in-md')
var $icon = $(this).find('.material-icons') var $icon = $(this).find('.material-icons')
if ($icon.text() == 'visibility_off') { if ($icon.text() == 'visibility_off') {
$container.addClass('mdb-drawer-closed') $container.addClass('mdb-drawer-out')
$container.removeClass('mdb-drawer-open') // demo only, regardless of the responsive class, we want to force it close $container.removeClass('mdb-drawer-in') // demo only, regardless of the responsive class, we want to force it close
$icon.text('visibility') $icon.text('visibility')
} }
else { else {
$container.removeClass('mdb-drawer-closed') $container.removeClass('mdb-drawer-out')
$container.addClass('mdb-drawer-open') // demo only, regardless of the responsive class, we want to force it open $container.addClass('mdb-drawer-in') // demo only, regardless of the responsive class, we want to force it open
$icon.text('visibility_off') $icon.text('visibility_off')
} }
}) })

2
docs/examples/dashboard/index.html
View File

@ -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-overlay-md mdb-drawer-open-lg"> <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md-down mdb-drawer-in-lg-up">
<header class="mdb-layout-header"> <header class="mdb-layout-header">
<!-- <!--
<div class="collapse" id="navbar-header"> <div class="collapse" id="navbar-header">

40
scss/_drawer.scss
View File

@ -43,21 +43,21 @@
// for top or bottom drawers, setup widths, heights and positions // for top or bottom drawers, setup widths, heights and positions
@include mdb-drawer-y-closed($mdb-layout-drawer-y-size); @include mdb-drawer-y-closed($mdb-layout-drawer-y-size);
// 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-in')), 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-in-md will open once the browser is wider than 768px).
// //
// //
// mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg // mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg
// We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-open` // We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-in`
// without a size (for triggered openings). Since the xs size is 0, instead of using `mdb-drawer-open-xs` // without a size (for triggered openings). Since the xs size is 0, instead of using `mdb-drawer-in-xs`
// (which is mostly meaningless), we create `mdb-drawer-open` meaning always open. // (which is mostly meaningless), we create `mdb-drawer-in` meaning always open.
// //
// NOTE: mdb-drawer-open-* uses media-breakpoint-up() // NOTE: mdb-drawer-in-* uses media-breakpoint-up()
// //
// //
// mdb-drawer-closed // mdb-drawer-out
// A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some // A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some
// strange reason) both mdb-drawer-closed and mdb-drawer-open are present, it appears that the closed option wins. // strange reason) both mdb-drawer-out and mdb-drawer-in are present, it appears that the closed option wins.
// //
// //
// mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
@ -70,7 +70,7 @@
// //
// Drawer open positioning, and style options (push is default, overlay is optional) // 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) // - first eliminate positioning or sizing rules if the drawer is already forced closed (which is the default behavior above)
:not(.mdb-drawer-closed) { :not(.mdb-drawer-out) {
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@ -83,28 +83,28 @@
} }
////---- ////----
//// 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 //// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for triggers mdb-drawer-in && mdb-drawer-out
//// ////
//// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg kitchen-sink-drawer"> //// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
//// ////
//.kitchen-sink-drawer:not(.mdb-drawer-closed) { //.kitchen-sink-drawer:not(.mdb-drawer-out) {
// @each $breakpoint in (xs 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 // // xs gives us the static marker class i.e. mdb-drawer-in && mdb-drawer-out, while lg gives us a responsive open/overlay
// @include mdb-drawer-x-closed(500px); // @include mdb-drawer-x-closed(500px);
// @include mdb-drawer-x-open-up(500px, $breakpoint); // @include mdb-drawer-x-open-up(500px, $breakpoint);
// } // }
// // Create a responsive overlay at mdb-drawer-overlay-md - this specificity is required // // Create a responsive overlay at mdb-drawer-overlay-md-down - this specificity is required
// @include mdb-drawer-x-overlay-down(md); // @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 //// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-in && mdb-drawer-out
//// ////
//// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open kitchen-sink-drawer-triggered"> //// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-in kitchen-sink-drawer-triggered">
//// ////
//.kitchen-sink-drawer-triggered:not(.mdb-drawer-closed) { //.kitchen-sink-drawer-triggered:not(.mdb-drawer-out) {
// @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-closed // @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-out
// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-open // @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary // @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
//} //}

4
scss/_layout.scss
View File

@ -50,7 +50,7 @@
flex-grow: 1; flex-grow: 1;
} }
// Backdrop // Backdrop - generic backdrop to be used by other components i.e. drawer in overlay mode
.mdb-layout-backdrop { .mdb-layout-backdrop {
position: absolute; position: absolute;
top: 0; top: 0;
@ -71,5 +71,5 @@
pointer-events: none; pointer-events: none;
} }
// NOTE: the &.in style is responsive, generated by @mixin mdb-layout-overlay-backdrop-in() where needed. // NOTE: the &.in style is responsive, generated by @mixin mdb-layout-backdrop-in() where needed.
} }

58
scss/mixins/_drawer.scss
View File

@ -2,13 +2,13 @@
// //
//---- //----
// 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 // Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for triggers mdb-drawer-in && mdb-drawer-out
// //
// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-open-lg kitchen-sink-drawer"> // Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-overlay-md mdb-drawer-in-lg kitchen-sink-drawer">
// //
// .kitchen-sink-drawer:not(.mdb-drawer-closed) { // .kitchen-sink-drawer:not(.mdb-drawer-out) {
// @each $breakpoint in (xs 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 // // xs gives us the static marker class i.e. mdb-drawer-in && mdb-drawer-out, while lg gives us a responsive open/overlay
// @include mdb-drawer-x-closed(500px); // @include mdb-drawer-x-closed(500px);
// @include mdb-drawer-x-open-up(500px, $breakpoint); // @include mdb-drawer-x-open-up(500px, $breakpoint);
// } // }
@ -17,13 +17,13 @@
// } // }
//---- //----
// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-open && mdb-drawer-closed // Example 2: creates a NON-responsive kitchen-sink-drawer and allows for triggers mdb-drawer-in && mdb-drawer-out
// //
// Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-open kitchen-sink-drawer-triggered"> // Used with <div class="mdb-layout-container mdb-drawer-fixed-left mdb-drawer-in kitchen-sink-drawer-triggered">
// //
// .kitchen-sink-drawer-triggered:not(.mdb-drawer-closed) { // .kitchen-sink-drawer-triggered:not(.mdb-drawer-out) {
// @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-closed // @include mdb-drawer-x-closed(500px); // closed by default, also can be triggered with mdb-drawer-out
// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-open // @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary // @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
// } // }
@ -77,9 +77,9 @@
} }
} }
@function mdb-drawer-breakpoint-name($breakpoint) { @function mdb-drawer-breakpoint-name($breakpoint, $suffix: "") {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: "&-#{$breakpoint}"; $name: "&-#{$breakpoint}#{$suffix}";
@if $breakpoint == xs { @if $breakpoint == xs {
$name: "&"; $name: "&";
} }
@ -134,13 +134,13 @@
// breakpoint based open to a particular size // breakpoint based open to a particular size
@mixin mdb-drawer-x-open-up($size, $breakpoint) { @mixin mdb-drawer-x-open-up($size, $breakpoint) {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint); $name: mdb-drawer-breakpoint-name($breakpoint, "-up");
&.mdb-drawer-open { &.mdb-drawer-in {
#{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg #{unquote($name)} { // mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg
@if $breakpoint == xs { @if $breakpoint == xs {
// mdb-drawer-open marker class (non-responsive) // mdb-drawer-in marker class (non-responsive)
@include mdb-drawer-x-open($size); @include mdb-drawer-x-open($size);
} @else { } @else {
@ -157,13 +157,13 @@
// breakpoint based open to a particular size // breakpoint based open to a particular size
@mixin mdb-drawer-y-open-up($size, $breakpoint) { @mixin mdb-drawer-y-open-up($size, $breakpoint) {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint); $name: mdb-drawer-breakpoint-name($breakpoint, "-up");
&.mdb-drawer-open { &.mdb-drawer-in {
#{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg #{unquote($name)} { // mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg
@if $breakpoint == xs { @if $breakpoint == xs {
// mdb-drawer-open marker class (non-responsive) // mdb-drawer-in marker class (non-responsive)
@include mdb-drawer-y-open($size); @include mdb-drawer-y-open($size);
} @else { } @else {
@ -178,7 +178,7 @@
} }
@mixin mdb-drawer-x-overlay() { @mixin mdb-drawer-x-overlay() {
@include mdb-layout-overlay-backdrop-in(); @include mdb-layout-backdrop-in();
@each $side in (left right) { @each $side in (left right) {
&.mdb-drawer-fixed-#{$side} { &.mdb-drawer-fixed-#{$side} {
@ -192,7 +192,7 @@
} }
@mixin mdb-drawer-y-overlay() { @mixin mdb-drawer-y-overlay() {
@include mdb-layout-overlay-backdrop-in(); @include mdb-layout-backdrop-in();
@each $side in (top bottom) { @each $side in (top bottom) {
&.mdb-drawer-fixed-#{$side} { &.mdb-drawer-fixed-#{$side} {
@ -211,13 +211,11 @@
} }
} }
// Overlay - left/right responsive overlay classes and marker class
@mixin mdb-drawer-x-overlay-down($breakpoint) { @mixin mdb-drawer-x-overlay-down($breakpoint) {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint); $name: mdb-drawer-breakpoint-name($breakpoint, '-down');
//
// Overlay - left/right responsive overlay classes and marker class
//
&.mdb-drawer-overlay { &.mdb-drawer-overlay {
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg #{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
@ -226,7 +224,7 @@
@if $breakpoint == xs { // overlay marker class (non-responsive) @if $breakpoint == xs { // overlay marker class (non-responsive)
// Must double up on the .mdb-drawer-overlay class to increase specificity otherwise the // 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) // responsive mdb-drawer-in-* media queries above win (and overlay is ignored)
&.mdb-drawer-overlay { &.mdb-drawer-overlay {
@include mdb-drawer-x-overlay() @include mdb-drawer-x-overlay()
} }
@ -239,13 +237,11 @@
} }
} }
// Overlay - top/bottom responsive overlay classes and marker class
@mixin mdb-drawer-y-overlay-down($breakpoint) { @mixin mdb-drawer-y-overlay-down($breakpoint) {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint); $name: mdb-drawer-breakpoint-name($breakpoint, "-down");
//
// Overlay - top/bottom responsive overlay classes and marker class
//
&.mdb-drawer-overlay { &.mdb-drawer-overlay {
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg #{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
//// y - top/bottom //// y - top/bottom
@ -253,7 +249,7 @@
@if $breakpoint == xs { // overlay marker class (non-responsive) @if $breakpoint == xs { // overlay marker class (non-responsive)
// Must double up on the .mdb-drawer-overlay class to increase specificity otherwise the // 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) // responsive mdb-drawer-in-* media queries above win (and overlay is ignored)
&.mdb-drawer-overlay { &.mdb-drawer-overlay {
@include mdb-drawer-y-overlay(); @include mdb-drawer-y-overlay();
} }

3
scss/mixins/_layout.scss
View File

@ -1,4 +1,5 @@
@mixin mdb-layout-overlay-backdrop-in() { // Generates the `.in` style for the generic backdrop used components such as the drawer in overlay mode
@mixin mdb-layout-backdrop-in() {
> .mdb-layout-backdrop { > .mdb-layout-backdrop {
.in { .in {