| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 @license | 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 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 | 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 | 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 | 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 | 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 | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --> | 9 --> |
| 10 | 10 |
| (...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 50 /* IE 10 support for HTML5 hidden attr */ | 50 /* IE 10 support for HTML5 hidden attr */ |
| 51 [hidden] { | 51 [hidden] { |
| 52 display: none !important; | 52 display: none !important; |
| 53 } | 53 } |
| 54 </style> | 54 </style> |
| 55 | 55 |
| 56 <style is="custom-style"> | 56 <style is="custom-style"> |
| 57 :root { | 57 :root { |
| 58 | 58 |
| 59 --layout: { | 59 --layout: { |
| 60 display: -ms-flexbox; | |
| 61 display: -webkit-flex; | |
| 62 display: flex; | 60 display: flex; |
| 63 }; | 61 }; |
| 64 | 62 |
| 65 --layout-inline: { | 63 --layout-inline: { |
| 66 display: -ms-inline-flexbox; | |
| 67 display: -webkit-inline-flex; | |
| 68 display: inline-flex; | 64 display: inline-flex; |
| 69 }; | 65 }; |
| 70 | 66 |
| 71 --layout-horizontal: { | 67 --layout-horizontal: { |
| 72 @apply(--layout); | 68 @apply(--layout); |
| 73 | 69 |
| 74 -ms-flex-direction: row; | |
| 75 -webkit-flex-direction: row; | |
| 76 flex-direction: row; | 70 flex-direction: row; |
| 77 }; | 71 }; |
| 78 | 72 |
| 79 --layout-horizontal-reverse: { | 73 --layout-horizontal-reverse: { |
| 80 @apply(--layout); | 74 @apply(--layout); |
| 81 | 75 |
| 82 -ms-flex-direction: row-reverse; | |
| 83 -webkit-flex-direction: row-reverse; | |
| 84 flex-direction: row-reverse; | 76 flex-direction: row-reverse; |
| 85 }; | 77 }; |
| 86 | 78 |
| 87 --layout-vertical: { | 79 --layout-vertical: { |
| 88 @apply(--layout); | 80 @apply(--layout); |
| 89 | 81 |
| 90 -ms-flex-direction: column; | |
| 91 -webkit-flex-direction: column; | |
| 92 flex-direction: column; | 82 flex-direction: column; |
| 93 }; | 83 }; |
| 94 | 84 |
| 95 --layout-vertical-reverse: { | 85 --layout-vertical-reverse: { |
| 96 @apply(--layout); | 86 @apply(--layout); |
| 97 | 87 |
| 98 -ms-flex-direction: column-reverse; | |
| 99 -webkit-flex-direction: column-reverse; | |
| 100 flex-direction: column-reverse; | 88 flex-direction: column-reverse; |
| 101 }; | 89 }; |
| 102 | 90 |
| 103 --layout-wrap: { | 91 --layout-wrap: { |
| 104 -ms-flex-wrap: wrap; | |
| 105 -webkit-flex-wrap: wrap; | |
| 106 flex-wrap: wrap; | 92 flex-wrap: wrap; |
| 107 }; | 93 }; |
| 108 | 94 |
| 109 --layout-wrap-reverse: { | 95 --layout-wrap-reverse: { |
| 110 -ms-flex-wrap: wrap-reverse; | |
| 111 -webkit-flex-wrap: wrap-reverse; | |
| 112 flex-wrap: wrap-reverse; | 96 flex-wrap: wrap-reverse; |
| 113 }; | 97 }; |
| 114 | 98 |
| 115 --layout-flex-auto: { | 99 --layout-flex-auto: { |
| 116 -ms-flex: 1 1 auto; | |
| 117 -webkit-flex: 1 1 auto; | |
| 118 flex: 1 1 auto; | 100 flex: 1 1 auto; |
| 119 }; | 101 }; |
| 120 | 102 |
| 121 --layout-flex-none: { | 103 --layout-flex-none: { |
| 122 -ms-flex: none; | |
| 123 -webkit-flex: none; | |
| 124 flex: none; | 104 flex: none; |
| 125 }; | 105 }; |
| 126 | 106 |
| 127 --layout-flex: { | 107 --layout-flex: { |
| 128 -ms-flex: 1 1 0.000000001px; | |
| 129 -webkit-flex: 1; | |
| 130 flex: 1; | 108 flex: 1; |
| 131 -webkit-flex-basis: 0.000000001px; | |
| 132 flex-basis: 0.000000001px; | 109 flex-basis: 0.000000001px; |
| 133 }; | 110 }; |
| 134 | 111 |
| 135 --layout-flex-2: { | 112 --layout-flex-2: { |
| 136 -ms-flex: 2; | |
| 137 -webkit-flex: 2; | |
| 138 flex: 2; | 113 flex: 2; |
| 139 }; | 114 }; |
| 140 | 115 |
| 141 --layout-flex-3: { | 116 --layout-flex-3: { |
| 142 -ms-flex: 3; | |
| 143 -webkit-flex: 3; | |
| 144 flex: 3; | 117 flex: 3; |
| 145 }; | 118 }; |
| 146 | 119 |
| 147 --layout-flex-4: { | 120 --layout-flex-4: { |
| 148 -ms-flex: 4; | |
| 149 -webkit-flex: 4; | |
| 150 flex: 4; | 121 flex: 4; |
| 151 }; | 122 }; |
| 152 | 123 |
| 153 --layout-flex-5: { | 124 --layout-flex-5: { |
| 154 -ms-flex: 5; | |
| 155 -webkit-flex: 5; | |
| 156 flex: 5; | 125 flex: 5; |
| 157 }; | 126 }; |
| 158 | 127 |
| 159 --layout-flex-6: { | 128 --layout-flex-6: { |
| 160 -ms-flex: 6; | |
| 161 -webkit-flex: 6; | |
| 162 flex: 6; | 129 flex: 6; |
| 163 }; | 130 }; |
| 164 | 131 |
| 165 --layout-flex-7: { | 132 --layout-flex-7: { |
| 166 -ms-flex: 7; | |
| 167 -webkit-flex: 7; | |
| 168 flex: 7; | 133 flex: 7; |
| 169 }; | 134 }; |
| 170 | 135 |
| 171 --layout-flex-8: { | 136 --layout-flex-8: { |
| 172 -ms-flex: 8; | |
| 173 -webkit-flex: 8; | |
| 174 flex: 8; | 137 flex: 8; |
| 175 }; | 138 }; |
| 176 | 139 |
| 177 --layout-flex-9: { | 140 --layout-flex-9: { |
| 178 -ms-flex: 9; | |
| 179 -webkit-flex: 9; | |
| 180 flex: 9; | 141 flex: 9; |
| 181 }; | 142 }; |
| 182 | 143 |
| 183 --layout-flex-10: { | 144 --layout-flex-10: { |
| 184 -ms-flex: 10; | |
| 185 -webkit-flex: 10; | |
| 186 flex: 10; | 145 flex: 10; |
| 187 }; | 146 }; |
| 188 | 147 |
| 189 --layout-flex-11: { | 148 --layout-flex-11: { |
| 190 -ms-flex: 11; | |
| 191 -webkit-flex: 11; | |
| 192 flex: 11; | 149 flex: 11; |
| 193 }; | 150 }; |
| 194 | 151 |
| 195 --layout-flex-12: { | 152 --layout-flex-12: { |
| 196 -ms-flex: 12; | |
| 197 -webkit-flex: 12; | |
| 198 flex: 12; | 153 flex: 12; |
| 199 }; | 154 }; |
| 200 | 155 |
| 201 /* alignment in cross axis */ | 156 /* alignment in cross axis */ |
| 202 | 157 |
| 203 --layout-start: { | 158 --layout-start: { |
| 204 -ms-flex-align: start; | |
| 205 -webkit-align-items: flex-start; | |
| 206 align-items: flex-start; | 159 align-items: flex-start; |
| 207 }; | 160 }; |
| 208 | 161 |
| 209 --layout-center: { | 162 --layout-center: { |
| 210 -ms-flex-align: center; | |
| 211 -webkit-align-items: center; | |
| 212 align-items: center; | 163 align-items: center; |
| 213 }; | 164 }; |
| 214 | 165 |
| 215 --layout-end: { | 166 --layout-end: { |
| 216 -ms-flex-align: end; | |
| 217 -webkit-align-items: flex-end; | |
| 218 align-items: flex-end; | 167 align-items: flex-end; |
| 219 }; | 168 }; |
| 220 | 169 |
| 221 --layout-baseline: { | 170 --layout-baseline: { |
| 222 -ms-flex-align: baseline; | |
| 223 -webkit-align-items: baseline; | |
| 224 align-items: baseline; | 171 align-items: baseline; |
| 225 }; | 172 }; |
| 226 | 173 |
| 227 /* alignment in main axis */ | 174 /* alignment in main axis */ |
| 228 | 175 |
| 229 --layout-start-justified: { | 176 --layout-start-justified: { |
| 230 -ms-flex-pack: start; | |
| 231 -webkit-justify-content: flex-start; | |
| 232 justify-content: flex-start; | 177 justify-content: flex-start; |
| 233 }; | 178 }; |
| 234 | 179 |
| 235 --layout-center-justified: { | 180 --layout-center-justified: { |
| 236 -ms-flex-pack: center; | |
| 237 -webkit-justify-content: center; | |
| 238 justify-content: center; | 181 justify-content: center; |
| 239 }; | 182 }; |
| 240 | 183 |
| 241 --layout-end-justified: { | 184 --layout-end-justified: { |
| 242 -ms-flex-pack: end; | |
| 243 -webkit-justify-content: flex-end; | |
| 244 justify-content: flex-end; | 185 justify-content: flex-end; |
| 245 }; | 186 }; |
| 246 | 187 |
| 247 --layout-around-justified: { | 188 --layout-around-justified: { |
| 248 -ms-flex-pack: distribute; | |
| 249 -webkit-justify-content: space-around; | |
| 250 justify-content: space-around; | 189 justify-content: space-around; |
| 251 }; | 190 }; |
| 252 | 191 |
| 253 --layout-justified: { | 192 --layout-justified: { |
| 254 -ms-flex-pack: justify; | |
| 255 -webkit-justify-content: space-between; | |
| 256 justify-content: space-between; | 193 justify-content: space-between; |
| 257 }; | 194 }; |
| 258 | 195 |
| 259 --layout-center-center: { | 196 --layout-center-center: { |
| 260 @apply(--layout-center); | 197 @apply(--layout-center); |
| 261 @apply(--layout-center-justified); | 198 @apply(--layout-center-justified); |
| 262 }; | 199 }; |
| 263 | 200 |
| 264 /* self alignment */ | 201 /* self alignment */ |
| 265 | 202 |
| 266 --layout-self-start: { | 203 --layout-self-start: { |
| 267 -ms-align-self: flex-start; | |
| 268 -webkit-align-self: flex-start; | |
| 269 align-self: flex-start; | 204 align-self: flex-start; |
| 270 }; | 205 }; |
| 271 | 206 |
| 272 --layout-self-center: { | 207 --layout-self-center: { |
| 273 -ms-align-self: center; | |
| 274 -webkit-align-self: center; | |
| 275 align-self: center; | 208 align-self: center; |
| 276 }; | 209 }; |
| 277 | 210 |
| 278 --layout-self-end: { | 211 --layout-self-end: { |
| 279 -ms-align-self: flex-end; | |
| 280 -webkit-align-self: flex-end; | |
| 281 align-self: flex-end; | 212 align-self: flex-end; |
| 282 }; | 213 }; |
| 283 | 214 |
| 284 --layout-self-stretch: { | 215 --layout-self-stretch: { |
| 285 -ms-align-self: stretch; | |
| 286 -webkit-align-self: stretch; | |
| 287 align-self: stretch; | 216 align-self: stretch; |
| 288 }; | 217 }; |
| 289 | 218 |
| 290 --layout-self-baseline: { | 219 --layout-self-baseline: { |
| 291 -ms-align-self: baseline; | |
| 292 -webkit-align-self: baseline; | |
| 293 align-self: baseline; | 220 align-self: baseline; |
| 294 }; | 221 }; |
| 295 | 222 |
| 296 /* multi-line alignment in main axis */ | 223 /* multi-line alignment in main axis */ |
| 297 | 224 |
| 298 --layout-start-aligned: { | 225 --layout-start-aligned: { |
| 299 -ms-flex-line-pack: start; /* IE10 */ | |
| 300 -ms-align-content: flex-start; | |
| 301 -webkit-align-content: flex-start; | |
| 302 align-content: flex-start; | 226 align-content: flex-start; |
| 303 }; | 227 }; |
| 304 | 228 |
| 305 --layout-end-aligned: { | 229 --layout-end-aligned: { |
| 306 -ms-flex-line-pack: end; /* IE10 */ | |
| 307 -ms-align-content: flex-end; | |
| 308 -webkit-align-content: flex-end; | |
| 309 align-content: flex-end; | 230 align-content: flex-end; |
| 310 }; | 231 }; |
| 311 | 232 |
| 312 --layout-center-aligned: { | 233 --layout-center-aligned: { |
| 313 -ms-flex-line-pack: center; /* IE10 */ | |
| 314 -ms-align-content: center; | |
| 315 -webkit-align-content: center; | |
| 316 align-content: center; | 234 align-content: center; |
| 317 }; | 235 }; |
| 318 | 236 |
| 319 --layout-between-aligned: { | 237 --layout-between-aligned: { |
| 320 -ms-flex-line-pack: justify; /* IE10 */ | |
| 321 -ms-align-content: space-between; | |
| 322 -webkit-align-content: space-between; | |
| 323 align-content: space-between; | 238 align-content: space-between; |
| 324 }; | 239 }; |
| 325 | 240 |
| 326 --layout-around-aligned: { | 241 --layout-around-aligned: { |
| 327 -ms-flex-line-pack: distribute; /* IE10 */ | |
| 328 -ms-align-content: space-around; | |
| 329 -webkit-align-content: space-around; | |
| 330 align-content: space-around; | 242 align-content: space-around; |
| 331 }; | 243 }; |
| 332 | 244 |
| 333 /******************************* | 245 /******************************* |
| 334 Other Layout | 246 Other Layout |
| 335 *******************************/ | 247 *******************************/ |
| 336 | 248 |
| 337 --layout-block: { | 249 --layout-block: { |
| 338 display: block; | 250 display: block; |
| 339 }; | 251 }; |
| (...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 390 --layout-fixed-left: { | 302 --layout-fixed-left: { |
| 391 position: fixed; | 303 position: fixed; |
| 392 top: 0; | 304 top: 0; |
| 393 bottom: 0; | 305 bottom: 0; |
| 394 left: 0; | 306 left: 0; |
| 395 }; | 307 }; |
| 396 | 308 |
| 397 } | 309 } |
| 398 | 310 |
| 399 </style> | 311 </style> |
| OLD | NEW |