| 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 19 matching lines...) Expand all Loading... |
| 30 --> | 30 --> |
| 31 | 31 |
| 32 <link rel="import" href="../polymer/polymer.html"> | 32 <link rel="import" href="../polymer/polymer.html"> |
| 33 | 33 |
| 34 <!-- Most common used flex styles--> | 34 <!-- Most common used flex styles--> |
| 35 <dom-module id="iron-flex"> | 35 <dom-module id="iron-flex"> |
| 36 <template> | 36 <template> |
| 37 <style> | 37 <style> |
| 38 .layout.horizontal, | 38 .layout.horizontal, |
| 39 .layout.vertical { | 39 .layout.vertical { |
| 40 display: -ms-flexbox; | |
| 41 display: -webkit-flex; | |
| 42 display: flex; | 40 display: flex; |
| 43 } | 41 } |
| 44 | 42 |
| 45 .layout.inline { | 43 .layout.inline { |
| 46 display: -ms-inline-flexbox; | |
| 47 display: -webkit-inline-flex; | |
| 48 display: inline-flex; | 44 display: inline-flex; |
| 49 } | 45 } |
| 50 | 46 |
| 51 .layout.horizontal { | 47 .layout.horizontal { |
| 52 -ms-flex-direction: row; | |
| 53 -webkit-flex-direction: row; | |
| 54 flex-direction: row; | 48 flex-direction: row; |
| 55 } | 49 } |
| 56 | 50 |
| 57 .layout.vertical { | 51 .layout.vertical { |
| 58 -ms-flex-direction: column; | |
| 59 -webkit-flex-direction: column; | |
| 60 flex-direction: column; | 52 flex-direction: column; |
| 61 } | 53 } |
| 62 | 54 |
| 63 .layout.wrap { | 55 .layout.wrap { |
| 64 -ms-flex-wrap: wrap; | |
| 65 -webkit-flex-wrap: wrap; | |
| 66 flex-wrap: wrap; | 56 flex-wrap: wrap; |
| 67 } | 57 } |
| 68 | 58 |
| 69 .layout.center, | 59 .layout.center, |
| 70 .layout.center-center { | 60 .layout.center-center { |
| 71 -ms-flex-align: center; | |
| 72 -webkit-align-items: center; | |
| 73 align-items: center; | 61 align-items: center; |
| 74 } | 62 } |
| 75 | 63 |
| 76 .layout.center-justified, | 64 .layout.center-justified, |
| 77 .layout.center-center { | 65 .layout.center-center { |
| 78 -ms-flex-pack: center; | |
| 79 -webkit-justify-content: center; | |
| 80 justify-content: center; | 66 justify-content: center; |
| 81 } | 67 } |
| 82 | 68 |
| 83 .flex { | 69 .flex { |
| 84 -ms-flex: 1 1 0.000000001px; | |
| 85 -webkit-flex: 1; | |
| 86 flex: 1; | 70 flex: 1; |
| 87 -webkit-flex-basis: 0.000000001px; | |
| 88 flex-basis: 0.000000001px; | 71 flex-basis: 0.000000001px; |
| 89 } | 72 } |
| 90 | 73 |
| 91 .flex-auto { | 74 .flex-auto { |
| 92 -ms-flex: 1 1 auto; | |
| 93 -webkit-flex: 1 1 auto; | |
| 94 flex: 1 1 auto; | 75 flex: 1 1 auto; |
| 95 } | 76 } |
| 96 | 77 |
| 97 .flex-none { | 78 .flex-none { |
| 98 -ms-flex: none; | |
| 99 -webkit-flex: none; | |
| 100 flex: none; | 79 flex: none; |
| 101 } | 80 } |
| 102 </style> | 81 </style> |
| 103 </template> | 82 </template> |
| 104 </dom-module> | 83 </dom-module> |
| 105 | 84 |
| 106 <!-- Basic flexbox reverse styles --> | 85 <!-- Basic flexbox reverse styles --> |
| 107 <dom-module id="iron-flex-reverse"> | 86 <dom-module id="iron-flex-reverse"> |
| 108 <template> | 87 <template> |
| 109 <style> | 88 <style> |
| 110 .layout.horizontal-reverse, | 89 .layout.horizontal-reverse, |
| 111 .layout.vertical-reverse { | 90 .layout.vertical-reverse { |
| 112 display: -ms-flexbox; | |
| 113 display: -webkit-flex; | |
| 114 display: flex; | 91 display: flex; |
| 115 } | 92 } |
| 116 | 93 |
| 117 .layout.horizontal-reverse { | 94 .layout.horizontal-reverse { |
| 118 -ms-flex-direction: row-reverse; | |
| 119 -webkit-flex-direction: row-reverse; | |
| 120 flex-direction: row-reverse; | 95 flex-direction: row-reverse; |
| 121 } | 96 } |
| 122 | 97 |
| 123 .layout.vertical-reverse { | 98 .layout.vertical-reverse { |
| 124 -ms-flex-direction: column-reverse; | |
| 125 -webkit-flex-direction: column-reverse; | |
| 126 flex-direction: column-reverse; | 99 flex-direction: column-reverse; |
| 127 } | 100 } |
| 128 | 101 |
| 129 .layout.wrap-reverse { | 102 .layout.wrap-reverse { |
| 130 -ms-flex-wrap: wrap-reverse; | |
| 131 -webkit-flex-wrap: wrap-reverse; | |
| 132 flex-wrap: wrap-reverse; | 103 flex-wrap: wrap-reverse; |
| 133 } | 104 } |
| 134 </style> | 105 </style> |
| 135 </template> | 106 </template> |
| 136 </dom-module> | 107 </dom-module> |
| 137 | 108 |
| 138 <!-- Flexbox alignment --> | 109 <!-- Flexbox alignment --> |
| 139 <dom-module id="iron-flex-alignment"> | 110 <dom-module id="iron-flex-alignment"> |
| 140 <template> | 111 <template> |
| 141 <style> | 112 <style> |
| 142 /** | 113 /** |
| 143 * Alignment in cross axis. | 114 * Alignment in cross axis. |
| 144 */ | 115 */ |
| 145 .layout.start { | 116 .layout.start { |
| 146 -ms-flex-align: start; | |
| 147 -webkit-align-items: flex-start; | |
| 148 align-items: flex-start; | 117 align-items: flex-start; |
| 149 } | 118 } |
| 150 | 119 |
| 151 .layout.center, | 120 .layout.center, |
| 152 .layout.center-center { | 121 .layout.center-center { |
| 153 -ms-flex-align: center; | |
| 154 -webkit-align-items: center; | |
| 155 align-items: center; | 122 align-items: center; |
| 156 } | 123 } |
| 157 | 124 |
| 158 .layout.end { | 125 .layout.end { |
| 159 -ms-flex-align: end; | |
| 160 -webkit-align-items: flex-end; | |
| 161 align-items: flex-end; | 126 align-items: flex-end; |
| 162 } | 127 } |
| 163 | 128 |
| 164 .layout.baseline { | 129 .layout.baseline { |
| 165 -ms-flex-align: baseline; | |
| 166 -webkit-align-items: baseline; | |
| 167 align-items: baseline; | 130 align-items: baseline; |
| 168 } | 131 } |
| 169 | 132 |
| 170 /** | 133 /** |
| 171 * Alignment in main axis. | 134 * Alignment in main axis. |
| 172 */ | 135 */ |
| 173 .layout.start-justified { | 136 .layout.start-justified { |
| 174 -ms-flex-pack: start; | |
| 175 -webkit-justify-content: flex-start; | |
| 176 justify-content: flex-start; | 137 justify-content: flex-start; |
| 177 } | 138 } |
| 178 | 139 |
| 179 .layout.center-justified, | 140 .layout.center-justified, |
| 180 .layout.center-center { | 141 .layout.center-center { |
| 181 -ms-flex-pack: center; | |
| 182 -webkit-justify-content: center; | |
| 183 justify-content: center; | 142 justify-content: center; |
| 184 } | 143 } |
| 185 | 144 |
| 186 .layout.end-justified { | 145 .layout.end-justified { |
| 187 -ms-flex-pack: end; | |
| 188 -webkit-justify-content: flex-end; | |
| 189 justify-content: flex-end; | 146 justify-content: flex-end; |
| 190 } | 147 } |
| 191 | 148 |
| 192 .layout.around-justified { | 149 .layout.around-justified { |
| 193 -ms-flex-pack: distribute; | |
| 194 -webkit-justify-content: space-around; | |
| 195 justify-content: space-around; | 150 justify-content: space-around; |
| 196 } | 151 } |
| 197 | 152 |
| 198 .layout.justified { | 153 .layout.justified { |
| 199 -ms-flex-pack: justify; | |
| 200 -webkit-justify-content: space-between; | |
| 201 justify-content: space-between; | 154 justify-content: space-between; |
| 202 } | 155 } |
| 203 | 156 |
| 204 /** | 157 /** |
| 205 * Self alignment. | 158 * Self alignment. |
| 206 */ | 159 */ |
| 207 .self-start { | 160 .self-start { |
| 208 -ms-align-self: flex-start; | |
| 209 -webkit-align-self: flex-start; | |
| 210 align-self: flex-start; | 161 align-self: flex-start; |
| 211 } | 162 } |
| 212 | 163 |
| 213 .self-center { | 164 .self-center { |
| 214 -ms-align-self: center; | |
| 215 -webkit-align-self: center; | |
| 216 align-self: center; | 165 align-self: center; |
| 217 } | 166 } |
| 218 | 167 |
| 219 .self-end { | 168 .self-end { |
| 220 -ms-align-self: flex-end; | |
| 221 -webkit-align-self: flex-end; | |
| 222 align-self: flex-end; | 169 align-self: flex-end; |
| 223 } | 170 } |
| 224 | 171 |
| 225 .self-stretch { | 172 .self-stretch { |
| 226 -ms-align-self: stretch; | |
| 227 -webkit-align-self: stretch; | |
| 228 align-self: stretch; | 173 align-self: stretch; |
| 229 } | 174 } |
| 230 | 175 |
| 231 .self-baseline { | 176 .self-baseline { |
| 232 -ms-align-self: baseline; | |
| 233 -webkit-align-self: baseline; | |
| 234 align-self: baseline; | 177 align-self: baseline; |
| 235 }; | 178 }; |
| 236 | 179 |
| 237 /** | 180 /** |
| 238 * multi-line alignment in main axis. | 181 * multi-line alignment in main axis. |
| 239 */ | 182 */ |
| 240 .layout.start-aligned { | 183 .layout.start-aligned { |
| 241 -ms-flex-line-pack: start; /* IE10 */ | |
| 242 -ms-align-content: flex-start; | |
| 243 -webkit-align-content: flex-start; | |
| 244 align-content: flex-start; | 184 align-content: flex-start; |
| 245 } | 185 } |
| 246 | 186 |
| 247 .layout.end-aligned { | 187 .layout.end-aligned { |
| 248 -ms-flex-line-pack: end; /* IE10 */ | |
| 249 -ms-align-content: flex-end; | |
| 250 -webkit-align-content: flex-end; | |
| 251 align-content: flex-end; | 188 align-content: flex-end; |
| 252 } | 189 } |
| 253 | 190 |
| 254 .layout.center-aligned { | 191 .layout.center-aligned { |
| 255 -ms-flex-line-pack: center; /* IE10 */ | |
| 256 -ms-align-content: center; | |
| 257 -webkit-align-content: center; | |
| 258 align-content: center; | 192 align-content: center; |
| 259 } | 193 } |
| 260 | 194 |
| 261 .layout.between-aligned { | 195 .layout.between-aligned { |
| 262 -ms-flex-line-pack: justify; /* IE10 */ | |
| 263 -ms-align-content: space-between; | |
| 264 -webkit-align-content: space-between; | |
| 265 align-content: space-between; | 196 align-content: space-between; |
| 266 } | 197 } |
| 267 | 198 |
| 268 .layout.around-aligned { | 199 .layout.around-aligned { |
| 269 -ms-flex-line-pack: distribute; /* IE10 */ | |
| 270 -ms-align-content: space-around; | |
| 271 -webkit-align-content: space-around; | |
| 272 align-content: space-around; | 200 align-content: space-around; |
| 273 } | 201 } |
| 274 </style> | 202 </style> |
| 275 </template> | 203 </template> |
| 276 </dom-module> | 204 </dom-module> |
| 277 | 205 |
| 278 <dom-module id="iron-flex-factors"> | 206 <dom-module id="iron-flex-factors"> |
| 279 <template> | 207 <template> |
| 280 <style> | 208 <style> |
| 281 .flex, | 209 .flex, |
| 282 .flex-1 { | 210 .flex-1 { |
| 283 -ms-flex: 1 1 0.000000001px; | |
| 284 -webkit-flex: 1; | |
| 285 flex: 1; | 211 flex: 1; |
| 286 -webkit-flex-basis: 0.000000001px; | |
| 287 flex-basis: 0.000000001px; | 212 flex-basis: 0.000000001px; |
| 288 } | 213 } |
| 289 | 214 |
| 290 .flex-2 { | 215 .flex-2 { |
| 291 -ms-flex: 2; | |
| 292 -webkit-flex: 2; | |
| 293 flex: 2; | 216 flex: 2; |
| 294 } | 217 } |
| 295 | 218 |
| 296 .flex-3 { | 219 .flex-3 { |
| 297 -ms-flex: 3; | |
| 298 -webkit-flex: 3; | |
| 299 flex: 3; | 220 flex: 3; |
| 300 } | 221 } |
| 301 | 222 |
| 302 .flex-4 { | 223 .flex-4 { |
| 303 -ms-flex: 4; | |
| 304 -webkit-flex: 4; | |
| 305 flex: 4; | 224 flex: 4; |
| 306 } | 225 } |
| 307 | 226 |
| 308 .flex-5 { | 227 .flex-5 { |
| 309 -ms-flex: 5; | |
| 310 -webkit-flex: 5; | |
| 311 flex: 5; | 228 flex: 5; |
| 312 } | 229 } |
| 313 | 230 |
| 314 .flex-6 { | 231 .flex-6 { |
| 315 -ms-flex: 6; | |
| 316 -webkit-flex: 6; | |
| 317 flex: 6; | 232 flex: 6; |
| 318 } | 233 } |
| 319 | 234 |
| 320 .flex-7 { | 235 .flex-7 { |
| 321 -ms-flex: 7; | |
| 322 -webkit-flex: 7; | |
| 323 flex: 7; | 236 flex: 7; |
| 324 } | 237 } |
| 325 | 238 |
| 326 .flex-8 { | 239 .flex-8 { |
| 327 -ms-flex: 8; | |
| 328 -webkit-flex: 8; | |
| 329 flex: 8; | 240 flex: 8; |
| 330 } | 241 } |
| 331 | 242 |
| 332 .flex-9 { | 243 .flex-9 { |
| 333 -ms-flex: 9; | |
| 334 -webkit-flex: 9; | |
| 335 flex: 9; | 244 flex: 9; |
| 336 } | 245 } |
| 337 | 246 |
| 338 .flex-10 { | 247 .flex-10 { |
| 339 -ms-flex: 10; | |
| 340 -webkit-flex: 10; | |
| 341 flex: 10; | 248 flex: 10; |
| 342 } | 249 } |
| 343 | 250 |
| 344 .flex-11 { | 251 .flex-11 { |
| 345 -ms-flex: 11; | |
| 346 -webkit-flex: 11; | |
| 347 flex: 11; | 252 flex: 11; |
| 348 } | 253 } |
| 349 | 254 |
| 350 .flex-12 { | 255 .flex-12 { |
| 351 -ms-flex: 12; | |
| 352 -webkit-flex: 12; | |
| 353 flex: 12; | 256 flex: 12; |
| 354 } | 257 } |
| 355 </style> | 258 </style> |
| 356 </template> | 259 </template> |
| 357 </dom-module> | 260 </dom-module> |
| 358 | 261 |
| 359 <!-- Non-flexbox positioning helper styles --> | 262 <!-- Non-flexbox positioning helper styles --> |
| 360 <dom-module id="iron-positioning"> | 263 <dom-module id="iron-positioning"> |
| 361 <template> | 264 <template> |
| 362 <style> | 265 <style> |
| (...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 422 } | 325 } |
| 423 | 326 |
| 424 .fixed-left { | 327 .fixed-left { |
| 425 top: 0; | 328 top: 0; |
| 426 bottom: 0; | 329 bottom: 0; |
| 427 left: 0; | 330 left: 0; |
| 428 } | 331 } |
| 429 </style> | 332 </style> |
| 430 </template> | 333 </template> |
| 431 </dom-module> | 334 </dom-module> |
| OLD | NEW |