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

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

Issue 2734043002: DevTools: fix stretch layout in search/replace bar (Closed)
Patch Set: ac Created 3 years, 9 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
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/ui/SearchableView.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 23px;
9 background-color: #eee; 9 background-color: #eee;
10 border-top: 1px solid #ccc; 10 border-top: 1px solid #ccc;
(...skipping 15 matching lines...) Expand all
26 border: 0; 26 border: 0;
27 padding: 0 3px; 27 padding: 0 3px;
28 margin: 0; 28 margin: 0;
29 flex: 1; 29 flex: 1;
30 } 30 }
31 31
32 .search-replace:focus { 32 .search-replace:focus {
33 outline: none; 33 outline: none;
34 } 34 }
35 35
36 .toolbar-search { 36 .toolbar-replace-checkbox {
37 border-spacing: 1px; 37 margin-top: 2px;
38 display: block;
38 } 39 }
39 40
40 .toolbar-search td { 41 .toolbar-search {
41 padding: 0 5px 0 0; 42 display: flex;
43 width: 100%;
42 } 44 }
43 45
44 .toolbar-search td > span { 46 .toolbar-search > div {
45 display: flex; 47 margin: 0px 2px;
46 align-items: baseline; 48 flex-shrink: 0;
47 line-height: 17px; 49 }
50
51 .toolbar-search-inputs {
52 flex-grow: 1;
53 min-width: 150px;
48 } 54 }
49 55
50 .toolbar-search-navigation-controls { 56 .toolbar-search-navigation-controls {
51 align-self: stretch; 57 align-self: stretch;
52 background-image: linear-gradient(rgb(228, 228, 228), rgb(206, 206, 206)); 58 background-image: linear-gradient(rgb(228, 228, 228), rgb(206, 206, 206));
53 } 59 }
54 60
55 .toolbar-search-navigation { 61 .toolbar-search-navigation {
56 display: inline-block; 62 display: inline-block;
57 width: 18px; 63 width: 18px;
58 height: 18px; 64 height: 18px;
59 background-repeat: no-repeat; 65 background-repeat: no-repeat;
60 background-position: 4px 7px; 66 background-position: 4px 7px;
61 border-left: 1px solid rgb(170, 170, 170); 67 border-left: 1px solid rgb(170, 170, 170);
62 opacity: 0.3; 68 opacity: 0.3;
63 } 69 }
64 70
65 .toolbar-search-navigation.enabled { 71 .toolbar-search-navigation.enabled {
66 opacity: 1.0; 72 opacity: 1.0;
67 } 73 }
68 74
69 .toolbar-search button.search-action-button { 75 .toolbar-search button.search-action-button {
70 border: 1px solid rgb(163, 163, 163); 76 border: 1px solid rgb(163, 163, 163);
71 border-radius: 8px; 77 border-radius: 8px;
72 margin: 0; 78 margin: 1px 3px 0 3px;
73 background-image: linear-gradient(rgb(241, 241, 241), rgb(220, 220, 220)); 79 background-image: linear-gradient(rgb(241, 241, 241), rgb(220, 220, 220));
74 width: 100%; 80 width: 75px;
75 height: 20px; 81 height: 20px;
76 white-space: nowrap; 82 white-space: nowrap;
77 } 83 }
78 84
79 .toolbar-search button.search-action-button:active { 85 .toolbar-search button.search-action-button:active {
80 background-image: linear-gradient(rgb(185, 185, 185), rgb(156, 156, 156)); 86 background-image: linear-gradient(rgb(185, 185, 185), rgb(156, 156, 156));
81 } 87 }
82 88
83 .toolbar-search-control { 89 .toolbar-search-control {
84 display: -webkit-flex; 90 display: -webkit-flex;
85 position: relative; 91 position: relative;
86 background-color: white; 92 background-color: white;
87 } 93 }
88 94
95 .toolbar-search-buttons {
96 flex-basis: 165px;
97 }
98
89 .toolbar-replace-control, 99 .toolbar-replace-control,
90 #search-input-field { 100 #search-input-field {
91 padding-top: 1px; 101 margin-top: 1px;
92 line-height: 17px; 102 line-height: 17px;
93 } 103 }
94 104
95 .toolbar-search-control, .toolbar-replace-control { 105 .toolbar-search-control, .toolbar-replace-control {
96 border: 1px solid rgb(163, 163, 163); 106 border: 1px solid rgb(163, 163, 163);
97 height: 20px; 107 height: 20px;
98 border-radius: 2px; 108 border-radius: 2px;
99 width: 253px; 109 width: 100%;
100 margin-left: 1px; 110 margin-top: 1px;
101 } 111 }
102 112
103 .toolbar-search-navigation.enabled:active { 113 .toolbar-search-navigation.enabled:active {
104 background-position: 4px 7px, 0 0; 114 background-position: 4px 7px, 0 0;
105 } 115 }
106 116
107 .toolbar-search-navigation.toolbar-search-navigation-prev { 117 .toolbar-search-navigation.toolbar-search-navigation-prev {
108 background-image: url(Images/searchPrev.png); 118 background-image: url(Images/searchPrev.png);
109 border-left: 1px solid rgb(163, 163, 163); 119 border-left: 1px solid rgb(163, 163, 163);
110 } 120 }
(...skipping 13 matching lines...) Expand all
124 134
125 .toolbar-search-navigation.toolbar-search-navigation-next.enabled:active { 135 .toolbar-search-navigation.toolbar-search-navigation-next.enabled:active {
126 background-image: url(Images/searchNext.png), linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116)); 136 background-image: url(Images/searchNext.png), linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116));
127 } 137 }
128 138
129 .search-results-matches { 139 .search-results-matches {
130 display: inline-block; 140 display: inline-block;
131 text-align: right; 141 text-align: right;
132 padding: 0 4px; 142 padding: 0 4px;
133 color: rgb(165, 165, 165); 143 color: rgb(165, 165, 165);
144 align-self: center;
134 } 145 }
OLDNEW
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/ui/SearchableView.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698