From 63c8cf491b4550ec8f06b808890a405e977c35f3 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Fri, 22 Jan 2016 15:05:43 -0600 Subject: [PATCH] #822 drawer implementation complete --- docs/examples/drawer/index.html | 2 +- docs/material-design/drawers.md | 83 ++++++++++++++++++++++----------- scss/_drawer.scss | 47 ++++++++----------- scss/mixins/_drawer.scss | 27 ----------- scss/variables/_drawer.scss | 7 +-- 5 files changed, 79 insertions(+), 87 deletions(-) diff --git a/docs/examples/drawer/index.html b/docs/examples/drawer/index.html index 8fc38627..b242f3e5 100644 --- a/docs/examples/drawer/index.html +++ b/docs/examples/drawer/index.html @@ -41,7 +41,7 @@ group: material-design -
+
Title
diff --git a/docs/material-design/drawers.md b/docs/material-design/drawers.md index 74e2e0f0..e34832eb 100644 --- a/docs/material-design/drawers.md +++ b/docs/material-design/drawers.md @@ -4,7 +4,7 @@ title: Drawers group: material-design --- -The Material Design for Bootstrap `Drawer` provides a markup structure and plugin that allows you to display content on the bounds of any `position: relative` containing element. Drawers are commonly referred to as a side nav or offcanvas nav. The MDB implementation allows for positioning top, left, bottom, right, as well as two styles including push (default) as well as overlay. Both the drawer position and style can be set statically or responsively with the provided classes. +The Material Design for Bootstrap `Drawer` provides a markup structure and plugin that allows you to display content on the bounds of any containing element. Drawers are commonly referred to as a side nav or offcanvas nav. The MDB implementation allows for positioning top, left, bottom, right, as well as two styles including push (default) as well as overlay. Both the drawer position and style can be set statically or responsively with the provided classes. ## Contents @@ -22,11 +22,11 @@ The following examples provide a good starting point: ### Behavior -The default behavior for any drawer is to be _out_ of the frame of view. It can be set _in_ the frame of view either by using using one or the gridpoint responsive classes such as `mdb-drawer-in-lg-up`, or by using `mdb-drawer-in`. Any drawer, be it responsive or statically set to _in_ can be _forced_ out by using `mdb-drawer-out`. +The default behavior for any drawer is to be _out_ of the frame of view. It can be set _in_ the frame of view either by using using one of the gridpoint responsive classes such as `mdb-drawer-in-lg-up`, or by using `mdb-drawer-in`. Any drawer, be it responsive or statically set to _in_ can be _forced_ out by using `mdb-drawer-out`. ### Markup -In order to use the drawer component, MDB has created the following flex based layout structure: +In order to use the drawer component you must use MDB's flex based layout structure. If this layout structure is not a direct child of ``, be sure that the containing element has set `position: relative` as this layout structure utilizes an outer element that is absolutely positioned in order to enable features such as content scrolling and sticky header. {% highlight html %}
@@ -36,6 +36,17 @@ In order to use the drawer component, MDB has created the following flex based l
{% endhighlight %} +### Toggle + +A manual drawer toggle can be integrated with data attributes. For responsive display or hiding, use the standard Bootstrap classes. The following example will target a drawer with the id of `my-drawer` + +{% highlight html %} + +{% endhighlight %} + ## Styles ### Push @@ -54,7 +65,7 @@ The default behavior is for content to be pushed.
-
+
Title
@@ -73,7 +84,8 @@ The default behavior is for content to be pushed. {% endexample %} ### Overlay -Optional behavior will overlay the drawer and provide a backdrop: +Optional behavior will overlay the drawer and provide a backdrop. This can be marked with `mdb-drawer-overlay` to always overlay, or you can use a responsive class such as `mdb-drawer-overlay-md-down`. + {% example html id=drawer-s2 %}
@@ -87,7 +99,7 @@ Optional behavior will overlay the drawer and provide a backdrop:
-
+
Title
@@ -107,8 +119,6 @@ Optional behavior will overlay the drawer and provide a backdrop: ## Positions -### Classes - The following positioning marker classes should be placed on the `mdb-layout-container` element: @@ -169,7 +179,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con -
+
Title
@@ -202,7 +212,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
-
+
Title
@@ -235,7 +245,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
-
+
Title
@@ -268,7 +278,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
-
+
Title
@@ -286,20 +296,41 @@ The following positioning marker classes should be placed on the `mdb-layout-con
{% endexample %} -## Responsiveness vs Static - -### Static -in -out -overlay - -### Responsive in - -### Responsive overlay - - ## Customization -## Variables +### Variables + +Globally, you may alter the size of _x_ vs _y_ drawers with the following variables: + +- `$mdb-drawer-x-size` +- `$mdb-drawer-y-size` + + +### Custom responsive drawer + +The following will create _x_ drawers (left/right) at the size of 500px that will respond to both marker classes and grid-based responsive classes such as `mdb-drawer-in-lg-up`: +{% highlight scss %} +.kitchen-sink-drawer { + $custom-size: 500px; + @include mdb-drawer-x-out($custom-size); + &:not(.mdb-drawer-out) { + @each $breakpoint in map-keys($grid-breakpoints) { + @include mdb-drawer-x-in-up($custom-size, $breakpoint); + } + } +} +{% endhighlight %} + +### Custom static drawer + +The following generates a custom drawer at the size of 500px that is _out_ by default and can be triggered _in_ with `mdb-drawer-in`. + +{% highlight scss %} +.kitchen-sink-drawer-static { + $custom-size: 500px; + @include mdb-drawer-x-out($custom-size); // closed by default + @include mdb-drawer-x-in($custom-size); // triggered with mdb-drawer-in + @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary +} +{% endhighlight %} -## Using mixins diff --git a/scss/_drawer.scss b/scss/_drawer.scss index a96d16e1..214878ce 100644 --- a/scss/_drawer.scss +++ b/scss/_drawer.scss @@ -13,8 +13,8 @@ overflow: visible; overflow-y: auto; font-size: .875rem; - color: $mdb-layout-drawer-text-color; - background: $mdb-layout-drawer-bg-color; + //color: $mdb-layout-drawer-text-color; + //background: $mdb-layout-drawer-bg-color; // Transform offscreen. transition: transform; @@ -57,10 +57,10 @@ // Sizing and positioning below here // for left or right drawers, setup widths, heights and positions -@include mdb-drawer-x-out($mdb-layout-drawer-x-size); +@include mdb-drawer-x-out($mdb-drawer-x-size); // for top or bottom drawers, setup widths, heights and positions -@include mdb-drawer-y-out($mdb-layout-drawer-y-size); +@include mdb-drawer-y-out($mdb-drawer-y-size); // 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). @@ -89,42 +89,33 @@ :not(.mdb-drawer-out) { // first eliminate positioning or sizing rules if the drawer is already forced closed @each $breakpoint in map-keys($grid-breakpoints) { - @include mdb-drawer-x-in-up($mdb-layout-drawer-x-size, $breakpoint); - @include mdb-drawer-y-in-up($mdb-layout-drawer-y-size, $breakpoint); + @include mdb-drawer-x-in-up($mdb-drawer-x-size, $breakpoint); + @include mdb-drawer-y-in-up($mdb-drawer-y-size, $breakpoint); @include mdb-drawer-x-overlay-down($breakpoint); @include mdb-drawer-y-overlay-down($breakpoint); } } -//---- -// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger -// -// Used with
-// +////---- +//// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger //.kitchen-sink-drawer { -// @include mdb-drawer-x-out(500px); -// +// $custom-size: 500px; +// @include mdb-drawer-x-out($custom-size); // &:not(.mdb-drawer-out) { -// @each $breakpoint in (xs lg) { -// // xs gives us the static marker class i.e. mdb-drawer-in, while lg gives us a responsive open/overlay -// @include mdb-drawer-x-in-up(500px, $breakpoint); +// @each $breakpoint in map-keys($grid-breakpoints) { +// @include mdb-drawer-x-in-up($custom-size, $breakpoint); // } // } //} - -// // 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 the mdb-drawer-in trigger -// -// Used with
-// -//.kitchen-sink-drawer-triggered { -// @include mdb-drawer-x-out(500px); // closed by default -// @include mdb-drawer-x-in(500px); // triggered with mdb-drawer-in +//// +////---- +//// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger +//.kitchen-sink-drawer-static { +// $custom-size: 500px; +// @include mdb-drawer-x-out($custom-size); // closed by default +// @include mdb-drawer-x-in($custom-size); // triggered with mdb-drawer-in // @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary //} diff --git a/scss/mixins/_drawer.scss b/scss/mixins/_drawer.scss index 69c4e100..a7007a25 100644 --- a/scss/mixins/_drawer.scss +++ b/scss/mixins/_drawer.scss @@ -1,31 +1,4 @@ // Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time -// - -//---- -// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger -// -// Used with
-// -//.kitchen-sink-drawer:not(.mdb-drawer-out) { -// @each $breakpoint in (xs lg) { -// // xs gives us the static marker class i.e. mdb-drawer-in, while lg gives us a responsive open/overlay -// @include mdb-drawer-x-out(500px); -// @include mdb-drawer-x-in-up(500px, $breakpoint); -// } -// // 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 the mdb-drawer-in trigger -// -// Used with
-// -//.kitchen-sink-drawer-triggered { -// @include mdb-drawer-x-out(500px); // closed by default -// @include mdb-drawer-x-in(500px); // triggered with mdb-drawer-in -// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary -//} @mixin mdb-drawer-x-out($size) { @each $side, $abbrev in (left: l, right: r) { diff --git a/scss/variables/_drawer.scss b/scss/variables/_drawer.scss index 38b03f97..3e78560a 100644 --- a/scss/variables/_drawer.scss +++ b/scss/variables/_drawer.scss @@ -1,8 +1,5 @@ // Drawer -// FIXME: review and integrate other variables from nav or something instead of these -$mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default; -$mdb-layout-drawer-text-color: rgba($grey-800, 1) !default; // Sizing -$mdb-layout-drawer-x-size: 240px !default; -$mdb-layout-drawer-y-size: 100px !default; +$mdb-drawer-x-size: 240px !default; +$mdb-drawer-y-size: 100px !default;