<!-- | |
Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | |
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | |
Code distributed by Google as part of the polymer project is also | |
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | |
--> | |
<style shim-shadowdom> | |
/******************************* | |
Flex Layout | |
*******************************/ | |
html /deep/ [layout][horizontal], html /deep/ [layout][vertical] { | |
display: -ms-flexbox; | |
display: -webkit-flex; | |
display: flex; | |
} | |
html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] { | |
display: -ms-inline-flexbox; | |
display: -webkit-inline-flex; | |
display: inline-flex; | |
} | |
html /deep/ [layout][horizontal] { | |
-ms-flex-direction: row; | |
-webkit-flex-direction: row; | |
flex-direction: row; | |
} | |
html /deep/ [layout][horizontal][reverse] { | |
-ms-flex-direction: row-reverse; | |
-webkit-flex-direction: row-reverse; | |
flex-direction: row-reverse; | |
} | |
html /deep/ [layout][vertical] { | |
-ms-flex-direction: column; | |
-webkit-flex-direction: column; | |
flex-direction: column; | |
} | |
html /deep/ [layout][vertical][reverse] { | |
-ms-flex-direction: column-reverse; | |
-webkit-flex-direction: column-reverse; | |
flex-direction: column-reverse; | |
} | |
html /deep/ [layout][wrap] { | |
-ms-flex-wrap: wrap; | |
-webkit-flex-wrap: wrap; | |
flex-wrap: wrap; | |
} | |
html /deep/ [layout][wrap-reverse] { | |
-ms-flex-wrap: wrap-reverse; | |
-webkit-flex-wrap: wrap-reverse; | |
flex-wrap: wrap-reverse; | |
} | |
html /deep/ [flex] { | |
-ms-flex: 1 1 0.000000001px; | |
-webkit-flex: 1; | |
flex: 1; | |
-webkit-flex-basis: 0.000000001px; | |
flex-basis: 0.000000001px; | |
} | |
html /deep/ [vertical][layout] > [flex][auto-vertical], html /deep/ [vertical][layout]::shadow [flex][auto-vertical] { | |
-ms-flex: 1 1 auto; | |
-webkit-flex-basis: auto; | |
flex-basis: auto; | |
} | |
html /deep/ [flex][auto] { | |
-ms-flex: 1 1 auto; | |
-webkit-flex-basis: auto; | |
flex-basis: auto; | |
} | |
html /deep/ [flex][none] { | |
-ms-flex: none; | |
-webkit-flex: none; | |
flex: none; | |
} | |
html /deep/ [flex][one] { | |
-ms-flex: 1; | |
-webkit-flex: 1; | |
flex: 1; | |
} | |
html /deep/ [flex][two] { | |
-ms-flex: 2; | |
-webkit-flex: 2; | |
flex: 2; | |
} | |
html /deep/ [flex][three] { | |
-ms-flex: 3; | |
-webkit-flex: 3; | |
flex: 3; | |
} | |
html /deep/ [flex][four] { | |
-ms-flex: 4; | |
-webkit-flex: 4; | |
flex: 4; | |
} | |
html /deep/ [flex][five] { | |
-ms-flex: 5; | |
-webkit-flex: 5; | |
flex: 5; | |
} | |
html /deep/ [flex][six] { | |
-ms-flex: 6; | |
-webkit-flex: 6; | |
flex: 6; | |
} | |
html /deep/ [flex][seven] { | |
-ms-flex: 7; | |
-webkit-flex: 7; | |
flex: 7; | |
} | |
html /deep/ [flex][eight] { | |
-ms-flex: 8; | |
-webkit-flex: 8; | |
flex: 8; | |
} | |
html /deep/ [flex][nine] { | |
-ms-flex: 9; | |
-webkit-flex: 9; | |
flex: 9; | |
} | |
html /deep/ [flex][ten] { | |
-ms-flex: 10; | |
-webkit-flex: 10; | |
flex: 10; | |
} | |
html /deep/ [flex][eleven] { | |
-ms-flex: 11; | |
-webkit-flex: 11; | |
flex: 11; | |
} | |
html /deep/ [flex][twelve] { | |
-ms-flex: 12; | |
-webkit-flex: 12; | |
flex: 12; | |
} | |
/* alignment in cross axis */ | |
html /deep/ [layout][start] { | |
-ms-flex-align: start; | |
-webkit-align-items: flex-start; | |
align-items: flex-start; | |
} | |
html /deep/ [layout][center], html /deep/ [layout][center-center] { | |
-ms-flex-align: center; | |
-webkit-align-items: center; | |
align-items: center; | |
} | |
html /deep/ [layout][end] { | |
-ms-flex-align: end; | |
-webkit-align-items: flex-end; | |
align-items: flex-end; | |
} | |
/* alignment in main axis */ | |
html /deep/ [layout][start-justified] { | |
-ms-flex-pack: start; | |
-webkit-justify-content: flex-start; | |
justify-content: flex-start; | |
} | |
html /deep/ [layout][center-justified], html /deep/ [layout][center-center] { | |
-ms-flex-pack: center; | |
-webkit-justify-content: center; | |
justify-content: center; | |
} | |
html /deep/ [layout][end-justified] { | |
-ms-flex-pack: end; | |
-webkit-justify-content: flex-end; | |
justify-content: flex-end; | |
} | |
html /deep/ [layout][around-justified] { | |
-ms-flex-pack: distribute; | |
-webkit-justify-content: space-around; | |
justify-content: space-around; | |
} | |
html /deep/ [layout][justified] { | |
-ms-flex-pack: justify; | |
-webkit-justify-content: space-between; | |
justify-content: space-between; | |
} | |
/* self alignment */ | |
html /deep/ [self-start] { | |
-ms-align-self: flex-start; | |
-webkit-align-self: flex-start; | |
align-self: flex-start; | |
} | |
html /deep/ [self-center] { | |
-ms-align-self: center; | |
-webkit-align-self: center; | |
align-self: center; | |
} | |
html /deep/ [self-end] { | |
-ms-align-self: flex-end; | |
-webkit-align-self: flex-end; | |
align-self: flex-end; | |
} | |
html /deep/ [self-stretch] { | |
-ms-align-self: stretch; | |
-webkit-align-self: stretch; | |
align-self: stretch; | |
} | |
/******************************* | |
Other Layout | |
*******************************/ | |
html /deep/ [block] { | |
display: block; | |
} | |
/* ie support for hidden */ | |
html /deep/ [hidden] { | |
display: none !important; | |
} | |
html /deep/ [relative] { | |
position: relative; | |
} | |
html /deep/ [fit] { | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
} | |
body[fullbleed] { | |
margin: 0; | |
height: 100vh; | |
} | |
/******************************* | |
Other | |
*******************************/ | |
html /deep/ [segment], html /deep/ segment { | |
display: block; | |
position: relative; | |
-webkit-box-sizing: border-box; | |
-ms-box-sizing: border-box; | |
box-sizing: border-box; | |
margin: 1em 0.5em; | |
padding: 1em; | |
background-color: white; | |
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); | |
border-radius: 5px 5px 5px 5px; | |
} | |
</style> |