third_party/polymer/v1_0/components-chromium/paper-header-panel/README.md - Issue 1336623003: [MD settings] updating polymer to 1.1.13

Unified Diff: third_party/polymer/v1_0/components-chromium/paper-header-panel/README.md

Issue 1336623003: [MD settings] updating polymer to 1.1.13 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: changed Polymer.IronCheckedElementBehavior name Created 5 years, 3 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 side-by-side diff with in-line comments

Download patch

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-header-panel/.bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-header-panel/bower.json » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v1_0/components-chromium/paper-header-panel/README.md

diff --git a/third_party/polymer/v1_0/components-chromium/paper-header-panel/README.md b/third_party/polymer/v1_0/components-chromium/paper-header-panel/README.md

index aab76e6bb5b4260e00ee49f2036e568990047ba2..90467b204e1b787ac2560fb7f5613b62fd902393 100644

--- a/third_party/polymer/v1_0/components-chromium/paper-header-panel/README.md

+++ b/third_party/polymer/v1_0/components-chromium/paper-header-panel/README.md

@@ -4,51 +4,47 @@

__Important:__ The `paper-header-panel` will not display if its parent does not have a height.

-Using [layout classes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can make

-the `paper-header-panel` fill the screen

-```html

-<body class="fullbleed layout vertical">

- <paper-header-panel class="flex">

- <paper-toolbar>

- <div>Hello World!</div>

- </paper-toolbar>

- </paper-header-panel>

-</body>

-```

-Special support is provided for scrolling modes when one uses a `paper-toolbar` or equivalent for the header section. For example:

-```html

-<paper-header-panel>

- <paper-toolbar>Header</paper-toolbar>

- <div>Content goes here...</div>

-</paper-header-panel>

-```

+Using layout classes, you can make the `paper-header-panel` fill the screen

+ <body class="fullbleed layout vertical">

+ <paper-header-panel class="flex">

+ <paper-toolbar>

+ <div>Hello World!</div>

+ </paper-toolbar>

+ </paper-header-panel>

+ </body>

+Special support is provided for scrolling modes when one uses a paper-toolbar or equivalent for the

+header section.

+Example:

+ <paper-header-panel>

+ <paper-toolbar>Header</paper-toolbar>

+ <div>Content goes here...</div>

+ </paper-header-panel>

If you want to use other than `paper-toolbar` for the header, add `paper-header` class to that

-element:

-```html

-<paper-header-panel>

- <div class="paper-header">Header</div>

- <div>Content goes here...</div>

-</paper-header-panel>

-```

+element.

-To have the content fit to the main area, use the `fit` class:

+Example:

-```html

-<paper-header-panel>

- <div class="paper-header">standard</div>

- <div class="content fit">content fits 100% below the header</div>

-</paper-header-panel>

-```

+ <paper-header-panel>

+ <div class="paper-header">Header</div>

+ <div>Content goes here...</div>

+ </paper-header-panel>

+To have the content fit to the main area, use the `fit` class.

-### Mode

+ <paper-header-panel>

+ <div class="paper-header">standard</div>

+ <div class="fit">content fits 100% below the header</div>

+ </paper-header-panel>

+## Modes

-Controls header and scrolling behavior. Options are `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and

-`cover`. Default is `standard`.

+Controls header and scrolling behavior. Options are `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and `cover`. Default is `standard`.

Mode | Description

----------------|-------------

@@ -59,47 +55,44 @@ Mode | Description

`scroll` | The header keeps its seam with the panel, and is pushed off screen.

`cover` | The panel covers the whole `paper-header-panel` including the header. This allows user to style the panel in such a way that the panel is partially covering the header.

-Example:

+Example:

-```html

-<paper-header-panel mode="waterfall">

- <div class="paper-header">standard</div>

- <div class="content fit">content fits 100% below the header</div>

-</paper-header-panel>

-```

-### Styling header panel:

+ <paper-header-panel mode="waterfall">

+ <div class="paper-header">standard</div>

+ <div class="content fit">content fits 100% below the header</div>

+ </paper-header-panel>

+## Styling header panel:

To change the shadow that shows up underneath the header:

-```css

-paper-header-panel {

- --paper-header-panel-shadow: {

- height: 6px;

- bottom: -6px;

- box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

- };

-```

-To change the panel container:

-```css

-paper-slider {

- --paper-header-panel-standard-container: {

- border: 1px solid gray;

- };

- --paper-header-panel-cover-container: {

- border: 1px solid gray;

- };

- --paper-header-panel-waterfall-container: {

- border: 1px solid gray;

- };

- --paper-header-panel-waterfall-tall-container: {

- border: 1px solid gray;

- };

-```

+ paper-header-panel {

+ --paper-header-panel-shadow: {

+ height: 6px;

+ bottom: -6px;

+ box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

+ };

+ }

+To change the panel container in different modes:

+ paper-slider {

+ --paper-header-panel-standard-container: {

+ border: 1px solid gray;

+ };

+ --paper-header-panel-seamed-container: {

+ border: 1px solid gray;

+ };

+ --paper-header-panel-waterfall-container: {

+ border: 1px solid gray;

+ };

+ --paper-header-panel-waterfall-tall-container: {

+ border: 1px solid gray;

+ };

+ --paper-header-panel-scroll-container: {

+ border: 1px solid gray;

+ };

+ --paper-header-panel-cover-container: {

+ border: 1px solid gray;

+ };

+ }