Home | History | Annotate | Download | only in core-toolbar 
      1 /*
      2 Copyright (c) 2014 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 */
      9 
     10 :host {
     11   /* technical */
     12   display: block;
     13   position: relative;
     14   box-sizing: border-box;
     15   -moz-box-sizing: border-box;
     16   /* size */
     17   height: 64px;
     18   /* typography */
     19   font-size: 1.3em;
     20   /* background */
     21   background-color: #CFD8DC;
     22 }
     23 
     24 :host(.animate) {
     25   /* transition */
     26   transition: height 0.18s ease-in;
     27 }
     28 
     29 :host(.medium-tall) {
     30   height: 128px;
     31 }
     32 
     33 :host(.tall) {
     34   height: 192px;
     35 }
     36 
     37 .toolbar-tools {
     38   position: relative;
     39   height: 64px;
     40   padding: 0 8px;
     41   pointer-events: none;
     42 }
     43 
     44 /* narrow layout */
     45 :host(.narrow) {
     46   height: 56px;
     47 }
     48 
     49 :host(.narrow.medium-tall) {
     50   height: 112px;
     51 }
     52 
     53 :host(.narrow.tall) {
     54   height: 168px;
     55 }
     56 
     57 :host(.narrow) .toolbar-tools {
     58   height: 56px;
     59   padding: 0;
     60 }
     61 
     62 /* middle bar */
     63 #middleBar {
     64   position: absolute;
     65   top: 0;
     66   right: 0;
     67   left: 0;
     68 }
     69 
     70 :host(.tall, .medium-tall) #middleBar {
     71   -webkit-transform: translateY(100%);
     72   transform: translateY(100%);
     73 }
     74 
     75 /* bottom bar */
     76 #bottomBar {
     77   position: absolute;
     78   right: 0;
     79   bottom: 0;
     80   left: 0;
     81 }
     82 
     83 /* make elements (e.g. buttons) respond to mouse/touch events */
     84 polyfill-next-selector { content: '.toolbar-tools > *'; }
     85 ::content > * {
     86   pointer-events: auto;
     87 }
     88 
     89 /* elements spacing */
     90 polyfill-next-selector { content: '.toolbar-tools > *'; }
     91 ::content > * {
     92   margin: 0px 8px;
     93 }
     94 
     95 /* misc helpers */
     96 polyfill-next-selector { content: '.toolbar-tools > .fit'; }
     97 ::content > .fit {
     98   position: absolute;
     99   top: auto;
    100   right: 0;
    101   bottom: 0;
    102   left: 0;
    103   width: auto;
    104   margin: 0;
    105 }
    106 
    107 polyfill-next-selector { content: ':host .indent'; }
    108 ::content > .indent {
    109   margin-left: 60px;
    110 }
    111