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

drawer nomenclature alignment

Browse Source
This commit is contained in:
Kevin Ross 2016-01-21 14:29:25 -06:00
parent 7379b9093f
commit a5025a34eb
3 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,8 +13,8 @@ function setDrawerPosition(position) {
$container.addClass(position) $container.addClass(position)
} }
$(document).ready(function() { // document ready is a little convoluted because this executes before jquery. $(document).ready(function() {
var buttons = ["drawer-pos-f-l", "drawer-pos-f-r", "drawer-pos-f-t", "drawer-pos-f-b"] var buttons = ["drawer-f-l", "drawer-f-r", "drawer-f-t", "drawer-f-b"]
$.each(buttons, function (index, position) { $.each(buttons, function (index, position) {
$('#' + position).click(function() { $('#' + position).click(function() {

10
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-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up"> <div class="mdb-layout-container mdb-drawer-f-r 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">
@ -28,22 +28,22 @@ js: example.js
</button> </button>
</li> </li>
<li class="nav-item hidden-sm-down"> <li class="nav-item hidden-sm-down">
<button class="btn mdb-btn-icon" title="Drawer left" id="drawer-pos-f-l"> <button class="btn mdb-btn-icon" title="Drawer left" id="drawer-f-l">
<i class="material-icons">border_left</i> <i class="material-icons">border_left</i>
</button> </button>
</li> </li>
<li class="nav-item hidden-sm-down"> <li class="nav-item hidden-sm-down">
<button class="btn mdb-btn-icon" title="Drawer right" id="drawer-pos-f-r"> <button class="btn mdb-btn-icon" title="Drawer right" id="drawer-f-r">
<i class="material-icons">border_right</i> <i class="material-icons">border_right</i>
</button> </button>
</li> </li>
<li class="nav-item hidden-sm-down"> <li class="nav-item hidden-sm-down">
<button class="btn mdb-btn-icon" title="Drawer top" id="drawer-pos-f-t"> <button class="btn mdb-btn-icon" title="Drawer top" id="drawer-f-t">
<i class="material-icons">border_top</i> <i class="material-icons">border_top</i>
</button> </button>
</li> </li>
<li class="nav-item hidden-sm-down"> <li class="nav-item hidden-sm-down">
<button class="btn mdb-btn-icon" title="Drawer bottom" id="drawer-pos-f-b"> <button class="btn mdb-btn-icon" title="Drawer bottom" id="drawer-f-b">
<i class="material-icons">border_bottom</i> <i class="material-icons">border_bottom</i>
</button> </button>
</li> </li>

29
scss/_drawer.scss
View File

@ -82,16 +82,17 @@
// //
// Used with <div class="mdb-layout-container mdb-drawer-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 { //.kitchen-sink-drawer {
@include mdb-drawer-x-out(500px); // @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);
// }
// }
//}
&: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 // // 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);
//} //}
@ -101,9 +102,9 @@
// //
// Used with <div class="mdb-layout-container mdb-drawer-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-out(500px); // closed by default // @include mdb-drawer-x-out(500px); // closed by default
@include mdb-drawer-x-in(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
} //}