_forms.scss

// Forms
// ==========================================================================

// Contents:
//
// 1. Helpers
// 2. Form wrappers
// 3. Form labels
// 4. Form hints
// 5. Form controls
// 6. Form control widths
// 7. Browser accessibility fixes

// 1. Helpers
// ==========================================================================

// Fieldset is used to group more than one .form-group
fieldset {
  @extend %contain-floats;
  width: 100%;

  // Avoid extra vertical space (caused by fieldsets preventing margin collapse) when fieldsets with an h1 in the legend appear after the error-summary element.
  // (Class used instead of adjacent sibling selector for IE 8 compatibility.)
  &.after-error-summary {
    margin-top: -$gutter-half;

    @include media(tablet) {
      margin-top: -$gutter;
    }
  }
}

// Hack to let legends or elements within legends have margins in webkit browsers
legend {
  overflow: hidden;
}

// Fix left hand gap in IE7 and below
@include ie-lte(7) {
  legend {
    margin-left: -7px;
  }
}

// Remove margin under textarea in Chrome and FF
textarea {
  display: block;
}


// 2. Form wrappers
// ==========================================================================

.form-section,
.form-group {
  @extend %contain-floats;
  @include box-sizing(border-box);
}

// Form section is used to wrap .form-group and has twice its margin
.form-section {
  margin-bottom: $gutter;

  @include media(tablet) {
    margin-bottom: $gutter * 2;
  }
}

// Form group is used to wrap label and input pairs
.form-group {
  margin-bottom: $gutter-half;

  @include media(tablet) {
    margin-bottom: $gutter;
  }
}

// Form group related is used to reduce the space between label and input pairs
.form-group-related {
  margin-bottom: 10px;

  @include media(tablet) {
    margin-bottom: 20px;
  }
}

// Form group compound is used to reduce the space between label and input pairs
.form-group-compound {
  margin-bottom: 10px;
}


// 3. Form labels
// ==========================================================================

// Form labels, or for legends styled to look like labels
// TODO: Amend so there is only one label style
.form-label,
.form-label-bold {
  display: block;
  color: $text-colour;
  padding-bottom: 2px;
}

.form-label {
  @include core-19;
}

.form-label-bold {
  @include bold-19;
}

// Used for the 'or' in between block label options
.form-block {
  float: left;
  clear: left;

  margin-top: -5px;
  margin-bottom: 5px;

  @include media(tablet) {
    margin-top: 0;
    margin-bottom: 10px;
  }
}

// 4. Form hints
// ==========================================================================

// Form hints and example text are light grey and sit above a form control
.form-hint {
  @include core-19;
  display: block;
  color: $secondary-text-colour;
  font-weight: normal;

  margin-top: -2px;
  padding-bottom: 2px;
}

.form-label .form-hint,
.form-label-bold .form-hint {
  margin-top: 0;
  padding-bottom: 0;
}

// 5. Form controls
// ==========================================================================

// By default, form controls are 50% width for desktop,
// and 100% width for mobile
.form-control {
  @include box-sizing(border-box);
  @include core-19;
  width: 100%;

  padding: 5px 4px 4px;
  // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
  // as background-color and color need to always be set together, color should not be set either
  border: 2px solid $text-colour;

  // TODO: Remove 50% width set for tablet and up
  // !! BREAKING CHANGE !!
  @include media(tablet) {
    width: 50%;
  }

}

// Allow a qualifying element, remove rounded corners from inputs and textareas
// scss-lint:disable QualifyingElement
input.form-control,
textarea.form-control {
  // Disable inner shadow and remove rounded corners
  -webkit-appearance: none;
  border-radius: 0;
}

textarea.form-control {
  // Disable opacity and background image for Firefox
  opacity: 1;
  background-image: none;
}
// scss-lint:enable QualifyingElement


// 6. Form control widths
// ==========================================================================

// TODO: Update these
// Form control widths

.form-control-3-4 {
  width: 100%;

  @include media(tablet) {
    width: 75%;
  }
}

.form-control-2-3 {
  width: 100%;

  @include media(tablet) {
    width: 66.66%;
  }
}

.form-control-1-2 {
  width: 100%;

  @include media(tablet) {
    width: 50%;
  }
}

.form-control-1-3 {
  width: 100%;

  @include media(tablet) {
    width: 33.33%;
  }
}

.form-control-1-4 {
  width: 100%;

  @include media(tablet) {
    width: 25%;
  }
}

.form-control-1-8 {
  width: 100%;

  @include media(tablet) {
    width: 12.5%;
  }
}

// 7. Browser accessibility fixes
// ==========================================================================

option:active,
option:checked,
select:focus::-ms-value {
  color: $white;
  background-color: $govuk-blue;
}