1<!--
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8-->
9<style shim-shadowdom>
10/*******************************
11          Flex Layout
12*******************************/
13
14html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
15  display: -ms-flexbox;
16  display: -webkit-flex;
17  display: flex;
18}
19
20html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
21  display: -ms-inline-flexbox;
22  display: -webkit-inline-flex;
23  display: inline-flex;
24}
25
26html /deep/ [layout][horizontal] {
27  -ms-flex-direction: row;
28  -webkit-flex-direction: row;
29  flex-direction: row;
30}
31
32html /deep/ [layout][horizontal][reverse] {
33  -ms-flex-direction: row-reverse;
34  -webkit-flex-direction: row-reverse;
35  flex-direction: row-reverse;
36}
37
38html /deep/ [layout][vertical] {
39  -ms-flex-direction: column;
40  -webkit-flex-direction: column;
41  flex-direction: column;
42}
43
44html /deep/ [layout][vertical][reverse] {
45  -ms-flex-direction: column-reverse;
46  -webkit-flex-direction: column-reverse;
47  flex-direction: column-reverse;
48}
49
50html /deep/ [layout][wrap] {
51  -ms-flex-wrap: wrap;
52  -webkit-flex-wrap: wrap;
53  flex-wrap: wrap;
54}
55
56html /deep/ [layout][wrap-reverse] {
57  -ms-flex-wrap: wrap-reverse;
58  -webkit-flex-wrap: wrap-reverse;
59  flex-wrap: wrap-reverse;
60}
61
62html /deep/ [flex] {
63  -ms-flex: 1 1 0.000000001px;
64  -webkit-flex: 1;
65  flex: 1;
66  -webkit-flex-basis: 0.000000001px;
67  flex-basis: 0.000000001px;
68}
69
70html /deep/ [vertical][layout] > [flex][auto-vertical], html /deep/ [vertical][layout]::shadow [flex][auto-vertical] {
71  -ms-flex: 1 1 auto;
72  -webkit-flex-basis: auto;
73  flex-basis: auto;
74}
75
76html /deep/ [flex][auto] {
77  -ms-flex: 1 1 auto;
78  -webkit-flex-basis: auto;
79  flex-basis: auto;
80}
81
82html /deep/ [flex][none] {
83  -ms-flex: none;
84  -webkit-flex: none;
85  flex: none;
86}
87
88html /deep/ [flex][one] {
89  -ms-flex: 1;
90  -webkit-flex: 1;
91  flex: 1;
92}
93
94html /deep/ [flex][two] {
95  -ms-flex: 2;
96  -webkit-flex: 2;
97  flex: 2;
98}
99
100html /deep/ [flex][three] {
101  -ms-flex: 3;
102  -webkit-flex: 3;
103  flex: 3;
104}
105
106html /deep/ [flex][four] {
107  -ms-flex: 4;
108  -webkit-flex: 4;
109  flex: 4;
110}
111
112html /deep/ [flex][five] {
113  -ms-flex: 5;
114  -webkit-flex: 5;
115  flex: 5;
116}
117
118html /deep/ [flex][six] {
119  -ms-flex: 6;
120  -webkit-flex: 6;
121  flex: 6;
122}
123
124html /deep/ [flex][seven] {
125  -ms-flex: 7;
126  -webkit-flex: 7;
127  flex: 7;
128}
129
130html /deep/ [flex][eight] {
131  -ms-flex: 8;
132  -webkit-flex: 8;
133  flex: 8;
134}
135
136html /deep/ [flex][nine] {
137  -ms-flex: 9;
138  -webkit-flex: 9;
139  flex: 9;
140}
141
142html /deep/ [flex][ten] {
143  -ms-flex: 10;
144  -webkit-flex: 10;
145  flex: 10;
146}
147
148html /deep/ [flex][eleven] {
149  -ms-flex: 11;
150  -webkit-flex: 11;
151  flex: 11;
152}
153
154html /deep/ [flex][twelve] {
155  -ms-flex: 12;
156  -webkit-flex: 12;
157  flex: 12;
158}
159
160/* alignment in cross axis */
161
162html /deep/ [layout][start] {
163  -ms-flex-align: start;
164  -webkit-align-items: flex-start;
165  align-items: flex-start;
166}
167
168html /deep/ [layout][center], html /deep/ [layout][center-center] {
169  -ms-flex-align: center;
170  -webkit-align-items: center;
171  align-items: center;
172}
173
174html /deep/ [layout][end] {
175  -ms-flex-align: end;
176  -webkit-align-items: flex-end;
177  align-items: flex-end;
178}
179
180/* alignment in main axis */
181
182html /deep/ [layout][start-justified] {
183  -ms-flex-pack: start;
184  -webkit-justify-content: flex-start;
185  justify-content: flex-start;
186}
187
188html /deep/ [layout][center-justified], html /deep/ [layout][center-center] {
189  -ms-flex-pack: center;
190  -webkit-justify-content: center;
191  justify-content: center;
192}
193
194html /deep/ [layout][end-justified] {
195  -ms-flex-pack: end;
196  -webkit-justify-content: flex-end;
197  justify-content: flex-end;
198}
199
200html /deep/ [layout][around-justified] {
201  -ms-flex-pack: distribute;
202  -webkit-justify-content: space-around;
203  justify-content: space-around;
204}
205
206html /deep/ [layout][justified] {
207  -ms-flex-pack: justify;
208  -webkit-justify-content: space-between;
209  justify-content: space-between;
210}
211
212/* self alignment */
213
214html /deep/ [self-start] {
215  -ms-align-self: flex-start;
216  -webkit-align-self: flex-start;
217  align-self: flex-start;
218}
219
220html /deep/ [self-center] {
221  -ms-align-self: center;
222  -webkit-align-self: center;
223  align-self: center;
224}
225
226html /deep/ [self-end] {
227  -ms-align-self: flex-end;
228  -webkit-align-self: flex-end;
229  align-self: flex-end;
230}
231
232html /deep/ [self-stretch] {
233  -ms-align-self: stretch;
234  -webkit-align-self: stretch;
235  align-self: stretch;
236}
237
238/*******************************
239          Other Layout
240*******************************/
241
242html /deep/ [block] {
243  display: block;
244}
245
246/* ie support for hidden */
247html /deep/ [hidden] {
248  display: none !important;
249}
250
251html /deep/ [relative] {
252  position: relative;
253}
254
255html /deep/ [fit] {
256  position: absolute;
257  top: 0;
258  right: 0;
259  bottom: 0;
260  left: 0;
261}
262
263body[fullbleed] {
264  margin: 0;
265  height: 100vh;
266}
267
268/*******************************
269            Other
270*******************************/
271
272html /deep/ [segment], html /deep/ segment {
273  display: block;
274  position: relative;
275  -webkit-box-sizing: border-box;
276  -ms-box-sizing: border-box;
277  box-sizing: border-box;
278  margin: 1em 0.5em;
279  padding: 1em;
280  background-color: white;
281  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
282  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
283  border-radius: 5px 5px 5px 5px;
284}
285
286</style>
287