@adobe/coral-spectrum/coral-component-search/src/styles/index.css

Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.

/**
 * Copyright 2019 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
._coral-Search {
  display: inline-block;
  position: relative;
}
._coral-Search ._coral-ClearButton {
    position: absolute;
    right: 0;
    top: 0;
  }
._coral-Search-input {
  display: block;
  -webkit-appearance: none;
  outline-offset: -2px;
  padding-left: 36px;
  text-indent: 0;
  padding-right: 28px;
}
._coral-Search-input::-webkit-search-cancel-button,
  ._coral-Search-input::-webkit-search-decoration {
    -webkit-appearance: none;
  }
._coral-Search-input._coral-Textfield--quiet {
    padding-left: 24px;
    padding-right: 20px;
  }
._coral-Search-input._coral-Textfield--quiet ~ ._coral-Search-icon {
      left: 0;
    }
._coral-Search-input._coral-Textfield--quiet ~ ._coral-Search-clear {
      right: -8px;
    }
._coral-Search-input._coral-Textfield--quiet ~ ._coral-Search-rightIcon {
      right: 0;
    }
._coral-Search-icon {
  display: block;
  position: absolute;
  left: 12px;
  top: 8px;

  transition: color 130ms ease-in-out;

  pointer-events: none;
}

.coral--large ._coral-Search-input {
  padding-left: 36px;
  padding-right: 28px;
}
.coral--large ._coral-Search-input._coral-Textfield--quiet {
    padding-left: 24px;
    padding-right: 20px;
  }
.coral--large ._coral-Search-icon {
  top: 10px;

  transition: color 130ms ease-in-out;
}

.coral--light ._coral-Search-icon {
  color: rgb(110, 110, 110);
}
.coral--light ._coral-Search-input:hover ~ ._coral-Search-icon {
      color: rgb(44, 44, 44);
    }
.coral--light ._coral-Search-input:active ~ ._coral-Search-icon {
      color: rgb(44, 44, 44);
    }
.coral--light ._coral-Search-input.focus-ring ~ ._coral-Search-icon {
      color: rgb(44, 44, 44);
    }
.coral--light ._coral-Search-input:disabled ~ ._coral-Search-icon {
      color: rgb(179, 179, 179);
    }

.coral--lightest ._coral-Search-icon {
  color: rgb(116, 116, 116);
}
.coral--lightest ._coral-Search-input:hover ~ ._coral-Search-icon {
      color: rgb(50, 50, 50);
    }
.coral--lightest ._coral-Search-input:active ~ ._coral-Search-icon {
      color: rgb(50, 50, 50);
    }
.coral--lightest ._coral-Search-input.focus-ring ~ ._coral-Search-icon {
      color: rgb(50, 50, 50);
    }
.coral--lightest ._coral-Search-input:disabled ~ ._coral-Search-icon {
      color: rgb(188, 188, 188);
    }

.coral--dark ._coral-Search-icon {
  color: rgb(185, 185, 185);
}
.coral--dark ._coral-Search-input:hover ~ ._coral-Search-icon {
      color: rgb(255, 255, 255);
    }
.coral--dark ._coral-Search-input:active ~ ._coral-Search-icon {
      color: rgb(255, 255, 255);
    }
.coral--dark ._coral-Search-input.focus-ring ~ ._coral-Search-icon {
      color: rgb(255, 255, 255);
    }
.coral--dark ._coral-Search-input:disabled ~ ._coral-Search-icon {
      color: rgb(110, 110, 110);
    }

.coral--darkest ._coral-Search-icon {
  color: rgb(162, 162, 162);
}
.coral--darkest ._coral-Search-input:hover ~ ._coral-Search-icon {
      color: rgb(239, 239, 239);
    }
.coral--darkest ._coral-Search-input:active ~ ._coral-Search-icon {
      color: rgb(239, 239, 239);
    }
.coral--darkest ._coral-Search-input.focus-ring ~ ._coral-Search-icon {
      color: rgb(239, 239, 239);
    }
.coral--darkest ._coral-Search-input:disabled ~ ._coral-Search-icon {
      color: rgb(92, 92, 92);
    }