core-toolbar.css revision 1320f92c476a1ad9d19dba2a48c72b75566198e9 
1/*
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject 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 */
84polyfill-next-selector { content: '.toolbar-tools > *'; }
85::content > * {
86  pointer-events: auto;
87}
88
89/* elements spacing */
90polyfill-next-selector { content: '.toolbar-tools > *'; }
91::content > * {
92  margin: 0px 8px;
93}
94
95/* misc helpers */
96polyfill-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
107polyfill-next-selector { content: ':host .indent'; }
108::content > .indent {
109  margin-left: 60px;
110}
111