five-bells-visualization/public/bower_components/core-header-panel/core-header-panel.css

Tool to visualize Five Bells payments

/*
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 {
  display: block;
  position: relative;
}

#outerContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#mainPanel {
  position: relative;
}

#mainContainer {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateZ(0);
  transform: translateZ(0); /* github.com/Polymer/core-header-panel/issues/27 */
}

#dropShadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
}

#dropShadow.hidden {
  display: none;
}

/* 
mode: scroll 
*/
:host([mode=scroll]) #mainContainer {
  overflow: visible;
}

:host([mode=scroll]) #outerContainer {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/*
mode: cover
*/
:host([mode=cover]) #mainPanel {
  position: static;
}

:host([mode=cover]) #mainContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

:host([mode=cover]) #dropShadow {
  position: static;
  width: 100%;
}