third_party/polymer/v1_0/components-chromium/paper-header-panel/paper-header-panel.css

   1 /**
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
   9 */
  10
  11 :host {
  12   --paper-header-panel-shadow: {
  13     height: 6px;
  14     bottom: -6px;
  15     box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
  16   };
  17
  18   @apply(--layout-vertical);
  19
  20   position: relative;
  21   height: 100%;
  22 }
  23
  24 #mainContainer {
  25   @apply(--layout-flex);
  26
  27   position: relative;
  28   overflow-y: auto;
  29   overflow-x: hidden;
  30   -webkit-overflow-scrolling: touch;
  31 }
  32
  33 #mainPanel {
  34   @apply(--layout-vertical);
  35   @apply(--layout-flex);
  36
  37   position: relative;
  38 }
  39
  40 /*
  41  * mode: scroll
  42  */
  43 :host([mode=scroll]) #mainContainer {
  44   @apply(--paper-header-panel-scroll-container);
  45
  46   overflow: visible;
  47 }
  48
  49 :host([mode=scroll]) {
  50   overflow-y: auto;
  51   overflow-x: hidden;
  52   -webkit-overflow-scrolling: touch;
  53 }
  54
  55 /*
  56  * mode: cover
  57  */
  58 :host([mode=cover]) #mainContainer {
  59   @apply(--paper-header-panel-cover-container);
  60
  61   position: absolute;
  62   top: 0;
  63   right: 0;
  64   bottom: 0;
  65   left: 0;
  66 }
  67
  68 :host([mode=cover]) #mainPanel {
  69   position: static;
  70 }
  71
  72 /*
  73  * mode: standard
  74  */
  75 :host([mode=standard]) #mainContainer {
  76   @apply(--paper-header-panel-standard-container);
  77 }
  78
  79 /*
  80  * mode: seamed
  81  */
  82 :host([mode=seamed]) #mainContainer {
  83   @apply(--paper-header-panel-seamed-container);
  84 }
  85
  86
  87 /*
  88  * mode: waterfall
  89  */
  90 :host([mode=waterfall]) #mainContainer {
  91   @apply(--paper-header-panel-waterfall-container);
  92 }
  93
  94 /*
  95  * mode: waterfall-tall
  96  */
  97 :host([mode=waterfall-tall]) #mainContainer {
  98   @apply(--paper-header-panel-waterfall-tall-container);
  99 }
 100
 101 #dropShadow {
 102   @apply(--paper-header-panel-shadow);
 103
 104   position: absolute;
 105   top: 0;
 106   left: 0;
 107   right: 0;
 108   height: 6px;
 109   pointer-events: none;
 110
 111   -webkit-transition: opacity 0.5s;
 112   transition: opacity 0.5s;
 113
 114   opacity: 0;
 115 }
 116
 117 #dropShadow.has-shadow {
 118   opacity: 1;
 119 }