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