@oslokommune/punkt-css/dist/css/components/searchinput.css

CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo

/* Common styles for all inputs */
.pkt-searchinput {
  position: relative;
  letter-spacing: -0.2px;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.pkt-searchinput__field {
  width: min(100%, 31rem);
  display: flex;
}
.pkt-searchinput--fullwidth .pkt-searchinput__field {
  width: 100%;
}
.pkt-searchinput--global .pkt-input:not(:disabled) {
  border-color: var(--pkt-color-border-yellow);
}
.pkt-searchinput--global .pkt-input:not(:disabled):hover, .pkt-searchinput--global .pkt-input:not(:disabled):active, .pkt-searchinput--global .pkt-input:not(:disabled):focus {
  border-color: var(--pkt-color-input-border-active);
}
.pkt-searchinput--global .pkt-searchinput__button {
  border-radius: 50%;
}
.pkt-searchinput--local-with-button .pkt-searchinput__field {
  gap: 0.5rem;
}
.pkt-searchinput--local .pkt-input {
  padding: 0.5rem 0 0.5rem 1rem;
}
.pkt-searchinput--local .pkt-searchinput__button:disabled {
  border-color: var(--pkt-color-input-border-disabled);
}
.pkt-searchinput--local .pkt-searchinput__button svg {
  margin-left: 0;
}
.pkt-searchinput__suggestions {
  position: absolute;
  z-index: 2;
  padding: 0;
  margin: 2px 0 0;
  width: min(100%, 31rem);
  list-style: none;
  background-color: var(--pkt-color-background-card);
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.pkt-searchinput--global .pkt-searchinput__suggestions {
  width: min(100% - 3rem, 28rem);
}
.pkt-searchinput--local-with-button .pkt-searchinput__suggestions {
  width: min(100% - 3.5rem, 27.5rem);
}
.pkt-searchinput--fullwidth .pkt-searchinput__suggestions {
  width: 100%;
}
.pkt-searchinput__suggestion {
  display: block;
  padding: 1rem;
  text-decoration: none;
  background-color: transparent;
  color: var(--pkt-color-text-action-normal);
  border: none;
  font: inherit;
  outline: inherit;
  text-align: inherit;
}
.pkt-searchinput__suggestion:hover, .pkt-searchinput__suggestion:focus, .pkt-searchinput__suggestion:active {
  text-decoration: none;
  background-color: var(--pkt-color-background-subtle);
  color: var(--pkt-color-text-action-active);
}
.pkt-searchinput__suggestion:hover .pkt-searchinput__suggestion-title, .pkt-searchinput__suggestion:focus .pkt-searchinput__suggestion-title, .pkt-searchinput__suggestion:active .pkt-searchinput__suggestion-title {
  text-decoration: underline;
}
.pkt-searchinput__suggestion:hover > *, .pkt-searchinput__suggestion:focus > *, .pkt-searchinput__suggestion:active > * {
  color: inherit;
}
.pkt-searchinput__suggestion--has-hover {
  cursor: pointer;
}
.pkt-searchinput__suggestion-title {
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.pkt-searchinput__suggestion-text {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  hyphens: auto;
}