wagtail/client/scss/elements/_forms.scss

@use 'sass:map';
// These are the generic stylings for forms of any type.
// If you're styling something specific to the page editing interface,
// it probably ought to go in layouts/page-editor.scss
form {
  ul,
  li {
    list-style-type: none;
  }

  ul {
    margin: 0;
    padding: 0;
  }
}

fieldset {
  border: 0;
  padding: 0 0 2em;
  margin: 0;
}

legend {
  @include visuallyhidden();
}

label,
.label {
  font-weight: bold;
  color: $color-grey-1;
  font-size: 1.1em;
  display: block;
  padding: 0 0 0.8em;
  margin: 0;
  line-height: 1.3em;

  .checkbox &,
  .radio & {
    display: inline;
  }

  &.no-float {
    float: none;
  }

  &.disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  @include media-breakpoint-up(sm) {
    @include column(2);
    padding-top: 1.2em;
    padding-inline-start: 0;

    .radio_select &,
    .multiple_choice_field &,
    .model_multiple_choice_field &,
    .checkbox_select_multiple &,
    .boolean_field &,
    .model_choice_field &,
    .image_field & {
      padding-top: 0;
    }

    // Horrid specificity war
    .model_choice_field.select & {
      padding-top: 1.2em;
    }
  }
}

input:not([type='submit']),
textarea,
select,
.tagit {
  appearance: none;
  box-sizing: border-box;
  border-radius: 6px;
  width: 100%;
  font-family: $font-sans;
  border: 1px solid $color-input-border;
  padding: 0.9em 1.2em;
  background-color: $color-fieldset-hover;
  color: $color-text-input;
  font-size: 1.2em;
  font-weight: 300;

  &:hover {
    background-color: $color-white;
  }

  &:focus {
    background-color: $color-input-focus;
    border-color: $color-input-focus-border;
  }

  &:disabled,
  &[disabled],
  &:disabled:hover,
  &[disabled]:hover {
    background-color: $color-grey-4;
    cursor: not-allowed;
    color: $color-grey-2;
  }
}

.tagit {
  background-color: $color-white;
}

@media (forced-colors: $media-forced-colours) {
  .tagit,
  .field-content .tagit .tagit-choice,
  .tagit .tagit-new .ui-widget-content {
    box-shadow: inset 1000px 0 0 0 $color-black;
    color: $color-white;
    forced-color-adjust: none;
  }

  .tagit span.tagit-label:before,
  .tagit span.tagit-label {
    color: $color-black;
    forced-color-adjust: none;
  }
}

.file_field {
  .input {
    label {
      float: none;
      display: inline;
      padding: 0;
    }

    input[type='checkbox'] {
      margin-top: 5px;
    }

    a {
      &:after {
        content: ' ';
        display: block;
      }
    }
  }
}

// radio and check boxes
input[type='radio'],
input[type='checkbox'] {
  border-radius: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}

input[type='radio'] {
  display: inline-block;
  height: 1.75rem;
  width: 1.75rem;
  margin-inline-end: 0.625rem;
  position: relative;
  background: $color-white;
  border-radius: 100%;
  border: 1px solid $color-grey-4;
}

input[type='radio']:before {
  content: '';
  text-align: center;
  position: absolute;
  top: 0.1875rem;
  inset-inline-start: 0.1875rem;
  cursor: pointer;
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  padding: 4px;
  background: $color-grey-4;
  mask-image: url('#{$images-root}icons/radio-full.svg');
  mask-repeat: no-repeat;
}

input[type='radio']:checked:before {
  mask-repeat: no-repeat;
  background: $color-teal;
}

input[type='checkbox'] {
  height: 1.375rem;
  width: 1.375rem;
  position: relative;
  margin-inline-end: 5px;
  background: $color-white;
  border: 1px solid $color-grey-4;
  vertical-align: bottom;
}

input[type='checkbox']:before {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  cursor: pointer;
  display: block;
  line-height: 20px;
  width: 1rem;
  height: 1rem;
  background: transparent;
}

input[type='checkbox']:checked:before {
  background: $color-teal;
  mask-image: url('#{$images-root}icons/tick.svg');
  mask-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
  top: 2px;
  inset-inline-start: 2px;

  @media (forced-colors: active) {
    background: ButtonText;
  }
}

input[type='checkbox'][disabled]:before {
  cursor: not-allowed;
}

// Special styles to counteract Firefox's completely unwarranted assumptions about button styles
input[type='submit'],
input[type='reset'],
input[type='button'],
button {
  padding: 0 1em;

  @include media-breakpoint-up(sm) {
    &.button-small {
      height: 2em;
    }
  }
}

// Transitions
fieldset,
input,
textarea,
select {
  @include transition(background-color 0.2s ease);
}