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<!--
12A set of layout classes that let you specify layout properties directly in markup.
13You must include this file in every element that needs to use them.
14
15Sample use:
16
17    <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
18    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
19
20    <div class="layout horizontal layout-start">
21      <div>cross axis start alignment</div>
22    </div>
23
24The following imports are available:
25 - iron-flex
26 - iron-flex-reverse
27 - iron-flex-alignment
28 - iron-flex-factors
29 - iron-positioning
30-->
31
32<link rel="import" href="../polymer/polymer.html">
33
34<!-- Most common used flex styles-->
35<dom-module id="iron-flex">
36  <template>
37    <style>
38      .layout.horizontal,
39      .layout.vertical {
40        display: -ms-flexbox;
41        display: -webkit-flex;
42        display: flex;
43      }
44
45      .layout.inline {
46        display: -ms-inline-flexbox;
47        display: -webkit-inline-flex;
48        display: inline-flex;
49      }
50
51      .layout.horizontal {
52        -ms-flex-direction: row;
53        -webkit-flex-direction: row;
54        flex-direction: row;
55      }
56
57      .layout.vertical {
58        -ms-flex-direction: column;
59        -webkit-flex-direction: column;
60        flex-direction: column;
61      }
62
63      .layout.wrap {
64        -ms-flex-wrap: wrap;
65        -webkit-flex-wrap: wrap;
66        flex-wrap: wrap;
67      }
68
69      .layout.no-wrap {
70        -ms-flex-wrap: nowrap;
71        -webkit-flex-wrap: nowrap;
72        flex-wrap: nowrap;
73      }
74
75      .layout.center,
76      .layout.center-center {
77        -ms-flex-align: center;
78        -webkit-align-items: center;
79        align-items: center;
80      }
81
82      .layout.center-justified,
83      .layout.center-center {
84        -ms-flex-pack: center;
85        -webkit-justify-content: center;
86        justify-content: center;
87      }
88
89      .flex {
90        -ms-flex: 1 1 0.000000001px;
91        -webkit-flex: 1;
92        flex: 1;
93        -webkit-flex-basis: 0.000000001px;
94        flex-basis: 0.000000001px;
95      }
96
97      .flex-auto {
98        -ms-flex: 1 1 auto;
99        -webkit-flex: 1 1 auto;
100        flex: 1 1 auto;
101      }
102
103      .flex-none {
104        -ms-flex: none;
105        -webkit-flex: none;
106        flex: none;
107      }
108    </style>
109  </template>
110</dom-module>
111
112<!-- Basic flexbox reverse styles -->
113<dom-module id="iron-flex-reverse">
114  <template>
115    <style>
116      .layout.horizontal-reverse,
117      .layout.vertical-reverse {
118        display: -ms-flexbox;
119        display: -webkit-flex;
120        display: flex;
121      }
122
123      .layout.horizontal-reverse {
124        -ms-flex-direction: row-reverse;
125        -webkit-flex-direction: row-reverse;
126        flex-direction: row-reverse;
127      }
128
129      .layout.vertical-reverse {
130        -ms-flex-direction: column-reverse;
131        -webkit-flex-direction: column-reverse;
132        flex-direction: column-reverse;
133      }
134
135      .layout.wrap-reverse {
136        -ms-flex-wrap: wrap-reverse;
137        -webkit-flex-wrap: wrap-reverse;
138        flex-wrap: wrap-reverse;
139      }
140    </style>
141  </template>
142</dom-module>
143
144<!-- Flexbox alignment -->
145<dom-module id="iron-flex-alignment">
146  <template>
147    <style>
148      /**
149       * Alignment in cross axis.
150       */
151      .layout.start {
152        -ms-flex-align: start;
153        -webkit-align-items: flex-start;
154        align-items: flex-start;
155      }
156
157      .layout.center,
158      .layout.center-center {
159        -ms-flex-align: center;
160        -webkit-align-items: center;
161        align-items: center;
162      }
163
164      .layout.end {
165        -ms-flex-align: end;
166        -webkit-align-items: flex-end;
167        align-items: flex-end;
168      }
169
170      .layout.baseline {
171        -ms-flex-align: baseline;
172        -webkit-align-items: baseline;
173        align-items: baseline;
174      }
175
176      /**
177       * Alignment in main axis.
178       */
179      .layout.start-justified {
180        -ms-flex-pack: start;
181        -webkit-justify-content: flex-start;
182        justify-content: flex-start;
183      }
184
185      .layout.center-justified,
186      .layout.center-center {
187        -ms-flex-pack: center;
188        -webkit-justify-content: center;
189        justify-content: center;
190      }
191
192      .layout.end-justified {
193        -ms-flex-pack: end;
194        -webkit-justify-content: flex-end;
195        justify-content: flex-end;
196      }
197
198      .layout.around-justified {
199        -ms-flex-pack: distribute;
200        -webkit-justify-content: space-around;
201        justify-content: space-around;
202      }
203
204      .layout.justified {
205        -ms-flex-pack: justify;
206        -webkit-justify-content: space-between;
207        justify-content: space-between;
208      }
209
210      /**
211       * Self alignment.
212       */
213      .self-start {
214        -ms-align-self: flex-start;
215        -webkit-align-self: flex-start;
216        align-self: flex-start;
217      }
218
219      .self-center {
220        -ms-align-self: center;
221        -webkit-align-self: center;
222        align-self: center;
223      }
224
225      .self-end {
226        -ms-align-self: flex-end;
227        -webkit-align-self: flex-end;
228        align-self: flex-end;
229      }
230
231      .self-stretch {
232        -ms-align-self: stretch;
233        -webkit-align-self: stretch;
234        align-self: stretch;
235      }
236
237      .self-baseline {
238        -ms-align-self: baseline;
239        -webkit-align-self: baseline;
240        align-self: baseline;
241      }
242
243      /**
244       * multi-line alignment in main axis.
245       */
246      .layout.start-aligned {
247        -ms-flex-line-pack: start;  /* IE10 */
248        -ms-align-content: flex-start;
249        -webkit-align-content: flex-start;
250        align-content: flex-start;
251      }
252
253      .layout.end-aligned {
254        -ms-flex-line-pack: end;  /* IE10 */
255        -ms-align-content: flex-end;
256        -webkit-align-content: flex-end;
257        align-content: flex-end;
258      }
259
260      .layout.center-aligned {
261        -ms-flex-line-pack: center;  /* IE10 */
262        -ms-align-content: center;
263        -webkit-align-content: center;
264        align-content: center;
265      }
266
267      .layout.between-aligned {
268        -ms-flex-line-pack: justify;  /* IE10 */
269        -ms-align-content: space-between;
270        -webkit-align-content: space-between;
271        align-content: space-between;
272      }
273
274      .layout.around-aligned {
275        -ms-flex-line-pack: distribute;  /* IE10 */
276        -ms-align-content: space-around;
277        -webkit-align-content: space-around;
278        align-content: space-around;
279      }
280    </style>
281  </template>
282</dom-module>
283
284<dom-module id="iron-flex-factors">
285  <template>
286    <style>
287      .flex,
288      .flex-1 {
289        -ms-flex: 1 1 0.000000001px;
290        -webkit-flex: 1;
291        flex: 1;
292        -webkit-flex-basis: 0.000000001px;
293        flex-basis: 0.000000001px;
294      }
295
296      .flex-2 {
297        -ms-flex: 2;
298        -webkit-flex: 2;
299        flex: 2;
300      }
301
302      .flex-3 {
303        -ms-flex: 3;
304        -webkit-flex: 3;
305        flex: 3;
306      }
307
308      .flex-4 {
309        -ms-flex: 4;
310        -webkit-flex: 4;
311        flex: 4;
312      }
313
314      .flex-5 {
315        -ms-flex: 5;
316        -webkit-flex: 5;
317        flex: 5;
318      }
319
320      .flex-6 {
321        -ms-flex: 6;
322        -webkit-flex: 6;
323        flex: 6;
324      }
325
326      .flex-7 {
327        -ms-flex: 7;
328        -webkit-flex: 7;
329        flex: 7;
330      }
331
332      .flex-8 {
333        -ms-flex: 8;
334        -webkit-flex: 8;
335        flex: 8;
336      }
337
338      .flex-9 {
339        -ms-flex: 9;
340        -webkit-flex: 9;
341        flex: 9;
342      }
343
344      .flex-10 {
345        -ms-flex: 10;
346        -webkit-flex: 10;
347        flex: 10;
348      }
349
350      .flex-11 {
351        -ms-flex: 11;
352        -webkit-flex: 11;
353        flex: 11;
354      }
355
356      .flex-12 {
357        -ms-flex: 12;
358        -webkit-flex: 12;
359        flex: 12;
360      }
361    </style>
362  </template>
363</dom-module>
364
365<!-- Non-flexbox positioning helper styles -->
366<dom-module id="iron-positioning">
367  <template>
368    <style>
369      .block {
370        display: block;
371      }
372
373      /* IE 10 support for HTML5 hidden attr */
374      [hidden] {
375        display: none !important;
376      }
377
378      .invisible {
379        visibility: hidden !important;
380      }
381
382      .relative {
383        position: relative;
384      }
385
386      .fit {
387        position: absolute;
388        top: 0;
389        right: 0;
390        bottom: 0;
391        left: 0;
392      }
393
394      body.fullbleed {
395        margin: 0;
396        height: 100vh;
397      }
398
399      .scroll {
400        -webkit-overflow-scrolling: touch;
401        overflow: auto;
402      }
403
404      /* fixed position */
405      .fixed-bottom,
406      .fixed-left,
407      .fixed-right,
408      .fixed-top {
409        position: fixed;
410      }
411
412      .fixed-top {
413        top: 0;
414        left: 0;
415        right: 0;
416      }
417
418      .fixed-right {
419        top: 0;
420        right: 0;
421        bottom: 0;
422      }
423
424      .fixed-bottom {
425        right: 0;
426        bottom: 0;
427        left: 0;
428      }
429
430      .fixed-left {
431        top: 0;
432        bottom: 0;
433        left: 0;
434      }
435    </style>
436  </template>
437</dom-module>
438