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

Side by Side Diff: third_party/polymer/v1_0/components-chromium/iron-flex-layout/iron-flex-layout.html

Issue 1766433002: Roll Polymer to 1.3.1 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 4 years, 9 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 <!-- 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: 14 The `<iron-flex-layout>` component provides simple ways to use
15 [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS /Flexible_boxes),
16 also known as flexbox. This component provides two different ways to use flexbox :
15 17
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. 18 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/mas ter/iron-flex-layout-classes.html).
19 The layout class stylesheet provides a simple set of class-based flexbox rules, that
20 let you specify layout properties directly in markup. You must include this file
21 in every element that needs to use them.
17 22
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. 23 Sample use:
24
25 <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
26 <style is="custom-style" include="iron-flex iron-flex-alignment">
27
28 <div class="layout horizontal layout-start">
29 <div>cross axis start alignment</div>
30 </div>
31
32 2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/ master/iron-flex-layout.html).
33 The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
34
35 Please note that the old [/deep/ layout classes](https://github.com/PolymerEleme nts/iron-flex-layout/tree/master/classes)
36 are deprecated, and should not be used. To continue using layout properties
37 directly in markup, please switch to using the new `dom-module`-based
38 [layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master /iron-flex-layout-classes.html).
39 Please note that the new version does not use `/deep/`, and therefore requires y ou
40 to import the `dom-modules` in every element that needs to use them.
19 41
20 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to ` <iron-flex-layout>` is available. 42 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to ` <iron-flex-layout>` is available.
21 43
22 @group Iron Elements 44 @group Iron Elements
23 @pseudoElement iron-flex-layout 45 @pseudoElement iron-flex-layout
24 @demo demo/index.html 46 @demo demo/index.html
25 --> 47 -->
26 48
27 <style> 49 <style>
28 /* IE 10 support for HTML5 hidden attr */ 50 /* IE 10 support for HTML5 hidden attr */
(...skipping 181 matching lines...) Expand 10 before | Expand all | Expand 10 after
210 justify-content: center; 232 justify-content: center;
211 }; 233 };
212 234
213 --layout-end-justified: { 235 --layout-end-justified: {
214 -ms-flex-pack: end; 236 -ms-flex-pack: end;
215 -webkit-justify-content: flex-end; 237 -webkit-justify-content: flex-end;
216 justify-content: flex-end; 238 justify-content: flex-end;
217 }; 239 };
218 240
219 --layout-around-justified: { 241 --layout-around-justified: {
220 -ms-flex-pack: around; 242 -ms-flex-pack: distribute;
221 -webkit-justify-content: space-around; 243 -webkit-justify-content: space-around;
222 justify-content: space-around; 244 justify-content: space-around;
223 }; 245 };
224 246
225 --layout-justified: { 247 --layout-justified: {
226 -ms-flex-pack: justify; 248 -ms-flex-pack: justify;
227 -webkit-justify-content: space-between; 249 -webkit-justify-content: space-between;
228 justify-content: space-between; 250 justify-content: space-between;
229 }; 251 };
230 252
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after
319 --layout-fixed-left: { 341 --layout-fixed-left: {
320 position: fixed; 342 position: fixed;
321 top: 0; 343 top: 0;
322 bottom: 0; 344 bottom: 0;
323 left: 0; 345 left: 0;
324 }; 346 };
325 347
326 } 348 }
327 349
328 </style> 350 </style>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698