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

cleanup dash, found out layout was not included. it may be more bootstrappish to remove the flex layout, and rely on standard layouts. will try next.

Browse Source
This commit is contained in:
Kevin Ross 2016-01-14 15:06:39 -06:00
parent 95098dc50f
commit 55f5b2c8af
4 changed files with 29 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/examples/dashboard/index.html
View File

@ -8,7 +8,7 @@ group: material-design
<link href="example.css" rel="stylesheet"> <link href="example.css" rel="stylesheet">
<div class="mdb-layout-container"> <div class="mdb-layout-container">
<div class="mdb-layout mdb-layout-fixed-drawer"> <div class="mdb-layout mdb-drawer-fixed-left">
<header class="mdb-layout-header"> <header class="mdb-layout-header">
<!-- <!--
<div class="collapse" id="navbar-header"> <div class="collapse" id="navbar-header">
@ -115,7 +115,7 @@ group: material-design
<div class="container"> <div class="container">
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
This is an implementation of This is an implementation of
<a href="http://www.getmdl.io/templates/dashboard/index.html">Material Design Lite's dashboard template</a>. It provides a simple way to compare approaches with source code. Original design and assets credited to the MDL team. <a href="http://www.getmdl.io/templates/dashboard/index.html">Material Design Lite's dashboard template</a>. It provides a simple way to compare approaches with source code. Original design and assets credited to the MDL team.
<small>(see license)</small> <small>(see license)</small>
. .
</div> </div>
@ -219,10 +219,8 @@ group: material-design
</div> </div>
</div> </div>
</div> </div>
</main>
</div> </div>
</main>
</div> </div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;">
<defs> <defs>

1
scss/_core.scss
View File

@ -7,6 +7,7 @@
@import "mixins"; @import "mixins";
@import "reboot"; @import "reboot";
@import "layout";
@import "buttons"; @import "buttons";
@import "checkboxes"; @import "checkboxes";
@import "switches"; @import "switches";

50
scss/_drawer.scss
View File

@ -1,10 +1,7 @@
// .mdb-layout-fixed-drawer is a marker that both header and content respond to. // .mdb-drawer-fixed-left is a marker that both header and content respond to.
//WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!! //WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!!
// Drawer. // Drawer.
.mdb-layout-drawer { .mdb-layout-drawer {
position: absolute; position: absolute;
@ -42,49 +39,42 @@
} }
} }
// FIXME: the below needs to happen if it is the right size OR if the drawer is visible. Need to look at collapse or collapseInline to see if it can help us here. // FIXME: the below needs to happen if it is the right size OR if the drawer is visible. Need to look at collapse or collapseInline to see if it can help us here.
// Responsive Header with fixed drawer .mdb-drawer-fixed-left {
.mdb-layout-header {
@include media-breakpoint-up(lg) { // Responsive Header
.mdb-layout-fixed-drawer > & { > .mdb-layout-header {
@include media-breakpoint-up(lg) {
width: calc(100% - #{$mdb-layout-drawer-sm}); width: calc(100% - #{$mdb-layout-drawer-sm});
margin-left: $mdb-layout-drawer-sm; margin-left: $mdb-layout-drawer-sm;
} }
} }
}
// Responsive Drawer Width // Responsive Drawer Width
.mdb-layout-drawer { > .mdb-layout-drawer {
width: $mdb-layout-drawer-sm; width: $mdb-layout-drawer-sm;
transform: translateX(-$mdb-layout-drawer-sm - 10px); // initially way off screen transform: translateX(-$mdb-layout-drawer-sm - 10px); // initially way off screen
//&.is-visible { //&.is-visible {
// transform: translateX(0); // transform: translateX(0);
// ~ .mdb-layout-content.mdb-layout-content { // ~ .mdb-layout-content.mdb-layout-content {
// overflow: hidden; // overflow: hidden;
// } // }
//} //}
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
.mdb-layout-fixed-drawer > & {
transform: translateX(0); transform: translateX(0);
} }
} }
}
// Responsive Content with fixed drawer // Responsive Content with fixed drawer
.mdb-layout-content { > .mdb-layout-content {
.mdb-layout-fixed-drawer > & {
margin-left: 0; margin-left: 0;
}
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
.mdb-layout-fixed-drawer > & {
margin-left: $mdb-layout-drawer-sm; margin-left: $mdb-layout-drawer-sm;
} }
} }
} }

5
scss/mixins/_drawer.scss Normal file
View File

@ -0,0 +1,5 @@
@mixin collapse-open-or-breakpoint-up() {
h1, h2, h3, h4, h5, h6 {
@content;
}
}