| Index: third_party/polymer/v0_8/components-chromium/paper-toolbar/paper-toolbar.html
|
| diff --git a/third_party/polymer/v0_8/components-chromium/paper-toolbar/paper-toolbar.html b/third_party/polymer/v0_8/components-chromium/paper-toolbar/paper-toolbar.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..b553ab892f5dfdd42706921dce6d647d95d2983a
|
| --- /dev/null
|
| +++ b/third_party/polymer/v0_8/components-chromium/paper-toolbar/paper-toolbar.html
|
| @@ -0,0 +1,181 @@
|
| +<!--
|
| +Copyright (c) 2015 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
|
| +--><!--
|
| +`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
|
| +`paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items'
|
| +sizing.
|
| +
|
| +Example:
|
| +
|
| + <paper-toolbar>
|
| + <paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button>
|
| + <div flex>Title</div>
|
| + <paper-icon-button icon="more" 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>
|
| +
|
| +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>
|
| +
|
| +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">Middle Title</div>
|
| + <div class="bottom">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
|
| +still honored separately.
|
| +
|
| +@group Polymer Core Elements
|
| +@element paper-toolbar
|
| +@homepage github.io
|
| +--><html><head><link rel="import" href="../polymer/polymer.html">
|
| +<link rel="import" href="../paper-styles/paper-styles.html">
|
| +
|
| +<style is="x-style">
|
| +
|
| + * {
|
| +
|
| + --paper-toolbar-background: var(--default-primary-color);
|
| + --paper-toolbar-color: var(--text-primary-color);
|
| + }
|
| +</style>
|
| +
|
| +</head><body><dom-module id="paper-toolbar">
|
| +
|
| + <style>
|
| + :host {
|
| + /* technical */
|
| + display: block;
|
| + position: relative;
|
| + box-sizing: border-box;
|
| + -moz-box-sizing: border-box;
|
| +
|
| + /* size */
|
| + height: 64px;
|
| +
|
| + background: var(--paper-toolbar-background);
|
| + color: var(--paper-toolbar-color);
|
| + mixin(--paper-font-title);
|
| +
|
| + mixin(--paper-toolbar);
|
| + }
|
| +
|
| + :host(.animate) {
|
| + /* transition */
|
| + transition: height 0.18s ease-in;
|
| + }
|
| +
|
| + :host(.medium-tall) {
|
| + height: 128px;
|
| + }
|
| +
|
| + :host(.tall) {
|
| + height: 192px;
|
| + }
|
| +
|
| + .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?
|
| + */
|
| +
|
| + @media (max-width: 639px) {
|
| + :host {
|
| + height: 56px;
|
| + }
|
| +
|
| + :host(.medium-tall) {
|
| + height: 112px;
|
| + }
|
| +
|
| + :host(.tall) {
|
| + height: 168px;
|
| + }
|
| +
|
| + .toolbar-tools {
|
| + height: 56px;
|
| + padding: 0;
|
| + }
|
| + }
|
| +
|
| + /* 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;
|
| + }
|
| +
|
| + </style>
|
| +
|
| + <template>
|
| +
|
| + <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">
|
| + <content select=".bottom"></content>
|
| + </div>
|
| +
|
| + <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">
|
| + <content select=".middle"></content>
|
| + </div>
|
| +
|
| + <div id="topBar" class$="[[_computeBarClassName(justify)]]">
|
| + <content></content>
|
| + </div>
|
| +
|
| + </template>
|
| +
|
| +</dom-module>
|
| +
|
| +<script src="paper-toolbar-extracted.js"></script></body></html>
|
|
|
Chromium Code Reviews
Issue 1140583003:
Material PDF: Add required Polymer 0.8 elements. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master