Permalink
Browse files

feature: Templates admin + sticky-footer improved

  • Loading branch information...
MikeMitterer committed May 22, 2015
1 parent 80c3645 commit 96c59bad323bbc87115f9746886604d8827db753
@@ -8415,10 +8415,6 @@ Palettes (10 colors) 50 - 900 possible
.mdl-layout.is-upgraded .mdl-layout__tab-panel.is-active {
display: block; }
@media screen and (max-width: 850px) {
.mdl-layout.mdl-layout--fixed-drawer.mdl-layout--fixed-header .mdl-layout__header .mdl-layout-title {
margin-left: 28px; } }
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
@@ -22,11 +22,6 @@
<div class="demo-preview-block">
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button">Flat</button></div>
<div class="demo-button">Raised: <button class="mdl-button mdl-js-button mdl-button--raised">Raised</button></div>
<div class="demo-button">FAB: <button class="mdl-button mdl-js-button mdl-button--fab"><span class="mdl-icon mdl-icon--add"/></button></div>
<div class="demo-button">Icon: <button class="mdl-button mdl-js-button mdl-button--icon"><span class="mdl-icon mdl-icon--create"/></button></div>
<h5>With Ripples</h5>
<div class="demo-button">Flat: <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Flat</button></div>
@@ -35,27 +35,29 @@
<body class="mdl-typography mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-color--900">
<span class="mdl-layout-title mdl-color-text--white">Fixed drawer and header</span>
<div class="mdl-layout-spacer"></div>
<div class="toolbar">
<span class="mdl-icon mdl-icon--assignment" title="mdl-icon--book"></span>
<span class="mdl-icon mdl-icon--perm-phone-msg mdl-badge" title="mdl-icon--perm-phone-msg">
<span class="mdl-badge" data-badge="5"></span>
</span>
<span class="mdl-icon mdl-icon--help" title="mdl-icon--help"></span>
</div>
<div class="mdl-layout__header-row">
<div class="mdl-layout-title mdl-color-text--white">Fixed drawer and header</div>
<div class="container">
<div class="toolbar">
<span class="mdl-icon mdl-icon--assignment" title="mdl-icon--book"></span>
<span class="mdl-icon mdl-icon--perm-phone-msg mdl-badge" title="mdl-icon--perm-phone-msg">
<span class="mdl-badge" data-badge="5"></span>
</span>
<span class="mdl-icon mdl-icon--help" title="mdl-icon--help"></span>
</div>
<button id="clickable3" class="demo-menu-button-right2 mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
</button>
<button id="clickable3" class="demo-menu-button-right2 mdl-button mdl-js-button mdl-button--icon">
<span class="mdl-icon mdl-icon--more-vert"/>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="clickable3">
<li class="mdl-menu__item">5.0 Lollipop</li>
<li class="mdl-menu__item">4.4 KitKat</li>
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
<li class="mdl-menu__item">Android History</li>
</ul>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="clickable3">
<li class="mdl-menu__item">5.0 Lollipop</li>
<li class="mdl-menu__item">4.4 KitKat</li>
<li disabled class="mdl-menu__item">4.3 Jelly Bean</li>
<li class="mdl-menu__item">Android History</li>
</ul>
</div>
</div>
</header>
<div class="mdl-layout__drawer mdl-color--800">
<span class="mdl-layout-title mdl-color--900 mdl-color-text--white">Material Design Lite</span>
@@ -19,23 +19,49 @@ html, body {
// mdl-layout__container is added by the Dart-Framework so it takes a while to load...
.mdl-layout {
.toolbar {
margin-top: 7px;
margin-right: 24px;
&:not(.is-small-screen) {
.container { margin-right: 220px; }
}
&.is-small-screen {
.mdl-layout__header-row { padding-left: 60px; }
}
.mdl-layout__header-row {
padding-left: 24px;
}
.mdl-icon {
font-size: 18px;
margin: 0px 8px 0 8px;
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end; // ⇾
align-content: space-between; // ||
align-items: flex-start; // ↓
.mdl-badge {
margin-left: -8px;
flex-grow: 1;
.toolbar {
margin-top: 7px;
margin-right: 24px;
.mdl-icon {
font-size: 18px;
margin: 0px 8px 0 8px;
.mdl-badge {
margin-left: -8px;
}
}
}
}
.mdl-layout__drawer {
overflow: scroll;
//border-right-color: #607d8b;
height: calc(100% - 48px);
box-shadow: initial;
border-right: initial;
@@ -35,15 +35,8 @@
<body class="mdl-typography mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header">
<span class="mdl-layout-title mdl-color--primary mdl-color-text--white">Fixed drawer and header</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample-expclean2">
<span class="mdl-icon mdl-icon--search"/>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample" id="sample-expclean2"/>
</div>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title mdl-color--primary mdl-color-text--white">Fixed drawer and header</span>
</div>
</header>
<div class="mdl-layout__drawer mdl-color--50">
@@ -1,6 +1,8 @@
$icon-font-path : "../packages/mdl/assets/fonts" !default;
@import "packages/mdl/assets/styles/material-design-lite";
$footer-height: 48px;
html, body {
width : 100%;
height : 100%;
@@ -18,9 +20,22 @@ html, body {
// mdl-layout__container is added by the Dart-Framework so it takes a while to load...
.mdl-layout {
&:not(.is-small-screen) {
}
&.is-small-screen {
.mdl-layout__header-row { padding-left: 60px; }
}
.mdl-layout__header-row { padding-left: 24px; }
.mdl-layout__drawer {
overflow: scroll;
//border-right-color: #607d8b;
height: calc(100% - 48px);
box-shadow: initial;
}
.mdl-layout__content {
@@ -346,7 +346,7 @@ class MaterialMenu extends MdlComponent {
} else if (element.classes.contains(_cssClasses.BOTTOM_RIGHT)) {
// Position below the "for" element, aligned to its right.
_container.style.right = "${forRect.right - rect.right}px";
_container.style.right = "${forRect.right - rect.right + 10}px";
_container.style.top = "${_forElement.offsetTop + _forElement.offsetHeight}px";
} else if (element.classes.contains(_cssClasses.TOP_LEFT)) {
View
@@ -7,7 +7,7 @@ homepage: https://github.com/MikeMitterer/dart-material-design-lite
dependencies:
browser: ">=0.10.0+2 <0.11.0"
intl: ">=0.8.10+4 <0.9.0"
intl: '>=0.8.7 <0.12.0'
validate: ">=1.4.2 <2.0.0"
browser_detect: ">=1.0.3 <2.0.0"
@@ -16,15 +16,14 @@ dependencies:
console_log_handler: ">=0.1.4 <0.2.0"
# path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler
route_hierarchical: ">=0.5.0 <0.6.0"
# ">=0.6.1+1 <0.7.0"
route_hierarchical: '>=0.6.1 <0.7.0'
mustache: any
#git: git://github.com/xxgreg/mustache
validate: any
di: ">=3.3.4 <4.0.0"
di: ">=3.3.3 <4.0.0"
#">=3.3.4 <4.0.0"
dev_dependencies:

0 comments on commit 96c59ba

Please sign in to comment.