Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(737)

Side by Side Diff: polymer_1.0.4/bower_components/paper-drawer-panel/paper-drawer-panel.css

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Renamed folder to 1.0.4 Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 /* 1 /**
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 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/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also 7 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/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9
8 */ 10 */
9
10 :host { 11 :host {
11 display: block; 12 display: block;
12 position: absolute; 13 position: absolute;
13 top: 0; 14 top: 0;
14 left: 0; 15 left: 0;
15 width: 100%; 16 width: 100%;
16 height: 100%; 17 height: 100%;
17 overflow: hidden; 18 overflow: hidden;
18 } 19 }
19 20
20 core-selector > #drawer { 21 iron-selector > #drawer {
21 position: absolute; 22 position: absolute;
22 top: 0; 23 top: 0;
23 left: 0; 24 left: 0;
24 height: 100%; 25 height: 100%;
26 background-color: white;
25 will-change: transform; 27 will-change: transform;
26 box-sizing: border-box; 28 box-sizing: border-box;
27 -mox-box-sizing: border-box; 29 -moz-box-sizing: border-box;
30
31 @apply(--paper-drawer-panel-drawer-container);
28 } 32 }
29 33
30 .transition > #drawer { 34 .transition > #drawer {
31 transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s; 35 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; 36 transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
33 } 37 }
34 38
35 /* 39 .left-drawer > #drawer {
36 right-drawer: make drawer on the right side 40 @apply(--paper-drawer-panel-left-drawer-container);
37 */ 41 }
42
38 .right-drawer > #drawer { 43 .right-drawer > #drawer {
39 left: auto; 44 left: auto;
40 right: 0; 45 right: 0;
46
47 @apply(--paper-drawer-panel-right-drawer-container);
41 } 48 }
42 49
43 .right-drawer.transition > #drawer { 50 iron-selector > #main {
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; 51 position: absolute;
61 top: 0; 52 top: 0;
62 right: 0; 53 right: 0;
63 bottom: 0; 54 bottom: 0;
55
56 @apply(--paper-drawer-panel-main-container);
64 } 57 }
65 58
66 .transition > #main { 59 .transition > #main {
67 transition: left ease-in-out 0.3s, padding ease-in-out 0.3s; 60 transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
68 } 61 }
69 62
70 .right-drawer > #main { 63 .right-drawer > #main {
71 left: 0; 64 left: 0;
72 } 65 }
73 66
74 .right-drawer.transition > #main { 67 .right-drawer.transition > #main {
75 transition: right ease-in-out 0.3s, padding ease-in-out 0.3s; 68 transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;
76 } 69 }
77 70
78 polyfill-next-selector { content: '#main > [main]'; } 71 #main > ::content > [main] {
79 ::content[select="[main]"] > * {
80 height: 100%; 72 height: 100%;
81 } 73 }
82 74
75 #drawer > ::content > [drawer] {
76 height: 100%;
77 }
78
83 #scrim { 79 #scrim {
84 position: absolute; 80 position: absolute;
85 top: 0; 81 top: 0;
86 right: 0; 82 right: 0;
87 bottom: 0; 83 bottom: 0;
88 left: 0; 84 left: 0;
89 background-color: rgba(0, 0, 0, 0.3);
90 visibility: hidden; 85 visibility: hidden;
91 opacity: 0; 86 opacity: 0;
92 transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s; 87 transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
88 background-color: rgba(0, 0, 0, 0.3);
93 } 89 }
94 90
95 /* 91 .narrow-layout > #drawer.iron-selected {
96 narrow layout
97 */
98 .narrow-layout > #drawer.core-selected {
99 box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); 92 box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
100 } 93 }
101 94
102 .right-drawer.narrow-layout > #drawer.core-selected { 95 .right-drawer.narrow-layout > #drawer.iron-selected {
103 box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15); 96 box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
104 } 97 }
105 98
106 polyfill-next-selector { content: ':host .narrow-layout > #drawer > [drawer]'; } 99 .narrow-layout > #drawer > ::content > [drawer] {
107 .narrow-layout > #drawer > ::content[select="[drawer]"] > * {
108 border: 0; 100 border: 0;
109 } 101 }
110 102
111 .narrow-layout > #drawer:not(.core-selected) { 103 .left-drawer.narrow-layout > #drawer:not(.iron-selected) {
112 -webkit-transform: translateX(-100%); 104 -webkit-transform: translateX(-100%);
113 transform: translateX(-100%); 105 transform: translateX(-100%);
114 } 106 }
115 107
116 .right-drawer.narrow-layout > #drawer:not(.core-selected) { 108 .right-drawer.narrow-layout > #drawer:not(.iron-selected) {
117 left: auto; 109 left: auto;
118 -webkit-transform: translateX(100%); 110 -webkit-transform: translateX(100%);
119 transform: translateX(100%); 111 transform: translateX(100%);
120 } 112 }
121 113
122 .narrow-layout > #main { 114 .narrow-layout > #main {
123 left: 0 !important; 115 left: 0 !important;
124 padding: 0; 116 padding: 0;
125 } 117 }
126 118
127 .right-drawer.narrow-layout > #main { 119 .right-drawer.narrow-layout > #main {
128 left: 0; 120 left: 0;
129 right: 0; 121 right: 0;
130 padding: 0; 122 padding: 0;
131 } 123 }
132 124
133 .narrow-layout > #main:not(.core-selected) > #scrim, 125 .narrow-layout > #main:not(.iron-selected) > #scrim,
134 .dragging #scrim { 126 .dragging > #main > #scrim {
135 visibility: visible; 127 visibility: visible;
136 opacity: 1; 128 opacity: var(--paper-drawer-panel-scrim-opacity, 1);
137 } 129 }
138 130
139 polyfill-next-selector { content: ':host .narrow-layout > #main > [main]'; } 131 .narrow-layout > #main > * {
140 .narrow-layout > #main > ::content[select="[main]"] > * {
141 margin: 0; 132 margin: 0;
142 min-height: 100%; 133 min-height: 100%;
143 left: 0; 134 left: 0;
144 right: 0; 135 right: 0;
145 box-sizing: border-box; 136 box-sizing: border-box;
146 -moz-box-sizing: border-box; 137 -moz-box-sizing: border-box;
147 } 138 }
139
140 iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
141 display: none;
142 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698