• 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
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-no-wrap {
67    -ms-flex-wrap: nowrap;
68    -webkit-flex-wrap: nowrap;
69    flex-wrap: nowrap;
70  }
71
72  html /deep/ .layout.wrap-reverse {
73    -ms-flex-wrap: wrap-reverse;
74    -webkit-flex-wrap: wrap-reverse;
75    flex-wrap: wrap-reverse;
76  }
77
78  html /deep/ .flex-auto {
79    -ms-flex: 1 1 auto;
80    -webkit-flex: 1 1 auto;
81    flex: 1 1 auto;
82  }
83
84  html /deep/ .flex-none {
85    -ms-flex: none;
86    -webkit-flex: none;
87    flex: none;
88  }
89
90  html /deep/ .flex,
91  html /deep/ .flex-1 {
92    -ms-flex: 1;
93    -webkit-flex: 1;
94    flex: 1;
95  }
96
97  html /deep/ .flex-2 {
98    -ms-flex: 2;
99    -webkit-flex: 2;
100    flex: 2;
101  }
102
103  html /deep/ .flex-3 {
104    -ms-flex: 3;
105    -webkit-flex: 3;
106    flex: 3;
107  }
108
109  html /deep/ .flex-4 {
110    -ms-flex: 4;
111    -webkit-flex: 4;
112    flex: 4;
113  }
114
115  html /deep/ .flex-5 {
116    -ms-flex: 5;
117    -webkit-flex: 5;
118    flex: 5;
119  }
120
121  html /deep/ .flex-6 {
122    -ms-flex: 6;
123    -webkit-flex: 6;
124    flex: 6;
125  }
126
127  html /deep/ .flex-7 {
128    -ms-flex: 7;
129    -webkit-flex: 7;
130    flex: 7;
131  }
132
133  html /deep/ .flex-8 {
134    -ms-flex: 8;
135    -webkit-flex: 8;
136    flex: 8;
137  }
138
139  html /deep/ .flex-9 {
140    -ms-flex: 9;
141    -webkit-flex: 9;
142    flex: 9;
143  }
144
145  html /deep/ .flex-10 {
146    -ms-flex: 10;
147    -webkit-flex: 10;
148    flex: 10;
149  }
150
151  html /deep/ .flex-11 {
152    -ms-flex: 11;
153    -webkit-flex: 11;
154    flex: 11;
155  }
156
157  html /deep/ .flex-12 {
158    -ms-flex: 12;
159    -webkit-flex: 12;
160    flex: 12;
161  }
162
163  /* alignment in cross axis */
164
165  html /deep/ .layout.start {
166    -ms-flex-align: start;
167    -webkit-align-items: flex-start;
168    align-items: flex-start;
169  }
170
171  html /deep/ .layout.center,
172  html /deep/ .layout.center-center {
173    -ms-flex-align: center;
174    -webkit-align-items: center;
175    align-items: center;
176  }
177
178  html /deep/ .layout.end {
179    -ms-flex-align: end;
180    -webkit-align-items: flex-end;
181    align-items: flex-end;
182  }
183
184  /* alignment in main axis */
185
186  html /deep/ .layout.start-justified {
187    -ms-flex-pack: start;
188    -webkit-justify-content: flex-start;
189    justify-content: flex-start;
190  }
191
192  html /deep/ .layout.center-justified,
193  html /deep/ .layout.center-center {
194    -ms-flex-pack: center;
195    -webkit-justify-content: center;
196    justify-content: center;
197  }
198
199  html /deep/ .layout.end-justified {
200    -ms-flex-pack: end;
201    -webkit-justify-content: flex-end;
202    justify-content: flex-end;
203  }
204
205  html /deep/ .layout.around-justified {
206    -ms-flex-pack: around;
207    -webkit-justify-content: space-around;
208    justify-content: space-around;
209  }
210
211  html /deep/ .layout.justified {
212    -ms-flex-pack: justify;
213    -webkit-justify-content: space-between;
214    justify-content: space-between;
215  }
216
217  /* self alignment */
218
219  html /deep/ .self-start {
220    -ms-align-self: flex-start;
221    -webkit-align-self: flex-start;
222    align-self: flex-start;
223  }
224
225  html /deep/ .self-center {
226    -ms-align-self: center;
227    -webkit-align-self: center;
228    align-self: center;
229  }
230
231  html /deep/ .self-end {
232    -ms-align-self: flex-end;
233    -webkit-align-self: flex-end;
234    align-self: flex-end;
235  }
236
237  html /deep/ .self-stretch {
238    -ms-align-self: stretch;
239    -webkit-align-self: stretch;
240    align-self: stretch;
241  }
242
243  /*******************************
244            Other Layout
245  *******************************/
246
247  html /deep/ .block {
248    display: block;
249  }
250
251  /* IE 10 support for HTML5 hidden attr */
252  html /deep/ [hidden] {
253    display: none !important;
254  }
255
256  html /deep/ .invisible {
257    visibility: hidden !important;
258  }
259
260  html /deep/ .relative {
261    position: relative;
262  }
263
264  html /deep/ .fit {
265    position: absolute;
266    top: 0;
267    right: 0;
268    bottom: 0;
269    left: 0;
270  }
271
272  body.fullbleed {
273    margin: 0;
274    height: 100vh;
275  }
276
277  html /deep/ .scroll {
278    -webkit-overflow-scrolling: touch;
279    overflow: auto;
280  }
281
282  .fixed-bottom,
283  .fixed-left,
284  .fixed-right,
285  .fixed-top {
286    position: fixed;
287  }
288
289  html /deep/ .fixed-top {
290    top: 0;
291    left: 0;
292    right: 0;
293  }
294
295  html /deep/ .fixed-right {
296    top: 0;
297    right: 0;
298    bottom: 0;
299  }
300
301  html /deep/ .fixed-bottom {
302    right: 0;
303    bottom: 0;
304    left: 0;
305  }
306
307  html /deep/ .fixed-left {
308    top: 0;
309    bottom: 0;
310    left: 0;
311  }
312
313</style>
314