Index: third_party/polymer/components-chromium/core-layout/core-layout.html |
diff --git a/third_party/polymer/components-chromium/core-layout/core-layout.html b/third_party/polymer/components-chromium/core-layout/core-layout.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..d9c56f77adf58f8b2105f3b1596dd4450798e870 |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/core-layout/core-layout.html |
@@ -0,0 +1,169 @@ |
+<!-- |
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+Code distributed by Google as part of the polymer project is also |
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
+--> |
+ |
+<!-- |
+The `core-layout` element is a helper for using |
+[CSS3 Flexible Boxes](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes). |
+A `core-layout` element enables a set of css selectors for easy flexbox styling. |
+ |
+Example: |
+ |
+ <core-layout> |
+ <div>Left</div> |
+ <div core-flex>Main</div> |
+ <div>Right</div> |
+ </core-layout> |
+ |
+ Renders something like this: |
+ |
+ --------------------------------- |
+ |-------------------------------| |
+ ||Left| Main |Right|| |
+ |-------------------------------| |
+ --------------------------------- |
+ |
+__Note__: the `core-layout` element applies layout to itself if it has children or to |
+its parent element, if it does not. This feature allows you to apply layout to an |
+arbitrary parent. |
+ |
+Elements can layout horizontally, such that their items stack |
+left to right or vertically, such that their items stack top to bottom. The |
+default is horizontal. Set `vertical` to true to layout the elements vertically. |
+ |
+To make a particular child _flexible_, use the `core-flex` attribute. |
+You can control flexibility from 1 to 3 by giving the attribute a |
+corresponding value. For other values, apply the css manually. |
+ |
+It's common in flexbox parlance to hear the terms _main axis_ and _cross axis_. |
+For a horizontal layout the main axis is horizontal and the cross axis is vertical. |
+These are exchanged for a vertical layout. |
+ |
+To effect alignment in the main axis, use the `justify` attribute. The |
+supported values are `start`, `center`, `end`, and `between`. |
+ |
+To effect alignment in the cross axis, use the `align` attribute. The |
+supported values are `start`, `center`, and `end`. |
+ |
+Note, it's also possible to include the `core-layout.css` stylesheet separate |
+from the `core-layout` element. Including the element automatically includes |
+the stylesheet. To use the stylesheet independent of the element, css classes |
+should be used of the following form: `core-h`, `core-v`, `core-flex`, |
+`core-justify-start`, and `core-align-start`. |
+ |
+The `core-layout` and css file also provide a few commonly needed layout |
+behaviors. Apply the `core-fit` class to fit an element to its container. To |
+ensure a container will contain an element inside it with the `core-fit` class |
+give it the `core-relative` class. |
+ |
+More examples: |
+ |
+ <core-layout vertical> |
+ |
+ <div>Header</div> |
+ <div core-flex>Body</div> |
+ <div>Footer</div> |
+ |
+ </core-layout> |
+ |
+ ---------- |
+ ||------|| |
+ ||Header|| |
+ ||------|| |
+ ||Body || |
+ || || |
+ || || |
+ || || |
+ || || |
+ || || |
+ || || |
+ ||------|| |
+ ||Footer|| |
+ ||------|| |
+ ---------- |
+ |
+Justify: |
+ |
+ <core-layout justify="end"> |
+ <div core-flex>Left</div> |
+ <div>Main</div> |
+ <div>Right</div> |
+ </core-layout> |
+ |
+ --------------------------------- |
+ |-------------------------------| |
+ || Left|Main|Right|| |
+ |-------------------------------| |
+ --------------------------------- |
+ |
+Align: |
+ |
+ <core-layout align="center"> |
+ <div>Left</div> |
+ <div core-flex>Main</div> |
+ <div>Right</div> |
+ </core-layout> |
+ |
+ --------------------------------- |
+ |-------------------------------| |
+ || | | || |
+ ||Left| Main |Right|| |
+ || | | || |
+ |-------------------------------| |
+ --------------------------------- |
+ |
+ |
+To layout contents of a parent element, place a `core-layout` inside of it: |
+ |
+ <some-element> |
+ <core-layout></core-layout> |
+ <div>Left</div> |
+ <div core-flex>Main</div> |
+ <div>Right</div> |
+ </some-element> |
+ |
+ --------------------------------- |
+ |-------------------------------| |
+ ||Left| Main |Right|| |
+ |-------------------------------| |
+ --------------------------------- |
+ |
+You may also use the `core-layout` stylesheet directly: |
+ |
+ <link rel="stylesheet" href="../core-layout/core-layout.css"> |
+ <div class="core-h core-justify-end"> |
+ <div core-flex>Left</div> |
+ <div>Main</div> |
+ <div>Right</div> |
+ </div> |
+ |
+ --------------------------------- |
+ |-------------------------------| |
+ || Left|Main|Right|| |
+ |-------------------------------| |
+ --------------------------------- |
+ |
+@group Polymer Core Elements |
+@element core-layout |
+ |
+--> |
+<link rel="import" href="../polymer/polymer.html"> |
+ |
+<polymer-element name="core-layout" attributes="vertical justify align isContainer reverse" assetpath=""> |
+ |
+ <template> |
+ |
+ <link no-shim="" rel="stylesheet" href="core-layout.css"> |
+ <link no-shim="" rel="stylesheet" href="core-layout-host.css"> |
+ |
+ </template> |
+ |
+ |
+ |
+</polymer-element> |
+<script src="core-layout-extracted.js"></script> |