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