third_party/polymer/v1_0/components-chromium/paper-drawer-panel/paper-drawer-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.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   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.txt
   9 */
  10
  11 :host {
  12   display: block;
  13   position: absolute;
  14   top: 0;
  15   left: 0;
  16   width: 100%;
  17   height: 100%;
  18   overflow: hidden;
  19 }
  20
  21 iron-selector > #drawer {
  22   position: absolute;
  23   top: 0;
  24   left: 0;
  25   height: 100%;
  26   background-color: white;
  27
  28   -moz-box-sizing: border-box;
  29   box-sizing: border-box;
  30
  31   @apply(--paper-drawer-panel-drawer-container);
  32 }
  33
  34 .transition > #drawer {
  35   transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
  36   transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
  37 }
  38
  39 .left-drawer > #drawer {
  40   @apply(--paper-drawer-panel-left-drawer-container);
  41 }
  42
  43 .right-drawer > #drawer {
  44   left: auto;
  45   right: 0;
  46
  47   @apply(--paper-drawer-panel-right-drawer-container);
  48 }
  49
  50 iron-selector > #main {
  51   position: absolute;
  52   top: 0;
  53   right: 0;
  54   bottom: 0;
  55
  56   @apply(--paper-drawer-panel-main-container);
  57 }
  58
  59 .transition > #main {
  60   transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
  61 }
  62
  63 .right-drawer > #main {
  64   left: 0;
  65 }
  66
  67 .right-drawer.transition > #main {
  68   transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;
  69 }
  70
  71 #main > ::content > [main] {
  72   height: 100%;
  73 }
  74
  75 #drawer > ::content > [drawer] {
  76   height: 100%;
  77 }
  78
  79 #scrim {
  80   position: absolute;
  81   top: 0;
  82   right: 0;
  83   bottom: 0;
  84   left: 0;
  85   visibility: hidden;
  86   opacity: 0;
  87   transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
  88   background-color: rgba(0, 0, 0, 0.3);
  89 }
  90
  91 .narrow-layout > #drawer {
  92   will-change: transform;
  93 }
  94
  95 .narrow-layout > #drawer.iron-selected {
  96   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
  97 }
  98
  99 .right-drawer.narrow-layout > #drawer.iron-selected {
 100   box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
 101 }
 102
 103 .narrow-layout > #drawer > ::content > [drawer] {
 104   border: 0;
 105 }
 106
 107 .left-drawer.narrow-layout > #drawer:not(.iron-selected) {
 108   -webkit-transform: translateX(-100%);
 109   transform: translateX(-100%);
 110 }
 111
 112 .right-drawer.narrow-layout > #drawer:not(.iron-selected) {
 113   left: auto;
 114   visibility: hidden;
 115
 116   -webkit-transform: translateX(100%);
 117   transform: translateX(100%);
 118 }
 119
 120 .right-drawer.narrow-layout.dragging > #drawer:not(.iron-selected),
 121 .right-drawer.narrow-layout.peeking > #drawer:not(.iron-selected) {
 122   visibility: visible;
 123 }
 124
 125 .narrow-layout > #main {
 126   padding: 0;
 127 }
 128
 129 .right-drawer.narrow-layout > #main {
 130   left: 0;
 131   right: 0;
 132 }
 133
 134 .narrow-layout > #main:not(.iron-selected) > #scrim,
 135 .dragging > #main > #scrim {
 136   visibility: visible;
 137   opacity: var(--paper-drawer-panel-scrim-opacity, 1);
 138 }
 139
 140 .narrow-layout > #main > * {
 141   margin: 0;
 142   min-height: 100%;
 143   left: 0;
 144   right: 0;
 145
 146   -moz-box-sizing: border-box;
 147   box-sizing: border-box;
 148 }
 149
 150 iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
 151   display: none;
 152 }