Form.scss

.form {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;

  > fieldset {
    flex: 1 1 auto;
  }

  > .btn-toolbar {
    min-height: $toolbar-total-height;
    margin-bottom: 0;
    border-top: 1px solid $border-color;
    padding-top: 13px;

    .form-group {
      margin-bottom: 0;
    }
  }

  .panel--padded > & {
    margin-left: -$panel-padding-x;
    margin-right: -$panel-padding-x;
  }
}

.form--padded {

  > fieldset,
  .btn-toolbar {
    min-height: $toolbar-total-height;
    padding: $spacer * .625 $grid-gutter-width-half;
  }
}


// Form divider lines
.form__divider::after,
.form-group::after {
  border-bottom: 1px solid $border-color-light;
  visibility: visible;
  width: 100%;
  content: "\0020";
  display: block;
}

.form__divider::after {
  margin: $spacer 0;
}

.form-group::after {
  margin: $spacer 0 #{-$spacer};
}

// Remove underline and column offset. Used on places like tree batch actions.
// Apply form--no-dividers to a form element, or form-field--no-divider to an individal
// form field.
.form--no-dividers .form-group,
.form-field--no-divider {
  padding-bottom: 0;

  &::after {
    visibility: hidden;
    content: "";
    display: none;
  }
}

.form-group {
  padding-bottom: $spacer;

  .form-group {
    padding-bottom: 0;

    &::after {
      border-bottom: 0;
      margin: 0;
      visibility: hidden;
    }
  }

  // Reset .file bootstrap overrides to default styles
  // TODO rename .file to a different class name as it conflicts with default bootstrap
  &.file {
    height: auto;
    display: block;
    cursor: auto;
    position: static;
  }

  // TODO Fix for when the .form-group--no-label class is used but there is actually a label
  &.form-group--no-label:not(.stacked) .form__field-label + .form__field-holder {
    margin-left: 0;
  }

  &.field--merge-below:after {
    border-bottom: 0;
    box-shadow: none;
  }
}

.form__field-label {
  // If word is to long force break with hyphenation
  @include break-word();
}

.form__field-holder {
  max-width: $input-max-width;
  margin-bottom: auto;
}

.form__field-message {
  display: block;
  margin: 0.5em 0;

  &--error {
    color: $red;
  }
}

.form__field-extra-label,
.form__field-description {
  color: $text-muted;
  margin-top: $input-padding-y;
  margin-bottom: $input-padding-y;
  font-size: $font-size-sm;

  &:empty {
    display: none;
  }
}

.form__field-extra-label {
  font-style: italic;
}

// Icons used in readonly fields (eg URL field in assetAdmin)
.form-control-static__icon::before {
  color: lighten($text-muted, 20%);
  vertical-align: middle;
  margin-right: 6px;
}


// Readonlys should be converted to an input
.form__field-holder p.readonly,
.form__field-holder input.readonly,
.form__field-holder span.readonly,
.readonly .form__field-holder > div {
  padding-top: $input-padding-y;
  padding-bottom: $input-padding-y;
  padding-left: $input-btn-padding-x;
  padding-right: $input-btn-padding-x;
  margin-bottom: 0;
  background-color: $input-disabled-bg;
  border: 1px solid darken($input-disabled-bg, 3%);
  @include border-radius($input-border-radius);

  &:focus {
    border-color: $input-focus-border-color;
    outline: none;
  }
}

// Fix for IE inputs not holding line-height
input[type="text"] {
  min-height: calc(#{$line-height-base} + #{$input-padding-y} * 2 + #{$input-btn-border-width} * 2);
}

// Radio / Checkbox
input[type="checkbox"],
input[type="radio"],
input.checkbox,
input.radio {
  display: inline;
  margin-right: 6px;
}


// Grouped/Nested form fields
// Nested as only as a fix for date fields within the filter panel
.form__fieldgroup > .form__fieldgroup-item {
  display: inline-block;
  margin-right: map_get($spacers, 2);
  margin-top: 8px;
  min-width: 166px;
  vertical-align: bottom; // Align fields with no labels
}

.form__fieldgroup-label {
  display: block;
  font-size: $font-size-sm;
  color: $text-muted;
}

.cms-edit-form .form__field-holder--stacked {
  .form__field-label {
    padding-left: 0;
    padding-right: 0;
  }

  .form__field-holder {
    margin-left: -$grid-gutter-width-half;
  }
}

@mixin form-responsive($breakpoint-inline, $breakpoint-inline-limit-width, $breakpoint-inline-limit-width-max) {
  @include media-breakpoint-up($breakpoint-inline) {
    .form-group {
      @include make-row();

      // Composite fields
      // TODO reduce nesting
      .form__field-holder .form-group {
        .form__field-holder,
        .form__field-label {
          @include make-col-ready();
          @include make-col(12);
        }

        .form__field-holder {
          margin-left: 0;
          left: 0;

          &.form-check {
            margin-left: $panel-padding-x;
            left: 0;
          }
        }

        // TODO make label display on the right side like normal .form__field-extra-label
        .form__field-extra-label {
          @include make-col(12);
          margin-left: 0;
        }
      }

      &::after {
        margin: $spacer $grid-gutter-width-half #{-$spacer};
        width: calc(100% - #{$grid-gutter-width}); // IE10 fix for avoiding horizontal scrollbars
      }

      &:not(.stacked) {
        .form__field-label {
          @include make-col(3);
          // Override the `<label>` default with .form-control-label styles
          padding-top: $input-padding-y;
          padding-bottom: $input-padding-y;
          margin-bottom: 0;
          display: block;
        }

        .form__field-holder {
          @include make-col-ready();
          @include make-col(9);
        }
      }
    }

    .form-group.checkbox > .form__field-holder,
    .form-group--no-label > .form__field-holder,
    .form__field-holder--no-label {
      @include make-col-offset(3);

      // IE For some reason in IE10 the gutters are not accounted for in the offset (perhaps box-sizing issue)
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        left: $grid-gutter-width;
      }
    }

    .form__field-label {
      @include make-col-ready();
      @include make-col(12);
    }

    .stacked .form__field-holder {
      @include make-col-ready();
      @include make-col(12);
      max-width: 100%;
    }

    // Outer CompositeField doesn't have label but inner CompositeField does
    .form-group--no-label .form-group .form__field-holder {
      margin-left: 0;
    }

    .form__field-extra-label {
      @include make-col-ready();
      @include make-col(9);
      @include make-col-offset(2);

      // IE10 Possibly scrollbar effects the width to push columns
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        margin-left: 0;
      }
    }

    .optionset,
    .selection-group {
      margin-top: 7px;
    }
  }

  @include media-breakpoint-up($breakpoint-inline-limit-width) {
    .form-group:not(.stacked) {
      .form__field-label {
        @include make-col(2);
      }

      .form__field-holder {
        @include make-col(8);

        // IE10 Possibly scrollbar effects the width to push columns
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
          @include make-col(6);
        }
      }
    }

    .form-group--no-label .form__field-holder,
    .form__field-holder--no-label {
      @include make-col-offset(2);
    }

    .form-group.checkbox .form__field-holder {
      // Based off of make-col-offset() mixin but adding the panel padding-x to offset
      // the checkbox width
      $_field-margin-left: percentage(calc(2 / $grid-columns));
      margin-left: calc(#{$_field-margin-left} + #{$panel-padding-x});
    }

    .stacked .form__field-holder {
      @include make-col(10);
    }

    // HTML editor to expand to maximise to the space
    .form-group.htmleditor {
      .form__field-holder {
        @include make-col(12);
      }
    }

    .form__field-extra-label {
      @include make-col(2);
      margin-left: 0;
    }
  }

  @include media-breakpoint-up($breakpoint-inline-limit-width-max) {
    .form-group:not(.stacked) {
      .form__field-holder {
        @include make-col(7);
      }
    }

    // Max-width to visually match other stacked fields + label
    .form-group.htmleditor.stacked .form__field-holder {
      @include make-col(12);
      max-width: calc(#{$input-max-width} + 16.66667%);

      // IE 11 renders the field wider than 100% with the above max-width
      @media all and (-ms-high-contrast: none) {
        *::-ms-backdrop,
        & {
          max-width: 100%;
        }
      }
    }

    .form__field-extra-label {
      @include make-col(3);
      margin-left: 0;

      // IE10 Possibly scrollbar effects the width to push columns
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        @include make-col(1);
      }
    }
  }
}

// Fix height of date-fields collapsing in IE
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
  &.form-control {
    min-height: calc(#{$input-padding-y} * 2 + #{$line-height-base} + 2px);

    // Reduce huge line-height for BS date-fields
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      line-height: $line-height-base;
    }
  }
}


.input-group .form-control {
  z-index: auto;
}

// fix vertical-align of add-ons
.input-group-addon {
  line-height: $line-height-base;
}

// TEMPORARY
// Apply .form--inline to forms to state whether or not the label and input should become inline
// @include form-responsive(turns inline, stops being full width, reduced portion of screen width is used)
.form--inline,
.ss-insert-link .form__fieldgroup,
.cms-edit-form {
  @include form-responsive(lg, xl, xxl);
}