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