Add govuk-template-flask-skeleton

2026-09-02 17:48:50 -04:00 · 2015-11-23 13:50:37 +00:00
parent 9c07a61224
commit a9fe2e6bb7
92 changed files with 7201 additions and 5 deletions
--- a/assets/stylesheets/govuk_elements/elements/_forms.scss
+++ b/assets/stylesheets/govuk_elements/elements/_forms.scss
@@ -0,0 +1,225 @@
+// 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%;
+  }
+}