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   @apply(--layout-vertical);
  13
  14   position: relative;
  15   height: 100%;
  16 }
  17
  18 /**
  19  * Default paper header panel shadow
  20  */
  21 :root {
  22   --paper-header-panel-shadow: {
  23     height: 6px;
  24     bottom: -6px;
  25     box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
  26   };
  27 }
  28
  29 #mainContainer {
  30   @apply(--layout-flex);
  31
  32   position: relative;
  33   overflow-y: auto;
  34   overflow-x: hidden;
  35   -webkit-overflow-scrolling: touch;
  36 }
  37
  38 #mainPanel {
  39   @apply(--layout-vertical);
  40   @apply(--layout-flex);
  41
  42   position: relative;
  43 }
  44
  45 /*
  46  * mode: scroll
  47  */
  48 :host([mode=scroll]) #mainContainer {
  49   @apply(--paper-header-panel-scroll-container);
  50
  51   overflow: visible;
  52 }
  53
  54 :host([mode=scroll]) {
  55   overflow-y: auto;
  56   overflow-x: hidden;
  57   -webkit-overflow-scrolling: touch;
  58 }
  59
  60 /*
  61  * mode: cover
  62  */
  63 :host([mode=cover]) #mainContainer {
  64   @apply(--paper-header-panel-cover-container);
  65
  66   position: absolute;
  67   top: 0;
  68   right: 0;
  69   bottom: 0;
  70   left: 0;
  71 }
  72
  73 :host([mode=cover]) #mainPanel {
  74   position: static;
  75 }
  76
  77 /*
  78  * mode: standard
  79  */
  80 :host([mode=standard]) #mainContainer {
  81   @apply(--paper-header-panel-standard-container);
  82 }
  83
  84 /*
  85  * mode: seamed
  86  */
  87 :host([mode=seamed]) #mainContainer {
  88   @apply(--paper-header-panel-seamed-container);
  89 }
  90
  91
  92 /*
  93  * mode: waterfall
  94  */
  95 :host([mode=waterfall]) #mainContainer {
  96   @apply(--paper-header-panel-waterfall-container);
  97 }
  98
  99 /*
 100  * mode: waterfall-tall
 101  */
 102 :host([mode=waterfall-tall]) #mainContainer {
 103   @apply(--paper-header-panel-waterfall-tall-container);
 104 }
 105
 106 #dropShadow {
 107   @apply(--paper-header-panel-shadow);
 108
 109   -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
 110   transition: opacity 0.5s, transform 0.5s;
 111
 112   -webkit-transform: scale3d(1, 0, 1);
 113   transform: scale3d(1, 0, 1);
 114
 115   -webkit-transform-origin: left top;
 116   transform-origin: left top;
 117
 118   position: absolute;
 119   top: 0;
 120   left: 0;
 121   right: 0;
 122   height: 6px;
 123   opacity: 0;
 124 }
 125
 126 #dropShadow.has-shadow {
 127   opacity: 1;
 128
 129   -webkit-transform: scale3d(1, 1, 1);
 130   transform: scale3d(1, 1, 1);
 131 }