pdh-design-system/dist/css/molecules/Search/Search.css

PDH Design System React Components

.search input.form-control:focus {
  box-shadow: none;
}
.search.search-monochromatic {
  background-color: rgba(255, 255, 255, 0.95);
  border: 0 none;
  border-radius: 0.375rem;
}
.search.search-monochromatic input.form-control {
  color: var(--bs-primary);
  border: 0 none;
  background-color: transparent;
}
.search.search-monochromatic input.form-control::placeholder {
  color: rgba(var(--bs-primary-rgb), 0.65);
}
.search.search-monochromatic input.form-control:focus {
  color: var(--bs-primary-dark);
  background-color: rgb(255, 255, 255);
}
.search.search-monochromatic input.form-control:focus::placeholder {
  color: rgba(var(--bs-primary-rgb), 0.75);
}
.search.search-monochromatic button {
  background-color: transparent;
  border: 0 none;
  color: rgba(var(--bs-primary-rgb), 0.85);
}
.search.search-monochromatic button:hover, .search.search-monochromatic button:focus {
  color: rgba(var(--bs-primary-rgb), 1);
}
.search.search-muted {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0.375rem;
}
.search.search-muted input.form-control {
  color: white;
  border: 0 none;
  background-color: transparent;
}
.search.search-muted input.form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.search.search-muted input.form-control:focus {
  color: var(--bs-primary-dark);
  background-color: rgba(255, 255, 255, 0.9);
}
.search.search-muted input.form-control:focus::placeholder {
  color: rgba(var(--bs-primary-rgb), 0.75);
}
.search.search-muted button {
  background-color: transparent;
  border: 0 none;
  color: rgba(255, 255, 255, 0.85);
}
.search.search-muted button:hover, .search.search-muted button:focus {
  color: white;
}
@media (min-width: 1200px) {
  .search.search-muted input,
  .search.search-muted button {
    padding: 0.375 rem 0.75rem;
  }
}