@universal-material/web/search/search.styles.js

Material web components

import { css } from 'lit';
export const styles = css `
  :host {
    display: block;
  }

  :host(:not([has-leading-icon])) .leading-icon {
    display: none;
  }

  :host(:not([has-trailing-icon])) .trailing-icon {
    display: none;
  }

  slot[name=leading-icon],
  slot[name=trailing-icon] {
    display: inline-flex;
    align-items: center;
    gap: var(--u-search-icons-gap, 8px);
  }

  slot[name=leading-icon]::slotted(u-icon-button) {
    color: inherit;
  }

  :host([position=absolute]) .container {
    position: absolute;
  }

  :host([position=fixed]) .container {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    inset-inline-start: var(--u-app-bar-offset, 0);
  }

  :host([position=absolute]),
  :host([position=fixed]) {
    padding-top: var(--_content-height);
  }
  :host([position=absolute]) .container,
  :host([position=fixed]) .container {
    z-index: var(--u-fixed-search-z-index, 1010);
  }

  .input {
    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
    line-height: var(--u-search-input-line-height, var(--u-body-l-line-height, 1.5rem));
    font-size: var(--u-search-input-font-size, var(--u-body-l-font-size, 1rem));
    letter-spacing: var(--u-search-input-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));
    font-weight: var(--u-search-input-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));
    margin: 0;
    margin-inline: var(--u-search-placeholder-margin, 16px);
    display: block;
    width: 100%;
    color: var(--u-search-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));
    padding: 0;
    appearance: none;
    background: transparent;
    border: none;
    outline: 0 !important;
    caret-color: var(--u-color-primary, rgb(103, 80, 164));
  }
  .input::placeholder {
    color: var(--u-search-input-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
  }
  :host([has-leading-icon]) .input {
    margin-inline-start: 0;
  }

  .content {
    display: flex;
    align-items: center;
    background-color: var(--u-search-container-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));
    border-radius: var(--u-search-border-radius, 9999px);
    height: var(--u-search-height, 56px);
  }

  .inner-container {
    padding-inline: var(--u-layout-margin-inline, var(--u-layout-margin));
    padding-block: var(--u-search-margin-block, 8px);
    width: 100%;
  }

  .inner-container {
    max-width: var(--u-container-width, 992px);
    margin-inline: auto;
  }

  .leading-icon {
    margin-inline: var(--u-search-leading-icon-margin, 8px);
  }

  .trailing-icon {
    padding-inline: var(--u-search-trailing-icon-margin, 8px);
    margin-inline-start: auto;
  }
`;
//# sourceMappingURL=search.styles.js.map