2015-06-15 21:52:01 -07:00
|
|
|
<!--
|
|
|
|
@license
|
|
|
|
Copyright (c) 2015 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>
|
|
|
|
|
|
|
|
/*******************************
|
|
|
|
Flex Layout
|
|
|
|
*******************************/
|
|
|
|
|
|
|
|
html /deep/ .layout.horizontal,
|
|
|
|
html /deep/ .layout.horizontal-reverse,
|
|
|
|
html /deep/ .layout.vertical,
|
|
|
|
html /deep/ .layout.vertical-reverse {
|
|
|
|
display: -ms-flexbox;
|
|
|
|
display: -webkit-flex;
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .layout.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-auto {
|
|
|
|
-ms-flex: 1 1 auto;
|
|
|
|
-webkit-flex: 1 1 auto;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .flex-none {
|
|
|
|
-ms-flex: none;
|
|
|
|
-webkit-flex: none;
|
|
|
|
flex: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .flex,
|
|
|
|
html /deep/ .flex-1 {
|
|
|
|
-ms-flex: 1;
|
|
|
|
-webkit-flex: 1;
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .flex-2 {
|
|
|
|
-ms-flex: 2;
|
|
|
|
-webkit-flex: 2;
|
|
|
|
flex: 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .flex-3 {
|
|
|
|
-ms-flex: 3;
|
|
|
|
-webkit-flex: 3;
|
|
|
|
flex: 3;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .flex-4 {
|
|
|
|
-ms-flex: 4;
|
|
|
|
-webkit-flex: 4;
|
|
|
|
flex: 4;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .flex-5 {
|
|
|
|
-ms-flex: 5;
|
|
|
|
-webkit-flex: 5;
|
|
|
|
flex: 5;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .flex-6 {
|
|
|
|
-ms-flex: 6;
|
|
|
|
-webkit-flex: 6;
|
|
|
|
flex: 6;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .flex-7 {
|
|
|
|
-ms-flex: 7;
|
|
|
|
-webkit-flex: 7;
|
|
|
|
flex: 7;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .flex-8 {
|
|
|
|
-ms-flex: 8;
|
|
|
|
-webkit-flex: 8;
|
|
|
|
flex: 8;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .flex-9 {
|
|
|
|
-ms-flex: 9;
|
|
|
|
-webkit-flex: 9;
|
|
|
|
flex: 9;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .flex-10 {
|
|
|
|
-ms-flex: 10;
|
|
|
|
-webkit-flex: 10;
|
|
|
|
flex: 10;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .flex-11 {
|
|
|
|
-ms-flex: 11;
|
|
|
|
-webkit-flex: 11;
|
|
|
|
flex: 11;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .flex-12 {
|
|
|
|
-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: around;
|
|
|
|
-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 10 support for HTML5 hidden attr */
|
|
|
|
html /deep/ [hidden] {
|
|
|
|
display: none !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .invisible {
|
|
|
|
visibility: hidden !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;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .scroll {
|
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fixed-bottom,
|
|
|
|
.fixed-left,
|
|
|
|
.fixed-right,
|
|
|
|
.fixed-top {
|
|
|
|
position: fixed;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .fixed-top {
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .fixed-right {
|
|
|
|
top: 0;
|
|
|
|
right: 0;
|
2015-12-14 08:43:03 -07:00
|
|
|
bottom: 0;
|
2015-06-15 21:52:01 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .fixed-bottom {
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
html /deep/ .fixed-left {
|
|
|
|
top: 0;
|
2015-12-14 08:43:03 -07:00
|
|
|
bottom: 0;
|
2015-06-15 21:52:01 -07:00
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|