| 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 |