| OLD | NEW |
| 1 /* | 1 /* |
| 2 * Copyright 2014 The Chromium Authors. All rights reserved. | 2 * Copyright 2014 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 .crumbs { | 7 .crumbs { |
| 8 display: inline-block; | 8 display: inline-block; |
| 9 pointer-events: auto; | 9 pointer-events: auto; |
| 10 cursor: default; | 10 cursor: default; |
| 11 font-size: 11px; | 11 font-size: 11px; |
| 12 line-height: 17px; |
| 12 white-space: nowrap; | 13 white-space: nowrap; |
| 13 } | 14 } |
| 14 | 15 |
| 15 .crumbs .crumb { | 16 .crumbs .crumb { |
| 16 display: inline-block; | 17 display: inline-block; |
| 18 padding: 0 7px; |
| 19 height: 18px; |
| 17 white-space: nowrap; | 20 white-space: nowrap; |
| 18 padding: 0px 4px; | 21 } |
| 19 border-radius: 2px; | 22 |
| 23 :host-context(.material) .crumb { |
| 24 padding: 0px 4px 0px 11px; |
| 20 cursor: pointer; | 25 cursor: pointer; |
| 21 line-height: 18px; | 26 line-height: 18px; |
| 22 margin: 4px; | 27 margin: 4px 0px; |
| 23 position: relative; | 28 position: relative; |
| 24 color: hsl(0, 0%, 35%); | 29 color: hsl(0, 0%, 35%); |
| 25 } | 30 } |
| 26 | 31 |
| 27 .crumb:not(.collapsed):not(:first-child):before { | 32 :host-context(.material) .crumb:not(.collapsed):first-child { |
| 28 content: "\276D"; | 33 padding-left: 2px; |
| 34 } |
| 35 |
| 36 :host-context(.material) .crumb:not(.collapsed):not(:first-child):before { |
| 37 content: "\27E9"; |
| 29 position: absolute; | 38 position: absolute; |
| 30 left: -7.5px; | 39 left: 0px; |
| 31 font-size: 9px; | 40 color: hsl(0, 0%, 35%); |
| 41 width: 7px; |
| 32 text-align: center; | 42 text-align: center; |
| 33 color: hsl(0, 0%, 60%); | |
| 34 } | 43 } |
| 35 | 44 |
| 36 .crumbs .crumb.collapsed > * { | 45 .crumbs .crumb.collapsed > * { |
| 37 display: none; | 46 display: none; |
| 38 } | 47 } |
| 39 | 48 |
| 40 .crumbs .crumb.collapsed::before { | 49 .crumbs .crumb.collapsed::before { |
| 41 content: "\2026"; | 50 content: "\2026"; |
| 42 font-weight: bold; | 51 font-weight: bold; |
| 43 } | 52 } |
| 44 | 53 |
| 45 .crumbs .crumb.compact .extra { | 54 .crumbs .crumb.compact .extra { |
| 46 display: none; | 55 display: none; |
| 47 } | 56 } |
| 48 | 57 |
| 49 .crumbs .crumb.selected, .crumbs .crumb.selected:hover { | 58 .crumbs .crumb.selected, .crumbs .crumb.selected:hover { |
| 59 background-color: rgb(56, 121, 217); |
| 50 color: white; | 60 color: white; |
| 51 background-color: hsl(217, 89%, 61%) !important; | 61 text-shadow: rgba(255, 255, 255, 0.5) 0 0 0; |
| 62 } |
| 63 |
| 64 :host-context(.material) .crumb.selected { |
| 65 color: hsl(0, 0%, 35%); |
| 66 background-color: transparent !important; |
| 67 } |
| 68 |
| 69 :host-context(.material) .crumb.selected:before { |
| 70 color: hsl(217, 89%, 61%) !important; |
| 52 } | 71 } |
| 53 | 72 |
| 54 .crumbs .crumb:hover { | 73 .crumbs .crumb:hover { |
| 55 background-color: hsl(211, 100%, 95%); | 74 background-color: rgb(216, 216, 216); |
| 56 } | 75 } |
| 76 |
| 77 :host-context(.material) .crumb:hover { |
| 78 background-color: transparent; |
| 79 color: hsl(0, 0%, 20%) !important; |
| 80 } |
| OLD | NEW |