Add govuk-template-flask-skeleton

assets/stylesheets/govuk_elements/elements/forms/_form-block-labels.scss

@@ -0,0 +1,70 @@
+// Large hit area
+// Radio buttons & checkboxes
+
+// By default, block labels stack vertically
+.block-label {
+
+  display: block;
+  float: none;
+  clear: left;
+  position: relative;
+
+  background: $panel-colour;
+  border: 1px solid $panel-colour;
+  padding: (18px $gutter $gutter-half $gutter*1.8);
+
+  margin-bottom: 10px;
+  cursor: pointer; // Encourage clicking on block labels
+
+  @include media(tablet) {
+    float: left;
+    // width: 25%; - Test : check that text within labels will wrap
+  }
+
+  // Absolutely position inputs within label, to allow text to wrap
+  input {
+    position: absolute;
+    top: 15px;
+    left: $gutter-half;
+    cursor: pointer;
+    margin: 0;
+    width: 29px;
+    height: 29px;
+    @include ie(8) {
+      top: 12px;
+    }
+  }
+
+  // Change border on hover
+  &:hover {
+    border-color: $black;
+  }
+}
+
+.block-label:last-child {
+  margin-bottom: 0;
+}
+
+// To stack horizontally, use .inline on parent, to sit block labels next to each other
+.inline .block-label {
+  clear: none;
+  margin-right: 10px;
+}
+
+// Selected and focused states
+
+// Add selected state
+.js-enabled label.selected {
+  background: $white;
+  border-color: $black;
+}
+
+// Add focus to block labels
+.js-enabled label.focused {
+  outline: 3px solid $focus-colour;
+}
+
+// Remove focus from radio/checkboxes
+.js-enabled .focused input:focus {
+  outline: none;
+}

assets/stylesheets/govuk_elements/elements/forms/_form-date.scss

@@ -0,0 +1,38 @@
+// Date pattern
+
+// Hide the 'spinner' for webkit
+// and also for Firefox
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.form-date {
+
+  .form-group {
+    float: left;
+    width: 50px;
+
+    margin-right: 20px;
+    margin-bottom: 0;
+    clear: none;
+
+    label {
+      display: block;
+      margin-bottom: 5px;
+    }
+
+    input {
+      width: 100%;
+    }
+  }
+
+  .form-group-year {
+    width: 70px;
+  }
+}

assets/stylesheets/govuk_elements/elements/forms/_form-validation.scss

@@ -0,0 +1,104 @@
+// Form validation
+// ==========================================================================
+
+// Using the classname .error as it's shorter than .validation and easier to type!
+.error {
+
+  // Ensure the .error class is applied to .form-group, otherwide box-sizing(border-box) will need to be used
+  // @include box-sizing(border-box);
+  margin-right: 15px;
+
+  // Error messages should be red and bold
+  .error-message {
+    color: $error-colour;
+    font-weight: bold;
+  }
+
+  // Form inputs should have a red border
+  .form-control {
+    border: 4px solid $error-colour;
+  }
+
+  .form-hint {
+    margin-bottom: 0;
+  }
+
+}
+
+.error,
+.error-summary {
+
+  // Add a red border to the left of the field
+  border-left: 4px solid $error-colour;
+  padding-left: 10px;
+
+  @include media(tablet) {
+    border-left: 5px solid $error-colour;
+    padding-left: $gutter-half;
+  }
+}
+
+.error-message {
+  @include core-19;
+
+  display: block;
+  clear: both;
+
+  margin: 0;
+  padding: 5px 0 7px 0;
+}
+
+// Summary of multiple error messages
+.error-summary {
+
+  // Error summary has a border on all sides
+  border: 4px solid $error-colour;
+
+  margin-top: $gutter-half;
+  margin-bottom: $gutter-half;
+
+  padding: $gutter-half 10px;
+
+  @include media(tablet) {
+    border: 5px solid $error-colour;
+
+    margin-top: $gutter;
+    margin-bottom: $gutter;
+
+    padding: 20px $gutter-half $gutter-half $gutter-half;
+  }
+
+  @include ie-lte(6) {
+    zoom: 1;
+  }
+
+  // Use the GOV.UK outline focus style
+  &:focus {
+    outline: 3px solid $focus-colour;
+  }
+
+  .error-summary-heading {
+    margin-top: 0;
+  }
+
+  p {
+    margin-bottom: 10px;
+  }
+
+  .error-summary-list {
+    padding-left: 0;
+
+    li {
+
+      @include media(tablet) {
+        margin-bottom: 5px;
+      }
+    }
+
+    a {
+      color: $error-colour;
+      font-weight: bold;
+      text-decoration: underline;
+    }
+  }
+}