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

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

Issue 1862213002: Roll third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Remove obsolete appearance_browsertest.js, result of a previous bad merge. Created 4 years, 8 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 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), 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 : 16 also known as flexbox. This component provides two different ways to use flexbox :
17 17
18 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/mas ter/iron-flex-layout-classes.html). 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 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 20 let you specify layout properties directly in markup. You must include this file
21 in every element that needs to use them. 21 in every element that needs to use them.
22 22
23 Sample use: 23 Sample use:
24 24
25 <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html"> 25 <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html ">
26 <style is="custom-style" include="iron-flex iron-flex-alignment"> 26 <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
27 27
28 <div class="layout horizontal layout-start"> 28 <div class="layout horizontal layout-start">
29 <div>cross axis start alignment</div> 29 <div>cross axis start alignment</div>
30 </div> 30 </div>
31 31
32 2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/ master/iron-flex-layout.html). 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. 33 The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
34 34
35 Please note that the old [/deep/ layout classes](https://github.com/PolymerEleme nts/iron-flex-layout/tree/master/classes) 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 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 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). 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 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. 40 to import the `dom-modules` in every element that needs to use them.
(...skipping 170 matching lines...) Expand 10 before | Expand all | Expand 10 after
211 -webkit-align-items: center; 211 -webkit-align-items: center;
212 align-items: center; 212 align-items: center;
213 }; 213 };
214 214
215 --layout-end: { 215 --layout-end: {
216 -ms-flex-align: end; 216 -ms-flex-align: end;
217 -webkit-align-items: flex-end; 217 -webkit-align-items: flex-end;
218 align-items: flex-end; 218 align-items: flex-end;
219 }; 219 };
220 220
221 --layout-baseline: {
222 -ms-flex-align: baseline;
223 -webkit-align-items: baseline;
224 align-items: baseline;
225 };
226
221 /* alignment in main axis */ 227 /* alignment in main axis */
222 228
223 --layout-start-justified: { 229 --layout-start-justified: {
224 -ms-flex-pack: start; 230 -ms-flex-pack: start;
225 -webkit-justify-content: flex-start; 231 -webkit-justify-content: flex-start;
226 justify-content: flex-start; 232 justify-content: flex-start;
227 }; 233 };
228 234
229 --layout-center-justified: { 235 --layout-center-justified: {
230 -ms-flex-pack: center; 236 -ms-flex-pack: center;
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after
274 -webkit-align-self: flex-end; 280 -webkit-align-self: flex-end;
275 align-self: flex-end; 281 align-self: flex-end;
276 }; 282 };
277 283
278 --layout-self-stretch: { 284 --layout-self-stretch: {
279 -ms-align-self: stretch; 285 -ms-align-self: stretch;
280 -webkit-align-self: stretch; 286 -webkit-align-self: stretch;
281 align-self: stretch; 287 align-self: stretch;
282 }; 288 };
283 289
290 --layout-self-baseline: {
291 -ms-align-self: baseline;
292 -webkit-align-self: baseline;
293 align-self: baseline;
294 };
295
296 /* multi-line alignment in main axis */
297
298 --layout-start-aligned: {
299 -ms-flex-line-pack: start; /* IE10 */
300 -ms-align-content: flex-start;
301 -webkit-align-content: flex-start;
302 align-content: flex-start;
303 };
304
305 --layout-end-aligned: {
306 -ms-flex-line-pack: end; /* IE10 */
307 -ms-align-content: flex-end;
308 -webkit-align-content: flex-end;
309 align-content: flex-end;
310 };
311
312 --layout-center-aligned: {
313 -ms-flex-line-pack: center; /* IE10 */
314 -ms-align-content: center;
315 -webkit-align-content: center;
316 align-content: center;
317 };
318
319 --layout-between-aligned: {
320 -ms-flex-line-pack: justify; /* IE10 */
321 -ms-align-content: space-between;
322 -webkit-align-content: space-between;
323 align-content: space-between;
324 };
325
326 --layout-around-aligned: {
327 -ms-flex-line-pack: distribute; /* IE10 */
328 -ms-align-content: space-around;
329 -webkit-align-content: space-around;
330 align-content: space-around;
331 };
332
284 /******************************* 333 /*******************************
285 Other Layout 334 Other Layout
286 *******************************/ 335 *******************************/
287 336
288 --layout-block: { 337 --layout-block: {
289 display: block; 338 display: block;
290 }; 339 };
291 340
292 --layout-invisible: { 341 --layout-invisible: {
293 visibility: hidden !important; 342 visibility: hidden !important;
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after
341 --layout-fixed-left: { 390 --layout-fixed-left: {
342 position: fixed; 391 position: fixed;
343 top: 0; 392 top: 0;
344 bottom: 0; 393 bottom: 0;
345 left: 0; 394 left: 0;
346 }; 395 };
347 396
348 } 397 }
349 398
350 </style> 399 </style>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698