mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-10 19:57:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

#822 switched drawer positioning to use new v4 shorthand i.e. mdb-drawer-pos-f-l for fixed left

Browse Source
This commit is contained in:
Kevin Ross 2016-01-19 14:56:33 -06:00
parent d6ce1f7554
commit 2cc4f7aa15
4 changed files with 27 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
function clearDrawerClasses($container) {
var classes = ["mdb-drawer-fixed-left", "mdb-drawer-fixed-right", "mdb-drawer-fixed-top", "mdb-drawer-fixed-bottom"];
var classes = ["mdb-drawer-pos-f-l", "mdb-drawer-pos-f-r", "mdb-drawer-pos-f-t", "mdb-drawer-pos-f-b"];
$.each(classes, function (index, value) {
$container.removeClass(value)
@ -14,7 +14,7 @@ function setDrawerPosition(position) {
}
$(document).ready(function() { // document ready is a little convoluted because this executes before jquery.
var buttons = ["drawer-fixed-left", "drawer-fixed-right", "drawer-fixed-top", "drawer-fixed-bottom"]
var buttons = ["drawer-pos-f-l", "drawer-pos-f-r", "drawer-pos-f-t", "drawer-pos-f-b"]
$.each(buttons, function (index, position) {
$('#' + position).click(function() {

16
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-down mdb-drawer-in-lg-up">
<div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up">
<header class="mdb-layout-header">
<!--
<div class="collapse" id="navbar-header">
@ -20,12 +20,10 @@ js: example.js
</div>
-->
<div class="navbar navbar-light bg-faded navbar-static-top">
<!--
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
<span class="sr-only">Toggle navigation</span>
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbar-header">
<span class="sr-only">Toggle drawer</span>
<i class="material-icons">menu</i>
</button>
-->
<ul class="nav navbar-nav">
<li class="nav-item">
Home
@ -38,22 +36,22 @@ js: example.js
</button>
</li>
<li class="nav-item">
<button class="btn mdb-btn-icon" title="Drawer left" id="drawer-fixed-left">
<button class="btn mdb-btn-icon" title="Drawer left" id="drawer-pos-f-l">
<i class="material-icons">border_left</i>
</button>
</li>
<li class="nav-item">
<button class="btn mdb-btn-icon" title="Drawer right" id="drawer-fixed-right">
<button class="btn mdb-btn-icon" title="Drawer right" id="drawer-pos-f-r">
<i class="material-icons">border_right</i>
</button>
</li>
<li class="nav-item">
<button class="btn mdb-btn-icon" title="Drawer top" id="drawer-fixed-top">
<button class="btn mdb-btn-icon" title="Drawer top" id="drawer-pos-f-t">
<i class="material-icons">border_top</i>
</button>
</li>
<li class="nav-item">
<button class="btn mdb-btn-icon" title="Drawer bottom" id="drawer-fixed-bottom">
<button class="btn mdb-btn-icon" title="Drawer bottom" id="drawer-pos-f-b">
<i class="material-icons">border_bottom</i>
</button>
</li>

4
scss/_drawer.scss
View File

@ -85,7 +85,7 @@
////----
//// 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-down mdb-drawer-in-lg-up kitchen-sink-drawer">
//// 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">
////
//.kitchen-sink-drawer:not(.mdb-drawer-out) {
// @each $breakpoint in (xs lg) {
@ -100,7 +100,7 @@
////----
//// 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-in kitchen-sink-drawer-triggered">
//// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
////
//.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

33
scss/mixins/_drawer.scss
View File

@ -4,7 +4,7 @@
//----
// 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-in-lg kitchen-sink-drawer">
// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md mdb-drawer-in-lg kitchen-sink-drawer">
//
// .kitchen-sink-drawer:not(.mdb-drawer-out) {
// @each $breakpoint in (xs lg) {
@ -19,7 +19,7 @@
//----
// 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-in kitchen-sink-drawer-triggered">
// Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-in kitchen-sink-drawer-triggered">
//
// .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
@ -28,8 +28,8 @@
// }
@mixin mdb-drawer-x-closed($size) {
@each $side in (left right) {
&.mdb-drawer-fixed-#{$side} {
@each $side, $abbrev in (left: l, right: r) {
&.mdb-drawer-pos-f-#{$abbrev} {
> .mdb-layout-drawer {
// position
top: 0;
@ -53,8 +53,8 @@
}
@mixin mdb-drawer-y-closed($size) {
@each $side in (top bottom) {
&.mdb-drawer-fixed-#{$side} {
@each $side, $abbrev in (top: t, bottom: b) {
&.mdb-drawer-pos-f-#{$abbrev} {
> .mdb-layout-drawer {
// position
#{$side}: 0;
@ -87,9 +87,8 @@
}
@mixin mdb-drawer-x-open($size) {
@each $side in (left right) {
&.mdb-drawer-fixed-#{$side} {
@each $side, $abbrev in (left: l, right: r) {
&.mdb-drawer-pos-f-#{$abbrev} {
// Push - drawer will push the header and content (default behavior)
> .mdb-layout-header {
width: calc(100% - #{$size});
@ -108,8 +107,8 @@
}
@mixin mdb-drawer-y-open($size) {
@each $side in (top bottom) {
&.mdb-drawer-fixed-#{$side} {
@each $side, $abbrev in (top: t, bottom: b) {
&.mdb-drawer-pos-f-#{$abbrev} {
// 1. Push - drawer will push the header or content
> .mdb-layout-header {
@ -146,7 +145,7 @@
// responsive class
@include media-breakpoint-up($breakpoint) {
// mdb-drawer-fixed-(left and right) styles
// mdb-drawer-pos-f-(left and right) styles
@include mdb-drawer-x-open($size);
}
}
@ -169,7 +168,7 @@
// responsive class
@include media-breakpoint-up($breakpoint) {
// mdb-drawer-fixed-(left and right) styles
// mdb-drawer-pos-f-(left and right) styles
@include mdb-drawer-y-open($size);
}
}
@ -180,8 +179,8 @@
@mixin mdb-drawer-x-overlay() {
@include mdb-layout-backdrop-in();
@each $side in (left right) {
&.mdb-drawer-fixed-#{$side} {
@each $side, $abbrev in (left: l, right: r) {
&.mdb-drawer-pos-f-#{$abbrev} {
> .mdb-layout-header,
> .mdb-layout-content {
width: 100%;
@ -194,8 +193,8 @@
@mixin mdb-drawer-y-overlay() {
@include mdb-layout-backdrop-in();
@each $side in (top bottom) {
&.mdb-drawer-fixed-#{$side} {
@each $side, $abbrev in (top: t, bottom: b) {
&.mdb-drawer-pos-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;