Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(434)

Side by Side Diff: Source/devtools/front_end/elements/breadcrumbs.css

Issue 1312033008: Devtools UI: Upgrade breadcrumbs to material design UI (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 5 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698