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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1862213002: Roll third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Remove obsolete appearance_browsertest.js, result of a previous bad merge. Created 4 years, 8 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/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 »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/polymer/v1_0/components-chromium/paper-dropdown-menu/paper-dropdown-menu-light.html
diff --git a/third_party/polymer/v1_0/components-chromium/paper-dropdown-menu/paper-dropdown-menu-light.html b/third_party/polymer/v1_0/components-chromium/paper-dropdown-menu/paper-dropdown-menu-light.html
new file mode 100644
index 0000000000000000000000000000000000000000..ab93a70a711280a00bf9fd45954b48a8f214d744
--- /dev/null
+++ b/third_party/polymer/v1_0/components-chromium/paper-dropdown-menu/paper-dropdown-menu-light.html
@@ -0,0 +1,278 @@
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+--><html><head><link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import" href="../iron-behaviors/iron-button-state.html">
+<link rel="import" href="../iron-behaviors/iron-control-state.html">
+<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
+<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
+<link rel="import" href="../paper-menu-button/paper-menu-button.html">
+<link rel="import" href="../paper-behaviors/paper-ripple-behavior.html">
+<link rel="import" href="../paper-styles/default-theme.html">
+
+<link rel="import" href="paper-dropdown-menu-icons.html">
+<link rel="import" href="paper-dropdown-menu-shared-styles.html">
+
+<!--
+Material design: [Dropdown menus](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
+
+This is a faster, lighter version of `paper-dropdown-menu`, that does not
+use a `<paper-input>` internally. Use this element if you're concerned about
+the performance of this element, i.e., if you plan on using many dropdowns on
+the same page. Note that this element has a slightly different styling API
+than `paper-dropdown-menu`.
+
+`paper-dropdown-menu-light` is similar to a native browser select element.
+`paper-dropdown-menu-light` works with selectable content. The currently selected
+item is displayed in the control. If no item is selected, the `label` is
+displayed instead.
+
+Example:
+
+ <paper-dropdown-menu-light label="Your favourite pastry">
+ <paper-listbox class="dropdown-content">
+ <paper-item>Croissant</paper-item>
+ <paper-item>Donut</paper-item>
+ <paper-item>Financier</paper-item>
+ <paper-item>Madeleine</paper-item>
+ </paper-listbox>
+ </paper-dropdown-menu-light>
+
+This example renders a dropdown menu with 4 options.
+
+The child element with the class `dropdown-content` is used as the dropdown
+menu. This can be a [`paper-listbox`](paper-listbox), or any other or
+element that acts like an [`iron-selector`](iron-selector).
+
+Specifically, the menu child must fire an
+[`iron-select`](iron-selector#event-iron-select) event when one of its
+children is selected, and an [`iron-deselect`](iron-selector#event-iron-deselect)
+event when a child is deselected. The selected or deselected item must
+be passed as the event's `detail.item` property.
+
+Applications can listen for the `iron-select` and `iron-deselect` events
+to react when options are selected and deselected.
+
+### Styling
+
+The following custom properties and mixins are also available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-dropdown-menu` | A mixin that is applied to the element host | `{}`
+`--paper-dropdown-menu-disabled` | A mixin that is applied to the element host when disabled | `{}`
+`--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}`
+`--paper-dropdown-menu-button` | A mixin that is applied to the internal menu button | `{}`
+`--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}`
+`--paper-dropdown-menu-disabled-opacity` | The opacity of the dropdown when disabled | `0.33`
+`--paper-dropdown-menu-color` | The color of the input/label/underline when the dropdown is unfocused | `--primary-text-color`
+`--paper-dropdown-menu-focus-color` | The color of the label/underline when the dropdown is focused | `--primary-color`
+`--paper-dropdown-error-color` | The color of the label/underline when the dropdown is invalid | `--error-color`
+`--paper-dropdown-menu-label` | Mixin applied to the label | `{}`
+`--paper-dropdown-menu-input` | Mixin appled to the input | `{}`
+
+Note that in this element, the underline is just the bottom border of the "input".
+To style it:
+
+ <style is=custom-style>
+ paper-dropdown-menu-light.custom {
+ --paper-dropdown-menu-input: {
+ border-bottom: 2px dashed lavender;
+ };
+ </style>
+
+@group Paper Elements
+@element paper-dropdown-menu-light
+@hero hero.svg
+@demo demo/index.html
+-->
+
+</head><body><dom-module id="paper-dropdown-menu-light">
+ <template>
+ <style include="paper-dropdown-menu-shared-styles">
+ /**
+ * All of these styles below are for styling the fake-input display
+ */
+ .dropdown-trigger {
+ box-sizing: border-box;
+ position: relative;
+ width: 100%;
+ padding: 16px 0 8px 0;
+ }
+
+ :host([disabled]) .dropdown-trigger {
+ pointer-events: none;
+ opacity: var(--paper-dropdown-menu-disabled-opacity, 0.33);
+ }
+
+ :host([no-label-float]) .dropdown-trigger {
+ padding-top: 8px; /* If there's no label, we need less space up top. */
+ }
+
+ #input {
+ @apply(--paper-font-subhead);
+ @apply(--paper-font-common-nowrap);
+ border-bottom: 1px solid var(--paper-dropdown-menu-color, --secondary-text-color);
+ color: var(--paper-dropdown-menu-color, --primary-text-color);
+ width: 200px; /* Default size of an <input> */
+ min-height: 24px;
+ box-sizing: border-box;
+ padding: 12px 20px 0 0; /* Right padding so that text doesn't overlap the icon */
+ outline: none;
+ @apply(--paper-dropdown-menu-input);
+ }
+
+ :host-context([dir="rtl"]) #input {
+ padding-right: 0px;
+ padding-left: 20px;
+ }
+
+ :host([disabled]) #input {
+ border-bottom: 1px dashed var(--paper-dropdown-menu-color, --secondary-text-color);
+ }
+
+ :host([invalid]) #input {
+ border-bottom: 2px solid var(--paper-dropdown-error-color, --error-color);
+ }
+
+ :host([no-label-float]) #input {
+ padding-top: 0; /* If there's no label, we need less space up top. */
+ }
+
+ label {
+ @apply(--paper-font-subhead);
+ @apply(--paper-font-common-nowrap);
+ display: block;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ /**
+ * The container has a 16px top padding, and there's 12px of padding
+ * between the input and the label (from the input's padding-top)
+ */
+ top: 28px;
+ box-sizing: border-box;
+ width: 100%;
+ padding-right: 20px; /* Right padding so that text doesn't overlap the icon */
+ text-align: left;
+ transition-duration: .2s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+ color: var(--paper-dropdown-menu-color, --secondary-text-color);
+ @apply(--paper-dropdown-menu-label);
+ }
+
+ :host-context([dir="rtl"]) label {
+ padding-right: 0px;
+ padding-left: 20px;
+ }
+
+ :host([no-label-float]) label {
+ top: 8px;
+ }
+
+ label.label-is-floating {
+ font-size: 12px;
+ top: 8px;
+ }
+
+ label.label-is-hidden {
+ display: none;
+ }
+
+ :host([focused]) label.label-is-floating {
+ color: var(--paper-dropdown-menu-focus-color, --primary-color);
+ }
+
+ :host([invalid]) label.label-is-floating {
+ color: var(--paper-dropdown-error-color, --error-color);
+ }
+
+ /**
+ * Sets up the focused underline. It's initially hidden, and becomes
+ * visible when it's focused.
+ */
+ label:after {
+ background-color: var(--paper-dropdown-menu-focus-color, --primary-color);
+ bottom: 8px; /* The container has an 8px bottom padding */
+ content: '';
+ height: 2px;
+ left: 45%;
+ position: absolute;
+ transition-duration: .2s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+ visibility: hidden;
+ width: 8px;
+ z-index: 10;
+ }
+
+ :host([invalid]) label:after {
+ background-color: var(--paper-dropdown-error-color, --error-color);
+ }
+
+ :host([no-label-float]) label:after {
+ bottom: 8px; /* The container has a 8px bottom padding */
+ }
+
+ :host([focused]:not([disabled])) label:after {
+ left: 0;
+ visibility: visible;
+ width: 100%;
+ }
+
+ iron-icon {
+ position: absolute;
+ right: 0px;
+ bottom: 8px; /* The container has an 8px bottom padding */
+ @apply(--paper-font-subhead);
+ margin-top: 12px;
+ color: var(--disabled-text-color);
+ @apply(--paper-dropdown-menu-icon);
+ }
+
+ :host-context([dir="rtl"]) iron-icon {
+ left: 0;
+ right: auto;
+ }
+
+ :host([no-label-float]) iron-icon {
+ margin-top: 0px;
+ }
+
+ .error {
+ display: inline-block;
+ visibility: hidden;
+ color: var(--paper-dropdown-error-color, --error-color);
+ @apply(--paper-font-caption);
+ position: absolute;
+ left:0;
+ right:0;
+ bottom: -12px;
+ }
+
+ :host([invalid]) .error {
+ visibility: visible;
+ }
+ </style>
+
+ <!-- this div fulfills an a11y requirement for combobox, do not remove -->
+ <div role="button"></div>
+ <paper-menu-button id="menuButton" vertical-align="[[verticalAlign]]" horizontal-align="[[horizontalAlign]]" vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]" disabled="[[disabled]]" no-animations="[[noAnimations]]" on-iron-select="_onIronSelect" on-iron-deselect="_onIronDeselect" opened="{{opened}}">
+ <div class="dropdown-trigger">
+ <label hidden$="[[!label]]" class$="[[_computeLabelClass(noLabelFloat,alwaysFloatLabel,hasContent)]]">[[label]]</label>
+ <div id="input" tabindex="-1">&nbsp;</div>
+ <iron-icon icon="paper-dropdown-menu:arrow-drop-down"></iron-icon>
+ <span class="error">[[errorMessage]]</span>
+ </div>
+ <content id="content" select=".dropdown-content"></content>
+ </paper-menu-button>
+ </template>
+
+ </dom-module>
+<script src="paper-dropdown-menu-light-extracted.js"></script></body></html>
« 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 »

Powered by Google App Engine
This is Rietveld 408576698