mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-09 00:00:41 +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) {
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) {
$container.removeClass(value)

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-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">
<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">

38
scss/_drawer.scss
View File

@ -37,10 +37,10 @@
// Sizing and positioning below here
// 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
@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
// 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
@each $breakpoint in map-keys($grid-breakpoints) {
@include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint);
@include mdb-drawer-y-open-up($mdb-layout-drawer-y-size, $breakpoint);
@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-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
//
// 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) {
// @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-closed(500px);
// @include mdb-drawer-x-open-up(500px, $breakpoint);
// }
.kitchen-sink-drawer {
@include mdb-drawer-x-out(500px);
&: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);
}
}
}
// // Create a responsive overlay at mdb-drawer-overlay-md-down - this specificity is required
// @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
//
// 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 {
// @include mdb-drawer-x-closed(500px); // closed by default
// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in
// @include mdb-drawer-x-overlay(); // overlay by default, no other classes necessary
//}
.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
}

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
//
// 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) {
// @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-closed(500px);
// @include mdb-drawer-x-open-up(500px, $breakpoint);
// @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);
@ -19,17 +19,17 @@
//----
// 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 {
// @include mdb-drawer-x-closed(500px); // closed by default
// @include mdb-drawer-x-open(500px); // triggered with mdb-drawer-in
// @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-closed($size) {
@mixin mdb-drawer-x-out($size) {
@each $side, $abbrev in (left: l, right: r) {
&.mdb-drawer-pos-f-#{$abbrev} {
&.mdb-drawer-f-#{$abbrev} {
> .mdb-layout-drawer {
// position
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) {
&.mdb-drawer-pos-f-#{$abbrev} {
&.mdb-drawer-f-#{$abbrev} {
> .mdb-layout-drawer {
// position
#{$side}: 0;
@ -86,9 +86,9 @@
@return $name;
}
@mixin mdb-drawer-x-open($size) {
@mixin mdb-drawer-x-in($size) {
@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)
> .mdb-layout-header {
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) {
&.mdb-drawer-pos-f-#{$abbrev} {
&.mdb-drawer-f-#{$abbrev} {
// 1. Push - drawer will push the header or content
> .mdb-layout-header {
@ -131,7 +131,7 @@
}
// 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
$name: mdb-drawer-breakpoint-name($breakpoint, "-up");
@ -140,13 +140,13 @@
@if $breakpoint == xs {
// mdb-drawer-in marker class (non-responsive)
@include mdb-drawer-x-open($size);
@include mdb-drawer-x-in($size);
} @else {
// responsive class
@include media-breakpoint-up($breakpoint) {
// mdb-drawer-pos-f-(left and right) styles
@include mdb-drawer-x-open($size);
// mdb-drawer-f-(left and right) styles
@include mdb-drawer-x-in($size);
}
}
}
@ -154,7 +154,7 @@
}
// 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
$name: mdb-drawer-breakpoint-name($breakpoint, "-up");
@ -163,13 +163,13 @@
@if $breakpoint == xs {
// mdb-drawer-in marker class (non-responsive)
@include mdb-drawer-y-open($size);
@include mdb-drawer-y-in($size);
} @else {
// responsive class
@include media-breakpoint-up($breakpoint) {
// mdb-drawer-pos-f-(left and right) styles
@include mdb-drawer-y-open($size);
// mdb-drawer-f-(left and right) styles
@include mdb-drawer-y-in($size);
}
}
}
@ -180,7 +180,7 @@
@include mdb-layout-backdrop-in();
@each $side, $abbrev in (left: l, right: r) {
&.mdb-drawer-pos-f-#{$abbrev} {
&.mdb-drawer-f-#{$abbrev} {
> .mdb-layout-header,
> .mdb-layout-content {
width: 100%;
@ -194,7 +194,7 @@
@include mdb-layout-backdrop-in();
@each $side, $abbrev in (top: t, bottom: b) {
&.mdb-drawer-pos-f-#{$abbrev} {
&.mdb-drawer-f-#{$abbrev} {
> .mdb-layout-header {
@if $side == top { // only add margin-top on a header when the drawer is at the top
margin-#{$side}: 0;