hof 22.8.4 → 22.9.0-beta.v1

package/package/frontend/themes/gov-uk/styles/_govuk_frontend_toolkit.scss

@@ -0,0 +1,23 @@
+// GOV.UK front end toolkit
+// Sass variables, mixins and functions
+// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets
+
+// Settings (variables)
+@import "govuk_frontend_toolkit/stylesheets/colours";                                // Colour variables
+@import "govuk_frontend_toolkit/stylesheets/font_stack";                             // Font family variables
+@import "govuk_frontend_toolkit/stylesheets/measurements";                           // Widths and gutter variables
+
+// Mixins
+@import "govuk_frontend_toolkit/stylesheets/conditionals";                           // Media query mixin
+@import "govuk_frontend_toolkit/stylesheets/device-pixels";                          // Retina image mixin
+@import "govuk_frontend_toolkit/stylesheets/grid_layout";                            // Basic grid layout mixin
+@import "govuk_frontend_toolkit/stylesheets/typography";                             // Core bold and heading mixins, also external links
+@import "govuk_frontend_toolkit/stylesheets/shims";                                  // Inline block mixin, clearfix placeholder
+
+// Mixins to generate components (chunks of UI)
+@import "govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta";
+@import "govuk_frontend_toolkit/stylesheets/design-patterns/buttons";
+@import "govuk_frontend_toolkit/stylesheets/design-patterns/breadcrumbs";
+
+// Functions
+@import "govuk_frontend_toolkit/stylesheets/url-helpers";                            // Function to output image-url, or prefixed path (Rails and Compass only)

package/package/frontend/themes/gov-uk/styles/_helpers.scss

@@ -0,0 +1,5 @@
+// Return ems from a pixel value
+// This assumes a base of 19px
+@function em($px, $base: 19) {
+  @return ($px / $base) + em;
+}

package/package/frontend/themes/gov-uk/styles/_layout.scss

@@ -0,0 +1,125 @@
+#global-header-bar {
+    @extend %site-width-container;
+    .inner-block {
+        padding: 0;
+    }
+}
+
+#content {
+    margin: 0;
+}
+
+.main {
+    @extend %site-width-container;
+    padding-bottom: $gutter;
+    @include media(desktop) {
+        padding-bottom: $gutter*3;
+    }
+}
+
+.grid-row {
+    @extend %grid-row;
+    position: relative;
+    &#content {
+        @extend %grid-row;
+    }
+}
+
+.column-full {
+    @include grid-column(1);
+}
+
+.column-one-third {
+    @include grid-column(1/3, $full-width: desktop);
+}
+
+.column-half {
+    @include grid-column(1/2, $full-width: desktop);
+}
+
+.column-two-thirds {
+    @include grid-column(2/3, $full-width: desktop);
+}
+
+.column-right {
+    @include media(desktop) {
+        float: right;
+    }
+}
+
+header {
+    @extend %contain-floats;
+}
+
+.sidebar {
+    border-top: 10px solid $mainstream-brand;
+}
+
+// layout for ie < 9
+$ie8-column-one-third: ( $site-width + $gutter ) / 3;
+$ie8-column-half: ( $site-width + $gutter ) / 2;
+$ie8-column-two-thirds: $ie8-column-one-third * 2;
+
+@mixin ie8-grid-column {
+    float: left;
+    padding: 0 $gutter-half;
+    box-sizing: content-box;
+}
+@mixin ie8-column-two-thirds {
+    @include ie8-grid-column;
+    width: $ie8-column-two-thirds - $gutter;
+}
+@mixin ie8-column-half {
+    @include ie8-grid-column;
+    width: $ie8-column-half - $gutter;
+}
+@mixin ie8-column-one-third {
+    @include ie8-grid-column;
+    width: $ie8-column-one-third - $gutter;
+}
+
+.lte-ie8 {
+    #global-header-bar, #global-breadcrumb {
+        width: $site-width;
+        max-width: inherit;
+        margin: 0 auto;
+        .inner-block {
+            margin: 0;
+            padding: 0;
+        }
+    }
+    #content {
+        width: $site-width;
+        max-width: inherit;
+        margin: 0 auto;
+        padding-bottom: 3*$gutter;
+    }
+    .grid-row {
+        width: $site-width + $gutter;
+    }
+    .column-two-thirds {
+        @include ie8-column-two-thirds;
+        .grid-row {
+            width: $ie8-column-two-thirds;
+        }
+        .column-two-thirds {
+            width: $ie8-column-two-thirds / 3 * 2 - $gutter;
+        }
+        .column-one-third {
+            width: $ie8-column-two-thirds / 3 - $gutter;
+        }
+    }
+    .column-half {
+        @include ie8-column-half;
+    }
+    .column-one-third {
+        @include ie8-column-one-third;
+    }
+    .column-right {
+        float: right;
+    }
+    .phase-banner, #back {
+        width: $site-width;
+        margin: 0 auto;
+    }
+}

package/package/frontend/themes/gov-uk/styles/_panel-indent.scss

@@ -0,0 +1,27 @@
+// Panels gov.uk elements version 2.0
+// ==========================================================================
+// Now deprecated
+
+// 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/themes/gov-uk/styles/_pdf.scss

@@ -0,0 +1,42 @@
+.pdf {
+  #global-header,
+  footer,
+  #declaration-section,
+  #skiplink-container
+  {
+    display: none;
+  }
+
+  table {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  h1 {
+    font-size: 30px;
+    margin-top: 20px;
+  }
+  img {
+    width: 240px;
+  }
+  table.table-details {
+    margin-bottom: 0;
+    border-top: 1px solid #000000;
+  }
+  table.table-details:first-of-type {
+    border-top: none;
+  }
+  table td:nth-child(2) {
+    word-wrap: break-word;
+  }
+  table td:nth-child(3) {
+    display: none;
+  }
+  table td {
+    padding: 10px 0;
+    border-bottom: 1px #ccc solid;
+  }
+  #content {
+    padding-bottom: 0;
+  }
+}

package/package/frontend/themes/gov-uk/styles/_session-timeout-dialog.scss

@@ -0,0 +1,121 @@
+.modal-dialog {
+  display: none;
+}
+
+.modal-dialog--no-js-persistent {
+  display: inline-block;
+}
+
+.js-enabled {
+  .modal-dialog--no-js-persistent {
+    display: none;
+
+    &[open], .dialog-button {
+      display: inline-block;
+    }
+  }
+
+  .modal-dialog[open] {
+    display: inline-block;
+  }
+}
+
+.modal-dialog[open] {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 90vh;
+  padding: 0;
+  margin-bottom: 0;
+  margin-top: 0;
+  position: fixed;
+  top: 50% !important;
+  -webkit-transform: translate(0, -50%);
+  -ms-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+}
+
+@media (min-width: 641px) {
+  .modal-dialog[open] {
+    padding: 0;
+  }
+}
+
+.modal-dialog__inner {
+  padding: 20px;
+}
+
+.modal-dialog #dialog-title {
+  margin-top: 0;
+}
+
+.dialog-is-open {
+  overflow: hidden;
+}
+
+dialog {
+  left: 0;
+  right: 0;
+  width: -moz-fit-content;
+  width: -webkit-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: -webkit-fit-content;
+  height: fit-content;
+  margin: auto;
+  border: solid;
+  padding: 1em;
+  background: white;
+  color: black;
+  display: none;
+  border: 5px solid black;
+
+  + .backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+  &[open] {
+    display: block;
+    box-sizing: border-box;
+    margin: 0 auto;
+    padding: 15px;
+    width: 90%;
+
+    + .backdrop, &::backdrop {
+      background: rgba(0, 0, 0, 0.8);
+    }
+  }
+}
+
+@media (min-width: 641px) {
+  dialog[open] {
+    padding: 30px;
+    margin: 30px auto;
+    max-width: 500px;
+  }
+}
+
+.js-enabled .govuk-timeout-warning-fallback {
+  display: none;
+}
+
+.tabular-numbers {
+  font-family: "ntatabularnumbers", "nta", Arial, sans-serif;
+}
+
+.dialog-exit-link {
+  @include govuk-font($size: 24);
+  display: inline-block;
+
+  @include govuk-media-query($from: tablet) {
+    @include govuk-font($size: 19);
+
+    position: relative;
+    padding: 0.526315em 0.789473em 0.263157em;
+    line-height: 1.5;
+  }
+}

package/package/frontend/themes/gov-uk/styles/_typography.scss

@@ -0,0 +1,27 @@
+.bold {
+    font-weight: bold;
+}
+.uppercase {
+    text-transform: uppercase;
+}
+
+h1 {
+    @extend .heading-large;
+}
+h2 {
+    @extend .heading-medium;
+}
+h3 {
+    @extend .heading-small;
+}
+strong {
+    font-weight: bold;
+}
+
+.new-window {
+    padding-right: 17px;
+    background: file-url("passports/new-window-link.png") right center no-repeat;
+    &:hover {
+        background-image: file-url("passports/new-window-link-blue.png");
+    }
+}

package/package/frontend/themes/gov-uk/styles/_variables.scss

@@ -0,0 +1,11 @@
+// layout
+$header-border-width: 10px;
+$header-border: $header-border-width solid $govuk-blue;
+
+// forms
+$focus-border-width: 3px;
+$focus-outline: $focus-border-width solid $yellow;
+
+// validation
+$validation-bdr-size: 3px;
+$validation-bdr-size-lg: $validation-bdr-size + 1;

package/package/frontend/themes/gov-uk/styles/govuk.scss

@@ -0,0 +1,43 @@
+// App styles
+
+// set the default image directory
+$path: "/public/images/" !default;
+
+// GOV.UK front end toolkit
+// Sass variables, mixins and functions
+// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets
+@import "govuk_frontend_toolkit";
+
+// GOV.UK elements
+// https://github.com/alphagov/govuk_elements/blob/master/packages/govuk-elements-sass/public/sass/_elements.scss
+@import "govuk-elements-sass/public/sass/elements";
+
+// Govuk frontend
+// https://github.com/alphagov/govuk-frontend-docs
+@import "govuk-frontend";
+
+// Custom
+@import "base";
+@import "layout";
+@import "typography";
+@import "variables";
+@import "helpers";
+@import "cookie-banner";
+@import "cookie-settings";
+@import "check_your_answers";
+@import "pdf";
+@import "session-timeout-dialog";
+
+// Modules
+@import "modules/validation";
+@import "modules/progressive-reveal";
+@import "modules/buttons";
+@import "modules/lists";
+@import "modules/alerts";
+@import "modules/character-count";
+
+// Pages
+@import "modules/confirm-page";
+
+// Deprecated panel style from gov.uk elements version 2.0
+@import "panel-indent";

package/package/frontend/themes/gov-uk/styles/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/themes/gov-uk/styles/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/themes/gov-uk/styles/modules/_buttons.scss

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

package/package/frontend/themes/gov-uk/styles/modules/_character-count.scss

@@ -0,0 +1,8 @@
+.maxlength-hint {
+  margin-top: 2px;
+  padding-top: 2px;
+}
+
+.textarea-error {
+  border: 2px solid $error-colour;
+}

package/package/frontend/themes/gov-uk/styles/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/themes/gov-uk/styles/modules/_lists.scss

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

package/package/frontend/themes/gov-uk/styles/modules/_progressive-reveal.scss

@@ -0,0 +1,17 @@
+.reveal {
+    float: left;
+    width: 100%;
+    .panel-indent {
+        margin-top: $gutter-half / 2;
+        margin-bottom: $gutter-half;
+    }
+}
+
+fieldset + .reveal {
+    margin-top: -$gutter-half;
+    margin-bottom: $gutter-half;
+    @include media(tablet) {
+        margin-top: -$gutter;
+        margin-bottom: $gutter;
+    }
+}

package/package/frontend/themes/gov-uk/styles/modules/_validation.scss

@@ -0,0 +1,51 @@
+.validation-summary {
+    padding-left: $gutter-half - $validation-bdr-size-lg;
+    padding-right: $gutter-half;
+    border-width: $validation-bdr-size-lg;
+
+    &:focus {
+        outline: $focus-outline;
+    }
+
+    h2 {
+        margin: 0.3em 0;
+    }
+    ul {
+        margin: 0;
+        li {
+            margin: 0;
+            padding: 3px 0;
+        }
+    }
+    a {
+        @include bold-19;
+    }
+}
+
+.govuk-form-group--error {
+    box-sizing: border-box;
+    padding-left: $gutter-half - $validation-bdr-size;
+    //border-left: $validation-bdr-size-lg solid $error-colour;
+
+    &:focus {
+        outline: $focus-outline;
+    }
+
+    .form-control {
+        margin-bottom: $validation-bdr-size;
+    }
+}
+
+.govuk-error-message {
+    display: block;
+    @include media(tablet) {
+        margin-bottom: 0.5em;
+    }
+    @include bold-19;
+    //color: $error-colour;
+}
+
+.invalid-input,
+.govuk-form-group--error .date-input {
+    border: $validation-bdr-size solid $error-colour;
+}

package/package/frontend/themes/index.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  govUK: require('./gov-uk')
+};