third_party/polymer/components-chromium/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(.core-narrow),
  46 :host-context(.core-narrow) {
  47   height: 56px;
  48 }
  49
  50 polyfill-next-selector { content: ':host.core-narrow.medium-tall, .core-narrow :host.medium-tall'; }
  51 :host(.core-narrow.medium-tall),
  52 :host-context(.core-narrow):host(.medium-tall) {
  53   height: 112px;
  54 }
  55
  56 polyfill-next-selector { content: ':host.core-narrow.tall, .core-narrow :host.tall'; }
  57 :host(.core-narrow.tall),
  58 :host-context(.core-narrow):host(.tall) {
  59   height: 168px;
  60 }
  61
  62 polyfill-next-selector { content: ':host.core-narrow .toolbar-tools, .core-narrow :host .toolbar-tools'; }
  63 :host(.core-narrow) .toolbar-tools,
  64 :host-context(.core-narrow) .toolbar-tools {
  65   height: 56px;
  66   padding: 0;
  67 }
  68
  69 /* middle bar */
  70 #middleBar {
  71   position: absolute;
  72   top: 0;
  73   right: 0;
  74   left: 0;
  75 }
  76
  77 :host(.tall, .medium-tall) #middleBar {
  78   -webkit-transform: translateY(100%);
  79   transform: translateY(100%);
  80 }
  81
  82 /* bottom bar */
  83 #bottomBar {
  84   position: absolute;
  85   right: 0;
  86   bottom: 0;
  87   left: 0;
  88 }
  89
  90 /* make elements (e.g. buttons) respond to mouse/touch events */
  91 polyfill-next-selector { content: '.toolbar-tools > *:not([disabled])'; }
  92 ::content > *:not([disabled]) {
  93   pointer-events: auto;
  94 }
  95
  96 /* elements spacing */
  97 polyfill-next-selector { content: '.toolbar-tools > *'; }
  98 ::content > * {
  99   margin: 0 8px;
 100 }
 101
 102 /* misc helpers */
 103 polyfill-next-selector { content: '.toolbar-tools > .fit'; }
 104 ::content > .fit {
 105   position: absolute;
 106   top: auto;
 107   right: 0;
 108   bottom: 0;
 109   left: 0;
 110   width: auto;
 111   margin: 0;
 112 }
 113
 114 polyfill-next-selector { content: ':host .indent'; }
 115 ::content > .indent {
 116   margin-left: 60px;
 117 }