hof 22.8.4 → 22.9.0-beta

package/package/frontend/toolkit/assets/stylesheets/govuk-elements/_forms.scss

@@ -0,0 +1,167 @@
+// Forms
+// ==========================================================================
+
+// Fieldset is used to group more than one .form-group
+fieldset {
+  width: 100%;
+  @extend %contain-floats;
+}
+
+// Form group is used to wrap label and input pairs
+.form-group {
+  float: left;
+  width: 100%;
+  @extend %contain-floats;
+  margin-bottom: $gutter-half;
+  @include media(tablet) {
+    margin-bottom: $gutter;
+  }
+}
+
+.form-group-related {
+  margin-bottom: 10px;
+  @include media(tablet) {
+    margin-bottom: 20px;
+  }
+}
+
+.form-group-compound {
+  margin-bottom: 10px;
+}
+
+
+// Form title
+.form-title {
+  margin-bottom: $gutter;
+  @include media(tablet) {
+    margin-bottom: ($gutter*1.5);
+  }
+}
+
+
+// Labels
+
+// Form labels, or for legends styled to look like labels
+.form-label,
+.form-label-bold {
+  display: block;
+  color: $text-colour;
+}
+
+.form-label {
+  @include core-19;
+  margin-bottom: 5px;
+}
+
+.form-label-bold {
+  @include bold-24;
+  margin-bottom: 0;
+  .form-hint {
+    @include core-19;
+  }
+}
+
+// Used for paragraphs in-between form elements
+.form-block {
+  float: left;
+  width: 100%;
+  @extend %contain-floats;
+}
+
+
+// Hints
+
+// Form hints & examples are light grey and sit above a form control
+.form-hint {
+  display: block;
+  color: $secondary-text-colour;
+  margin-bottom: 5px;
+  @include media (tablet) {
+    margin-top: 8px;
+  }
+}
+
+
+// Form controls
+
+// By default, form controls are 50% width for desktop,
+// and 100% width for mobile
+.form-control {
+  @include core-19;
+
+  width: 100%;
+  @include box-sizing(border-box);
+  padding: 4px;
+  background-color: $white;
+  border: 1px solid $border-colour;
+
+  // Disable webkit appearance and remove rounded corners
+  -webkit-appearance: none;
+  border-radius: 0;
+
+  @include media(tablet) {
+    width: 50%;
+  }
+}
+
+
+// Form control widths
+.form-control-3-4 {
+  width: 100%;
+  @include media(tablet) {
+    width: 75%;
+  }
+}
+
+.form-control-1-2 {
+  width: 100%;
+  @include media(tablet) {
+    width: 50%;
+  }
+}
+
+.form-control-1-4 {
+  width: 25%;
+}
+
+.form-control-1-8 {
+  width: 12.5%;
+}
+
+
+// Radio buttons
+.form-radio {
+  display: block;
+  margin: 10px 0;
+}
+.form-radio input {
+  vertical-align: middle;
+  margin: -4px 5px 0 0;
+}
+
+
+// Checkboxes
+.form-checkbox {
+  display: block;
+  margin: $gutter-half 0;
+}
+.form-checkbox input {
+  vertical-align: middle;
+  margin: -2px 5px 0 0;
+}
+
+// Buttons
+.form .button {
+  @include media(mobile) {
+    width: 100%;
+  }
+}
+
+
+// Form validation
+@import "forms/form-validation";
+
+
+// Form patterns
+@import "forms/form-date";
+@import "forms/form-block-labels";

package/package/frontend/toolkit/assets/stylesheets/govuk-elements/_helpers.scss

@@ -0,0 +1,39 @@
+// Helpers
+
+// Return ems from a pixel value
+// This assumes a base of 19px
+@function em($px, $base: 19) {
+  @return ($px / $base) + em;
+}
+
+// Want to see how the grid works?
+// add this class to the body to see how grid padding is set
+.example-highlight-grid {
+  .grid-row {
+    background:  $grey-2;
+  }
+  .column-highlight {
+    background: $grey-3;
+    width: 100%;
+  }
+}
+
+// Used to space the "back" link on example pages
+.example-back-link {
+  @include inline-block;
+  margin-top: $gutter;
+}
+
+// Hide, but not for screenreaders
+.visuallyhidden {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px; width: 1px;
+  margin: -1px; padding: 0; border: 0;
+}
+
+// Hide, only when JavaScript is enabled
+.js-enabled .js-hidden {
+  display: none;
+}

package/package/frontend/toolkit/assets/stylesheets/govuk-elements/_layout.scss

@@ -0,0 +1,67 @@
+// Layout
+// ==========================================================================
+
+// GOV.UK front end toolkit dependencies
+@import "measurements";
+@import "conditionals";
+@import "grid_layout";
+@import "helpers";
+@import "design-patterns/alpha-beta";
+
+
+// Content
+// ==========================================================================
+
+// Content wraps the entire site content block
+#content {
+  @extend %site-width-container;
+  @extend %contain-floats;
+  padding-bottom: $gutter;
+  @include media(desktop) {
+    padding-bottom: $gutter*3;
+  }
+}
+
+
+// Phase banner
+// ==========================================================================
+
+.phase-banner  {
+  @include phase-banner(alpha);
+}
+
+
+// Grid layout
+// ==========================================================================
+
+// Usage:
+// For two equal columns
+
+// <div class="grid-row">
+//   <div class="column-half">
+//
+//   </div>
+//   <div class="column-half">
+//
+//   </div>
+// </div>
+
+// Use .grid-row to define a row for grid columns to sit in
+.grid-row {
+  @extend %grid-row;
+}
+
+// Use .grid-column to create a grid column with 15px gutter
+// By default grid columns break to become full width at tablet size
+.column-quarter {
+  @include grid-column( 1/4 );
+}
+.column-half {
+  @include grid-column( 1/2 );
+}
+.column-third {
+  @include grid-column( 1/3 );
+}
+.column-two-thirds {
+  @include grid-column( 2/3 );
+}

package/package/frontend/toolkit/assets/stylesheets/govuk-elements/_lists.scss

@@ -0,0 +1,40 @@
+// Lists
+// ==========================================================================
+
+ul,
+ol {
+  padding: 0;
+}
+
+// Bulleted lists
+.list-bullet {
+  list-style-type: disc;
+  padding-left: 20px;
+}
+
+// Numbered lists
+.list-number {
+  list-style-type: decimal;
+  padding-left: 20px;
+  @include ie-lte(7) {
+    padding-left: 28px;
+  }
+}
+
+.list-bullet,
+.list-number {
+  margin-top: 5px;
+  margin-bottom: 20px;
+}
+
+.list-bullet li,
+.list-number li {
+  margin-bottom: 5px;
+}
+
+ul {
+  @extend .list-bullet;
+}
+ol {
+  @extend .list-number;
+}

package/package/frontend/toolkit/assets/stylesheets/govuk-elements/_panels.scss

@@ -0,0 +1,29 @@
+// Panels
+// ==========================================================================
+// GOV.UK front end toolkit dependencies
+@import "helpers";
+
+
+// Indented panels with a grey left hand border
+.panel-indent {
+  @extend %contain-floats;
+  clear: both;
+  border-left: 4px solid $border-colour;
+
+  padding: 10px 0 10px $gutter-half;
+  margin: ($gutter $gutter-half $gutter*1.5 0);
+}
+
+.panel-indent legend {
+  margin-top: 0;
+}
+
+// Remove bottom margin on last paragraph
+.panel-indent p:only-child,
+.panel-indent p:last-child {
+  margin-bottom: 0;
+}
+
+.panel-indent .form-group:last-child {
+  margin-bottom: 0;
+}

package/package/frontend/toolkit/assets/stylesheets/govuk-elements/_reset.scss

@@ -0,0 +1,33 @@
+// Reset
+// ==========================================================================
+// flatten all browser defaults and styles inherited from gov.uk template
+
+/* Borrowed from http://meyerweb.com/eric/tools/css/reset/ */
+div, span,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+input, textarea,
+table, caption, tbody, tfoot, thead, tr, th, td {
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  font-weight: normal;
+}

package/package/frontend/toolkit/assets/stylesheets/govuk-elements/_tables.scss

@@ -0,0 +1,33 @@
+// Tables
+// ==========================================================================
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+table th,
+table td {
+  @include core-16;
+  padding: em(12, 16) em(20, 16) em(9, 16) 0;
+
+  text-align: left;
+  color: #0b0c0c;
+  border-bottom: 1px solid $border-colour;
+}
+
+table th {
+  font-weight: 700;
+}
+
+// Right align headings for numeric content
+table th.numeric {
+  text-align: right;
+}
+
+// Use tabular numbers for numeric table cells
+table td.numeric {
+  @include core-16($tabular-numbers: true);
+  text-align: right;
+}

package/package/frontend/toolkit/assets/stylesheets/govuk-elements/forms/_form-block-labels.scss

@@ -0,0 +1,63 @@
+// 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.5);
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  cursor: pointer; // Encourage clicking on block labels
+
+  @include media(tablet) {
+    float: left;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    // width: 25%; - Test : check that text within labels will wrap
+  }
+
+  // Absolutely position inputs within label, to allow text to wrap
+  input {
+    position: absolute;
+    top: 18px;
+    left: $gutter-half;
+    cursor: pointer;
+  }
+
+  // Change border on hover
+  &:hover {
+    border-color: $black;
+  }
+}
+
+// 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 $yellow;
+}
+
+// Remove focus from radio/checkboxes
+.js-enabled .focused input:focus {
+  outline: none;
+}

package/package/frontend/toolkit/assets/stylesheets/govuk-elements/forms/_form-date.scss

@@ -0,0 +1,39 @@
+// 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;
+  }
+
+}

package/package/frontend/toolkit/assets/stylesheets/govuk-elements/forms/_form-validation.scss

@@ -0,0 +1,63 @@
+// Validation summary box
+
+.validation-summary {
+  border: 3px solid $error-colour;
+  padding: $gutter-half $gutter;
+  margin-bottom: $gutter;
+
+  @include ie-lte(6){
+    zoom: 1;
+  }
+}
+
+.validation-summary ul {
+  margin-top: 10px;
+}
+
+.validation-summary li,
+.validation-summary p {
+  @include core-16;
+}
+
+.validation-summary p {
+  margin-top: $gutter-half;
+  margin-bottom: 5px;
+}
+
+.validation-summary a {
+  color: $error-colour;
+  @include ie-lte(6) {
+    color: $error-colour !important;
+  }
+}
+
+.validation-summary .heading-small {
+  margin-top: $gutter-half;
+}
+
+
+// Validation error message box
+// .validation-error {
+//   clear: both;
+//   @extend %contain-floats;
+//   border-left: 3px solid $error-colour;
+//   padding: $gutter- $gutter;
+//   margin-bottom: $gutter-half;
+//   margin-left: -($gutter);
+// }
+
+// .validation-error .form-group {
+//   margin-bottom: 20px;
+// }
+
+// .validation-error p {
+//   margin-bottom: 10px;
+// }
+
+
+// Validation message
+.validation-message {
+  display: block;
+  @include core-16;
+  color: $error-colour;
+}

package/package/frontend/toolkit/assets/stylesheets/mixins.scss

@@ -0,0 +1,16 @@
+// App styles
+
+// govuk_frontend_toolkit
+@import "govuk_frontend_toolkit/stylesheets/colours";
+@import "govuk_frontend_toolkit/stylesheets/measurements";
+@import "govuk_frontend_toolkit/stylesheets/conditionals";
+@import "govuk_frontend_toolkit/stylesheets/shims";
+@import "govuk_frontend_toolkit/stylesheets/typography";
+@import "govuk_frontend_toolkit/stylesheets/css3";
+@import "govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta";
+@import "govuk_frontend_toolkit/stylesheets/design-patterns/buttons";
+@import "govuk_frontend_toolkit/stylesheets/grid_layout";
+
+// Custom
+@import "variables";
+@import "helpers";

package/package/frontend/toolkit/assets/stylesheets/modules/_alerts.scss

@@ -0,0 +1,73 @@
+// ==========================================================================
+// Alerts
+// ==========================================================================
+
+
+%alert {
+  border-left: 4px solid $error-colour;
+  clear: both;
+  margin: 0 0 1.05263em;
+  padding: 1.05263em;
+}
+
+
+.alert-success {
+  @extend %alert;
+  border-color: $turquoise;
+}
+
+
+.alert-info {
+  @extend %alert;
+  border-color: $grey-2;
+}
+
+
+.alert-error {
+  @extend %alert;
+  border-color: $error-colour;
+}
+
+
+.alert-complete {
+  @extend %alert;
+  background-color: $turquoise;
+  border-color: $turquoise;
+  color: $white;
+  text-align: center;
+  padding: 4.5em 1em;
+}
+
+
+.alert-header {
+  @extend .bold-medium;
+  clear: both;
+  margin-bottom: .5em;
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+
+.alert-number {
+  @extend .bold-xlarge;
+  float: left;
+  margin-right: .41666667em; /* 20px ÷ 48px font size */
+}
+
+
+.alert-message {
+  display: block;
+  overflow: hidden;
+
+  h1 {
+    margin-top: em(25);
+    margin-bottom: 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+  }
+
+}
+

package/package/frontend/toolkit/assets/stylesheets/modules/_buttons.scss

@@ -0,0 +1,5 @@
+.button + .inline-options {
+    padding-top: em(10);
+    display: inline-block;
+    line-height: 1.25;
+}

package/package/frontend/toolkit/assets/stylesheets/modules/_confirm-page.scss

@@ -0,0 +1,20 @@
+.table-details {
+  width: 100%;
+  margin-bottom: 3em;
+
+  tbody {
+    td:nth-child(1) {
+      width: 40%;
+    }
+    td:nth-child(2) {
+      width: 60%;
+    }
+    td:nth-child(3) {
+      text-align: right;
+      padding-right: 0;
+    }
+    td:not(.no-white-space) {
+      white-space: pre-wrap;
+    }
+  }
+}

package/package/frontend/toolkit/assets/stylesheets/modules/_lists.scss

@@ -0,0 +1,5 @@
+.list-spaced {
+    li {
+        margin-bottom: 1em;
+    }
+}