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-y: auto;
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
& > * {
flex-shrink: 0;
}
} }
// Utility classes for screen sizes. // Utility classes for screen sizes.

8
templates/article/index.html
View File

@ -44,8 +44,8 @@
</style> </style>
</head> </head>
<body> <body>
<div class="mdl-layout mdl-js-layout mdl-color--grey-100"> <div class="demo-layout mdl-layout mdl-layout--fixed-header 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"> <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"> <div class="mdl-layout__header-row">
<span class="mdl-layout-title">Material Design Lite</span> <span class="mdl-layout-title">Material Design Lite</span>
<div class="mdl-layout-spacer"></div> <div class="mdl-layout-spacer"></div>
@ -61,7 +61,7 @@
</div> </div>
</header> </header>
<div class="demo-ribbon"></div> <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="demo-container mdl-grid">
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div> <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"> <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>
</div> </div>
</main> </main>
<footer class="mdl-mini-footer"> <footer class="demo-footer mdl-mini-footer">
<div class="mdl-mini-footer--left-section"> <div class="mdl-mini-footer--left-section">
<ul class="mdl-mini-footer--link-list"> <ul class="mdl-mini-footer--link-list">
<li><a href="#">Help</a></li> <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 { .demo-ribbon {
width: 100%; width: 100%;
height: 40vh; height: 40vh;
background-color: #3F51B5; background-color: #3F51B5;
} }
.mdl-layout > * { .demo-main {
flex-shrink: 0;
}
main.mdl-layout__content.mdl-layout__content {
margin-top: -35vh; margin-top: -35vh;
} }
header.mdl-layout__header { .demo-header .mdl-layout__header-row {
display: flex !important;
}
.mdl-layout__header-row {
padding-left: 40px; padding-left: 40px;
} }
@ -37,16 +24,18 @@ header.mdl-layout__header {
margin-bottom: 80px; margin-bottom: 80px;
} }
.is-small-screen .demo-content { .demo-layout.is-small-screen .demo-content {
padding: 40px 28px; padding: 40px 28px;
} }
.demo-content h3 { .demo-content h3 {
margin-top: 48px; margin-top: 48px;
} }
.mdl-mini-footer {
.demo-footer {
padding-left: 40px; padding-left: 40px;
} }
.mdl-mini-footer .mdl-mini-footer--link-list a {
.demo-footer .mdl-mini-footer--link-list a {
font-size: 13px; font-size: 13px;
} }