+
+
-
-
-
-
- Toggle navigation
- menu
-
-
-
-
-
-
-
-
Navbar example
-
This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.
-
View navbar docs »
+
+
+
+ This is an implementation of
+
Material Design Lite's dashboard template . It provides a simple way to compare approaches with source code. Original design and assets credited to the MDL team.
+
(see license)
+ .
+
+
+
+
+
+
+ 82
+ %
+
+
+
+ 82
+ %
+
+
+
+ 82
+ %
+
+
+
+ 82
+ %
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Non dolore elit adipisicing ea reprehenderit consectetur culpa.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 500
+ 400
+ 300
+ 200
+ 100
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/examples/drawer/drawer.scss b/docs/examples/drawer/drawer.scss
deleted file mode 100644
index ae09f045..00000000
--- a/docs/examples/drawer/drawer.scss
+++ /dev/null
@@ -1,117 +0,0 @@
----
----
-
-body {
- /* Show it's not fixed to the top */
- min-height: 75rem;
- padding-top: 6rem;
-}
-
-//
-///*
-// * Base structure
-// */
-//
-///* Move down content because we have a fixed navbar that is 50px tall */
-//body {
-// padding-top: 50px;
-//}
-//
-//
-///*
-// * Global add-ons
-// */
-//
-//.sub-header {
-// padding-bottom: 10px;
-// border-bottom: 1px solid #eee;
-//}
-//
-///*
-// * Top navigation
-// * Hide default border to remove 1px line.
-// */
-//.navbar-fixed-top {
-// border: 0;
-//}
-//
-///*
-// * Sidebar
-// */
-//
-///* Hide for mobile, show later */
-//.sidebar {
-// display: none;
-//}
-//@media (min-width: 768px) {
-// .sidebar {
-// position: fixed;
-// top: 51px;
-// bottom: 0;
-// left: 0;
-// z-index: 1000;
-// display: block;
-// padding: 20px;
-// overflow-x: hidden;
-// overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-// background-color: #f5f5f5;
-// border-right: 1px solid #eee;
-// }
-//}
-//
-///* Sidebar navigation */
-//.nav-sidebar {
-// margin-right: -21px; /* 20px padding + 1px border */
-// margin-bottom: 20px;
-// margin-left: -20px;
-//}
-//.nav-sidebar > li > a {
-// padding-right: 20px;
-// padding-left: 20px;
-//}
-//.nav-sidebar > .active > a {
-// &,
-// &:hover,
-// &:focus {
-// color: #fff;
-// background-color: #428bca;
-// }
-//}
-//
-//
-///*
-// * Main content
-// */
-//
-//.main {
-// padding: 20px;
-//}
-//@media (min-width: 768px) {
-// .main {
-// padding-right: 40px;
-// padding-left: 40px;
-// }
-//}
-//.main .page-header {
-// margin-top: 0;
-//}
-//
-//
-///*
-// * Placeholder dashboard ideas
-// */
-//
-//.placeholders {
-// margin-bottom: 30px;
-// text-align: center;
-//}
-//.placeholders h4 {
-// margin-bottom: 0;
-//}
-//.placeholder {
-// margin-bottom: 20px;
-//}
-//.placeholder img {
-// display: inline-block;
-// border-radius: 50%;
-//}
diff --git a/docs/examples/drawer/index.html b/docs/examples/drawer/index.html
deleted file mode 100644
index d50f07aa..00000000
--- a/docs/examples/drawer/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-layout: example
-title: Drawer Template
-group: material-design
----
-
-
-
-
-
-
-
-
- Toggle navigation
- menu
-
-
-
-
-
-
-
-
-
Navbar example
-
This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.
-
View navbar docs »
-
-
diff --git a/docs/material-design/test.md b/docs/material-design/test.md
index 206cbc98..ebf49875 100644
--- a/docs/material-design/test.md
+++ b/docs/material-design/test.md
@@ -4,6 +4,77 @@ title: Test
group: material-design
---
+
{% example html %}
+
Normal navbar
+
+
+
+
+
+
+
+
Flex navbar
+With flex enabled on a navbar (and with compiled flex-enabled css), the nav elements do not inline.
+
+
+
+
+
+
+
{% endexample %}
diff --git a/scss/_cards.scss b/scss/_cards.scss
index 7c606df4..b9f2583d 100644
--- a/scss/_cards.scss
+++ b/scss/_cards.scss
@@ -1,3 +1,58 @@
+//https://www.google.com/design/spec/components/cards.html#cards-content-blocks
+// Card resting elevation: 2dp
.card {
- @include shadow-8dp();
+ border: 0;
+
+ // Cards have a default elevation of 2dp.
+ @include shadow-2dp();
+ @extend %std-font;
+
+ // spec: see "Avatar, Title, and Subtitle area"
+ // Height: 72dp
+ // Padding: 16dp
+ // Top and bottom padding: 16dp
+ .card-header {
+ padding: 1rem;
+ }
+
+ .card-block {
+ padding: 1.5rem 1rem 1rem;
+ //@extend %std-font;
+ }
+
+ // Primary title/text
+ // - Title: 24sp or 14sp
+ // - Subtitle: 14sp
+
+ // non-h* card-titles will be 14sp
+ //&.card-title {
+ // @extend %std-font;
+ //}
+
+ // any h* will signal the larger size should render as 24sp
+ @include headings() {
+ &.card-title {
+ font-size: 1.5rem;
+ font-weight: 300;
+ }
+ }
+
+ .mdb-card-actions, // needed? if you have actions in the middle of the card (see spec), it may be necessary
+ .card-footer { // assume footer is the set of actions?
+ padding: .5rem;
+ }
+
+ &.mdb-card-raised {
+ // Card raised elevation: 8dp
+ @include shadow-8dp();
+ }
+
+ @include media-breakpoint-up(lg) {
+ // On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover.
+ &.mdb-card-flat {
+ box-shadow: none;
+ }
+ }
}
+
+
diff --git a/scss/_core.scss b/scss/_core.scss
index 60325f1a..e8ae1512 100644
--- a/scss/_core.scss
+++ b/scss/_core.scss
@@ -23,6 +23,7 @@
@import "cards";
@import "modal";
@import "menu";
+@import "drawer";
@import "themes";
@import "ripples";
diff --git a/scss/_drawer.scss b/scss/_drawer.scss
new file mode 100644
index 00000000..48762358
--- /dev/null
+++ b/scss/_drawer.scss
@@ -0,0 +1,156 @@
+// .mdb-layout-fixed-drawer is a marker that both header and content respond to.
+
+
+//WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!!
+
+.mdb-layout-container {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+
+ // Main layout class.
+ .mdb-layout {
+ position: relative;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ flex-direction: column; // allows for sticky header and footer
+ overflow-x: hidden;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+}
+
+// Header
+.mdb-layout-header { // navbar
+ // FIXME: it would be nice to stick this directly on the navbar, but navbars are not flex ready, so this is relegated to be a container at this time.
+ z-index: 3;
+ box-sizing: border-box;
+ display: flex;
+ width: 100%;
+ max-height: 1000px;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ flex-shrink: 0;
+ justify-content: flex-start;
+ transition-property: max-height;
+
+ > .navbar { // heights for common scenarios such as a header with a navbar
+
+ // Current navbar is not flex enabled https://github.com/twbs/bootstrap/issues/18875
+ // - with flex a vertical align is a breeze
+ // - with standard layout, we need to use padding instead of height to layout.
+ min-height: $mdb-layout-mobile-header-height;
+
+ // FIXME: hack remove padding once the flex layout works properly
+ $padding: ($mdb-layout-mobile-header-height - (1rem * $line-height)) / 2;
+ padding-top: $padding;
+ padding-bottom: $padding;
+
+ @include media-breakpoint-up(lg) {
+ min-height: $mdb-layout-desktop-header-height;
+
+ // FIXME: hack remove padding once the flex layout works properly
+ $padding: ($mdb-layout-desktop-header-height - (1rem * $line-height)) / 2;
+ padding-top: $padding;
+ padding-bottom: $padding;
+ }
+ }
+}
+
+// Drawer.
+.mdb-layout-drawer {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 5;
+ box-sizing: border-box;
+ display: flex;
+ height: 100%;
+ max-height: 100%;
+
+ flex-direction: column;
+ flex-wrap: nowrap;
+ overflow: visible;
+ overflow-y: auto;
+ color: $mdb-layout-text-color;
+ background: $mdb-layout-drawer-bg-color;
+
+ // Transform offscreen.
+ transition: transform;
+ will-change: transform;
+ transform-style: preserve-3d;
+
+ @include shadow-2dp();
+ @include material-animation-default();
+
+ > * {
+ flex-shrink: 0;
+ }
+
+ .mdl-navigation {
+ flex-direction: column;
+ align-items: stretch;
+ padding-top: 1rem;
+ }
+}
+
+// Content.
+.mdb-layout-content {
+ position: relative;
+ z-index: 1;
+ display: inline-block;
+ //-ms-flex: 0 1 auto; // Fix IE10 bug.
+ overflow-x: hidden;
+ overflow-y: auto;
+ flex-grow: 1;
+ -webkit-overflow-scrolling: touch; // TODO: why?
+}
+
+
+// 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-layout-header {
+ @include media-breakpoint-up(lg) {
+ .mdb-layout-fixed-drawer > & {
+ width: calc(100% - #{$mdb-layout-drawer-sm});
+ margin-left: $mdb-layout-drawer-sm;
+ }
+ }
+}
+
+// Responsive Drawer Width
+.mdb-layout-drawer {
+ width: $mdb-layout-drawer-sm;
+ transform: translateX(-$mdb-layout-drawer-sm - 10px); // initially way off screen
+
+ //&.is-visible {
+ // transform: translateX(0);
+ // ~ .mdb-layout-content.mdb-layout-content {
+ // overflow: hidden;
+ // }
+ //}
+
+ @include media-breakpoint-up(lg) {
+ .mdb-layout-fixed-drawer > & {
+ transform: translateX(0);
+ }
+ }
+}
+
+// Responsive Content with fixed drawer
+.mdb-layout-content {
+
+ .mdb-layout-fixed-drawer > & {
+ margin-left: 0;
+ }
+
+ @include media-breakpoint-up(lg) {
+ .mdb-layout-fixed-drawer > & {
+ margin-left: $mdb-layout-drawer-sm;
+ }
+ }
+}
+
+
diff --git a/scss/_menu.scss b/scss/_menu.scss
index b8736b0b..0f0dbec9 100644
--- a/scss/_menu.scss
+++ b/scss/_menu.scss
@@ -67,12 +67,14 @@
min-height: $mdb-menu-item-min-height;
flex-flow: row wrap;
+ align-items: center;
padding-top: $mdb-menu-item-padding-top;
padding-right: $mdb-menu-item-padding-right;
padding-bottom: $mdb-menu-item-padding-bottom;
padding-left: $mdb-menu-item-padding-left;
+
// FIXME: multi-line menu word wrapping doesn't work - see the maximum width example in menus.md
overflow: hidden;
line-height: $mdb-menu-line-height;
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index d30cc3db..b1b7ff9e 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -1,5 +1,6 @@
@import "mixins/utilities";
@import "mixins/animations";
+@import "mixins/type";
@import "mixins/shadows";
@import "mixins/variations";
@import "mixins/forms";
diff --git a/scss/mixins/_type.scss b/scss/mixins/_type.scss
new file mode 100644
index 00000000..8d8873b6
--- /dev/null
+++ b/scss/mixins/_type.scss
@@ -0,0 +1,11 @@
+@mixin headings() {
+ h1, h2, h3, h4, h5, h6 {
+ @content;
+ }
+}
+
+// 14sp font
+%std-font {
+ font-size: .875rem;
+ font-weight: normal;
+}
diff --git a/scss/variables/_drawer.scss b/scss/variables/_drawer.scss
new file mode 100644
index 00000000..58bd09a7
--- /dev/null
+++ b/scss/variables/_drawer.scss
@@ -0,0 +1,11 @@
+// Drawer
+$mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default;
+$mdb-layout-text-color: rgba($grey-800, 1) !default;
+
+// Sizing
+$mdb-layout-drawer-sm: 240px !default;
+
+// General layout header height.
+// FIXME: is this really necessary or something to be considered custom?
+$mdb-layout-mobile-header-height: 3.5rem !default; // 56px
+$mdb-layout-desktop-header-height: 4rem !default; // 64px
diff --git a/scss/variables/bootstrap/_card.scss b/scss/variables/bootstrap/_card.scss
index 089ac6ab..6c18fba1 100644
--- a/scss/variables/bootstrap/_card.scss
+++ b/scss/variables/bootstrap/_card.scss
@@ -3,10 +3,10 @@
//$card-spacer-y: .75rem !default;
//$card-border-width: 1px !default;
//$card-border-radius: $border-radius !default;
-//$card-border-color: #e5e5e5 !default;
+$card-border-color: $gray-lighter !default; // #e5e5e5
//$card-border-radius-inner: $card-border-radius !default;
-//$card-cap-bg: #f5f5f5 !default;
-//$card-bg: #fff !default;
+$card-bg: #fff !default;
+$card-cap-bg: $card-bg !default; // #f5f5f5
//
//$card-link-hover-color: #fff !default;
//