| 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 --><html><head><style> | 9 --><html><head><style> |
| 10 | 10 |
| 11 /******************************* | 11 /******************************* |
| 12 Flex Layout | 12 Flex Layout |
| 13 *******************************/ | 13 *******************************/ |
| 14 | 14 |
| 15 html /deep/ .layout.horizontal, | 15 html /deep/ .layout.horizontal, |
| 16 html /deep/ .layout.horizontal-reverse, | 16 html /deep/ .layout.horizontal-reverse, |
| 17 html /deep/ .layout.vertical, | 17 html /deep/ .layout.vertical, |
| 18 html /deep/ .layout.vertical-reverse { | 18 html /deep/ .layout.vertical-reverse { |
| 19 display: -ms-flexbox; | |
| 20 display: -webkit-flex; | |
| 21 display: flex; | 19 display: flex; |
| 22 } | 20 } |
| 23 | 21 |
| 24 html /deep/ .layout.inline { | 22 html /deep/ .layout.inline { |
| 25 display: -ms-inline-flexbox; | |
| 26 display: -webkit-inline-flex; | |
| 27 display: inline-flex; | 23 display: inline-flex; |
| 28 } | 24 } |
| 29 | 25 |
| 30 html /deep/ .layout.horizontal { | 26 html /deep/ .layout.horizontal { |
| 31 -ms-flex-direction: row; | |
| 32 -webkit-flex-direction: row; | |
| 33 flex-direction: row; | 27 flex-direction: row; |
| 34 } | 28 } |
| 35 | 29 |
| 36 html /deep/ .layout.horizontal-reverse { | 30 html /deep/ .layout.horizontal-reverse { |
| 37 -ms-flex-direction: row-reverse; | |
| 38 -webkit-flex-direction: row-reverse; | |
| 39 flex-direction: row-reverse; | 31 flex-direction: row-reverse; |
| 40 } | 32 } |
| 41 | 33 |
| 42 html /deep/ .layout.vertical { | 34 html /deep/ .layout.vertical { |
| 43 -ms-flex-direction: column; | |
| 44 -webkit-flex-direction: column; | |
| 45 flex-direction: column; | 35 flex-direction: column; |
| 46 } | 36 } |
| 47 | 37 |
| 48 html /deep/ .layout.vertical-reverse { | 38 html /deep/ .layout.vertical-reverse { |
| 49 -ms-flex-direction: column-reverse; | |
| 50 -webkit-flex-direction: column-reverse; | |
| 51 flex-direction: column-reverse; | 39 flex-direction: column-reverse; |
| 52 } | 40 } |
| 53 | 41 |
| 54 html /deep/ .layout.wrap { | 42 html /deep/ .layout.wrap { |
| 55 -ms-flex-wrap: wrap; | |
| 56 -webkit-flex-wrap: wrap; | |
| 57 flex-wrap: wrap; | 43 flex-wrap: wrap; |
| 58 } | 44 } |
| 59 | 45 |
| 60 html /deep/ .layout.wrap-reverse { | 46 html /deep/ .layout.wrap-reverse { |
| 61 -ms-flex-wrap: wrap-reverse; | |
| 62 -webkit-flex-wrap: wrap-reverse; | |
| 63 flex-wrap: wrap-reverse; | 47 flex-wrap: wrap-reverse; |
| 64 } | 48 } |
| 65 | 49 |
| 66 html /deep/ .flex-auto { | 50 html /deep/ .flex-auto { |
| 67 -ms-flex: 1 1 auto; | |
| 68 -webkit-flex: 1 1 auto; | |
| 69 flex: 1 1 auto; | 51 flex: 1 1 auto; |
| 70 } | 52 } |
| 71 | 53 |
| 72 html /deep/ .flex-none { | 54 html /deep/ .flex-none { |
| 73 -ms-flex: none; | |
| 74 -webkit-flex: none; | |
| 75 flex: none; | 55 flex: none; |
| 76 } | 56 } |
| 77 | 57 |
| 78 html /deep/ .flex, | 58 html /deep/ .flex, |
| 79 html /deep/ .flex-1 { | 59 html /deep/ .flex-1 { |
| 80 -ms-flex: 1; | |
| 81 -webkit-flex: 1; | |
| 82 flex: 1; | 60 flex: 1; |
| 83 } | 61 } |
| 84 | 62 |
| 85 html /deep/ .flex-2 { | 63 html /deep/ .flex-2 { |
| 86 -ms-flex: 2; | |
| 87 -webkit-flex: 2; | |
| 88 flex: 2; | 64 flex: 2; |
| 89 } | 65 } |
| 90 | 66 |
| 91 html /deep/ .flex-3 { | 67 html /deep/ .flex-3 { |
| 92 -ms-flex: 3; | |
| 93 -webkit-flex: 3; | |
| 94 flex: 3; | 68 flex: 3; |
| 95 } | 69 } |
| 96 | 70 |
| 97 html /deep/ .flex-4 { | 71 html /deep/ .flex-4 { |
| 98 -ms-flex: 4; | |
| 99 -webkit-flex: 4; | |
| 100 flex: 4; | 72 flex: 4; |
| 101 } | 73 } |
| 102 | 74 |
| 103 html /deep/ .flex-5 { | 75 html /deep/ .flex-5 { |
| 104 -ms-flex: 5; | |
| 105 -webkit-flex: 5; | |
| 106 flex: 5; | 76 flex: 5; |
| 107 } | 77 } |
| 108 | 78 |
| 109 html /deep/ .flex-6 { | 79 html /deep/ .flex-6 { |
| 110 -ms-flex: 6; | |
| 111 -webkit-flex: 6; | |
| 112 flex: 6; | 80 flex: 6; |
| 113 } | 81 } |
| 114 | 82 |
| 115 html /deep/ .flex-7 { | 83 html /deep/ .flex-7 { |
| 116 -ms-flex: 7; | |
| 117 -webkit-flex: 7; | |
| 118 flex: 7; | 84 flex: 7; |
| 119 } | 85 } |
| 120 | 86 |
| 121 html /deep/ .flex-8 { | 87 html /deep/ .flex-8 { |
| 122 -ms-flex: 8; | |
| 123 -webkit-flex: 8; | |
| 124 flex: 8; | 88 flex: 8; |
| 125 } | 89 } |
| 126 | 90 |
| 127 html /deep/ .flex-9 { | 91 html /deep/ .flex-9 { |
| 128 -ms-flex: 9; | |
| 129 -webkit-flex: 9; | |
| 130 flex: 9; | 92 flex: 9; |
| 131 } | 93 } |
| 132 | 94 |
| 133 html /deep/ .flex-10 { | 95 html /deep/ .flex-10 { |
| 134 -ms-flex: 10; | |
| 135 -webkit-flex: 10; | |
| 136 flex: 10; | 96 flex: 10; |
| 137 } | 97 } |
| 138 | 98 |
| 139 html /deep/ .flex-11 { | 99 html /deep/ .flex-11 { |
| 140 -ms-flex: 11; | |
| 141 -webkit-flex: 11; | |
| 142 flex: 11; | 100 flex: 11; |
| 143 } | 101 } |
| 144 | 102 |
| 145 html /deep/ .flex-12 { | 103 html /deep/ .flex-12 { |
| 146 -ms-flex: 12; | |
| 147 -webkit-flex: 12; | |
| 148 flex: 12; | 104 flex: 12; |
| 149 } | 105 } |
| 150 | 106 |
| 151 /* alignment in cross axis */ | 107 /* alignment in cross axis */ |
| 152 | 108 |
| 153 html /deep/ .layout.start { | 109 html /deep/ .layout.start { |
| 154 -ms-flex-align: start; | |
| 155 -webkit-align-items: flex-start; | |
| 156 align-items: flex-start; | 110 align-items: flex-start; |
| 157 } | 111 } |
| 158 | 112 |
| 159 html /deep/ .layout.center, | 113 html /deep/ .layout.center, |
| 160 html /deep/ .layout.center-center { | 114 html /deep/ .layout.center-center { |
| 161 -ms-flex-align: center; | |
| 162 -webkit-align-items: center; | |
| 163 align-items: center; | 115 align-items: center; |
| 164 } | 116 } |
| 165 | 117 |
| 166 html /deep/ .layout.end { | 118 html /deep/ .layout.end { |
| 167 -ms-flex-align: end; | |
| 168 -webkit-align-items: flex-end; | |
| 169 align-items: flex-end; | 119 align-items: flex-end; |
| 170 } | 120 } |
| 171 | 121 |
| 172 /* alignment in main axis */ | 122 /* alignment in main axis */ |
| 173 | 123 |
| 174 html /deep/ .layout.start-justified { | 124 html /deep/ .layout.start-justified { |
| 175 -ms-flex-pack: start; | |
| 176 -webkit-justify-content: flex-start; | |
| 177 justify-content: flex-start; | 125 justify-content: flex-start; |
| 178 } | 126 } |
| 179 | 127 |
| 180 html /deep/ .layout.center-justified, | 128 html /deep/ .layout.center-justified, |
| 181 html /deep/ .layout.center-center { | 129 html /deep/ .layout.center-center { |
| 182 -ms-flex-pack: center; | |
| 183 -webkit-justify-content: center; | |
| 184 justify-content: center; | 130 justify-content: center; |
| 185 } | 131 } |
| 186 | 132 |
| 187 html /deep/ .layout.end-justified { | 133 html /deep/ .layout.end-justified { |
| 188 -ms-flex-pack: end; | |
| 189 -webkit-justify-content: flex-end; | |
| 190 justify-content: flex-end; | 134 justify-content: flex-end; |
| 191 } | 135 } |
| 192 | 136 |
| 193 html /deep/ .layout.around-justified { | 137 html /deep/ .layout.around-justified { |
| 194 -ms-flex-pack: around; | |
| 195 -webkit-justify-content: space-around; | |
| 196 justify-content: space-around; | 138 justify-content: space-around; |
| 197 } | 139 } |
| 198 | 140 |
| 199 html /deep/ .layout.justified { | 141 html /deep/ .layout.justified { |
| 200 -ms-flex-pack: justify; | |
| 201 -webkit-justify-content: space-between; | |
| 202 justify-content: space-between; | 142 justify-content: space-between; |
| 203 } | 143 } |
| 204 | 144 |
| 205 /* self alignment */ | 145 /* self alignment */ |
| 206 | 146 |
| 207 html /deep/ .self-start { | 147 html /deep/ .self-start { |
| 208 -ms-align-self: flex-start; | |
| 209 -webkit-align-self: flex-start; | |
| 210 align-self: flex-start; | 148 align-self: flex-start; |
| 211 } | 149 } |
| 212 | 150 |
| 213 html /deep/ .self-center { | 151 html /deep/ .self-center { |
| 214 -ms-align-self: center; | |
| 215 -webkit-align-self: center; | |
| 216 align-self: center; | 152 align-self: center; |
| 217 } | 153 } |
| 218 | 154 |
| 219 html /deep/ .self-end { | 155 html /deep/ .self-end { |
| 220 -ms-align-self: flex-end; | |
| 221 -webkit-align-self: flex-end; | |
| 222 align-self: flex-end; | 156 align-self: flex-end; |
| 223 } | 157 } |
| 224 | 158 |
| 225 html /deep/ .self-stretch { | 159 html /deep/ .self-stretch { |
| 226 -ms-align-self: stretch; | |
| 227 -webkit-align-self: stretch; | |
| 228 align-self: stretch; | 160 align-self: stretch; |
| 229 } | 161 } |
| 230 | 162 |
| 231 /******************************* | 163 /******************************* |
| 232 Other Layout | 164 Other Layout |
| 233 *******************************/ | 165 *******************************/ |
| 234 | 166 |
| 235 html /deep/ .block { | 167 html /deep/ .block { |
| 236 display: block; | 168 display: block; |
| 237 } | 169 } |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 293 } | 225 } |
| 294 | 226 |
| 295 html /deep/ .fixed-left { | 227 html /deep/ .fixed-left { |
| 296 top: 0; | 228 top: 0; |
| 297 bottom: 0; | 229 bottom: 0; |
| 298 left: 0; | 230 left: 0; |
| 299 } | 231 } |
| 300 | 232 |
| 301 </style> | 233 </style> |
| 302 </head><body><script src="iron-shadow-flex-layout-extracted.js"></script></body>
</html> | 234 </head><body><script src="iron-shadow-flex-layout-extracted.js"></script></body>
</html> |
| OLD | NEW |