1/*
2 * Copyright (C) 2013 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.find-banner {
27    border-bottom: 1px solid rgb(179, 179, 179);
28
29    position: absolute;
30    top: -22px;
31    left: 0;
32    right: 0;
33    height: 22px;
34
35    text-align: right;
36
37    white-space: nowrap;
38    overflow: hidden;
39
40    transition-property: top;
41    transition-duration: 200ms;
42    transition-timing-function: ease-in;
43
44    z-index: 500;
45}
46
47.find-banner.showing {
48    top: 0;
49    transition-timing-function: ease-out;
50}
51
52.find-banner.no-find-banner-transition,
53.supports-find-banner.no-find-banner-transition {
54    transition-duration: 0 !important;
55}
56
57.supports-find-banner {
58    transition-property: top;
59    transition-duration: 200ms;
60    transition-timing-function: ease-in;
61}
62
63.supports-find-banner.showing-find-banner {
64    top: 22px !important;
65    transition-timing-function: ease-out;
66}
67
68.find-banner > :first-child {
69    margin-left: 8px !important;
70}
71
72.find-banner > :last-child {
73    margin-right: 8px !important;
74}
75
76.find-banner > input[type="search"] {
77    margin: 1px 4px;
78
79    width: 143px;
80    height: 19px;
81
82    vertical-align: top;
83
84    -webkit-appearance: none;
85
86    outline: none;
87
88    border: 1px solid rgb(146, 146, 146);
89    border-radius: 4px;
90    background-color: white;
91}
92
93body.mac-platform.legacy .find-banner > input[type="search"] {
94    box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
95}
96
97.find-banner > button {
98    margin: 1px 4px;
99
100    padding-left: 6px;
101    padding-right: 6px;
102
103    -webkit-appearance: none;
104
105    border-radius: 4px;
106    border: 1px solid rgb(146, 146, 146);
107
108    background-color: white;
109    background-image: none;
110    box-shadow: none;
111
112    line-height: 11px;
113
114    height: 19px;
115
116    text-align: center;
117    vertical-align: top;
118
119    outline-offset: -2px;
120}
121
122.find-banner > button > .glyph {
123    display: inline-block;
124
125    width: 7px;
126    height: 11px;
127}
128
129body.mac-platform.legacy .find-banner > button > .glyph {
130    height: 7px;
131}
132
133.find-banner > button:disabled > .glyph {
134    opacity: 0.65;
135}
136
137.find-banner > button:active:not(:disabled) {
138    border: 1px solid rgb(141, 141, 141);
139    background-image: linear-gradient(to bottom, rgb(200, 200, 200), rgb(218, 218, 218));
140    box-shadow: rgba(255, 255, 255, 0.33) 0 1px 0, inset rgb(165, 165, 165) 0 1px 1px;
141}
142
143.find-banner > button:disabled {
144    border: 1px solid rgb(195, 195, 195);
145    background-image: none;
146}
147
148.find-banner > button.segmented.left {
149    border-top-right-radius: 0;
150    border-bottom-right-radius: 0;
151
152    margin-right: 0;
153
154    padding-left: 6px;
155    padding-right: 6px;
156}
157
158.find-banner > button.segmented.left > .glyph {
159    background-image: -webkit-canvas(find-banner-previous-arrow-normal);
160    background-size: 7px 11px;
161    background-repeat: no-repeat;
162}
163
164body.mac-platform.legacy .find-banner > button.segmented.left > .glyph {
165    background-size: 7px 7px;
166}
167
168.find-banner > button.segmented.left:active:not(:disabled) > .glyph {
169    background-image: -webkit-canvas(find-banner-previous-arrow-normal-active);
170}
171
172.find-banner > button.segmented.right {
173    border-top-left-radius: 0;
174    border-bottom-left-radius: 0;
175
176    margin-left: -1px;
177
178    padding-left: 5px;
179    padding-right: 7px;
180}
181
182.find-banner > button.segmented.right > .glyph {
183    background-image: -webkit-canvas(find-banner-next-arrow-normal);
184    background-size: 7px 11px;
185    background-repeat: no-repeat;
186}
187
188body.mac-platform.legacy .find-banner > button.segmented.right > .glyph {
189    background-size: 7px 7px;
190}
191
192.find-banner > button.segmented.right:active:not(:disabled) > .glyph {
193    background-image: -webkit-canvas(find-banner-next-arrow-normal-active);
194}
195
196.find-banner > button.segmented {
197    min-width: 22px;
198    padding-top: 3px;
199    padding-bottom: 2px;
200}
201
202body.mac-platform.legacy .find-banner > button.segmented {
203    padding-top: 2px;
204    padding-bottom: 3px;
205}
206
207.find-banner > button.segmented:active {
208    z-index: 100;
209    position: relative;
210}
211
212.find-banner > label {
213    margin: 0 6px;
214    line-height: 21px;
215}
216