Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(830)

Side by Side Diff: third_party/polymer/v0_8/components/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
OLDNEW
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 --> 9 -->
10 10
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html"> 12 <link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">
13 <link rel="import" href="../paper-styles/paper-styles.html"> 13 <link rel="import" href="../paper-styles/paper-styles.html">
14 14
15 <!-- 15 <!--
16 `<paper-menu>` implements an accessible menu control with Material Design stylin g. The focused item
17 is highlighted, and the selected item has bolded text.
18
19 <paper-menu>
20 <paper-item>Item 1</paper-item>
21 <paper-item>Item 2</paper-item>
22 </paper-menu>
23
24 Make a multi-select menu with the `multi` attribute. Items in a multi-select men u can be deselected,
25 and multiple item can be selected.
26
27 <paper-menu multi>
28 <paper-item>Item 1</paper-item>
29 <paper-item>Item 2</paper-item>
30 </paper-menu>
31
32 ### Styling
33
34 The following custom properties and mixins are available for styling:
35
36 Custom property | Description | Default
37 ----------------|-------------|----------
38 `--paper-menu-background-color` | Menu background color | `--primary-background-color`
39 `-paper-menu-color` | Menu foreground color | `--primary-text-color`
40 `--paper-menu-disabled-color` | Foreground color for a disabled item | `--disabled-text-color`
41 `--paper-menu` | Mixin applied to the menu | `{}`
42 `--paper-menu-selected-item` | Mixin applied to the selected item | `{}`
43 `--paper-menu-focused-item` | Mixin applied to the focused item | `{}`
44 `--paper-menu-focused-item-after` | Mixin applied to the ::after pseudo-element for the focused item | `{}`
45
46 ### Accessibility
47
48 `<paper-menu>` has `role="menu"` by default. A multi-select menu will also have
49 `aria-multiselectable` set. It implements key bindings to navigate through the m enu with the up and
50 down arrow keys, esc to exit the menu, and enter to activate a menu item. Typing the first letter
51 of a menu item will also focus it.
52
53 @group Paper Elements
16 @element paper-menu 54 @element paper-menu
55 @hero hero.svg
56 @demo demo/index.html
17 --> 57 -->
18 58
19 <dom-module id="paper-menu"> 59 <dom-module id="paper-menu">
20 60
21 <style> 61 <style>
22 62
23 :host { 63 :host {
24 display: block; 64 display: block;
25 padding: 8px 0; 65 padding: 8px 0;
26 66
27 background: var(--primary-background-color); 67 background: var(--paper-menu-background-color, --primary-background-color) ;
28 color: var(--primary-text-color); 68 color: var(--paper-menu-color, --primary-text-color);
29 69
30 mixin(--paper-menu); 70 @apply(--paper-menu);
31 } 71 }
32 72
33 :host > ::content > [disabled] { 73 /* need a wrapper element to make this higher specificity than the :host rul e in paper-item */
34 color: var(--disabled-text-color); 74 .content > ::content > .iron-selected {
75 font-weight: bold;
76
77 @apply(--paper-menu-selected-item);
35 } 78 }
36 79
37 :host > ::content > .iron-selected { 80 .content > ::content > [disabled] {
38 position: relative; 81 color: var(--paper-menu-disabled-color, --disabled-text-color);
39 } 82 }
40 83
41 :host > ::content > .iron-selected::after { 84 .content > ::content > *:focus {
42 mixin(--layout-fit); 85 position: relative;
86 outline: 0;
43 87
88 @apply(--paper-menu-colored-focused-item);
89 }
90
91 .content > ::content > *:focus:after {
92 @apply(--layout-fit);
44 background: currentColor; 93 background: currentColor;
45 /* FIXME move to paper-styles for next widget */ 94 /* FIXME move to paper-styles for next widget */
46 opacity: 0.12; 95 opacity: 0.12;
47 content: ''; 96 content: '';
48 97
49 mixin(--paper-menu-selected-item); 98 @apply(--paper-menu-colored-focused-item-after);
50 } 99 }
51 100
52 :host > ::content > .iron-selected[colored]::after { 101 .content > ::content > *[colored]:focus:after {
53 opacity: 0.26; 102 opacity: 0.26;
54
55 mixin(--paper-menu-colored-selected-item);
56 } 103 }
57 104
58 </style> 105 </style>
59 106
60 <template> 107 <template>
61 108
62 <content></content> 109 <div class="content">
110 <content></content>
111 </div>
63 112
64 </template> 113 </template>
65 114
66 </dom-module> 115 </dom-module>
67 116
68 <script> 117 <script>
69 118
70 (function() { 119 (function() {
71 120
72 Polymer({ 121 Polymer({
73 122
74 is: 'paper-menu', 123 is: 'paper-menu',
75 124
76 enableCustomStyleProperties: true,
77
78 behaviors: [ 125 behaviors: [
79 Polymer.IronMenuBehavior 126 Polymer.IronMenuBehavior
80 ] 127 ]
81 128
82 }); 129 });
83 130
84 })(); 131 })();
85 132
86 </script> 133 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698