Fix templates for ie10
parent
4b1c65ac90
commit
92d12728b4
|
@ -251,3 +251,8 @@ h3.quote:after {
|
|||
.something-else {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Fixes for IE 10 */
|
||||
.mdl-grid {
|
||||
display: flex !important;
|
||||
}
|
|
@ -48,7 +48,9 @@ html, body {
|
|||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.charts {
|
||||
align-items: center;
|
||||
}
|
||||
.charts svg:nth-child(1) {
|
||||
fill: #ACEC00;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -51,7 +51,6 @@
|
|||
</div>
|
||||
<div class="mdl-layout__header-row">
|
||||
</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>
|
||||
|
@ -60,6 +59,7 @@
|
|||
<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>
|
||||
<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.
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue