third_party/polymer/components/core-drawer-panel/core-drawer-panel.css

   1 /*
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 */
   9
  10 :host {
  11   display: block;
  12   position: absolute;
  13   top: 0;
  14   left: 0;
  15   width: 100%;
  16   height: 100%;
  17   overflow: hidden;
  18 }
  19
  20 core-selector > #drawer {
  21   position: absolute;
  22   top: 0;
  23   left: 0;
  24   height: 100%;
  25   will-change: transform;
  26   box-sizing: border-box;
  27   -moz-box-sizing: border-box;
  28 }
  29
  30 .transition > #drawer {
  31   transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;
  32   transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
  33 }
  34
  35 /*
  36 right-drawer: make drawer on the right side
  37 */
  38 .right-drawer > #drawer {
  39   left: auto;
  40   right: 0;
  41 }
  42
  43 .right-drawer.transition > #drawer {
  44   transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;
  45   transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
  46 }
  47
  48 polyfill-next-selector { content: ':host [drawer]'; }
  49 ::content[select="[drawer]"] > * {
  50   position: absolute;
  51   top: 0;
  52   left: 0;
  53   width: 100%;
  54   height: 100%;
  55   box-sizing: border-box;
  56   -moz-box-sizing: border-box;
  57 }
  58
  59 core-selector > #main {
  60   position: absolute;
  61   top: 0;
  62   right: 0;
  63   bottom: 0;
  64 }
  65
  66 .transition > #main {
  67   transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
  68 }
  69
  70 .right-drawer > #main {
  71   left: 0;
  72 }
  73
  74 .right-drawer.transition > #main {
  75   transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;
  76 }
  77
  78 polyfill-next-selector { content: '#main > [main]'; }
  79 ::content[select="[main]"] > * {
  80   height: 100%;
  81 }
  82
  83 #scrim {
  84   position: absolute;
  85   top: 0;
  86   right: 0;
  87   bottom: 0;
  88   left: 0;
  89   background-color: rgba(0, 0, 0, 0.3);
  90   visibility: hidden;
  91   opacity: 0;
  92   transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
  93 }
  94
  95 /*
  96 narrow layout
  97 */
  98 .narrow-layout > #drawer.core-selected {
  99   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
 100 }
 101
 102 .right-drawer.narrow-layout > #drawer.core-selected {
 103   box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
 104 }
 105
 106 polyfill-next-selector { content: ':host .narrow-layout > #drawer > [drawer]'; }
 107 .narrow-layout > #drawer > ::content[select="[drawer]"] > * {
 108   border: 0;
 109 }
 110
 111 .narrow-layout > #drawer:not(.core-selected) {
 112   -webkit-transform: translateX(-100%);
 113   transform: translateX(-100%);
 114 }
 115
 116 .right-drawer.narrow-layout > #drawer:not(.core-selected) {
 117   left: auto;
 118   -webkit-transform: translateX(100%);
 119   transform: translateX(100%);
 120 }
 121
 122 .narrow-layout > #main {
 123   left: 0 !important;
 124   padding: 0;
 125 }
 126
 127 .right-drawer.narrow-layout > #main {
 128   left: 0;
 129   right: 0;
 130   padding: 0;
 131 }
 132
 133 .narrow-layout > #main:not(.core-selected) > #scrim,
 134 .dragging #scrim {
 135   visibility: visible;
 136   opacity: 1;
 137 }
 138
 139 polyfill-next-selector { content: ':host .narrow-layout > #main > [main]'; }
 140 .narrow-layout > #main > ::content[select="[main]"] > * {
 141   margin: 0;
 142   min-height: 100%;
 143   left: 0;
 144   right: 0;
 145   box-sizing: border-box;
 146   -moz-box-sizing: border-box;
 147 }
 148
 149 polyfill-next-selector { content: 'core-selector:not(.narrow-layout) [core-drawer-toggle]'; }
 150 core-selector:not(.narrow-layout) ::content [core-drawer-toggle] {
 151   display: none;
 152 }