| Index: third_party/polymer/components-chromium/core-layout-trbl/core-layout-trbl.html
|
| diff --git a/third_party/polymer/components-chromium/core-layout-trbl/core-layout-trbl.html b/third_party/polymer/components-chromium/core-layout-trbl/core-layout-trbl.html
|
| deleted file mode 100644
|
| index 5621ecc1242afa8d2054791b075e488d2d3dffbc..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/components-chromium/core-layout-trbl/core-layout-trbl.html
|
| +++ /dev/null
|
| @@ -1,138 +0,0 @@
|
| -<!--
|
| -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
|
| ---><!--
|
| -`<core-layout-trbl>` arranges nodes horizontally via absolute positioning.
|
| -Set the `vertical` attribute (boolean) to arrange vertically instead.
|
| -
|
| -`<core-layout-trbl>` arranges it's <b>sibling elements</b>, not
|
| -it's children.
|
| -
|
| -One arranged node may be marked as elastic by giving it a `flex`
|
| -attribute (boolean).
|
| -
|
| -You may remove a node from layout by giving it a `nolayout`
|
| -attribute (boolean).
|
| -
|
| -CSS Notes:
|
| -
|
| -`padding` is ignored on the parent node.
|
| -`margin` is ignored on arranged nodes.
|
| -`min-width` is ignored on arranged nodes, use `min-width` on the parent node
|
| -instead.
|
| -
|
| -Example:
|
| -
|
| -Arrange three `div` into columns. `flex` attribute on Column Two makes that
|
| -column elastic.
|
| -
|
| - <core-layout-trbl></core-layout-trbl>
|
| - <div>Column One</div>
|
| - <div flex>Column Two</div>
|
| - <div>Column Three</div>
|
| -
|
| -Remember that `<core-layout-trbl>` arranges it's sibling elements, not it's children.
|
| -
|
| -If body has width 52 device pixels (in this case, ascii characters), call that 52px.
|
| -Column One has it's natural width of 12px (including border), Column Three has it's
|
| -natural width of 14px, body border uses 2px, and Column Two automatically uses the
|
| -remaining space: 24px.
|
| -
|
| - |- 52px -|
|
| - ----------------------------------------------------
|
| - ||Column One|| Column Two ||Column Three||
|
| - ----------------------------------------------------
|
| - |- 12px -||- (24px) -|| 14px -|
|
| -
|
| -As the parent node resizes, the elastic column reacts via CSS to adjust it's size.
|
| -No javascript is used during parent resizing, for best performance.
|
| -
|
| -Changes in content or sibling size are not handled automatically.
|
| -
|
| - ----------------------------------------------------------------
|
| - ||Column One| Column Two |Column Three||
|
| - ----------------------------------------------------------------
|
| -
|
| - --------------------------------------
|
| - ||Column One|Column Two|Column Three||
|
| - --------------------------------------
|
| -
|
| -Arrange in rows by adding the `vertical` attribute.
|
| -
|
| -Example:
|
| -
|
| - <core-layout-trbl vertical></core-layout-trbl>
|
| - <div>Row One</div>
|
| - <div flex>Row Two</div>
|
| - <div>Row Three</div>
|
| -
|
| -This setup will cause Row Two to stretch to fill the container.
|
| -
|
| - ----------- -----------
|
| - |---------| |---------|
|
| - | | | |
|
| - |Row One | |Row One |
|
| - | | | |
|
| - |---------| |---------|
|
| - | | | |
|
| - |Row Two | |Row Two |
|
| - | | | |
|
| - |---------| | |
|
| - | | | |
|
| - |Row Three| | |
|
| - | | |---------|
|
| - |---------| | |
|
| - ----------- |Row Three|
|
| - | |
|
| - |---------|
|
| - |---------|
|
| -
|
| -Layouts can be nested arbitrarily.
|
| -
|
| - <core-layout-trbl></core-layout-trbl>
|
| - <div>Menu</div>
|
| - <div flex>
|
| - <core-layout-trbl vertical></core-layout-trbl>
|
| - <div>Title</div>
|
| - <div>Toolbar</div>
|
| - <div flex>Main</div>
|
| - <div>Footer</div>
|
| - </div>
|
| -
|
| -Renders something like this
|
| -
|
| - --------------------------------
|
| - ||Menu ||Title ||
|
| - || ||-----------------||
|
| - || ||Toolbar ||
|
| - || ||-----------------||
|
| - || ||Main ||
|
| - || || ||
|
| - || ||-----------------||
|
| - || ||Footer ||
|
| - --------------------------------
|
| -
|
| -@group Polymer Core Elements
|
| -@element core-layout-trbl
|
| ---><html><head><link rel="import" href="../polymer/polymer.html">
|
| -
|
| -</head><body><polymer-element name="core-layout-trbl" attributes="vertical" assetpath="">
|
| -
|
| - <template>
|
| -
|
| - <style>
|
| - :host {
|
| - display: none;
|
| - }
|
| - </style>
|
| -
|
| - </template>
|
| -
|
| -
|
| -
|
| -</polymer-element>
|
| -<script charset="utf-8" src="core-layout-trbl-extracted.js"></script></body></html>
|
|
|