wagtail/client/scss/components/_forms.scss

@use 'sass:map';
@use 'sass:math';
// stylelint-disable scss/comment-no-empty
// 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

// TODO: mixin,
// These these styles are currently in elements
// but the ones for the class should be here
//
// 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;
//     }
// }
.plain-checkbox-label {
  // cancel heavy / floated label styles, for labels that should appear inline against checkboxes

  float: none;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}

// TODO: mixin,
// These these styles are currently in elements
// but the ones for the classes should be here
//
// input,
// 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: inherit;
//         cursor: default;
//         color: $color-grey-4;
//     }
// }

// select boxes
.collection_choice_field .input,
.choice_field .input,
.model_choice_field .input,
.typed_choice_field .input {
  position: relative;

  // Add select arrow back on browsers where native ui has been removed
  select ~ span:after {
    border-radius: 0 6px 6px 0;
    z-index: 0;
    position: absolute;
    inset-inline-end: 0;
    top: 1px;
    bottom: 0;
    width: 1.5em;
    font-family: $font-wagtail-icons;
    content: map.get($icons, 'arrow-down'); // UI-Redesign: to be removed
    border: 1px solid $color-input-border;
    border-width: 0 0 0 1px;
    text-align: center;
    line-height: 1.4em;
    font-size: 3em;
    pointer-events: none;
    color: $color-grey-3;
    margin: 0 1px 1px 0;

    .ie & {
      display: none;
    }
  }

  // Override default select padding so the chevron will overlap with long option text
  select {
    padding-inline-end: 5em;
  }
}

// Other text
.help,
.error-message {
  border: 1px solid transparent; // ensure visible separation in Windows High Contrast mode
  font-size: 0.85em;
  font-weight: normal;
  margin: 0.5em 0 0;
}

.error-message {
  font-size: 1em;
  font-weight: bold;
  color: theme('colors.critical.200');

  @media (forced-colors: $media-forced-colours) {
    forced-color-adjust: none;
  }

  // UI-Redesign: to be added via js and styled here
  &::before {
    font-family: $font-wagtail-icons;
    vertical-align: -10%;
    content: map.get($icons, 'cross');
  }
}

.help {
  color: $color-grey-2;
}

fieldset:hover > .help,
.field.focused + .help,
.field:focus + .help,
.field:hover + .help,
li.focused > .help {
  opacity: 1;
}

.required .field > label:after,
label.required:after {
  content: '*';
  color: theme('colors.critical.200');
  font-weight: bold;
  display: inline-block;
  margin-inline-start: 0.5em;
  line-height: 1em;
  font-size: 13px;
}

.error input,
.error textarea,
.error select,
.error .tagit {
  border-color: theme('colors.critical.200');
  background-color: $color-input-error-bg;
}

// Layouts for particular kinds of of fields

// permanently show checkbox/radio help as they have no focus state
.boolean_field .help,
.radio .help {
  opacity: 1;
}

// This is expected to go on the parent of the input/select/textarea
// so in most cases .input
.iconfield, // generic
.date_field,
.time_field,
.date_time_field,
.url_field {
  .input {
    position: relative;

    &:before,
    &:after {
      font-family: $font-wagtail-icons;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      position: absolute;
      top: 0;
      height: 100%;
      line-height: 100%;
      font-size: 2em;
      color: theme('colors.grey.200');
    }

    &:before {
      inset-inline-start: 0.3em;
    }

    &:after {
      inset-inline-end: 0.5em;
    }
  }

  input:not([type='radio']),
  input:not([type='checkbox']),
  input:not([type='submit']),
  input:not([type='button']) {
    padding-inline-start: 2.5em;
  }

  // smaller fields required slight repositioning of icons
  &.field-small {
    .input {
      &:before,
      &:after {
        font-size: 1.3rem; // REMs are necessary here because IE doesn't treat generated content correctly
      }

      &:before {
        inset-inline-start: 0.5em;
      }

      &:after {
        inset-inline-end: 0.5em;
      }
    }
  }

  // special case for search spinners
  &.icon-spinner:after {
    color: $color-teal;
    opacity: 0.8;
    text-align: center;
    top: 0.3em;
  }
}

.date_field,
.date_time_field {
  .input:before {
    content: map.get($icons, 'date'); // UI-Redesign: To be removed
  }
}

.time_field {
  .input:before {
    content: map.get($icons, 'time'); // UI-Redesign: To be removed
  }
}

.url_field {
  .input:before {
    content: map.get($icons, 'link'); // UI-Redesign: To be removed
  }
}

.daterange_field {
  input:last-of-type {
    margin-top: 1.2em; // Mirrors the label 1.2em top padding.
  }
}

// This is specifically for list of radios/checkboxes
.model_multiple_choice_field .input li,
.checkbox_select_multiple .input li,
.multiple_choice_field .input li,
.choice_field .input li,
.model_multiple_choice_field .input > div > div,
.checkbox_select_multiple .input > div > div,
.multiple_choice_field .input > div > div,
.choice_field .input > div > div {
  label {
    display: inline-flex;
    align-items: center;
    width: auto;
    float: none;
    padding-top: 0; // Negates padding added to label for the group of fields as a whole
    padding-bottom: 0.8em;
  }
}

.fields > li,
.field-col {
  @include clearfix();
  padding-top: 0.5em;
  padding-bottom: 1.2em;
  list-style: none;
}

.field-row {
  @include clearfix();

  // negative margin the bottom so it doesn't add too much space
  margin-bottom: -1.2em;
}

.input {
  clear: both;
}

// field sizing and alignment
.field-small {
  input,
  textarea,
  select,
  .tagit {
    border-radius: 3px;
    padding: 0.4em 1em;
  }
}

.field {
  &.col1,
  &.col2,
  &.col3,
  &.col4,
  &.col5,
  &.col6,
  &.col7,
  &.col8,
  &.col9,
  &.col10,
  &.col11,
  &.col12 {
    clear: both;
  }
}

li.inline .field {
  &.col1,
  &.col2,
  &.col3,
  &.col4,
  &.col5,
  &.col6,
  &.col7,
  &.col8,
  &.col9,
  &.col10,
  &.col11,
  &.col12 {
    clear: none;
  }
}

// solve gutter issues of inline fields
ul.inline li:first-child,
li.inline:first-child {
  margin-inline-start: math.div(-$grid-gutter-width, 2);
}

// search-bars
.search-bar {
  .required .field > label:after {
    display: none;
  }

  .button-filter {
    height: 2.71em;
    border-color: transparent;
  }
}

// file drop zones
.drop-zone {
  border-radius: 5px;
  border: 2px dashed $color-grey-4;
  padding: $mobile-nice-padding;
  background-color: $color-grey-5;
  margin-bottom: 1em;
  text-align: center;

  .drop-zone-help {
    border: 0;
  }

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

// Transitions
// stylelint-disable-next-line no-duplicate-selectors
.help {
  @include transition(opacity 0.2s ease);
}

@include media-breakpoint-up(sm) {
  .help {
    opacity: 1;
  }

  .fields {
    max-width: 800px;
  }

  .field {
    @include row();
  }

  .field-content {
    @include column(10, 0);
  }

  .field-col {
    float: left;
    padding-inline-start: 0;

    // anything less than 4 columns or greater than 6 is impractical
    &.col4 {
      label {
        @include column(2, 0, 4);
      }

      .field-content {
        @include column(2, $padding, 4);
        padding-inline-start: 0;
      }
    }

    &.col6 {
      label {
        @include column(2, 0, 6);
      }

      .field-content {
        @include column(4, $padding, 6);
        padding-inline-start: 0;
      }
    }
  }

  .label-above {
    .field > label,
    .field > .field-content {
      display: block;
      padding: 0 0 0.8em;
      float: none;
      width: auto;
    }
  }
}

.field-comment-control {
  display: none;
}

.tab-content--comments-enabled {
  .field {
    position: relative;
  }

  .field-content {
    padding-inline-end: 45px;

    @include media-breakpoint-up(sm) {
      padding-inline-end: 60px;
    }
  }

  .widget-draftail_rich_text_area .field-content {
    padding-inline-end: 0;
  }

  .field-comment-control {
    position: absolute;
    display: block;
    top: 0;
    inset-inline-end: 0;
    height: 100%;
    line-height: 100%;

    &--object {
      inset-inline-end: 20px;

      @include media-breakpoint-up(lg) {
        inset-inline-end: 350px;
      }
    }

    button {
      @include transition(opacity 0.2s ease);
      border: 0;
      background: none;
      width: 30px;
      height: 30px;
      padding: 0;
      border-radius: 3px;
      position: absolute;
      top: 50%;
      inset-inline-end: 0;

      @include media-breakpoint-up(sm) {
        inset-inline-end: 10px;
      }

      // Hide by default, reveal on hover of parent
      @include media-breakpoint-up(md) {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%);
        inset-inline-end: 0;
      }

      .icon-reversed {
        display: none;
      }

      &:hover {
        cursor: pointer;

        // stylelint-disable max-nesting-depth
        .icon-default {
          display: none;
        }

        .icon-reversed {
          display: block;
        }
      }

      &:focus {
        opacity: 1;
        pointer-events: initial;
      }

      > svg {
        width: 35px;
        height: 35px;
        color: $color-teal;

        @media (forced-colors: $media-forced-colours) {
          color: ButtonText;
          border: 1px solid;
        }
      }

      .icon-comment {
        width: 20px;
        height: 20px;
      }
    }
  }

  .field-row .field-comment-control {
    top: 0;
  }

  .field:not(.block_field) {
    &:hover {
      .field-comment-control button {
        opacity: 1;
        pointer-events: initial;
      }
    }
  }

  .object {
    &:hover {
      .field-comment-control--object button {
        opacity: 1;
        pointer-events: initial;
      }
    }
  }

  .object.model_choice_field {
    .object-help {
      inset-inline-end: 153px;
    }
  }
}