google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reviewing article template to reduce/improve custom CSS. 

Also moving an important fix upstream to layout component.
master
Sérgio Gomes 2015-06-26 11:44:08 +01:00
parent 1e6860b7f9
commit cf45ccf3b8
3 changed files with 15 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/layout/_layout.scss
View File

@ -41,6 +41,10 @@
overflow-y: auto;
overflow-x: hidden;
position: relative;
& > * {
flex-shrink: 0;
}
}
// Utility classes for screen sizes.

8
templates/article/index.html
View File

@ -44,8 +44,8 @@
</style>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
<header class="mdl-layout__header mdl-layout__header--scroll mdl-layout--fixed-header mdl-color--grey-100 mdl-color-text--grey-800">
<div class="demo-layout mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100">
<header class="demo-header mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Material Design Lite</span>
<div class="mdl-layout-spacer"></div>
@ -61,7 +61,7 @@
</div>
</header>
<div class="demo-ribbon"></div>
<main class="mdl-layout__content">
<main class="demo-main mdl-layout__content">
<div class="demo-container mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="demo-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
@ -106,7 +106,7 @@
</div>
</div>
</main>
<footer class="mdl-mini-footer">
<footer class="demo-footer mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<ul class="mdl-mini-footer--link-list">
<li><a href="#">Help</a></li>

25
templates/article/styles.css
View File

@ -1,27 +1,14 @@
html, body {
margin: 0;
padding: 0;
}
.demo-ribbon {
width: 100%;
height: 40vh;
background-color: #3F51B5;
}
.mdl-layout > * {
flex-shrink: 0;
}
main.mdl-layout__content.mdl-layout__content {
.demo-main {
margin-top: -35vh;
}
header.mdl-layout__header {
display: flex !important;
}
.mdl-layout__header-row {
.demo-header .mdl-layout__header-row {
padding-left: 40px;
}
@ -37,16 +24,18 @@ header.mdl-layout__header {
margin-bottom: 80px;
}
.is-small-screen .demo-content {
.demo-layout.is-small-screen .demo-content {
padding: 40px 28px;
}
.demo-content h3 {
margin-top: 48px;
}
.mdl-mini-footer {
.demo-footer {
padding-left: 40px;
}
.mdl-mini-footer .mdl-mini-footer--link-list a {
.demo-footer .mdl-mini-footer--link-list a {
font-size: 13px;
}