_Search.scss (10955B)
1 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 2 $search-height: var(--size-item-xlarge); 3 $search-height-new: 52px; 4 $search-icon-size: 24px; 5 $search-icon-padding: 16px; 6 $search-icon-width: 2 * $search-icon-padding + $search-icon-size - 4px; // 52px 7 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 8 $search-button-width: var(--size-item-xlarge); 9 $glyph-forward: url('chrome://browser/skin/forward.svg'); 10 11 .search-wrapper { 12 // Compact layout defaults formerly under .thumbs-ui-compact 13 padding: 0; 14 margin-block: var(--space-xxlarge); 15 margin-block-start: 0; 16 17 .logo-and-wordmark { 18 margin-block-end: var(--space-xxlarge); 19 } 20 21 .logo-and-wordmark-wrapper { 22 margin-block-end: 0; 23 } 24 25 @media (height <=700px) { 26 padding: 0; 27 margin-block-start: 0; 28 } 29 30 @media (height > 700px) { 31 padding: 0; 32 } 33 34 // Edge case for users who have only search enabled 35 .only-search & { 36 // Bug 1967304 - Large number (40px) 37 padding-block-end: calc(var(--space-large) + var(--space-xlarge)); 38 } 39 40 .search-inner-wrapper { 41 cursor: default; 42 display: flex; 43 min-height: $search-height-new; 44 margin: 0 auto; 45 position: relative; 46 width: 304px; 47 48 @media (min-width: $break-point-medium) { 49 width: $searchbar-width-medium; 50 } 51 52 @media (min-width: $break-point-large) { 53 width: 510px; 54 } 55 56 @media (min-width: $break-point-widest) { 57 width: 720px; 58 } 59 } 60 61 .search-inner-wrapper:has(.trending-searches-pill-wrapper) { 62 display: flex; 63 flex-direction: column; 64 65 .search-handoff-button { 66 height: 52px; 67 } 68 } 69 70 /** 71 * @backward-compat { version 148 } 72 * 73 * Temporary dual implementation to support train hopping. The old handoff UI 74 * is kept alongside the new contentSearchHandoffUI.mjs custom element until 75 * the module lands on all channels. Controlled by the pref 76 * browser.newtabpage.activity-stream.search.useHandoffComponent. 77 * Remove the old implementation and the pref once this ships to Release. 78 */ 79 .search-handoff-button { 80 background: var(--newtab-background-color-secondary) var(--newtab-search-icon) $search-icon-padding center no-repeat; 81 background-size: $search-icon-size; 82 // Bug 1967304 - $variable 83 padding-inline-start: $search-icon-width; // stylelint-disable-line declaration-property-value-disallowed-list 84 padding-inline-end: var(--space-small); 85 padding-block: 0; 86 width: 100%; 87 box-shadow: $shadow-card; 88 border: 1px solid transparent; 89 border-radius: var(--border-radius-medium); 90 color: var(--newtab-text-primary-color); 91 -moz-context-properties: fill; 92 fill: var(--newtab-text-secondary-color); 93 94 &:dir(rtl) { 95 background-position-x: right $search-icon-padding; 96 } 97 } 98 99 /** 100 * @backward-compat { version 148 } 101 * 102 * Temporary dual implementation to support train hopping. The old handoff UI 103 * is kept alongside the new contentSearchHandoffUI.mjs custom element until 104 * the module lands on all channels. Controlled by the pref 105 * browser.newtabpage.activity-stream.search.useHandoffComponent. 106 * Remove the old implementation and the pref once this ships to Release. 107 */ 108 &.fake-focus:not(.search.disabled) { 109 .search-handoff-button { 110 border: 1px solid var(--newtab-primary-action-background); 111 box-shadow: $shadow-focus; 112 } 113 } 114 115 /** 116 * @backward-compat { version 148 } 117 * 118 * Temporary dual implementation to support train hopping. The old handoff UI 119 * is kept alongside the new contentSearchHandoffUI.mjs custom element until 120 * the module lands on all channels. Controlled by the pref 121 * browser.newtabpage.activity-stream.search.useHandoffComponent. 122 * Remove the old implementation and the pref once this ships to Release. 123 */ 124 .search-handoff-button { 125 padding-inline-end: var(--space-large); 126 color: var(--newtab-text-primary-color); 127 fill: var(--newtab-text-secondary-color); 128 -moz-context-properties: fill; 129 130 .fake-caret { 131 inset-block-start: var(--space-large); 132 // Bug 1967304 - $variable 133 inset-inline-start: $search-icon-width; // stylelint-disable-line declaration-property-value-disallowed-list 134 135 &:dir(rtl) { 136 background-position-x: right $search-icon-padding; 137 } 138 } 139 } 140 141 content-search-handoff-ui { 142 --content-search-handoff-ui-background-color: var(--newtab-background-color-secondary); 143 --content-search-handoff-ui-color: var(--newtab-text-primary-color); 144 --content-search-handoff-ui-fill: var(--newtab-text-secondary-color); 145 --content-search-handoff-ui-caret-color: var(--newtab-text-primary-color); 146 --content-search-handoff-ui-fakefocus-border-color: var(--newtab-primary-action-background); 147 --content-search-handoff-ui-fakefocus-box-shadow-inner: var(--newtab-primary-action-background-dimmed); 148 --content-search-handoff-ui-fakefocus-box-shadow-outer: transparent; 149 } 150 151 &.visible-logo { 152 .logo-and-wordmark { 153 .wordmark { 154 fill: var(--newtab-wordmark-color); 155 } 156 } 157 } 158 } 159 160 .has-recommended-stories { 161 .outer-wrapper:not(.fixed-search) .search-wrapper { 162 margin-block-start: var(--space-large); 163 } 164 165 .logo-and-wordmark { 166 position: absolute; 167 inset-inline-start: var(--space-xxlarge); 168 inset-block-start: var(--space-xxlarge); 169 170 @media (min-width: $break-point-layout-variant) { 171 inset-inline-start: var(--space-large); 172 } 173 174 @media (min-width: $break-point-large) { 175 inset-inline-start: var(--space-xxlarge); 176 } 177 } 178 179 &.no-search { 180 .body-wrapper { 181 margin-block-start: 0; 182 183 @media (min-width: $break-point-large) { 184 // This is to handle the gap left by search being removed. 185 // Bug 1967304 - Large number (96px) 186 margin-block-start: calc(var(--space-xlarge) * 4); 187 } 188 189 @media (min-width: $break-point-ultra-wide) { 190 margin-block-start: 0; 191 } 192 } 193 } 194 195 // Bug 1961633 - Keep shortcuts/feed below the logo/weather widget (var b layout) 196 &.no-search.has-sections-grid { 197 .body-wrapper { 198 // 96px is the margin necessary to maintain the same spacing with/without the search bar 199 // Bug 1967304 - Large number (96px) 200 margin-block-start: calc(var(--space-xlarge) * 4); 201 } 202 203 .logo-and-wordmark { 204 inset-inline-start: var(--space-large); 205 206 @media (min-width: $break-point-small) { 207 inset-inline-start: var(--space-xxlarge); 208 } 209 210 @media (min-width: $break-point-layout-variant) { 211 inset-inline-start: var(--space-large); 212 } 213 214 @media (min-width: $break-point-large) { 215 inset-inline-start: var(--space-xxlarge); 216 } 217 } 218 219 } 220 221 .search-inner-wrapper { 222 width: 200px; 223 224 @media (min-width: $break-point-small) { 225 width: 300px; 226 } 227 228 @media (min-width: $break-point-medium) { 229 width: 350px; 230 } 231 232 @media (min-width: $break-point-large) { 233 width: 410px; 234 } 235 236 @media (min-width: $break-point-widest) { 237 width: 584px; 238 } 239 240 @media (min-width: $break-point-weather) { 241 width: 720px; 242 } 243 } 244 245 // Bug 1960519 - Custom override for mobile icon next to weather 246 &.has-mobile-download-promo { 247 .search-inner-wrapper { 248 @media (min-width: $break-point-widest) { 249 // Set to smaller breakpoint to fit weather 250 width: 497px; 251 } 252 253 @media (min-width: $break-point-weather) { 254 // Reset back to default length 255 width: 720px; 256 } 257 } 258 } 259 260 .logo { 261 width: 52px; 262 height: 52px; 263 background-size: 52px; 264 } 265 266 .wordmark { 267 display: none; 268 height: 52px; 269 270 @media (min-width: $break-point-large) { 271 display: block; 272 } 273 } 274 } 275 276 .search-handoff-button { 277 background: var(--newtab-background-color-secondary) var(--newtab-search-icon) $search-icon-padding center no-repeat; 278 background-size: $search-icon-size; 279 border: solid 1px transparent; 280 border-radius: var(--border-radius-small); 281 box-shadow: $shadow-secondary, 0 0 0 1px $black-15; 282 cursor: text; 283 font-size: inherit; 284 padding: 0; 285 // Bug 1967304 - Large number (48px) 286 padding-inline: calc(var(--space-xlarge) * 2); 287 opacity: 1; 288 width: 100%; 289 290 &:dir(rtl) { 291 background-position-x: right $search-icon-padding; 292 } 293 294 .fake-focus:not(.search-disabled) & { 295 border: 1px solid var(--border-color-interactive); 296 box-shadow: var(--newtab-textbox-focus-boxshadow); 297 298 .fake-caret { 299 display: block; 300 } 301 } 302 303 .search-disabled & { 304 opacity: 0.5; 305 box-shadow: none; 306 } 307 308 .fake-editable:focus { 309 outline: none; 310 caret-color: transparent; 311 } 312 313 .fake-editable { 314 color: transparent; 315 height: 100%; 316 opacity: 0; 317 position: absolute; 318 inset: 0; 319 } 320 321 .fake-textbox { 322 opacity: 0.54; 323 text-align: start; 324 -webkit-line-clamp: 1; 325 overflow: hidden; 326 } 327 328 .fake-caret { 329 /* To replicate the default caret blink rate of 567ms (https://searchfox.org/mozilla-central/source/widget/cocoa/nsLookAndFeel.mm#397): 330 - Multiply the blink time by 2 to cover both the visible and hidden states. 331 - Use steps(2, start) to divide the animation into 2 phases: 332 1. First 567ms (Step 1) → Caret is visible 333 2. Next 567ms (Step 2) → Caret is hidden 334 This gives a sharp ON/OFF effect instead of a smooth transition. */ 335 336 animation: caret-animation var(--caret-blink-time, 1134ms) steps(2, start) var(--caret-blink-count, infinite); 337 background: var(--newtab-text-primary-color); 338 display: none; 339 // Bug 1967304 - Large number (48px) 340 inset-inline-start:calc(var(--space-xlarge) * 2); 341 height: 17px; 342 position: absolute; 343 inset-block-start: var(--space-large); 344 width: 1px; 345 346 @keyframes caret-animation { 347 to { 348 visibility: hidden; 349 } 350 } 351 } 352 } 353 354 @media (height > 700px) { 355 .activity-stream .fixed-search { 356 .search-wrapper { 357 $search-height: $search-height-new; 358 $search-icon-size: 24px; 359 $search-icon-padding: 16px; 360 $search-header-bar-height: 95px; 361 362 border-block-end: solid 1px var(--border-color); 363 padding: var(--space-xlarge) 0; 364 background-color: var(--newtab-overlay-color); 365 min-height: $search-header-bar-height; 366 inset-inline-start: 0; 367 position: fixed; 368 inset-block-start: 0; 369 width: 100%; 370 z-index: 3; 371 display: flex; 372 align-items: center; 373 374 .search-inner-wrapper { 375 min-height: $search-height; 376 } 377 378 .search-handoff-button .fake-caret { 379 inset-block-start: var(--space-large); 380 } 381 382 .logo-and-wordmark { 383 display: none; 384 } 385 } 386 387 .search-handoff-button { 388 background-position-x: var(--space-large); 389 background-size: $search-icon-size; 390 391 &:dir(rtl) { 392 background-position-x: right var(--space-large); 393 } 394 395 .fake-caret { 396 inset-block-start: var(--space-small); 397 } 398 } 399 } 400 }