Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(307)

Side by Side Diff: polymer_1.2.3/bower_components/iron-flex-layout/iron-flex-layout.html

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 12
13 <!--
14 The `<iron-flex-layout>` component provides simple ways to use [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), also known as flexbox. This component provides two different ways to use flexbo x:
15
16 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/mas ter/classes). The layout class stylesheet provides a simple set of class-based f lexbox rules. Layout classes let you specify layout properties directly in marku p.
17
18 2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/ master/iron-flex-layout.html). The mixin stylesheet includes custom CSS mixins t hat can be applied inside a CSS rule using the `@apply` function.
19
20 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to ` <iron-flex-layout>` is available.
21
22 @group Iron Elements
23 @pseudoElement iron-flex-layout
24 @demo demo/index.html
25 -->
26
27 <style>
28 /* IE 10 support for HTML5 hidden attr */
29 [hidden] {
30 display: none !important;
31 }
32 </style>
33
13 <style is="custom-style"> 34 <style is="custom-style">
14
15 :root { 35 :root {
16 36
17 --layout: { 37 --layout: {
18 display: -ms-flexbox; 38 display: -ms-flexbox;
19 display: -webkit-flex; 39 display: -webkit-flex;
20 display: flex; 40 display: flex;
21 }; 41 };
22 42
23 --layout-inline: { 43 --layout-inline: {
24 display: -ms-inline-flexbox; 44 display: -ms-inline-flexbox;
25 display: -webkit-inline-flex; 45 display: -webkit-inline-flex;
26 display: inline-flex; 46 display: inline-flex;
27 }; 47 };
28 48
29 --layout-horizontal: { 49 --layout-horizontal: {
30 /* @apply(--layout); */ 50 @apply(--layout);
31 display: -ms-flexbox;
32 display: -webkit-flex;
33 display: flex;
34 51
35 -ms-flex-direction: row; 52 -ms-flex-direction: row;
36 -webkit-flex-direction: row; 53 -webkit-flex-direction: row;
37 flex-direction: row; 54 flex-direction: row;
38 }; 55 };
39 56
40 --layout-horizontal-reverse: { 57 --layout-horizontal-reverse: {
58 @apply(--layout);
59
41 -ms-flex-direction: row-reverse; 60 -ms-flex-direction: row-reverse;
42 -webkit-flex-direction: row-reverse; 61 -webkit-flex-direction: row-reverse;
43 flex-direction: row-reverse; 62 flex-direction: row-reverse;
44 }; 63 };
45 64
46 --layout-vertical: { 65 --layout-vertical: {
47 /* @apply(--layout); */ 66 @apply(--layout);
48 display: -ms-flexbox;
49 display: -webkit-flex;
50 display: flex;
51 67
52 -ms-flex-direction: column; 68 -ms-flex-direction: column;
53 -webkit-flex-direction: column; 69 -webkit-flex-direction: column;
54 flex-direction: column; 70 flex-direction: column;
55 }; 71 };
56 72
57 --layout-vertical-reverse: { 73 --layout-vertical-reverse: {
74 @apply(--layout);
75
58 -ms-flex-direction: column-reverse; 76 -ms-flex-direction: column-reverse;
59 -webkit-flex-direction: column-reverse; 77 -webkit-flex-direction: column-reverse;
60 flex-direction: column-reverse; 78 flex-direction: column-reverse;
61 }; 79 };
62 80
63 --layout-wrap: { 81 --layout-wrap: {
64 -ms-flex-wrap: wrap; 82 -ms-flex-wrap: wrap;
65 -webkit-flex-wrap: wrap; 83 -webkit-flex-wrap: wrap;
66 flex-wrap: wrap; 84 flex-wrap: wrap;
67 }; 85 };
(...skipping 136 matching lines...) Expand 10 before | Expand all | Expand 10 after
204 justify-content: space-around; 222 justify-content: space-around;
205 }; 223 };
206 224
207 --layout-justified: { 225 --layout-justified: {
208 -ms-flex-pack: justify; 226 -ms-flex-pack: justify;
209 -webkit-justify-content: space-between; 227 -webkit-justify-content: space-between;
210 justify-content: space-between; 228 justify-content: space-between;
211 }; 229 };
212 230
213 --layout-center-center: { 231 --layout-center-center: {
214 /* @apply(--layout-center --layout-center-justified); */ 232 @apply(--layout-center);
215 -ms-flex-align: center; 233 @apply(--layout-center-justified);
216 -webkit-align-items: center;
217 align-items: center;
218 -ms-flex-pack: center;
219 -webkit-justify-content: center;
220 justify-content: center;
221 }; 234 };
222 235
223 /* self alignment */ 236 /* self alignment */
224 237
225 --layout-self-start: { 238 --layout-self-start: {
226 -ms-align-self: flex-start; 239 -ms-align-self: flex-start;
227 -webkit-align-self: flex-start; 240 -webkit-align-self: flex-start;
228 align-self: flex-start; 241 align-self: flex-start;
229 }; 242 };
230 243
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after
268 right: 0; 281 right: 0;
269 bottom: 0; 282 bottom: 0;
270 left: 0; 283 left: 0;
271 }; 284 };
272 285
273 --layout-scroll: { 286 --layout-scroll: {
274 -webkit-overflow-scrolling: touch; 287 -webkit-overflow-scrolling: touch;
275 overflow: auto; 288 overflow: auto;
276 }; 289 };
277 290
291 --layout-fullbleed: {
292 margin: 0;
293 height: 100vh;
294 };
295
278 /* fixed position */ 296 /* fixed position */
279 297
280 --layout-fixed-bottom:,
281 --layout-fixed-left:,
282 --layout-fixed-right:,
283 --layout-fixed-top: { 298 --layout-fixed-top: {
284 position: fixed; 299 position: fixed;
285 };
286
287 --layout-fixed-top: {
288 top: 0; 300 top: 0;
289 left: 0; 301 left: 0;
290 right: 0; 302 right: 0;
291 }; 303 };
292 304
293 --layout-fixed-right: { 305 --layout-fixed-right: {
306 position: fixed;
294 top: 0; 307 top: 0;
295 right: 0; 308 right: 0;
296 bottom: 0; 309 bottom: 0;
297 }; 310 };
298 311
299 --layout-fixed-bottom: { 312 --layout-fixed-bottom: {
313 position: fixed;
300 right: 0; 314 right: 0;
301 bottom: 0; 315 bottom: 0;
302 left: 0; 316 left: 0;
303 }; 317 };
304 318
305 --layout-fixed-left: { 319 --layout-fixed-left: {
320 position: fixed;
306 top: 0; 321 top: 0;
307 bottom: 0; 322 bottom: 0;
308 left: 0; 323 left: 0;
309 }; 324 };
310 325
311 } 326 }
312 327
313 </style> 328 </style>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698