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