third_party/polymer/components/core-toolbar/core-toolbar.css

   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 }