1<!-- 2@license 3Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10 11<script> 12 console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead'); 13</script> 14 15<style> 16 17 /******************************* 18 Flex Layout 19 *******************************/ 20 21 html /deep/ .layout.horizontal, 22 html /deep/ .layout.horizontal-reverse, 23 html /deep/ .layout.vertical, 24 html /deep/ .layout.vertical-reverse { 25 display: -ms-flexbox; 26 display: -webkit-flex; 27 display: flex; 28 } 29 30 html /deep/ .layout.inline { 31 display: -ms-inline-flexbox; 32 display: -webkit-inline-flex; 33 display: inline-flex; 34 } 35 36 html /deep/ .layout.horizontal { 37 -ms-flex-direction: row; 38 -webkit-flex-direction: row; 39 flex-direction: row; 40 } 41 42 html /deep/ .layout.horizontal-reverse { 43 -ms-flex-direction: row-reverse; 44 -webkit-flex-direction: row-reverse; 45 flex-direction: row-reverse; 46 } 47 48 html /deep/ .layout.vertical { 49 -ms-flex-direction: column; 50 -webkit-flex-direction: column; 51 flex-direction: column; 52 } 53 54 html /deep/ .layout.vertical-reverse { 55 -ms-flex-direction: column-reverse; 56 -webkit-flex-direction: column-reverse; 57 flex-direction: column-reverse; 58 } 59 60 html /deep/ .layout.wrap { 61 -ms-flex-wrap: wrap; 62 -webkit-flex-wrap: wrap; 63 flex-wrap: wrap; 64 } 65 66 html /deep/ .layout-no-wrap { 67 -ms-flex-wrap: nowrap; 68 -webkit-flex-wrap: nowrap; 69 flex-wrap: nowrap; 70 } 71 72 html /deep/ .layout.wrap-reverse { 73 -ms-flex-wrap: wrap-reverse; 74 -webkit-flex-wrap: wrap-reverse; 75 flex-wrap: wrap-reverse; 76 } 77 78 html /deep/ .flex-auto { 79 -ms-flex: 1 1 auto; 80 -webkit-flex: 1 1 auto; 81 flex: 1 1 auto; 82 } 83 84 html /deep/ .flex-none { 85 -ms-flex: none; 86 -webkit-flex: none; 87 flex: none; 88 } 89 90 html /deep/ .flex, 91 html /deep/ .flex-1 { 92 -ms-flex: 1; 93 -webkit-flex: 1; 94 flex: 1; 95 } 96 97 html /deep/ .flex-2 { 98 -ms-flex: 2; 99 -webkit-flex: 2; 100 flex: 2; 101 } 102 103 html /deep/ .flex-3 { 104 -ms-flex: 3; 105 -webkit-flex: 3; 106 flex: 3; 107 } 108 109 html /deep/ .flex-4 { 110 -ms-flex: 4; 111 -webkit-flex: 4; 112 flex: 4; 113 } 114 115 html /deep/ .flex-5 { 116 -ms-flex: 5; 117 -webkit-flex: 5; 118 flex: 5; 119 } 120 121 html /deep/ .flex-6 { 122 -ms-flex: 6; 123 -webkit-flex: 6; 124 flex: 6; 125 } 126 127 html /deep/ .flex-7 { 128 -ms-flex: 7; 129 -webkit-flex: 7; 130 flex: 7; 131 } 132 133 html /deep/ .flex-8 { 134 -ms-flex: 8; 135 -webkit-flex: 8; 136 flex: 8; 137 } 138 139 html /deep/ .flex-9 { 140 -ms-flex: 9; 141 -webkit-flex: 9; 142 flex: 9; 143 } 144 145 html /deep/ .flex-10 { 146 -ms-flex: 10; 147 -webkit-flex: 10; 148 flex: 10; 149 } 150 151 html /deep/ .flex-11 { 152 -ms-flex: 11; 153 -webkit-flex: 11; 154 flex: 11; 155 } 156 157 html /deep/ .flex-12 { 158 -ms-flex: 12; 159 -webkit-flex: 12; 160 flex: 12; 161 } 162 163 /* alignment in cross axis */ 164 165 html /deep/ .layout.start { 166 -ms-flex-align: start; 167 -webkit-align-items: flex-start; 168 align-items: flex-start; 169 } 170 171 html /deep/ .layout.center, 172 html /deep/ .layout.center-center { 173 -ms-flex-align: center; 174 -webkit-align-items: center; 175 align-items: center; 176 } 177 178 html /deep/ .layout.end { 179 -ms-flex-align: end; 180 -webkit-align-items: flex-end; 181 align-items: flex-end; 182 } 183 184 /* alignment in main axis */ 185 186 html /deep/ .layout.start-justified { 187 -ms-flex-pack: start; 188 -webkit-justify-content: flex-start; 189 justify-content: flex-start; 190 } 191 192 html /deep/ .layout.center-justified, 193 html /deep/ .layout.center-center { 194 -ms-flex-pack: center; 195 -webkit-justify-content: center; 196 justify-content: center; 197 } 198 199 html /deep/ .layout.end-justified { 200 -ms-flex-pack: end; 201 -webkit-justify-content: flex-end; 202 justify-content: flex-end; 203 } 204 205 html /deep/ .layout.around-justified { 206 -ms-flex-pack: around; 207 -webkit-justify-content: space-around; 208 justify-content: space-around; 209 } 210 211 html /deep/ .layout.justified { 212 -ms-flex-pack: justify; 213 -webkit-justify-content: space-between; 214 justify-content: space-between; 215 } 216 217 /* self alignment */ 218 219 html /deep/ .self-start { 220 -ms-align-self: flex-start; 221 -webkit-align-self: flex-start; 222 align-self: flex-start; 223 } 224 225 html /deep/ .self-center { 226 -ms-align-self: center; 227 -webkit-align-self: center; 228 align-self: center; 229 } 230 231 html /deep/ .self-end { 232 -ms-align-self: flex-end; 233 -webkit-align-self: flex-end; 234 align-self: flex-end; 235 } 236 237 html /deep/ .self-stretch { 238 -ms-align-self: stretch; 239 -webkit-align-self: stretch; 240 align-self: stretch; 241 } 242 243 /******************************* 244 Other Layout 245 *******************************/ 246 247 html /deep/ .block { 248 display: block; 249 } 250 251 /* IE 10 support for HTML5 hidden attr */ 252 html /deep/ [hidden] { 253 display: none !important; 254 } 255 256 html /deep/ .invisible { 257 visibility: hidden !important; 258 } 259 260 html /deep/ .relative { 261 position: relative; 262 } 263 264 html /deep/ .fit { 265 position: absolute; 266 top: 0; 267 right: 0; 268 bottom: 0; 269 left: 0; 270 } 271 272 body.fullbleed { 273 margin: 0; 274 height: 100vh; 275 } 276 277 html /deep/ .scroll { 278 -webkit-overflow-scrolling: touch; 279 overflow: auto; 280 } 281 282 .fixed-bottom, 283 .fixed-left, 284 .fixed-right, 285 .fixed-top { 286 position: fixed; 287 } 288 289 html /deep/ .fixed-top { 290 top: 0; 291 left: 0; 292 right: 0; 293 } 294 295 html /deep/ .fixed-right { 296 top: 0; 297 right: 0; 298 bottom: 0; 299 } 300 301 html /deep/ .fixed-bottom { 302 right: 0; 303 bottom: 0; 304 left: 0; 305 } 306 307 html /deep/ .fixed-left { 308 top: 0; 309 bottom: 0; 310 left: 0; 311 } 312 313</style> 314