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