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