awips2/components/core-toolbar/core-toolbar.css

/*
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/

:host {
  /* technical */
  display: block;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* size */
  height: 64px;
  /* typography */
  font-size: 1.3em;
  /* background */
  background-color: #CFD8DC;
}

:host(.animate) {
  /* transition */
  transition: height 0.18s ease-in;
}

:host(.medium-tall) {
  height: 128px;
}

:host(.tall) {
  height: 192px;
}

.toolbar-tools {
  position: relative;
  height: 64px;
  padding: 0 8px;
  pointer-events: none;
}

/* narrow layout */
:host(.core-narrow),
:host-context(.core-narrow) {
  height: 56px;
}

polyfill-next-selector { content: ':host.core-narrow.medium-tall, .core-narrow :host.medium-tall'; }
:host(.core-narrow.medium-tall),
:host-context(.core-narrow):host(.medium-tall) {
  height: 112px;
}

polyfill-next-selector { content: ':host.core-narrow.tall, .core-narrow :host.tall'; }
:host(.core-narrow.tall),
:host-context(.core-narrow):host(.tall) {
  height: 168px;
}

polyfill-next-selector { content: ':host.core-narrow .toolbar-tools, .core-narrow :host .toolbar-tools'; }
:host(.core-narrow) .toolbar-tools,
:host-context(.core-narrow) .toolbar-tools {
  height: 56px;
  padding: 0;
}

/* middle bar */
#middleBar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

:host(.tall, .medium-tall) #middleBar {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

/* bottom bar */
#bottomBar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

/* make elements (e.g. buttons) respond to mouse/touch events */
polyfill-next-selector { content: '.toolbar-tools > *:not([disabled])'; }
::content > *:not([disabled]) {
  pointer-events: auto;
}

/* elements spacing */
polyfill-next-selector { content: '.toolbar-tools > *'; }
::content > * {
  margin: 0 8px;
}

/* misc helpers */
polyfill-next-selector { content: '.toolbar-tools > .fit'; }
::content > .fit {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  margin: 0;
}

polyfill-next-selector { content: ':host .indent'; }
::content > .indent {
  margin-left: 60px;
}