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