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

Fix templates for ie10

master
Alexander Surma 2015-05-13 17:05:14 +01:00
parent 4b1c65ac90
commit 92d12728b4
5 changed files with 35 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
templates/blog/styles.css
View File

@ -251,3 +251,8 @@ h3.quote:after {
.something-else {
overflow: visible;
}
/* Fixes for IE 10 */
.mdl-grid {
display: flex !important;
}

4
templates/dashboard/styles.css
View File

@ -48,7 +48,9 @@ html, body {
padding: 0;
display: flex;
}
.charts {
align-items: center;
}
.charts svg:nth-child(1) {
fill: #ACEC00;
}

20
templates/general/styles.css
View File

@ -74,9 +74,7 @@ main > .mdl-layout__tab-panel > header > *:last-child {
#squares > .square {
min-height: 25vw;
display: flex;
flex-direction: row;
align-items: flex-end;
position: relative;
}
@media (max-width: 840px) {
#squares > .square {
@ -106,19 +104,22 @@ main > .mdl-layout__tab-panel > header > *:last-child {
background-size: cover;
}
.square > footer {
position: relative;
height: 20%;
position: absolute;
height: 33%;
width: 100%;
bottom: 0;
opacity: 0.7;
padding: 20px;
box-sizing: border-box;
}
.square > footer > button {
position: absolute;
top: 20px;
right: 20px;;
float: right;
}
.square > footer h3 {
font-size: 1.1em;
}
.square > footer > * {
margin: 0;
margin-bottom: 10px;
}
.square > footer > *:last-child {
@ -149,6 +150,9 @@ main > .mdl-layout__tab-panel > header > *:last-child {
justify-content: flex-start;
align-items: center;
}
.author p {
width: 100%;
}
.author h4 {
margin-bottom: 20px;
}

26
templates/text-only/index.html
View File

@ -51,15 +51,15 @@
</div>
<div class="mdl-layout__header-row">
</div>
<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
<a href="#overview" class="mdl-layout__tab is-active">Overview</a>
<a href="#features" class="mdl-layout__tab">Features</a>
<a href="#features" class="mdl-layout__tab">Details</a>
<a href="#features" class="mdl-layout__tab">Technology</a>
<a href="#features" class="mdl-layout__tab">FAQ</a>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="add"><span class="mdl-icon mdl-icon--add"></span></button>
</div>
</header>
<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
<a href="#overview" class="mdl-layout__tab is-active">Overview</a>
<a href="#features" class="mdl-layout__tab">Features</a>
<a href="#features" class="mdl-layout__tab">Details</a>
<a href="#features" class="mdl-layout__tab">Technology</a>
<a href="#features" class="mdl-layout__tab">FAQ</a>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="add"><span class="mdl-icon mdl-icon--add"></span></button>
</div>
<main class="mdl-layout__content">
<div class="mdl-layout__tab-panel is-active" id="overview">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
@ -89,19 +89,19 @@
<div class="mdl-card--lower mdl-grid mdl-grid--no-spacing">
<h3 class="mdl-cell mdl-cell--12-col">Details</h3>
<div class="section__circle mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<img class="mdl-color--primary">
<div class="mdl-color--primary"></div>
</div>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis proident minim.
</div>
<div class="section__circle mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<img class="mdl-color--primary">
<div class="mdl-color--primary"></div>
</div>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis proident minim.
</div>
<div class="section__circle mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<img class="mdl-color--primary">
<div class="mdl-color--primary"></div>
</div>
<div class="section__text mdl-cell mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
Duis nulla tempor do aute et eiusmod velit exercitation nostrud quis proident minim.
@ -141,13 +141,13 @@
</section>
<section class="mdl-color--white mdl-grid">
<div class="section__circle section__circle--big mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<img class="mdl-color--accent">
<div class="mdl-color--accent"></div>
</div>
<div class="section__text mdl-cell mdl-cell--4-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex. Magna do magna ea anim occaecat anim non sit adipisicing et do sit sit laboris. Magna dolore do id mollit reprehenderit.
</div>
<div class="section__circle section__circle--big mdl-cell mdl-cell--2-col mdl-cell--1-col-phone">
<img class="mdl-color--accent">
<div class="mdl-color--accent"></div>
</div>
<div class="section__text mdl-cell mdl-cell--4-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone">
Qui sint ut et qui nisi cupidatat. Reprehenderit nostrud proident officia exercitation anim et pariatur ex. Magna do magna ea anim occaecat anim non sit adipisicing et do sit sit laboris. Magna dolore do id mollit reprehenderit.

11
templates/text-only/styles.css
View File

@ -55,24 +55,17 @@ section .section__circle {
align-items: center;
justify-content: center;
}
section .section__circle img {
section .section__circle > div {
width: 48px;
height: 48px;
border-radius: 24px;
margin: 8px;
}
section .section__circle--big img {
section .section__circle--big > div {
width: 72px;
height: 72px;
border-radius: 36px;
}
section .section__text {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
align-content: center;
}
section.section--center .section__text:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,.13);
}