| OLD | NEW |
| 1 /* | 1 /* |
| 2 * Copyright 2017 The Chromium Authors. All rights reserved. | 2 * Copyright 2017 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 .context { | |
| 7 padding: 2px 1px 2px 2px; | |
| 8 white-space: nowrap; | |
| 9 display: flex; | |
| 10 flex-direction: column; | |
| 11 height: 36px; | |
| 12 justify-content: center; | |
| 13 } | |
| 14 | |
| 15 .context.disabled { | |
| 16 opacity: 0.5; | |
| 17 } | |
| 18 | 6 |
| 19 .title { | 7 .title { |
| 20 overflow: hidden; | 8 overflow: hidden; |
| 21 text-overflow: ellipsis; | 9 text-overflow: ellipsis; |
| 22 flex-grow: 0; | 10 flex-grow: 0; |
| 23 } | 11 } |
| 24 | 12 |
| 25 .badge { | 13 .badge { |
| 26 pointer-events: none; | 14 pointer-events: none; |
| 27 margin-right: 4px; | 15 margin-right: 4px; |
| 28 display: inline-block; | 16 display: inline-block; |
| 29 height: 15px; | 17 height: 15px; |
| 30 } | 18 } |
| 31 | 19 |
| 32 .subtitle { | 20 .subtitle { |
| 33 color: #999; | 21 color: #999; |
| 34 margin-right: 3px; | 22 margin-right: 3px; |
| 35 overflow: hidden; | 23 overflow: hidden; |
| 36 text-overflow: ellipsis; | 24 text-overflow: ellipsis; |
| 37 flex-grow: 0; | 25 flex-grow: 0; |
| 38 } | 26 } |
| 39 | 27 |
| 40 .context-list { | 28 :host(.highlighted) .subtitle { |
| 41 background-color: white; | 29 color: inherit; |
| 42 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), | |
| 43 0 2px 4px rgba(0, 0, 0, 0.2), | |
| 44 0 2px 6px rgba(0, 0, 0, 0.1); | |
| 45 overflow-x: hidden; | |
| 46 overflow-y: auto; | |
| 47 width: 100%; | |
| 48 } | 30 } |
| 49 | |
| 50 .context.selected { | |
| 51 color: white; | |
| 52 background-color: rgb(56, 121, 217); | |
| 53 } | |
| 54 | |
| 55 .context.selected .subtitle { | |
| 56 color: white; | |
| 57 } | |
| OLD | NEW |