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)
}
$(document).ready(function() { // document ready is a little convoluted because this executes before jquery.
var buttons = ["drawer-pos-f-l", "drawer-pos-f-r", "drawer-pos-f-t", "drawer-pos-f-b"]
$(document).ready(function() {
var buttons = ["drawer-f-l", "drawer-f-r", "drawer-f-t", "drawer-f-b"]
$.each(buttons, function (index, position) {
$('#' + position).click(function() {

10
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-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">
<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">
@ -28,22 +28,22 @@ js: example.js
</button>
</li>
<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>
</button>
</li>
<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>
</button>
</li>
<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>
</button>
</li>
<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>
</button>
</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">
//
.kitchen-sink-drawer {
@include mdb-drawer-x-out(500px);
//.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);
// }
// }
//}
&: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);
//}
@ -101,9 +102,9 @@
//
// 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-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
}
//.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
//}