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