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