1/* 2Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 6Code distributed by Google as part of the polymer project is also 7subject 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/* 35right-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 47polyfill-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 77polyfill-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/* 95narrow 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 105polyfill-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 138polyfill-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} 147