mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-02 12:54: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')
// 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')
if ($icon.text() == 'visibility_off') {
$container.addClass('mdb-drawer-closed')
$container.removeClass('mdb-drawer-open') // demo only, regardless of the responsive class, we want to force it close
$container.addClass('mdb-drawer-out')
$container.removeClass('mdb-drawer-in') // demo only, regardless of the responsive class, we want to force it close
$icon.text('visibility')
}
else {
$container.removeClass('mdb-drawer-closed')
$container.addClass('mdb-drawer-open') // demo only, regardless of the responsive class, we want to force it open
$container.removeClass('mdb-drawer-out')
$container.addClass('mdb-drawer-in') // demo only, regardless of the responsive class, we want to force it open
$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">
<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">
<!--
<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
@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
// as responsive sizes (i.e. mdb-drawer-open-md will open once the browser is wider than 768px).
// 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-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
// We 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, instead of using `mdb-drawer-open-xs`
// (which is mostly meaningless), we create `mdb-drawer-open` meaning always open.
// 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-in`
// 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-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
// 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
@ -70,7 +70,7 @@
//
// 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) {
:not(.mdb-drawer-out) {
@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) {
// // 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-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);
//}
//
////----
//// 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) {
// @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
//.kitchen-sink-drawer-triggered:not(.mdb-drawer-out) {
// @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-in
// @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;
}
// Backdrop
// Backdrop - generic backdrop to be used by other components i.e. drawer in overlay mode
.mdb-layout-backdrop {
position: absolute;
top: 0;
@ -71,5 +71,5 @@
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) {
// // 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-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) {
// @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
// .kitchen-sink-drawer-triggered:not(.mdb-drawer-out) {
// @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-in
// @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
$name: "&-#{$breakpoint}";
$name: "&-#{$breakpoint}#{$suffix}";
@if $breakpoint == xs {
$name: "&";
}
@ -134,13 +134,13 @@
// breakpoint based open to a particular size
@mixin mdb-drawer-x-open-up($size, $breakpoint) {
// e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint);
$name: mdb-drawer-breakpoint-name($breakpoint, "-up");
&.mdb-drawer-open {
#{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
&.mdb-drawer-in {
#{unquote($name)} { // mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg
@if $breakpoint == xs {
// mdb-drawer-open marker class (non-responsive)
// mdb-drawer-in marker class (non-responsive)
@include mdb-drawer-x-open($size);
} @else {
@ -157,13 +157,13 @@
// breakpoint based open to a particular size
@mixin mdb-drawer-y-open-up($size, $breakpoint) {
// e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint);
$name: mdb-drawer-breakpoint-name($breakpoint, "-up");
&.mdb-drawer-open {
#{unquote($name)} { // mdb-drawer-open, mdb-drawer-open-sm, mdb-drawer-open-md, mdb-drawer-open-lg
&.mdb-drawer-in {
#{unquote($name)} { // mdb-drawer-in, mdb-drawer-in-sm, mdb-drawer-in-md, mdb-drawer-in-lg
@if $breakpoint == xs {
// mdb-drawer-open marker class (non-responsive)
// mdb-drawer-in marker class (non-responsive)
@include mdb-drawer-y-open($size);
} @else {
@ -178,7 +178,7 @@
}
@mixin mdb-drawer-x-overlay() {
@include mdb-layout-overlay-backdrop-in();
@include mdb-layout-backdrop-in();
@each $side in (left right) {
&.mdb-drawer-fixed-#{$side} {
@ -192,7 +192,7 @@
}
@mixin mdb-drawer-y-overlay() {
@include mdb-layout-overlay-backdrop-in();
@include mdb-layout-backdrop-in();
@each $side in (top bottom) {
&.mdb-drawer-fixed-#{$side} {
@ -211,13 +211,11 @@
}
}
// Overlay - left/right responsive overlay classes and marker class
@mixin mdb-drawer-x-overlay-down($breakpoint) {
// 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 {
#{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)
// 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 {
@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) {
// 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 {
#{unquote($name)} { // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
//// y - top/bottom
@ -253,7 +249,7 @@
@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)
// responsive mdb-drawer-in-* media queries above win (and overlay is ignored)
&.mdb-drawer-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 {
.in {