OLD | NEW |
| (Empty) |
1 /* | |
2 Copyright 2013 The Polymer Authors. All rights reserved. | |
3 Use of this source code is governed by a BSD-style | |
4 license that can be found in the LICENSE file. | |
5 */ | |
6 | |
7 .core-h, .core-v { | |
8 display: -webkit-box !important; | |
9 display: -ms-flexbox !important; | |
10 display: -moz-flex !important; | |
11 display: -webkit-flex !important; | |
12 display: flex !important; | |
13 } | |
14 | |
15 .core-h { | |
16 -webkit-box-orient: horizontal; | |
17 -ms-flex-direction: row; | |
18 -moz-flex-direction: row; | |
19 -webkit-flex-direction: row; | |
20 flex-direction: row; | |
21 } | |
22 | |
23 .core-h.core-reverse { | |
24 -webkit-box-direction: reverse; | |
25 -ms-flex-direction: row-reverse; | |
26 -moz-flex-direction: row-reverse; | |
27 -webkit-flex-direction: row-reverse; | |
28 flex-direction: row-reverse; | |
29 } | |
30 | |
31 .core-v { | |
32 -webkit-box-orient: vertical; | |
33 -ms-flex-direction: column; | |
34 -moz-flex-direction: column; | |
35 -webkit-flex-direction: column; | |
36 flex-direction: column; | |
37 } | |
38 | |
39 .core-v.core-reverse { | |
40 -webkit-box-direction: reverse; | |
41 -ms-flex-direction: column-reverse; | |
42 -moz-flex-direction: column-reverse; | |
43 -webkit-flex-direction: column-reverse; | |
44 flex-direction: column-reverse; | |
45 } | |
46 | |
47 .core-relative { | |
48 position: relative; | |
49 } | |
50 | |
51 .core-fit { | |
52 position: absolute; | |
53 top: 0; | |
54 left: 0; | |
55 height: 100%; | |
56 width: 100%; | |
57 } | |
58 | |
59 body.core-fit { | |
60 margin: 0; | |
61 } | |
62 | |
63 .core-flex, [core-flex] { | |
64 -webkit-box-flex: 1; | |
65 -ms-flex: 1; | |
66 -moz-flex: 1; | |
67 -webkit-flex: 1; | |
68 flex: 1; | |
69 } | |
70 | |
71 .core-flex-auto, [core-flex-auto] { | |
72 -webkit-box-flex: 1; | |
73 -ms-flex: 1 1 auto; | |
74 -moz-flex: 1 1 auto; | |
75 -webkit-flex: 1 1 auto; | |
76 flex: 1 1 auto; | |
77 } | |
78 | |
79 .core-flex-none, [core-flex-none] { | |
80 -webkit-box-flex: none; | |
81 -ms-flex: none; | |
82 -moz-flex: none; | |
83 -webkit-flex: none; | |
84 flex: none; | |
85 } | |
86 | |
87 .core-flex1, [core-flex=1] { | |
88 -webkit-box-flex: 1; | |
89 -ms-flex: 1; | |
90 -moz-flex: 1; | |
91 -webkit-flex: 1; | |
92 flex: 1; | |
93 } | |
94 | |
95 .core-flex2, [core-flex=2] { | |
96 -webkit-box-flex: 2; | |
97 -ms-flex: 2; | |
98 -moz-flex: 2; | |
99 -webkit-flex: 2; | |
100 flex: 2; | |
101 } | |
102 | |
103 .core-flex3, [core-flex=3] { | |
104 -webkit-box-flex: 3; | |
105 -ms-flex: 3; | |
106 -moz-flex: 3; | |
107 -webkit-flex: 3; | |
108 flex: 3; | |
109 } | |
110 | |
111 /* distributed elements */ | |
112 ::content > .core-flex, ::content > [core-flex] { | |
113 -webkit-box-flex: 1; | |
114 -ms-flex: 1; | |
115 -moz-flex: 1; | |
116 -webkit-flex: 1; | |
117 flex: 1; | |
118 } | |
119 | |
120 ::content > .core-flex-auto, ::content > [core-flex-auto] { | |
121 -webkit-box-flex: 1; | |
122 -ms-flex: 1 1 auto; | |
123 -moz-flex: 1 1 auto; | |
124 -webkit-flex: 1 1 auto; | |
125 flex: 1 1 auto; | |
126 } | |
127 | |
128 ::content > .core-flex-none, ::content > [core-flex-none] { | |
129 -webkit-box-flex: none; | |
130 -ms-flex: none; | |
131 -moz-flex: none; | |
132 -webkit-flex: none; | |
133 flex: none; | |
134 } | |
135 | |
136 ::content > .core-flex1, ::content > [core-flex=1] { | |
137 -webkit-box-flex: 1; | |
138 -ms-flex: 1; | |
139 -moz-flex: 1; | |
140 -webkit-flex: 1; | |
141 flex: 1; | |
142 } | |
143 | |
144 ::content > .core-flex2, ::content > [core-flex=2] { | |
145 -webkit-box-flex: 2; | |
146 -ms-flex: 2; | |
147 -moz-flex: 2; | |
148 -webkit-flex: 2; | |
149 flex: 2; | |
150 } | |
151 | |
152 ::content > .core-flex3, ::content > [core-flex=3] { | |
153 -webkit-box-flex: 3; | |
154 -ms-flex: 3; | |
155 -moz-flex: 3; | |
156 -webkit-flex: 3; | |
157 flex: 3; | |
158 } | |
159 | |
160 /* alignment in main axis */ | |
161 .core-justify-start { | |
162 -webkit-box-pack: start; | |
163 -ms-flex-pack: start; | |
164 -moz-justify-content: flex-start; | |
165 -webkit-justify-content: flex-start; | |
166 justify-content: flex-start; | |
167 } | |
168 | |
169 .core-justify-center { | |
170 -webkit-box-pack: center; | |
171 -ms-flex-pack: center; | |
172 -moz-justify-content: center; | |
173 -webkit-justify-content: center; | |
174 justify-content: center; | |
175 } | |
176 | |
177 .core-justify-end { | |
178 -webkit-box-pack: end; | |
179 -ms-flex-pack: end; | |
180 -moz-justify-content: flex-end; | |
181 -webkit-justify-content: flex-end; | |
182 justify-content: flex-end; | |
183 } | |
184 | |
185 .core-justify-between { | |
186 -webkit-box-pack: justify; | |
187 -ms-flex-pack: justify; | |
188 -moz-justify-content: space-between; | |
189 -webkit-justify-content: space-between; | |
190 justify-content: space-between; | |
191 } | |
192 | |
193 /* alignment in cross axis */ | |
194 .core-align-start { | |
195 -webkit-box-align: start; | |
196 -ms-flex-align: start; | |
197 -moz-align-items: flex-start; | |
198 -webkit-align-items: flex-start; | |
199 align-items: flex-start; | |
200 } | |
201 | |
202 .core-align-center { | |
203 -webkit-box-align: center; | |
204 -ms-flex-align: center; | |
205 -moz-align-items: center; | |
206 -webkit-align-items: center; | |
207 align-items: center; | |
208 } | |
209 | |
210 .core-align-end { | |
211 -webkit-box-align: end; | |
212 -ms-flex-align: end; | |
213 -moz-align-items: flex-end; | |
214 -webkit-align-items: flex-end; | |
215 align-items: flex-end; | |
216 } | |
OLD | NEW |