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.

Side by Side 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, 6 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

« 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
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 --><html><head><link rel="import" href="../polymer/polymer.html">	9 --><html><head><link rel="import" href="../polymer/polymer.html">

10 <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">	10 <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">

11 <link rel="import" href="../paper-styles/paper-styles.html">	11 <link rel="import" href="../paper-styles/paper-styles.html">

12	12

13 <!--	13 <!--

	14 `<paper-menu>` implements an accessible menu control with Material Design stylin g. The focused item

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

	16

	17 <paper-menu>

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

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

	20 </paper-menu>

	21

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

	23 and multiple item can be selected.

	24

	25 <paper-menu multi>

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

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

	28 </paper-menu>

	29

	30 ### Styling

	31

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

	33

	34 Custom property \| Description \| Default

	35 ----------------\|-------------\|----------

	36 `--paper-menu-background-color` \| Menu background color \| `--primary-background-color`

	37 `-paper-menu-color` \| Menu foreground color \| `--primary-text-color`

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

	39 `--paper-menu` \| Mixin applied to the menu \| `{}`

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

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

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

	43

	44 ### Accessibility

	45

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

	47 `aria-multiselectable` set. It implements key bindings to navigate through the m enu with the up and

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

	49 of a menu item will also focus it.

	50

	51 @group Paper Elements

14 @element paper-menu	52 @element paper-menu

	53 @hero hero.svg

	54 @demo demo/index.html

15 -->	55 -->

16	56

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

18	58

19 <style>	59 <style>

20	60

21 :host {	61 :host {

22 display: block;	62 display: block;

23 padding: 8px 0;	63 padding: 8px 0;

24	64

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

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

27	67

28 mixin(--paper-menu);	68 @apply(--paper-menu);

29 }	69 }

30	70

31 :host > ::content > [disabled] {	71 /* need a wrapper element to make this higher specificity than the :host rul e in paper-item */

32 color: var(--disabled-text-color);	72 .content > ::content > .iron-selected {

	73 font-weight: bold;

	74

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

33 }	76 }

34	77

35 :host > ::content > .iron-selected {	78 .content > ::content > [disabled] {

36 position: relative;	79 color: var(--paper-menu-disabled-color, --disabled-text-color);

37 }	80 }

38	81

39 :host > ::content > .iron-selected::after {	82 .content > ::content > *:focus {

40 mixin(--layout-fit);	83 position: relative;

	84 outline: 0;

41	85

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

	87 }

	88

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

	90 @apply(--layout-fit);

42 background: currentColor;	91 background: currentColor;

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

44 opacity: 0.12;	93 opacity: 0.12;

45 content: '';	94 content: '';

46	95

47 mixin(--paper-menu-selected-item);	96 @apply(--paper-menu-colored-focused-item-after);

48 }	97 }

49	98

50 :host > ::content > .iron-selected[colored]::after {	99 .content > ::content > *[colored]:focus:after {

51 opacity: 0.26;	100 opacity: 0.26;

52

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

54 }	101 }

55	102

56 </style>	103 </style>

57	104

58 <template>	105 <template>

59	106

60 <content></content>	107 <div class="content">

	108 <content></content>

	109 </div>

61	110

62 </template>	111 </template>

63	112

64 </dom-module>	113 </dom-module>

65	114

66 <script src="paper-menu-extracted.js"></script></body></html>	115 <script src="paper-menu-extracted.js"></script></body></html>

OLD	NEW