notifications-admin/app/assets/stylesheets/govuk_elements/elements/_forms.scss

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

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

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

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

// 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 group is used to wrap label and input pairs
.form-group {
  @extend %contain-floats;
  @include box-sizing(border-box);

  float: left;
  width: 100%;

  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;
}

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

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

// Add spacing under spans within labels
legend {
  .form-label,
  .form-label-bold {
    padding-bottom: 7px;
  }
}

// Remove spacing when error messages are shown
// TODO: Move into /forms/_form-validation.scss
.error legend {
  .form-label,
  .form-label-bold {
    padding-bottom: 0;
  }
}

// Used for the 'or' in between block label options
.form-block {
  @extend %contain-floats;
  float: left;
  width: 100%;

  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-bottom: 5px;
}


// 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: 4px;
  background-color: $white;
  border: 2px solid $grey-1;

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

}

// Radio buttons
.form-radio {
  display: block;
  margin: 10px 0;

  input {
    vertical-align: middle;
    margin: -4px 5px 0 0;
  }
}

// Checkboxes
.form-checkbox {
  display: block;
  margin: $gutter-half 0;

  input {
    vertical-align: middle;
    margin: -2px 5px 0 0;
  }
}


// 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%;
  }
}