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