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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/polymer/v1_0/components-chromium/paper-toolbar/paper-toolbar.html

Issue 1468623004: Update Polymer from 1.2.1 -> 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@travis-yml
Patch Set: local-state.html Created 5 years, 1 month 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
« components/proximity_auth/webui/resources/local-state.html ('K') | « third_party/polymer/v1_0/components-chromium/paper-toolbar/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-toolbar/paper-toolbar-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-toolbar/paper-toolbar.html
diff --git a/third_party/polymer/v1_0/components-chromium/paper-toolbar/paper-toolbar.html b/third_party/polymer/v1_0/components-chromium/paper-toolbar/paper-toolbar.html
index 7acb0c92f3ab9bc5a018bff18a61dc15a73c1343..11838111567ffe76072fa8197c92d6a0791c6d38 100644
--- a/third_party/polymer/v1_0/components-chromium/paper-toolbar/paper-toolbar.html
+++ b/third_party/polymer/v1_0/components-chromium/paper-toolbar/paper-toolbar.html
@@ -6,9 +6,13 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
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="../paper-styles/paper-styles.html">
+<link rel="import" href="../paper-styles/default-theme.html">
+<link rel="import" href="../paper-styles/typography.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<!--
+Material design: [Toolbars](https://www.google.com/design/spec/components/toolbars.html)
+
`paper-toolbar` is a horizontal bar containing items that can be used for
label, navigation, search and actions. The items place inside the
`paper-toolbar` are projected into a `class="horizontal center layout"` container inside of
@@ -17,34 +21,42 @@ sizing.
Example:
- <paper-toolbar>
- <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
- <div class="title">Title</div>
- <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
- </paper-toolbar>
+```html
+<paper-toolbar>
+ <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
+ <div class="title">Title</div>
+ <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
+</paper-toolbar>
+```
`paper-toolbar` has a standard height, but can made be taller by setting `tall`
class on the `paper-toolbar`. This will make the toolbar 3x the normal height.
- <paper-toolbar class="tall">
- <paper-icon-button icon="menu"></paper-icon-button>
- </paper-toolbar>
+```html
+<paper-toolbar class="tall">
+ <paper-icon-button icon="menu"></paper-icon-button>
+</paper-toolbar>
+```
Apply `medium-tall` class to make the toolbar medium tall. This will make the
toolbar 2x the normal height.
- <paper-toolbar class="medium-tall">
- <paper-icon-button icon="menu"></paper-icon-button>
- </paper-toolbar>
+```html
+<paper-toolbar class="medium-tall">
+ <paper-icon-button icon="menu"></paper-icon-button>
+</paper-toolbar>
+```
When `tall`, items can pin to either the top (default), middle or bottom. Use
`middle` class for middle content and `bottom` class for bottom content.
- <paper-toolbar class="tall">
- <paper-icon-button icon="menu"></paper-icon-button>
- <div class="middle title">Middle Title</div>
- <div class="bottom title">Bottom Title</div>
- </paper-toolbar>
+```html
+<paper-toolbar class="tall">
+ <paper-icon-button icon="menu"></paper-icon-button>
+ <div class="middle title">Middle Title</div>
+ <div class="bottom title">Bottom Title</div>
+</paper-toolbar>
+```
For `medium-tall` toolbar, the middle and bottom contents overlap and are
pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are
@@ -53,9 +65,11 @@ still honored separately.
To make an element completely fit at the bottom of the toolbar, use `fit` along
with `bottom`.
- <paper-toolbar class="tall">
- <div id="progressBar" class="bottom fit"></div>
- </paper-toolbar>
+```html
+<paper-toolbar class="tall">
+ <div id="progressBar" class="bottom fit"></div>
+</paper-toolbar>
+```
### Styling
@@ -63,9 +77,14 @@ The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
+`--paper-toolbar-title` | Mixin applied to the title of the toolbar | `{}`
`--paper-toolbar-background` | Toolbar background color | `--default-primary-color`
`--paper-toolbar-color` | Toolbar foreground color | `--text-primary-color`
+`--paper-toolbar-height` | Custom height for toolbar | `64px`
+`--paper-toolbar-sm-height` | Custom height for small screen toolbar | `56px`
`--paper-toolbar` | Mixin applied to the toolbar | `{}`
+`--paper-toolbar-medium` | Mixin applied to medium height toolbar | `{}`
+`--paper-toolbar-tall` | Mixin applied to tall height toolbar | `{}`
### Accessibility
@@ -76,170 +95,188 @@ be used as the label of the toolbar via `aria-labelledby`.
-->
</head><body><dom-module id="paper-toolbar">
+ <template>
+ <style>
+ :host {
+ /* technical */
+ display: block;
+ position: relative;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
- <style>
- :host {
- /* technical */
- display: block;
- position: relative;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
+ /* size */
+ height: var(--paper-toolbar-height, 64px);
- /* size */
- height: 64px;
+ background: var(--paper-toolbar-background, --default-primary-color);
+ color: var(--paper-toolbar-color, --text-primary-color);
- background: var(--paper-toolbar-background, --default-primary-color);
- color: var(--paper-toolbar-color, --text-primary-color);
+ @apply(--paper-toolbar);
+ }
- @apply(--paper-toolbar);
- }
+ :host(.animate) {
+ /* transition */
+ transition: height 0.18s ease-in;
+ }
- :host(.animate) {
- /* transition */
- transition: height 0.18s ease-in;
- }
+ :host(.medium-tall) {
+ height: calc(var(--paper-toolbar-height, 64px) * 2);
+ @apply(--paper-toolbar-medium);
+ }
- :host(.medium-tall) {
- height: 128px;
- }
+ :host(.tall) {
+ height: calc(var(--paper-toolbar-height, 64px) * 3);
+ @apply(--paper-toolbar-tall);
+ }
- :host(.tall) {
- height: 192px;
- }
+ .toolbar-tools {
+ position: relative;
+ height: var(--paper-toolbar-height, 64px);
+ padding: 0 16px;
+ pointer-events: none;
+ @apply(--layout-horizontal);
+ @apply(--layout-center);
+ }
- .toolbar-tools {
- position: relative;
- height: 64px;
- padding: 0 16px;
- pointer-events: none;
- }
+ /*
+ * TODO: Where should media query breakpoints live so they can be shared between elements?
+ */
- /*
- * TODO: Where should media query breakpoints live so they can be shared between elements?
- */
+ @media (max-width: 639px) {
+ :host {
+ height: var(--paper-toolbar-sm-height, 56px);
+ }
- @media (max-width: 639px) {
- :host {
- height: 56px;
+ :host(.medium-tall) {
+ height: calc(var(--paper-toolbar-sm-height, 56px) * 2);
+ }
+
+ :host(.tall) {
+ height: calc(var(--paper-toolbar-sm-height, 56px) * 3);
+ }
+
+ .toolbar-tools {
+ height: var(--paper-toolbar-sm-height, 56px);
+ }
}
- :host(.medium-tall) {
- height: 112px;
+ #topBar {
+ position: relative;
}
- :host(.tall) {
- height: 168px;
+ /* middle bar */
+ #middleBar {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
}
- .toolbar-tools {
- height: 56px;
- }
- }
-
- #topBar {
- position: relative;
- }
-
- /* middle bar */
- #middleBar {
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- }
-
- :host(.tall) #middleBar,
- :host(.medium-tall) #middleBar {
- -webkit-transform: translateY(100%);
- transform: translateY(100%);
- }
-
- /* bottom bar */
- #bottomBar {
- position: absolute;
- right: 0;
- bottom: 0;
- left: 0;
- }
-
- /*
- * make elements (e.g. buttons) respond to mouse/touch events
- *
- * `.toolbar-tools` disables touch events so multiple toolbars can stack and not
- * absorb events. All children must have pointer events re-enabled to work as
- * expected.
- */
- .toolbar-tools > ::content > *:not([disabled]) {
- pointer-events: auto;
- }
-
- .toolbar-tools > ::content .title {
- @apply(--paper-font-title);
- @apply(--layout-flex);
-
- pointer-events: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
+ :host(.tall) #middleBar,
+ :host(.medium-tall) #middleBar {
+ -webkit-transform: translateY(100%);
+ transform: translateY(100%);
+ }
+
+ /* bottom bar */
+ #bottomBar {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
/*
- * Polymer/polymer/issues/1525
- * --paper-font-title defines a `font-weight`
- * let's override its value, but we need `important!`
- * because all mixins are resolved in rule's selector that has higher precedence
- * than the current selector.
+ * make elements (e.g. buttons) respond to mouse/touch events
+ *
+ * `.toolbar-tools` disables touch events so multiple toolbars can stack and not
+ * absorb events. All children must have pointer events re-enabled to work as
+ * expected.
*/
- font-weight: 400 !important;
- }
-
- /**
- * TODO: Refactor these selectors
- * Work in progress.
- */
- .toolbar-tools > ::content paper-icon-button[icon=menu] {
- margin-right: 24px;
- }
-
- .toolbar-tools > ::content > .title,
- .toolbar-tools > ::content[select=".middle"] > .title,
- .toolbar-tools > ::content[select=".bottom"] > .title {
- margin-left: 56px;
- }
-
- .toolbar-tools > ::content > paper-icon-button + .title,
- .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title,
- .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title {
- margin-left: 0;
- }
-
- .toolbar-tools > ::content > .fit {
- position: absolute;
- top: auto;
- right: 0;
- bottom: 0;
- left: 0;
- width: auto;
- margin: 0;
- }
-
- </style>
+ .toolbar-tools > ::content > *:not([disabled]) {
+ pointer-events: auto;
+ }
- <template>
+ .toolbar-tools > ::content .title {
+ @apply(--paper-font-common-base);
+
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 20px;
+ font-weight: 400;
+ line-height: 1;
+ pointer-events: none;
- <div id="topBar" class$="[[_computeBarClassName(justify)]]">
+ @apply(--layout-flex);
+ @apply(--paper-toolbar-title);
+ }
+
+ /**
+ * TODO: Refactor these selectors
+ * Work in progress.
+ */
+ .toolbar-tools > ::content paper-icon-button[icon=menu] {
+ margin-right: 24px;
+ }
+
+ .toolbar-tools > ::content > .title,
+ .toolbar-tools > ::content[select=".middle"] > .title,
+ .toolbar-tools > ::content[select=".bottom"] > .title {
+ margin-left: 56px;
+ }
+
+ .toolbar-tools > ::content > paper-icon-button + .title,
+ .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title,
+ .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title {
+ margin-left: 0;
+ }
+
+ .toolbar-tools > ::content > .fit {
+ position: absolute;
+ top: auto;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: auto;
+ margin: 0;
+ }
+
+ /* TODO(noms): Until we have a better solution for classes that don't use
+ * /deep/ create our own.
+ */
+ .start-justified {
+ @apply(--layout-start-justified);
+ }
+
+ .center-justified {
+ @apply(--layout-center-justified);
+ }
+
+ .end-justified {
+ @apply(--layout-end-justified);
+ }
+
+ .around-justified {
+ @apply(--layout-around-justified);
+ }
+
+ .justified {
+ @apply(--layout-justified);
+ }
+ </style>
+
+ <div id="topBar" class$="toolbar-tools [[_computeBarExtraClasses(justify)]]">
<content select=":not(.middle):not(.bottom)"></content>
</div>
- <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">
+ <div id="middleBar" class$="toolbar-tools [[_computeBarExtraClasses(middleJustify)]]">
<content select=".middle"></content>
</div>
- <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">
+ <div id="bottomBar" class$="toolbar-tools [[_computeBarExtraClasses(bottomJustify)]]">
<content select=".bottom"></content>
</div>
-
</template>
-</dom-module>
-
+ </dom-module>
<script src="paper-toolbar-extracted.js"></script></body></html>
« components/proximity_auth/webui/resources/local-state.html ('K') | « third_party/polymer/v1_0/components-chromium/paper-toolbar/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-toolbar/paper-toolbar-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698