@oslokommune/punkt-css/dist/css/elements/form.css

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

/* 
 * Form elements
 * https://css-tricks.com/html-inputs-and-labels-a-love-story/
 * 
 */
/* TODO: move to animation.scss */
@keyframes enter {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
/* TODO: Contemplate and decide if this should be split up to multiple files or not.
 * button is only one without pkt-form prefix. Is that ok???
 */
.pkt-form-group {
  margin-bottom: 1.5rem;
}
.pkt-form-group:focus-within {
  color: var(--pkt-color-brand-warm-blue-1000);
}
.pkt-form {
  /* EXPLICIT LABEL (recommended for use)
   * - the label is connected to an input via "for" and "id"
   */
}
.pkt-form-label {
  width: 100%;
}
.pkt-form-label > p:first-child {
  display: inline;
}
.pkt-form-help {
  margin: 0.25em 0;
  font-size: 0.875rem;
  line-height: 1.25em;
  opacity: 0.9;
}
.pkt-form-validation {
  animation: enter 0.2s ease-in forwards;
  background-color: var(--pkt-color-brand-red-1000);
  border: 2px solid var(--pkt-color-brand-red-1000);
  font-size: 0.875rem;
  line-height: 2rem;
  margin: 1rem 0 0;
  padding: 0.4375rem 0.5rem;
  transform-origin: 0 0;
}
.pkt-form-validation--warning {
  background-color: var(--pkt-color-brand-yellow-1000);
  border-color: var(--pkt-color-brand-yellow-1000);
}
.pkt-form-validation--error {
  background-color: var(--pkt-color-brand-red-1000);
  border-color: var(--pkt-color-brand-red-1000);
}
.pkt-form-input, .pkt-form-textarea {
  appearance: none;
  background-clip: padding-box;
  background-color: var(--pkt-color-brand-neutrals-white);
  border: 2px solid var(--pkt-color-brand-dark-blue-1000);
  border-radius: 0;
  color: var(--pkt-color-brand-dark-blue-1000);
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 2rem;
  margin: 0;
  padding: 0.4375rem 0.5rem;
  position: relative;
  width: 100%;
}
.pkt-form-input:focus, .pkt-form-textarea:focus {
  background-color: var(--pkt-color-brand-neutrals-white);
  border-color: var(--pkt-color-brand-warm-blue-1000);
  box-shadow: 0 0 var(--pkt-color-brand-warm-blue-1000);
  color: var(--pkt-color-brand-warm-blue-1000);
  outline: 2px solid var(--pkt-color-brand-warm-blue-1000);
}
.pkt-form-input, .pkt-form-textarea {
  /* Placeholder
   * 1. Override Firefox's default opacity
   */
}
.pkt-form-input::placeholder, .pkt-form-textarea::placeholder {
  color: var(--pkt-color-grays-gray-300);
  opacity: 1;
  /* 1 */
}
.pkt-form-input + .pkt-form-validation, .pkt-form-textarea + .pkt-form-validation {
  display: none;
}
.pkt-form-input:not(:placeholder-shown):invalid, .pkt-form-textarea:not(:placeholder-shown):invalid {
  border-color: var(--pkt-color-brand-red-1000);
}
.pkt-form-input:not(:placeholder-shown):invalid + .pkt-form-validation, .pkt-form-textarea:not(:placeholder-shown):invalid + .pkt-form-validation {
  display: inherit;
}
.pkt-form-input:disabled, .pkt-form-input[readonly], .pkt-form-textarea:disabled, .pkt-form-textarea[readonly] {
  background-color: var(--pkt-color-brand-neutrals-200);
  border-color: var(--pkt-color-grays-gray-300);
  color: var(--pkt-color-grays-gray-300);
  cursor: inherit;
}