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