third_party/polymer/v1_0/components-chromium/paper-toolbar/paper-toolbar.html

   1 <!--
   2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 --><html><head><link rel="import" href="../polymer/polymer.html">
   9 <link rel="import" href="../paper-styles/paper-styles.html">
  10
  11 <!--
  12 `paper-toolbar` is a horizontal bar containing items that can be used for
  13 label, navigation, search and actions.  The items place inside the
  14 `paper-toolbar` are projected into a `class="horizontal center layout"` container inside of
  15 `paper-toolbar`'s Shadow DOM.  You can use flex attributes to control the items'
  16 sizing.
  17
  18 Example:
  19
  20     <paper-toolbar>
  21       <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
  22       <div class="title">Title</div>
  23       <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
  24     </paper-toolbar>
  25
  26 `paper-toolbar` has a standard height, but can made be taller by setting `tall`
  27 class on the `paper-toolbar`.  This will make the toolbar 3x the normal height.
  28
  29     <paper-toolbar class="tall">
  30       <paper-icon-button icon="menu"></paper-icon-button>
  31     </paper-toolbar>
  32
  33 Apply `medium-tall` class to make the toolbar medium tall.  This will make the
  34 toolbar 2x the normal height.
  35
  36     <paper-toolbar class="medium-tall">
  37       <paper-icon-button icon="menu"></paper-icon-button>
  38     </paper-toolbar>
  39
  40 When `tall`, items can pin to either the top (default), middle or bottom.  Use
  41 `middle` class for middle content and `bottom` class for bottom content.
  42
  43     <paper-toolbar class="tall">
  44       <paper-icon-button icon="menu"></paper-icon-button>
  45       <div class="middle title">Middle Title</div>
  46       <div class="bottom title">Bottom Title</div>
  47     </paper-toolbar>
  48
  49 For `medium-tall` toolbar, the middle and bottom contents overlap and are
  50 pinned to the bottom.  But `middleJustify` and `bottomJustify` attributes are
  51 still honored separately.
  52
  53 To make an element completely fit at the bottom of the toolbar, use `fit` along
  54 with `bottom`.
  55
  56     <paper-toolbar class="tall">
  57       <div id="progressBar" class="bottom fit"></div>
  58     </paper-toolbar>
  59
  60 ### Styling
  61
  62 The following custom properties and mixins are available for styling:
  63
  64 Custom property | Description | Default
  65 ----------------|-------------|----------
  66 `--paper-toolbar-background` | Toolbar background color     | `--default-primary-color`
  67 `--paper-toolbar-color`      | Toolbar foreground color     | `--text-primary-color`
  68 `--paper-toolbar`            | Mixin applied to the toolbar | `{}`
  69
  70 ### Accessibility
  71
  72 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `title` will
  73 be used as the label of the toolbar via `aria-labelledby`.
  74
  75 @demo demo/index.html
  76 -->
  77
  78 </head><body><dom-module id="paper-toolbar">
  79
  80   <style>
  81     :host {
  82       /* technical */
  83       display: block;
  84       position: relative;
  85       box-sizing: border-box;
  86       -moz-box-sizing: border-box;
  87
  88       /* size */
  89       height: 64px;
  90
  91       background: var(--paper-toolbar-background, --default-primary-color);
  92       color: var(--paper-toolbar-color, --text-primary-color);
  93
  94       @apply(--paper-toolbar);
  95     }
  96
  97     :host(.animate) {
  98       /* transition */
  99       transition: height 0.18s ease-in;
 100     }
 101
 102     :host(.medium-tall) {
 103       height: 128px;
 104     }
 105
 106     :host(.tall) {
 107       height: 192px;
 108     }
 109
 110     .toolbar-tools {
 111       position: relative;
 112       height: 64px;
 113       padding: 0 16px;
 114       pointer-events: none;
 115     }
 116
 117     /*
 118      * TODO: Where should media query breakpoints live so they can be shared between elements?
 119      */
 120
 121     @media (max-width: 639px) {
 122       :host {
 123         height: 56px;
 124       }
 125
 126       :host(.medium-tall) {
 127         height: 112px;
 128       }
 129
 130       :host(.tall) {
 131         height: 168px;
 132       }
 133
 134       .toolbar-tools {
 135         height: 56px;
 136       }
 137     }
 138
 139     #topBar {
 140       position: relative;
 141     }
 142
 143     /* middle bar */
 144     #middleBar {
 145       position: absolute;
 146       top: 0;
 147       right: 0;
 148       left: 0;
 149     }
 150
 151     :host(.tall) #middleBar,
 152     :host(.medium-tall) #middleBar {
 153       -webkit-transform: translateY(100%);
 154       transform: translateY(100%);
 155     }
 156
 157     /* bottom bar */
 158     #bottomBar {
 159       position: absolute;
 160       right: 0;
 161       bottom: 0;
 162       left: 0;
 163     }
 164
 165     /*
 166      * make elements (e.g. buttons) respond to mouse/touch events
 167      *
 168      * `.toolbar-tools` disables touch events so multiple toolbars can stack and not
 169      * absorb events. All children must have pointer events re-enabled to work as
 170      * expected.
 171      */
 172     .toolbar-tools > ::content > *:not([disabled]) {
 173       pointer-events: auto;
 174     }
 175
 176     .toolbar-tools > ::content .title {
 177       @apply(--paper-font-title);
 178       @apply(--layout-flex);
 179
 180       pointer-events: none;
 181       text-overflow: ellipsis;
 182       white-space: nowrap;
 183       overflow: hidden;
 184
 185       /*
 186        * Polymer/polymer/issues/1525
 187        * --paper-font-title defines a `font-weight`
 188        * let's override its value, but we need `important!`
 189        * because all mixins are resolved in rule's selector that has higher precedence
 190        * than the current selector.
 191        */
 192       font-weight: 400 !important;
 193     }
 194
 195     /**
 196      * TODO: Refactor these selectors
 197      * Work in progress.
 198      */
 199     .toolbar-tools > ::content paper-icon-button[icon=menu] {
 200       margin-right: 24px;
 201     }
 202
 203     .toolbar-tools > ::content > .title,
 204     .toolbar-tools > ::content[select=".middle"] > .title,
 205     .toolbar-tools > ::content[select=".bottom"] > .title {
 206       margin-left: 56px;
 207     }
 208
 209     .toolbar-tools > ::content > paper-icon-button + .title,
 210     .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title,
 211     .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title {
 212       margin-left: 0;
 213     }
 214
 215     .toolbar-tools > ::content > .fit {
 216       position: absolute;
 217       top: auto;
 218       right: 0;
 219       bottom: 0;
 220       left: 0;
 221       width: auto;
 222       margin: 0;
 223     }
 224
 225   </style>
 226
 227   <template>
 228
 229     <div id="topBar" class$="[[_computeBarClassName(justify)]]">
 230       <content select=":not(.middle):not(.bottom)"></content>
 231     </div>
 232
 233     <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">
 234       <content select=".middle"></content>
 235     </div>
 236
 237     <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">
 238       <content select=".bottom"></content>
 239     </div>
 240
 241   </template>
 242
 243 </dom-module>
 244
 245 <script src="paper-toolbar-extracted.js"></script></body></html>