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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/ui/searchableView.css

Issue 2881453003: DevTools: update buttons to new style (Closed)
Patch Set: fix test Created 3 years, 6 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
OLDNEW
1 /* 1 /*
2 * Copyright (c) 2014 The Chromium Authors. All rights reserved. 2 * Copyright (c) 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 .search-bar { 7 .search-bar {
8 flex: 0 0 23px; 8 flex: 0 0 29px;
9 background-color: #eee; 9 background-color: #eee;
10 border-top: 1px solid #ccc; 10 border-top: 1px solid #ccc;
11 display: flex; 11 display: flex;
12 overflow: hidden; 12 overflow: hidden;
13 z-index: 0; 13 z-index: 0;
14 } 14 }
15 15
16 .search-bar.replaceable { 16 .search-bar.replaceable {
17 flex: 0 0 44px; 17 flex: 0 0 55px;
18 }
19
20 .search-toolbar {
21 margin-top: -2px;
22 } 18 }
23 19
24 .search-replace { 20 .search-replace {
25 -webkit-appearance: none; 21 -webkit-appearance: none;
26 border: 0; 22 border: 0;
27 padding: 0 3px; 23 padding: 0 3px;
28 margin: 0; 24 margin: 0;
29 flex: 1; 25 flex: 1;
30 } 26 }
31 27
32 .search-replace:focus { 28 .search-replace:focus {
33 outline: none; 29 outline: none;
34 } 30 }
35 31
36 .toolbar-replace-checkbox { 32 .toolbar-replace-checkbox {
37 margin-top: 2px; 33 margin-top: 4px;
34 margin-right: 2px;
38 display: block; 35 display: block;
39 } 36 }
40 37
41 .toolbar-search { 38 .toolbar-search {
42 display: flex; 39 display: flex;
43 width: 100%; 40 width: 100%;
44 } 41 }
45 42
46 .toolbar-search > div { 43 .toolbar-search > div {
47 margin: 0px 2px; 44 margin: 0px 2px;
48 flex-shrink: 0; 45 flex-shrink: 0;
49 } 46 }
50 47
51 .toolbar-search-inputs { 48 .toolbar-search-inputs {
52 flex-grow: 1; 49 flex-grow: 1;
53 min-width: 150px; 50 min-width: 150px;
54 } 51 }
55 52
56 .toolbar-search-navigation-controls { 53 .toolbar-search-navigation-controls {
57 align-self: stretch; 54 align-self: stretch;
58 background-image: linear-gradient(rgb(228, 228, 228), rgb(206, 206, 206));
59 } 55 }
60 56
61 .toolbar-search-navigation { 57 .toolbar-search-navigation {
62 display: inline-block; 58 display: inline-block;
63 width: 18px; 59 width: 20px;
64 height: 18px; 60 height: 20px;
65 background-repeat: no-repeat; 61 background-repeat: no-repeat;
66 background-position: 4px 7px; 62 background-position: 4px 7px;
67 border-left: 1px solid rgb(170, 170, 170); 63 border-left: 1px solid rgb(170, 170, 170);
68 opacity: 0.3; 64 opacity: 0.3;
69 } 65 }
70 66
71 .toolbar-search-navigation.enabled { 67 .toolbar-search-navigation.enabled {
72 opacity: 1.0; 68 opacity: 1.0;
73 } 69 }
74 70
75 .toolbar-search button.search-action-button { 71 .toolbar-search button.search-action-button {
76 border: 1px solid rgb(163, 163, 163); 72 font-weight: 400;
77 border-radius: 8px; 73 height: 22px;
78 margin: 1px 3px 0 3px; 74 width: 87px;
79 background-image: linear-gradient(rgb(241, 241, 241), rgb(220, 220, 220));
80 width: 82px;
81 height: 20px;
82 white-space: nowrap;
83 }
84
85 .toolbar-search button.search-action-button:active {
86 background-image: linear-gradient(rgb(185, 185, 185), rgb(156, 156, 156));
87 } 75 }
88 76
89 .toolbar-search-control { 77 .toolbar-search-control {
90 display: -webkit-flex; 78 display: -webkit-flex;
91 position: relative; 79 position: relative;
92 background-color: white; 80 background-color: white;
93 } 81 }
94 82
95 .toolbar-search-buttons { 83 .toolbar-search-buttons {
96 flex-basis: 179px; 84 flex-basis: 182px;
97 } 85 }
98 86
99 .toolbar-replace-control, 87 .toolbar-replace-control,
100 #search-input-field { 88 #search-input-field {
101 margin-top: 1px; 89 margin-top: 1px;
102 line-height: 17px; 90 line-height: 17px;
103 } 91 }
104 92
105 .toolbar-search-control, .toolbar-replace-control { 93 .toolbar-search-control, .toolbar-replace-control {
106 border: 1px solid rgb(163, 163, 163); 94 border: 1px solid rgb(163, 163, 163);
107 height: 20px; 95 height: 22px;
108 border-radius: 2px; 96 border-radius: 2px;
109 width: 100%; 97 width: 100%;
110 margin-top: 1px; 98 margin-top: 2px;
99 margin-bottom: 2px;
111 } 100 }
112 101
113 .toolbar-search-navigation.enabled:active { 102 .toolbar-search-navigation.enabled:active {
114 background-position: 4px 7px, 0 0; 103 background-position: 4px 7px, 0 0;
115 } 104 }
116 105
117 .toolbar-search-navigation.toolbar-search-navigation-prev { 106 .toolbar-search-navigation.toolbar-search-navigation-prev {
118 background-image: url(Images/searchPrev.png); 107 background-image: url(Images/searchPrev.png);
119 border-left: 1px solid rgb(163, 163, 163); 108 border-left: 1px solid rgb(163, 163, 163);
120 } 109 }
121 110
122 :host-context(.-theme-with-dark-background) .toolbar-search-navigation { 111 :host-context(.-theme-with-dark-background) .toolbar-search-navigation {
123 -webkit-filter: invert(90%); 112 -webkit-filter: invert(90%);
124 } 113 }
125 114
126 .toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active { 115 .toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active {
127 background-image: url(Images/searchPrev.png), linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116)); 116 background-image: url(Images/searchPrev.png), #f2f2f2;
128 } 117 }
129 118
130 .toolbar-search-navigation.toolbar-search-navigation-next { 119 .toolbar-search-navigation.toolbar-search-navigation-next {
131 background-image: url(Images/searchNext.png); 120 background-image: url(Images/searchNext.png);
132 border-left: 1px solid rgb(230, 230, 230); 121 border-left: 1px solid rgb(230, 230, 230);
133 } 122 }
134 123
135 .toolbar-search-navigation.toolbar-search-navigation-next.enabled:active { 124 .toolbar-search-navigation.toolbar-search-navigation-next.enabled:active {
136 background-image: url(Images/searchNext.png), linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116)); 125 background-image: url(Images/searchNext.png), #f2f2f2;
137 } 126 }
138 127
139 .search-results-matches { 128 .search-results-matches {
140 display: inline-block; 129 display: inline-block;
141 text-align: right; 130 text-align: right;
142 padding: 0 4px; 131 padding: 0 4px;
143 color: rgb(165, 165, 165); 132 color: rgb(165, 165, 165);
144 align-self: center; 133 align-self: center;
145 } 134 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698