Web Inspector: decrease horizontal padding of `WI.ScopeBar` to have more room
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / FilterBar.css
1 /*
2  * Copyright (C) 2019 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 .filter-bar {
27     display: flex;
28
29     height: var(--navigation-bar-height);
30
31     white-space: nowrap;
32     overflow: hidden;
33
34     background-color: var(--panel-background-color);
35 }
36
37 .filter-bar > .navigation-bar {
38     margin-top: 1px;
39 }
40
41 .filter-bar > .navigation-bar > .item {
42     padding: 0 0 2px;
43 }
44
45 .filter-bar > .navigation-bar > .item.button {
46     padding-bottom: 3px;
47 }
48
49 .filter-bar > .navigation-bar > .item.scope-bar {
50     --scope-bar-margin-override: 0;
51 }
52
53 .filter-bar > input[type="search"] {
54     display: flex;
55     flex: 1;
56     min-width: 0;
57     margin: 3px 0 4px;
58     -webkit-margin-start: 6px;
59 }
60
61 :matches(.filter-bar, .search-bar) > input[type="search"] {
62     height: 22px;
63     padding-top: 0;
64     color: var(--text-color-active);
65     background-color: transparent;
66     background-clip: padding-box;
67     border: 1px solid var(--border-color);
68     border-radius: 3px;
69     outline: none;
70     -webkit-appearance: none;
71 }
72
73 :matches(.filter-bar, .search-bar) > input[type="search"]:matches(:focus, :not(:placeholder-shown)) {
74     background-color: var(--background-color-content);
75 }
76
77 :matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-decoration {
78     align-self: center;
79     width: 13px;
80     height: 13px;
81     margin: 4px 4px 3px 3px;
82     background-image: url(../Images/FilterFieldGlyph.svg);
83     -webkit-appearance: none;
84 }
85
86 :matches(.filter-bar, .search-bar) > input[type="search"]::-webkit-search-results-button {
87     -webkit-margin-end: 4px;
88 }
89
90 /* FIXME: use a different image for ::-webkit-search-decoration when :not(:placeholder-shown) */
91
92 :matches(.filter-bar, .search-bar) > input[type="search"]::placeholder {
93     color: var(--text-color-secondary);
94 }
95
96 :matches(.filter-bar, .search-bar) > input[type="search"]:matches(:not(:focus), :placeholder-shown)::-webkit-search-cancel-button {
97     display: none;
98 }
99
100 :matches(.filter-bar, .search-bar) > .navigation-bar + input[type="search"] {
101     -webkit-margin-start: 0;
102 }
103
104 :matches(.filter-bar, .search-bar) > input[type="search"]:focus {
105     -webkit-margin-end: 6px;
106 }
107
108 :matches(.filter-bar, .search-bar) > input[type="search"] + :empty {
109     -webkit-margin-start: 6px;
110 }
111
112 :matches(.filter-bar, .search-bar) > input[type="search"]:focus ~ * {
113     display: none;
114 }
115
116 :matches(.filter-bar, .search-bar) > input[type="search"] + .navigation-bar > .item.scope-bar:last-child {
117     -webkit-margin-end: 4px;
118 }