paper-header-panel.css

/**
@license
Copyright (c) 2015 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
*/

:host {
  --paper-header-panel-shadow: {
    height: 6px;
    bottom: -6px;
    box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
  };

  @apply(--layout-vertical);

  position: relative;
  height: 100%;
}

#mainContainer {
  @apply(--layout-flex);

  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

#mainPanel {
  @apply(--layout-vertical);
  @apply(--layout-flex);

  position: relative;
}

/*
 * mode: scroll
 */
:host([mode=scroll]) #mainContainer {
  @apply(--paper-header-panel-scroll-container);

  overflow: visible;
}

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

/*
 * mode: cover
 */
:host([mode=cover]) #mainContainer {
  @apply(--paper-header-panel-cover-container);

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

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

/*
 * mode: standard
 */
:host([mode=standard]) #mainContainer {
  @apply(--paper-header-panel-standard-container);
}

/*
 * mode: seamed
 */
:host([mode=seamed]) #mainContainer {
  @apply(--paper-header-panel-seamed-container);
}


/*
 * mode: waterfall
 */
:host([mode=waterfall]) #mainContainer {
  @apply(--paper-header-panel-waterfall-container);
}

/*
 * mode: waterfall-tall
 */
:host([mode=waterfall-tall]) #mainContainer {
  @apply(--paper-header-panel-waterfall-tall-container);
}

#dropShadow {
  @apply(--paper-header-panel-shadow);

  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;

  -webkit-transform: scale3d(1, 0, 1);
  transform: scale3d(1, 0, 1);

  -webkit-transform-origin: left top;
  transform-origin: left top;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  opacity: 0;
}

#dropShadow.has-shadow {
  opacity: 1;

  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}