rubygems/adoption-center

View on GitHub
app/assets/stylesheets/modules/search.css

Summary

Maintainability
Test Coverage
.header__search__icon, .home__search__icon {
  position: absolute;
  cursor: pointer; }

.header__search, .home__search {
  -webkit-appearance: none;
  padding: 10px;
  background: #fff;
  border: none;
  border-radius: 5px;
  font-weight: 300;
  font-family: "aktiv-grotesk-std", sans-serif;
  color: #141c22;
  outline: none; }
  .header__search::-webkit-input-placeholder, .home__search::-webkit-input-placeholder {
    color: #e9573f;
    opacity: 1; }
  .header__search:-moz-placeholder, .home__search:-moz-placeholder {
    color: #e9573f;
    opacity: 1; }
  .header__search::-moz-placeholder, .home__search::-moz-placeholder {
    color: #e9573f;
    opacity: 1; }
  .header__search:-ms-input-placeholder, .home__search:-ms-input-placeholder {
    color: #e9573f;
    opacity: 1; }

.header__search-wrap, .header__search-wrap--home {
  position: relative; }
  @media (max-width: 1019px) {
    .header__search-wrap, .header__search-wrap--home {
      margin-top: 8px;
      padding-bottom: 8px;
      padding-left: 16px;
      padding-right: 10px; }
    @-moz-document url-prefix() {
      .header__search-wrap, .header__search-wrap--home {
        margin-top: 7px;
        padding-bottom: 6px; } } }
  @media (min-width: 1020px) {
    .header__search-wrap {
      margin-top: 18px;
      margin-right: 16px;
      margin-left: 80px;
      float: left; } }
  @media (min-width: 1020px) and (max-width: 1139px) {
    .header__search-wrap {
      width: 260px; } }
  @media (min-width: 1140px) {
    .header__search-wrap {
      width: 360px; } }

@media (min-width: 1020px) {
  .header__search-wrap--home {
    display: none; } }

.header__search__icon {
  top: 6px;
  right: 5px;
  border: none;
  background-color: transparent;
  font-size: 16px;
  font-family: "icomoon";
  color: #e9573f;
  transition-duration: 0.25s;
  transition-property: color; }
  @media (max-width: 1019px) {
    .header__search__icon {
      right: 15px; } }
  .header__search__icon:hover, .header__search__icon:focus {
    color: #e9573f;
    outline: none; }

.header__search {
  width: 100%;
  font-size: 15px;
  box-shadow: 0 0 0px 3px rgba(20, 28, 34, .1);
  padding: 8px 32px 8px 8px; }
  .header__search::-webkit-input-placeholder {
    color: #e9573f; }
  .header__search:-moz-placeholder {
    color: #e9573f; }
  .header__search::-moz-placeholder {
    color: #e9573f; }
  .header__search:-ms-input-placeholder {
    color: #e9573f; }
  .header__search:hover ~ .header__search__icon, .header__search:focus ~ .header__search__icon {
    color: #e9573f; }

.home__search__icon {
  top: 10px;
  right: 10px;
  border: none;
  background-color: transparent;
  font-size: 18px;
  font-family: "icomoon";
  color: #e9573f; }

.home__search {
  margin-bottom: 45px;
  padding-right: 48px;
  box-shadow: 0 0 0px 5px rgba(20, 28, 34, .1);
  box-sizing: border-box;
  width: 100%;
  font-size: 18px; }