OLD | NEW |
1 /* | 1 /* |
2 * Copyright 2015 The Chromium Authors. All rights reserved. | 2 * Copyright 2015 The Chromium Authors. All rights reserved. |
3 * Use of this source code is governed by a BSD-style license that can be | 3 * Use of this source code is governed by a BSD-style license that can be |
4 * found in the LICENSE file. | 4 * found in the LICENSE file. |
5 */ | 5 */ |
6 | 6 |
7 :host { | 7 :host { |
8 overflow: hidden; | 8 overflow: hidden; |
9 align-items: stretch; | 9 align-items: stretch; |
10 flex: auto; | 10 flex: auto; |
(...skipping 21 matching lines...) Expand all Loading... |
32 min-width: 93px; | 32 min-width: 93px; |
33 } | 33 } |
34 | 34 |
35 .device-mode-toolbar-right { | 35 .device-mode-toolbar-right { |
36 flex: 0 1000 115px; | 36 flex: 0 1000 115px; |
37 min-width: 40px; | 37 min-width: 40px; |
38 display: flex; | 38 display: flex; |
39 } | 39 } |
40 | 40 |
41 .device-mode-toolbar-middle-container { | 41 .device-mode-toolbar-middle-container { |
42 flex: 1 1 120px; | 42 flex: 1 1 160px; |
43 position: relative; | 43 position: relative; |
44 } | 44 } |
45 | 45 |
46 .device-mode-toolbar-middle { | 46 .device-mode-toolbar-middle { |
47 display: flex; | 47 display: flex; |
48 justify-content: flex-start; | 48 justify-content: flex-start; |
49 overflow: hidden; | 49 overflow: hidden; |
50 } | 50 } |
51 | 51 |
52 .device-mode-toolbar-middle .toolbar { | 52 .device-mode-toolbar-middle .toolbar { |
(...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
147 .device-mode-page-area { | 147 .device-mode-page-area { |
148 position: absolute; | 148 position: absolute; |
149 left: 0; | 149 left: 0; |
150 right: 0; | 150 right: 0; |
151 width: 0; | 151 width: 0; |
152 height: 0; | 152 height: 0; |
153 display: flex; | 153 display: flex; |
154 background-color: #fcfcfc; | 154 background-color: #fcfcfc; |
155 } | 155 } |
156 | 156 |
157 .device-mode-blueprint-container { | |
158 display: flex; | |
159 justify-content: center; | |
160 pointer-events: none; | |
161 } | |
162 | |
163 .device-mode-blueprint { | |
164 flex-direction: column; | |
165 justify-content: flex-end; | |
166 flex: none; | |
167 position: relative; | |
168 pointer-events: auto; | |
169 } | |
170 | |
171 .device-mode-blueprint-border { | |
172 position: absolute; | |
173 left: 0; | |
174 right: 0; | |
175 top: 0; | |
176 bottom: 0; | |
177 display: flex; | |
178 align-items: flex-end; | |
179 justify-content: flex-end; | |
180 color: #aaa; | |
181 border: 1px solid #dcdcdc; | |
182 margin-top: -1px; | |
183 } | |
184 | |
185 .device-mode-blueprint-border:hover { | |
186 border-color: #aaa; | |
187 } | |
188 | |
189 .device-mode-blueprint-border > span { | |
190 transition: opacity 150ms; | |
191 opacity: 0; | |
192 padding: 3px; | |
193 } | |
194 | |
195 .device-mode-blueprint-border:hover > span { | |
196 opacity: 1; | |
197 } | |
198 | |
199 .device-mode-blueprint-inside { | |
200 position: absolute; | |
201 left: 20px; | |
202 right: 20px; | |
203 top: 20px; | |
204 bottom: 20px; | |
205 } | |
206 | |
207 .device-mode-ruler { | 157 .device-mode-ruler { |
208 pointer-events: none; | 158 pointer-events: none; |
209 position: relative; | 159 position: relative; |
210 } | 160 } |
211 | 161 |
212 .device-mode-ruler-top { | 162 .device-mode-ruler-top { |
213 flex: 0 0 20px; | 163 flex: 0 0 20px; |
214 } | 164 } |
215 | 165 |
216 .device-mode-ruler-left { | 166 .device-mode-ruler-left { |
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
272 .device-mode-ruler-top .device-mode-ruler-text { | 222 .device-mode-ruler-top .device-mode-ruler-text { |
273 left: 2px; | 223 left: 2px; |
274 top: -2px; | 224 top: -2px; |
275 } | 225 } |
276 | 226 |
277 .device-mode-ruler-left .device-mode-ruler-text { | 227 .device-mode-ruler-left .device-mode-ruler-text { |
278 left: -4px; | 228 left: -4px; |
279 top: -15px; | 229 top: -15px; |
280 transform: rotate(270deg); | 230 transform: rotate(270deg); |
281 } | 231 } |
OLD | NEW |