third_party/polymer/v0_8/components-chromium/paper-menu/paper-menu.html - Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed.

Unified Diff: third_party/polymer/v0_8/components-chromium/paper-menu/paper-menu.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 7 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/v0_8/components-chromium/paper-menu/index.html ('k') | third_party/polymer/v0_8/components-chromium/paper-menu/paper-menu-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v0_8/components-chromium/paper-menu/paper-menu.html

diff --git a/third_party/polymer/v0_8/components-chromium/paper-menu/paper-menu.html b/third_party/polymer/v0_8/components-chromium/paper-menu/paper-menu.html

index 9a06497b6b1bced31d8b0afe0437b399f908d0ed..5233d19eb2f867a8db5a72998c5d05b567f81ca4 100644

--- a/third_party/polymer/v0_8/components-chromium/paper-menu/paper-menu.html

+++ b/third_party/polymer/v0_8/components-chromium/paper-menu/paper-menu.html

@@ -11,7 +11,47 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN

<!--

+`<paper-menu>` implements an accessible menu control with Material Design styling. The focused item

+is highlighted, and the selected item has bolded text.

+ <paper-menu>

+ <paper-item>Item 1</paper-item>

+ <paper-item>Item 2</paper-item>

+ </paper-menu>

+Make a multi-select menu with the `multi` attribute. Items in a multi-select menu can be deselected,

+and multiple item can be selected.

+ <paper-menu multi>

+ <paper-item>Item 1</paper-item>

+ <paper-item>Item 2</paper-item>

+ </paper-menu>

+### Styling

+The following custom properties and mixins are available for styling:

+Custom property | Description | Default

+----------------|-------------|----------

+`--paper-menu-background-color` | Menu background color | `--primary-background-color`

+`-paper-menu-color` | Menu foreground color | `--primary-text-color`

+`--paper-menu-disabled-color` | Foreground color for a disabled item | `--disabled-text-color`

+`--paper-menu` | Mixin applied to the menu | `{}`

+`--paper-menu-selected-item` | Mixin applied to the selected item | `{}`

+`--paper-menu-focused-item` | Mixin applied to the focused item | `{}`

+`--paper-menu-focused-item-after` | Mixin applied to the ::after pseudo-element for the focused item | `{}`

+### Accessibility

+`<paper-menu>` has `role="menu"` by default. A multi-select menu will also have

+`aria-multiselectable` set. It implements key bindings to navigate through the menu with the up and

+down arrow keys, esc to exit the menu, and enter to activate a menu item. Typing the first letter

+of a menu item will also focus it.

+@group Paper Elements

@element paper-menu

+@hero hero.svg

+@demo demo/index.html

-->

</head><body><dom-module id="paper-menu">

@@ -22,42 +62,51 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN

display: block;

padding: 8px 0;

- background: var(--primary-background-color);

- color: var(--primary-text-color);

+ background: var(--paper-menu-background-color, --primary-background-color);

+ color: var(--paper-menu-color, --primary-text-color);

- mixin(--paper-menu);

+ @apply(--paper-menu);

}

- :host > ::content > [disabled] {

- color: var(--disabled-text-color);

+ /* need a wrapper element to make this higher specificity than the :host rule in paper-item */

+ .content > ::content > .iron-selected {

+ font-weight: bold;

+ @apply(--paper-menu-selected-item);

}

- :host > ::content > .iron-selected {

- position: relative;

+ .content > ::content > [disabled] {

+ color: var(--paper-menu-disabled-color, --disabled-text-color);

}

- :host > ::content > .iron-selected::after {

- mixin(--layout-fit);

+ .content > ::content > *:focus {

+ position: relative;

+ outline: 0;

+ @apply(--paper-menu-colored-focused-item);

+ }

+ .content > ::content > *:focus:after {

+ @apply(--layout-fit);

background: currentColor;

/* FIXME move to paper-styles for next widget */

opacity: 0.12;

content: '';

- mixin(--paper-menu-selected-item);

+ @apply(--paper-menu-colored-focused-item-after);

}

- :host > ::content > .iron-selected[colored]::after {

+ .content > ::content > *[colored]:focus:after {

opacity: 0.26;

- mixin(--paper-menu-colored-selected-item);

}

</style>

- <content></content>

+ <div class="content">

+ <content></content>

+ </div>

</template>