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