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 #drawer {
  21   position: absolute;
  22   top: 0;
  23   left: 0;
  24   height: 100%;
  25   box-sizing: border-box;
  26   -mox-box-sizing: border-box;
  27 }
  28
  29 .transition #drawer {
  30   transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;
  31   transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
  32 }
  33
  34 /*
  35 right-drawer: make drawer on the right side
  36 */
  37 .right-drawer #drawer {
  38   left: auto;
  39   right: 0;
  40 }
  41
  42 .right-drawer.transition #drawer {
  43   transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;
  44   transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
  45 }
  46
  47 polyfill-next-selector { content: ':host [drawer]'; }
  48 ::content[select="[drawer]"] > * {
  49   position: absolute;
  50   top: 0;
  51   left: 0;
  52   width: 100%;
  53   height: 100%;
  54   box-sizing: border-box;
  55   -moz-box-sizing: border-box;
  56 }
  57
  58 #main {
  59   position: absolute;
  60   top: 0;
  61   right: 0;
  62   bottom: 0;
  63 }
  64
  65 .transition #main {
  66   transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
  67 }
  68
  69 .right-drawer #main {
  70   left: 0;
  71 }
  72
  73 .right-drawer.transition #main {
  74   transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;
  75 }
  76
  77 polyfill-next-selector { content: '#main > [main]'; }
  78 ::content[select="[main]"] > * {
  79   height: 100%;
  80 }
  81
  82 #scrim {
  83   position: absolute;
  84   top: 0;
  85   right: 0;
  86   bottom: 0;
  87   left: 0;
  88   background-color: rgba(0, 0, 0, 0.3);
  89   visibility: hidden;
  90   opacity: 0;
  91   transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
  92 }
  93
  94 /*
  95 narrow layout
  96 */
  97 .narrow-layout > #drawer.core-selected {
  98   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
  99 }
 100
 101 .right-drawer.narrow-layout > #drawer.core-selected {
 102   box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
 103 }
 104
 105 polyfill-next-selector { content: ':host .narrow-layout > #drawer > [drawer]'; }
 106 .narrow-layout > #drawer > ::content[select="[drawer]"] > * {
 107   border: 0;
 108 }
 109
 110 .narrow-layout > #drawer:not(.core-selected) {
 111   -webkit-transform: translate3d(-100%, 0, 0);
 112   transform: translate3d(-100%, 0, 0);
 113 }
 114
 115 .right-drawer.narrow-layout > #drawer:not(.core-selected) {
 116   left: auto;
 117   -webkit-transform: translate3d(100%, 0, 0);
 118   transform: translate3d(100%, 0, 0);
 119 }
 120
 121 .narrow-layout > #main {
 122   left: 0 !important;
 123   padding: 0;
 124 }
 125
 126 .right-drawer.narrow-layout > #main {
 127   left: 0;
 128   right: 0;
 129   padding: 0;
 130 }
 131
 132 .narrow-layout > #main:not(.core-selected) #scrim,
 133 .dragging #scrim {
 134   visibility: visible;
 135   opacity: 1;
 136 }
 137
 138 polyfill-next-selector { content: ':host .narrow-layout > #main > [main]'; }
 139 .narrow-layout > #main > ::content[select="[main]"] > * {
 140   margin: 0;
 141   min-height: 100%;
 142   left: 0;
 143   right: 0;
 144   box-sizing: border-box;
 145   -moz-box-sizing: border-box;
 146 }