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

#822 aligning drawer nomenclature

Browse Source
This commit is contained in:
Kevin Ross 2016-01-21 14:19:41 -06:00
parent 6b1b88e848
commit 7379b9093f
4 changed files with 47 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
function clearDrawerClasses($container) { function clearDrawerClasses($container) {
var classes = ["mdb-drawer-pos-f-l", "mdb-drawer-pos-f-r", "mdb-drawer-pos-f-t", "mdb-drawer-pos-f-b"]; var classes = ["mdb-drawer-f-l", "mdb-drawer-f-r", "mdb-drawer-f-t", "mdb-drawer-f-b"];
$.each(classes, function (index, value) { $.each(classes, function (index, value) {
$container.removeClass(value) $container.removeClass(value)

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-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up"> <div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up">
<header class="mdb-layout-header"> <header class="mdb-layout-header">
<div class="navbar navbar-light bg-faded navbar-static-top"> <div class="navbar navbar-light bg-faded navbar-static-top">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#my-drawer"> <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#my-drawer">

38
scss/_drawer.scss
View File

@ -37,10 +37,10 @@
// Sizing and positioning below here // Sizing and positioning below here
// for left or right drawers, setup widths, heights and positions // for left or right drawers, setup widths, heights and positions
@include mdb-drawer-x-closed($mdb-layout-drawer-x-size); @include mdb-drawer-x-out($mdb-layout-drawer-x-size);
// 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-out($mdb-layout-drawer-y-size);
// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.mdb-drawer-in')), 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-in-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).
@ -69,8 +69,8 @@
:not(.mdb-drawer-out) { // first eliminate positioning or sizing rules if the drawer is already forced closed :not(.mdb-drawer-out) { // first eliminate positioning or sizing rules if the drawer is already forced closed
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint); @include mdb-drawer-x-in-up($mdb-layout-drawer-x-size, $breakpoint);
@include mdb-drawer-y-open-up($mdb-layout-drawer-y-size, $breakpoint); @include mdb-drawer-y-in-up($mdb-layout-drawer-y-size, $breakpoint);
@include mdb-drawer-x-overlay-down($breakpoint); @include mdb-drawer-x-overlay-down($breakpoint);
@include mdb-drawer-y-overlay-down($breakpoint); @include mdb-drawer-y-overlay-down($breakpoint);
@ -80,14 +80,18 @@
//---- //----
// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger // 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 <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer"> // Used with <div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
// //
//.kitchen-sink-drawer:not(.mdb-drawer-out) { .kitchen-sink-drawer {
// @each $breakpoint in (xs lg) { @include mdb-drawer-x-out(500px);
// // xs gives us the static marker class i.e. mdb-drawer-in, while lg gives us a responsive open/overlay
// @include mdb-drawer-x-closed(500px); &:not(.mdb-drawer-out) {
// @include mdb-drawer-x-open-up(500px, $breakpoint); @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);
}
}
}
// // Create a responsive overlay at mdb-drawer-overlay-md-down - 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);
//} //}
@ -95,11 +99,11 @@
//---- //----
// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger // Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger
// //
// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-in kitchen-sink-drawer-triggered"> // Used with <div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
// //
//.kitchen-sink-drawer-triggered { .kitchen-sink-drawer-triggered {
// @include mdb-drawer-x-closed(500px); // closed by default @include mdb-drawer-x-out(500px); // closed by default
// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in @include mdb-drawer-x-in(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
//} }

48
scss/mixins/_drawer.scss
View File

@ -4,13 +4,13 @@
//---- //----
// Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger // 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 <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer"> // Used with <div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
// //
//.kitchen-sink-drawer:not(.mdb-drawer-out) { //.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-in, while lg gives us a responsive open/overlay // // xs gives us the static marker class i.e. mdb-drawer-in, while lg gives us a responsive open/overlay
// @include mdb-drawer-x-closed(500px); // @include mdb-drawer-x-out(500px);
// @include mdb-drawer-x-open-up(500px, $breakpoint); // @include mdb-drawer-x-in-up(500px, $breakpoint);
// } // }
// // Create a responsive overlay at mdb-drawer-overlay-md-down - 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);
@ -19,17 +19,17 @@
//---- //----
// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger // Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the mdb-drawer-in trigger
// //
// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-in kitchen-sink-drawer-triggered"> // Used with <div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
// //
//.kitchen-sink-drawer-triggered { //.kitchen-sink-drawer-triggered {
// @include mdb-drawer-x-closed(500px); // closed by default // @include mdb-drawer-x-out(500px); // closed by default
// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in // @include mdb-drawer-x-in(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
//} //}
@mixin mdb-drawer-x-closed($size) { @mixin mdb-drawer-x-out($size) {
@each $side, $abbrev in (left: l, right: r) { @each $side, $abbrev in (left: l, right: r) {
&.mdb-drawer-pos-f-#{$abbrev} { &.mdb-drawer-f-#{$abbrev} {
> .mdb-layout-drawer { > .mdb-layout-drawer {
// position // position
top: 0; top: 0;
@ -52,9 +52,9 @@
} }
} }
@mixin mdb-drawer-y-closed($size) { @mixin mdb-drawer-y-out($size) {
@each $side, $abbrev in (top: t, bottom: b) { @each $side, $abbrev in (top: t, bottom: b) {
&.mdb-drawer-pos-f-#{$abbrev} { &.mdb-drawer-f-#{$abbrev} {
> .mdb-layout-drawer { > .mdb-layout-drawer {
// position // position
#{$side}: 0; #{$side}: 0;
@ -86,9 +86,9 @@
@return $name; @return $name;
} }
@mixin mdb-drawer-x-open($size) { @mixin mdb-drawer-x-in($size) {
@each $side, $abbrev in (left: l, right: r) { @each $side, $abbrev in (left: l, right: r) {
&.mdb-drawer-pos-f-#{$abbrev} { &.mdb-drawer-f-#{$abbrev} {
// Push - drawer will push the header and content (default behavior) // Push - drawer will push the header and content (default behavior)
> .mdb-layout-header { > .mdb-layout-header {
width: calc(100% - #{$size}); width: calc(100% - #{$size});
@ -106,9 +106,9 @@
} }
} }
@mixin mdb-drawer-y-open($size) { @mixin mdb-drawer-y-in($size) {
@each $side, $abbrev in (top: t, bottom: b) { @each $side, $abbrev in (top: t, bottom: b) {
&.mdb-drawer-pos-f-#{$abbrev} { &.mdb-drawer-f-#{$abbrev} {
// 1. Push - drawer will push the header or content // 1. Push - drawer will push the header or content
> .mdb-layout-header { > .mdb-layout-header {
@ -131,7 +131,7 @@
} }
// 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-in-up($size, $breakpoint) {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint, "-up"); $name: mdb-drawer-breakpoint-name($breakpoint, "-up");
@ -140,13 +140,13 @@
@if $breakpoint == xs { @if $breakpoint == xs {
// mdb-drawer-in marker class (non-responsive) // mdb-drawer-in marker class (non-responsive)
@include mdb-drawer-x-open($size); @include mdb-drawer-x-in($size);
} @else { } @else {
// responsive class // responsive class
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
// mdb-drawer-pos-f-(left and right) styles // mdb-drawer-f-(left and right) styles
@include mdb-drawer-x-open($size); @include mdb-drawer-x-in($size);
} }
} }
} }
@ -154,7 +154,7 @@
} }
// 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-in-up($size, $breakpoint) {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: mdb-drawer-breakpoint-name($breakpoint, "-up"); $name: mdb-drawer-breakpoint-name($breakpoint, "-up");
@ -163,13 +163,13 @@
@if $breakpoint == xs { @if $breakpoint == xs {
// mdb-drawer-in marker class (non-responsive) // mdb-drawer-in marker class (non-responsive)
@include mdb-drawer-y-open($size); @include mdb-drawer-y-in($size);
} @else { } @else {
// responsive class // responsive class
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
// mdb-drawer-pos-f-(left and right) styles // mdb-drawer-f-(left and right) styles
@include mdb-drawer-y-open($size); @include mdb-drawer-y-in($size);
} }
} }
} }
@ -180,7 +180,7 @@
@include mdb-layout-backdrop-in(); @include mdb-layout-backdrop-in();
@each $side, $abbrev in (left: l, right: r) { @each $side, $abbrev in (left: l, right: r) {
&.mdb-drawer-pos-f-#{$abbrev} { &.mdb-drawer-f-#{$abbrev} {
> .mdb-layout-header, > .mdb-layout-header,
> .mdb-layout-content { > .mdb-layout-content {
width: 100%; width: 100%;
@ -194,7 +194,7 @@
@include mdb-layout-backdrop-in(); @include mdb-layout-backdrop-in();
@each $side, $abbrev in (top: t, bottom: b) { @each $side, $abbrev in (top: t, bottom: b) {
&.mdb-drawer-pos-f-#{$abbrev} { &.mdb-drawer-f-#{$abbrev} {
> .mdb-layout-header { > .mdb-layout-header {
@if $side == top { // only add margin-top on a header when the drawer is at the top @if $side == top { // only add margin-top on a header when the drawer is at the top
margin-#{$side}: 0; margin-#{$side}: 0;