third_party/polymer/v1_0/components-chromium/paper-dropdown-menu/paper-dropdown-menu-light.html - Issue 2947193002: Polymer: Remove unused paper-dropdown-menu, paper-menu-button.

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

Issue 2947193002: Polymer: Remove unused paper-dropdown-menu, paper-menu-button. (Closed)

Patch Set: Created 3 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:

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-dropdown-menu/paper-dropdown-menu-icons.html ('k') | third_party/polymer/v1_0/components-chromium/paper-dropdown-menu/paper-dropdown-menu-light-extracted.js » ('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) 2016 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 --><html><head><link rel="import" href="../polymer/polymer.html">

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

11 <link rel="import" href="../iron-behaviors/iron-button-state.html">

12 <link rel="import" href="../iron-behaviors/iron-control-state.html">

13 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio r.html">

14 <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior. html">

15 <link rel="import" href="../paper-menu-button/paper-menu-button.html">

16 <link rel="import" href="../paper-behaviors/paper-ripple-behavior.html">

17 <link rel="import" href="../paper-styles/default-theme.html">

18

19 <link rel="import" href="paper-dropdown-menu-icons.html">

20 <link rel="import" href="paper-dropdown-menu-shared-styles.html">

21

22 <!--

23 Material design: [Dropdown menus](https://www.google.com/design/spec/components/ buttons.html#buttons-dropdown-buttons)

24

25 This is a faster, lighter version of `paper-dropdown-menu`, that does not

26 use a `<paper-input>` internally. Use this element if you're concerned about

27 the performance of this element, i.e., if you plan on using many dropdowns on

28 the same page. Note that this element has a slightly different styling API

29 than `paper-dropdown-menu`.

30

31 `paper-dropdown-menu-light` is similar to a native browser select element.

32 `paper-dropdown-menu-light` works with selectable content. The currently selecte d

33 item is displayed in the control. If no item is selected, the `label` is

34 displayed instead.

35

36 Example:

37

38 <paper-dropdown-menu-light label="Your favourite pastry">

39 <paper-listbox class="dropdown-content">

40 <paper-item>Croissant</paper-item>

41 <paper-item>Donut</paper-item>

42 <paper-item>Financier</paper-item>

43 <paper-item>Madeleine</paper-item>

44 </paper-listbox>

45 </paper-dropdown-menu-light>

46

47 This example renders a dropdown menu with 4 options.

48

49 The child element with the class `dropdown-content` is used as the dropdown

50 menu. This can be a [`paper-listbox`](paper-listbox), or any other or

51 element that acts like an [`iron-selector`](iron-selector).

52

53 Specifically, the menu child must fire an

54 [`iron-select`](iron-selector#event-iron-select) event when one of its

55 children is selected, and an [`iron-deselect`](iron-selector#event-iron-deselect )

56 event when a child is deselected. The selected or deselected item must

57 be passed as the event's `detail.item` property.

58

59 Applications can listen for the `iron-select` and `iron-deselect` events

60 to react when options are selected and deselected.

61

62 ### Styling

63

64 The following custom properties and mixins are also available for styling:

65

66 Custom property \| Description \| Default

67 ----------------\|-------------\|----------

68 `--paper-dropdown-menu` \| A mixin that is applied to the element host \| `{}`

69 `--paper-dropdown-menu-disabled` \| A mixin that is applied to the element host w hen disabled \| `{}`

70 `--paper-dropdown-menu-ripple` \| A mixin that is applied to the internal ripple \| `{}`

71 `--paper-dropdown-menu-button` \| A mixin that is applied to the internal menu bu tton \| `{}`

72 `--paper-dropdown-menu-icon` \| A mixin that is applied to the internal icon \| `{ }`

73 `--paper-dropdown-menu-disabled-opacity` \| The opacity of the dropdown when disa bled \| `0.33`

74 `--paper-dropdown-menu-color` \| The color of the input/label/underline when the dropdown is unfocused \| `--primary-text-color`

75 `--paper-dropdown-menu-focus-color` \| The color of the label/underline when the dropdown is focused \| `--primary-color`

76 `--paper-dropdown-error-color` \| The color of the label/underline when the dropd own is invalid \| `--error-color`

77 `--paper-dropdown-menu-label` \| Mixin applied to the label \| `{}`

78 `--paper-dropdown-menu-input` \| Mixin appled to the input \| `{}`

79

80 Note that in this element, the underline is just the bottom border of the "input ".

81 To style it:

82

83 <style is=custom-style>

84 paper-dropdown-menu-light.custom {

85 --paper-dropdown-menu-input: {

86 border-bottom: 2px dashed lavender;

87 };

88 </style>

89

90 @group Paper Elements

91 @element paper-dropdown-menu-light

92 @hero hero.svg

93 @demo demo/index.html

94 -->

95

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

97 <template>

98 <style include="paper-dropdown-menu-shared-styles">

99 :host(:focus) {

100 outline: none;

101 }

102

103 :host {

104 width: 200px; /* Default size of an <input> */

105 }

106

107 /**

108 * All of these styles below are for styling the fake-input display

109 */

110 .dropdown-trigger {

111 box-sizing: border-box;

112 position: relative;

113 width: 100%;

114 padding: 16px 0 8px 0;

115 }

116

117 :host([disabled]) .dropdown-trigger {

118 pointer-events: none;

119 opacity: var(--paper-dropdown-menu-disabled-opacity, 0.33);

120 }

121

122 :host([no-label-float]) .dropdown-trigger {

123 padding-top: 8px; /* If there's no label, we need less space up top. * /

124 }

125

126 #input {

127 @apply(--paper-font-subhead);

128 @apply(--paper-font-common-nowrap);

129 line-height: 1.5;

130 border-bottom: 1px solid var(--paper-dropdown-menu-color, --secondary-te xt-color);

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

132 width: 100%;

133 box-sizing: border-box;

134 padding: 12px 20px 0 0; /* Right padding so that text doesn't overlap the icon */

135 outline: none;

136 @apply(--paper-dropdown-menu-input);

137 }

138

139 :host-context([dir="rtl"]) #input {

140 padding-right: 0px;

141 padding-left: 20px;

142 }

143

144 :host([disabled]) #input {

145 border-bottom: 1px dashed var(--paper-dropdown-menu-color, --secondary-t ext-color);

146 }

147

148 :host([invalid]) #input {

149 border-bottom: 2px solid var(--paper-dropdown-error-color, --error-color );

150 }

151

152 :host([no-label-float]) #input {

153 padding-top: 0; /* If there's no label, we need less space up top. */

154 }

155

156 label {

157 @apply(--paper-font-subhead);

158 @apply(--paper-font-common-nowrap);

159 display: block;

160 position: absolute;

161 bottom: 0;

162 left: 0;

163 right: 0;

164 /**

165 * The container has a 16px top padding, and there's 12px of padding

166 * between the input and the label (from the input's padding-top)

167 */

168 top: 28px;

169 box-sizing: border-box;

170 width: 100%;

171 padding-right: 20px; /* Right padding so that text doesn't overlap th e icon */

172 text-align: left;

173 transition-duration: .2s;

174 transition-timing-function: cubic-bezier(.4,0,.2,1);

175 color: var(--paper-dropdown-menu-color, --secondary-text-color);

176 @apply(--paper-dropdown-menu-label);

177 }

178

179 :host-context([dir="rtl"]) label {

180 padding-right: 0px;

181 padding-left: 20px;

182 }

183

184 :host([no-label-float]) label {

185 top: 8px;

186 /* Since the label doesn't need to float, remove the animation duration

187 which slows down visibility changes (i.e. when a selection is made) */

188 transition-duration: 0s;

189 }

190

191 label.label-is-floating {

192 font-size: 12px;

193 top: 8px;

194 }

195

196 label.label-is-hidden {

197 visibility: hidden;

198 }

199

200 :host([focused]) label.label-is-floating {

201 color: var(--paper-dropdown-menu-focus-color, --primary-color);

202 }

203

204 :host([invalid]) label.label-is-floating {

205 color: var(--paper-dropdown-error-color, --error-color);

206 }

207

208 /**

209 * Sets up the focused underline. It's initially hidden, and becomes

210 * visible when it's focused.

211 */

212 label:after {

213 background-color: var(--paper-dropdown-menu-focus-color, --primary-color );

214 bottom: 7px; /* The container has an 8px bottom padding */

215 content: '';

216 height: 2px;

217 left: 45%;

218 position: absolute;

219 transition-duration: .2s;

220 transition-timing-function: cubic-bezier(.4,0,.2,1);

221 visibility: hidden;

222 width: 8px;

223 z-index: 10;

224 }

225

226 :host([invalid]) label:after {

227 background-color: var(--paper-dropdown-error-color, --error-color);

228 }

229

230 :host([no-label-float]) label:after {

231 bottom: 7px; /* The container has a 8px bottom padding */

232 }

233

234 :host([focused]:not([disabled])) label:after {

235 left: 0;

236 visibility: visible;

237 width: 100%;

238 }

239

240 iron-icon {

241 position: absolute;

242 right: 0px;

243 bottom: 8px; /* The container has an 8px bottom padding */

244 @apply(--paper-font-subhead);

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

246 @apply(--paper-dropdown-menu-icon);

247 }

248

249 :host-context([dir="rtl"]) iron-icon {

250 left: 0;

251 right: auto;

252 }

253

254 :host([no-label-float]) iron-icon {

255 margin-top: 0px;

256 }

257

258 .error {

259 display: inline-block;

260 visibility: hidden;

261 color: var(--paper-dropdown-error-color, --error-color);

262 @apply(--paper-font-caption);

263 position: absolute;

264 left:0;

265 right:0;

266 bottom: -12px;

267 }

268

269 :host([invalid]) .error {

270 visibility: visible;

271 }

272 </style>

273

274 <!-- this div fulfills an a11y requirement for combobox, do not remove -->

275 <span role="button"></span>

276 <paper-menu-button id="menuButton" vertical-align="[[verticalAlign]]" horizo ntal-align="[[horizontalAlign]]" vertical-offset="[[_computeMenuVerticalOffset(n oLabelFloat)]]" disabled="[[disabled]]" no-animations="[[noAnimations]]" on-iron -select="_onIronSelect" on-iron-deselect="_onIronDeselect" opened="{{opened}}" c lose-on-activate="" allow-outside-scroll="[[allowOutsideScroll]]">

277 <div class="dropdown-trigger">

278 <label class$="[[_computeLabelClass(noLabelFloat,alwaysFloatLabel,hasCon tent)]]">

279 [[label]]

280 </label>

281 <div id="input" tabindex="-1"> </div>

282 <iron-icon icon="paper-dropdown-menu:arrow-drop-down"></iron-icon>

283 <span class="error">[[errorMessage]]</span>

284 </div>

285 <content id="content" select=".dropdown-content"></content>

286 </paper-menu-button>

287 </template>

288

289 </dom-module>

290 <script src="paper-dropdown-menu-light-extracted.js"></script></body></html>

OLD	NEW