third_party/polymer/v1_0/components/paper-menu/paper-menu.html - Issue 1269803005: Remove third_party/polymer from .gitignore

Side by Side Diff: third_party/polymer/v1_0/components/paper-menu/paper-menu.html

Issue 1269803005: Remove third_party/polymer from .gitignore (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 5 years, 4 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/v1_0/components/paper-menu/index.html ('k') | third_party/polymer/v1_0/components/paper-progress/.bower.json » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!--

2 @license

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

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

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

9 -->

10

11 <link rel="import" href="../polymer/polymer.html">

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

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

14

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 An initial selection can be specified with the `selected` attribute.

25

26 <paper-menu selected="0">

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

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

29 </paper-menu>

30

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

32 and multiple item can be selected.

33

34 <paper-menu multi>

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

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

37 </paper-menu>

38

39 ### Styling

40

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

42

43 Custom property \| Description \| Default

44 ----------------\|-------------\|----------

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

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

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

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

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

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

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

52

53 ### Accessibility

54

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

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

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

58 of a menu item will also focus it.

59

60 @group Paper Elements

61 @element paper-menu

62 @hero hero.svg

63 @demo demo/index.html

64 -->

65

66 <dom-module id="paper-menu">

67

68 <style>

69

70 :host {

71 display: block;

72 padding: 8px 0;

73

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

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

76

77 @apply(--paper-menu);

78 }

79

80 /* need a wrapper element to make this higher specificity than the :host rul e in paper-item */

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

82 font-weight: bold;

83

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

85 }

86

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

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

89 }

90

91 .content > ::content > *:focus {

92 position: relative;

93 outline: 0;

94

95 @apply(--paper-menu-focused-item);

96 }

97

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

99 @apply(--layout-fit);

100 background: currentColor;

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

102 opacity: 0.12;

103 content: '';

104

105 @apply(--paper-menu-focused-item-after);

106 }

107

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

109 opacity: 0.26;

110 }

111

112 </style>

113

114 <template>

115

116 <div class="content">

117 <content></content>

118 </div>

119

120 </template>

121

122 </dom-module>

123

124 <script>

125

126 (function() {

127

128 Polymer({

129

130 is: 'paper-menu',

131

132 behaviors: [

133 Polymer.IronMenuBehavior

134 ]

135

136 });

137

138 })();

139

140 </script>

OLD	NEW