Are we Design Tokens yet?

browser/components/search/content/contentSearchHandoffUI.css

Propagation: 41.18%

Back to Home

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

:host {
  display: flex;
  width: 100%;
  --content-search-handoff-ui-background-color: Field;
  --content-search-handoff-ui-color: FieldText;
  --content-search-handoff-ui-fill: FieldText;
  --content-search-handoff-ui-caret-color: FieldText;
  --content-search-handoff-ui-border-width: 1px;
  --content-search-handoff-ui-unfocused-border-color: transparent;
  --content-search-handoff-ui-fakefocus-border-color: SelectedItem;
  --content-search-handoff-ui-fakefocus-box-shadow-inner: color-mix(in srgb, SelectedItem 25%, transparent);
  --content-search-handoff-ui-fakefocus-box-shadow-outer: color-mix(in srgb, SelectedItem 25%, transparent);
}

.fake-editable {
  height: 100%;
  opacity: 0;
  position: absolute;
  inset: 0;
}

.fake-editable:focus {
  outline: none;
  caret-color: transparent;
}

.fake-textbox {
  opacity: 0.54;
  text-align: start;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin-inline-start: var(--space-xsmall);

  /**
   * It's not clear to me why I need to do this, but for some reason I don't
   * inherit the font-size through the shadow DOM...
   */
  font-size: var(--font-size-root);
}

.search-handoff-button {
  position: relative;
  background: var(--content-search-handoff-ui-background-color) var(--newtab-search-icon) 16px center no-repeat;
  background-size: var(--size-item-medium);
  padding-inline-start: calc(2 * var(--space-xlarge));
  padding-inline-end: var(--space-small);
  padding-block: 0;
  width: 100%;
  box-shadow: var(--box-shadow-level-3);
  border: var(--content-search-handoff-ui-border-width) solid var(--content-search-handoff-ui-unfocused-border-color);
  border-radius: var(--border-radius-medium);
  color: var(--content-search-handoff-ui-color);
  -moz-context-properties: fill;
  fill: var(--content-search-handoff-ui-fill);

  &:dir(rtl) {
    background-position-x: right 16px;
  }
}

@keyframes caret-animation {
  to {
    visibility: hidden;
  }
}

.fake-caret {
  /* To replicate the default caret blink rate of 567ms (https://searchfox.org/mozilla-central/source/widget/cocoa/nsLookAndFeel.mm#397):
   - Multiply the blink time by 2 to cover both the visible and hidden states.
   - Use steps(2, start) to divide the animation into 2 phases:
     1. First 567ms (Step 1) → Caret is visible
     2. Next 567ms (Step 2) → Caret is hidden
  This gives a sharp ON/OFF effect instead of a smooth transition. */
  animation: caret-animation var(--caret-blink-time, 1134ms) steps(2, start) var(--caret-blink-count, infinite);
  background: var(--content-search-handoff-ui-caret-color);
  display: none;
  inset-inline-start: calc(2 * var(--space-xlarge));
  width: 1px;
  /**
   * We use the negative margin trick here to overlap the same area as the
   * fake-textbox.
   */
  height: 17px;
  margin-top: -17px;
}

:host([fakefocus]:not([disabled])) .search-handoff-button {
  border: var(--content-search-handoff-ui-border-width) solid var(--content-search-handoff-ui-fakefocus-border-color);
  box-shadow:
    0 0 0 2px var(--content-search-handoff-ui-fakefocus-box-shadow-inner),
    0 0 0 4px var(--content-search-handoff-ui-fakefocus-box-shadow-outer);

  .fake-caret {
    display: block;
  }
}

:host([disabled]) .search-handoff-button {
  opacity: 0.5;
}

Back to Home