From 73ccea4d1fcf9094246ab1846f4d65ae029e0902 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 10 Dec 2015 16:52:45 +0000 Subject: [PATCH] Add GOV.UK Elements as a submodule MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Since GOV.UK Elements is versionned now it makes sense to bring it in as a dependency. This enforces a separation between what generic stuff we’re using from Elements and what is specific to our app. The benefit is that when the generic stuff changes it will be easy to bring those changes in. This commit also bumps GOV.UK frontend toolkit to the latest version (v4.5.0). --- .gitignore | 5 +- .gitmodules | 7 +- app/assets/stylesheets/govuk_elements | 1 + .../govuk_elements/elements-page-ie6.scss | 5 - .../govuk_elements/elements-page-ie7.scss | 4 - .../govuk_elements/elements-page-ie8.scss | 4 - .../govuk_elements/elements-page.scss | 380 ------------------ .../govuk_elements/elements/_breadcrumb.scss | 50 --- .../govuk_elements/elements/_buttons.scss | 51 --- .../govuk_elements/elements/_components.scss | 9 - .../govuk_elements/elements/_details.scss | 34 -- .../elements/_elements-typography.scss | 276 ------------- .../govuk_elements/elements/_forms.scss | 225 ----------- .../govuk_elements/elements/_helpers.scss | 44 -- .../govuk_elements/elements/_icons.scss | 244 ----------- .../govuk_elements/elements/_layout.scss | 63 --- .../govuk_elements/elements/_lists.scss | 36 -- .../govuk_elements/elements/_panels.scss | 31 -- .../govuk_elements/elements/_reset.scss | 33 -- .../govuk_elements/elements/_tables.scss | 32 -- .../elements/forms/_form-block-labels.scss | 70 ---- .../elements/forms/_form-date.scss | 38 -- .../elements/forms/_form-validation.scss | 104 ----- .../stylesheets/govuk_elements/main-ie6.scss | 5 - .../stylesheets/govuk_elements/main-ie7.scss | 4 - .../stylesheets/govuk_elements/main-ie8.scss | 4 - .../stylesheets/govuk_elements/main.scss | 28 -- app/assets/stylesheets/govuk_frontend_toolkit | 1 + app/templates/components/sms-message.html | 7 + 29 files changed, 15 insertions(+), 1780 deletions(-) create mode 160000 app/assets/stylesheets/govuk_elements delete mode 100644 app/assets/stylesheets/govuk_elements/elements-page-ie6.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements-page-ie7.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements-page-ie8.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements-page.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/_breadcrumb.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/_buttons.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/_components.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/_details.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/_elements-typography.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/_forms.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/_helpers.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/_icons.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/_layout.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/_lists.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/_panels.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/_reset.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/_tables.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/forms/_form-block-labels.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/forms/_form-date.scss delete mode 100644 app/assets/stylesheets/govuk_elements/elements/forms/_form-validation.scss delete mode 100644 app/assets/stylesheets/govuk_elements/main-ie6.scss delete mode 100644 app/assets/stylesheets/govuk_elements/main-ie7.scss delete mode 100644 app/assets/stylesheets/govuk_elements/main-ie8.scss delete mode 100644 app/assets/stylesheets/govuk_elements/main.scss create mode 160000 app/assets/stylesheets/govuk_frontend_toolkit create mode 100644 app/templates/components/sms-message.html diff --git a/.gitignore b/.gitignore index a39f40595..aca6ef03d 100644 --- a/.gitignore +++ b/.gitignore @@ -62,7 +62,4 @@ target/ app/assets/stylesheets/govuk_template/.sass-cache/ .sass-cache/ cache/ -app/static/stylesheets/govuk-template* -app/static/css* -app/static/css_all.css -app/static/.webassets-cache/ \ No newline at end of file +app/static/* diff --git a/.gitmodules b/.gitmodules index d7acf1f34..698b9d0b6 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,6 @@ -[submodule "app/assets/govuk_frontend_toolkit"] - path = app/assets/govuk_frontend_toolkit +[submodule "app/assets/stylesheets/govuk_frontend_toolkit"] + path = app/assets/stylesheets/govuk_frontend_toolkit url = https://github.com/alphagov/govuk_frontend_toolkit.git +[submodule "app/assets/stylesheets/govuk_elements"] + path = app/assets/stylesheets/govuk_elements + url = https://github.com/alphagov/govuk_elements.git diff --git a/app/assets/stylesheets/govuk_elements b/app/assets/stylesheets/govuk_elements new file mode 160000 index 000000000..9e44a8d74 --- /dev/null +++ b/app/assets/stylesheets/govuk_elements @@ -0,0 +1 @@ +Subproject commit 9e44a8d74cbbab9d32fd006bfba05814c8b0dc83 diff --git a/app/assets/stylesheets/govuk_elements/elements-page-ie6.scss b/app/assets/stylesheets/govuk_elements/elements-page-ie6.scss deleted file mode 100644 index 261825a52..000000000 --- a/app/assets/stylesheets/govuk_elements/elements-page-ie6.scss +++ /dev/null @@ -1,5 +0,0 @@ -$is-ie: true; -$ie-version: 6; -$mobile-ie6: false; - -@import "elements-page"; diff --git a/app/assets/stylesheets/govuk_elements/elements-page-ie7.scss b/app/assets/stylesheets/govuk_elements/elements-page-ie7.scss deleted file mode 100644 index 37a062e4b..000000000 --- a/app/assets/stylesheets/govuk_elements/elements-page-ie7.scss +++ /dev/null @@ -1,4 +0,0 @@ -$is-ie: true; -$ie-version: 7; - -@import "elements-page"; diff --git a/app/assets/stylesheets/govuk_elements/elements-page-ie8.scss b/app/assets/stylesheets/govuk_elements/elements-page-ie8.scss deleted file mode 100644 index 7182acb2a..000000000 --- a/app/assets/stylesheets/govuk_elements/elements-page-ie8.scss +++ /dev/null @@ -1,4 +0,0 @@ -$is-ie: true; -$ie-version: 8; - -@import "elements-page"; diff --git a/app/assets/stylesheets/govuk_elements/elements-page.scss b/app/assets/stylesheets/govuk_elements/elements-page.scss deleted file mode 100644 index 4750b1121..000000000 --- a/app/assets/stylesheets/govuk_elements/elements-page.scss +++ /dev/null @@ -1,380 +0,0 @@ -@import "main"; - -// ========================================================================== -// Elements page styles -// ========================================================================== - -// These are example styles, used only for the elements pages - -.elements-index { - // Reduce top and bottom margins - .heading-medium { - margin: 1em 0 0 0; - } - // Add spacing above - .divider { - margin-top: 4em; - } -} - -// Increase spacing above headings -.heading-xlarge { - @include media(tablet) { - margin-top: em(60, 48); - margin-bottom: em(30, 48); - } -} - -// Page contents -.heading-contents { - margin-top: 3em; -} - -.list-contents li { - @include core-16; -} - -// Use for paragraphs before lists -.lead-in { - margin-bottom: 0; -} - -// Lists -.list-bullet { - margin-bottom: ($gutter*1.5); -} - - -// Example boxes -// ========================================================================== - -.example { - @extend %contain-floats; - position: relative; - overflow: hidden; - border: 1px solid $grey-2; - margin-top: $gutter-half; - margin-bottom: $gutter-half; - - padding-top: $gutter; - padding-right: $gutter-half; - padding-bottom: $gutter-half; - padding-left: $gutter-half; - - @include media(tablet) { - padding-top: $gutter*1.5; - padding-right: $gutter; - padding-bottom: $gutter; - padding-left: $gutter; - } - - &:before { - content: "EXAMPLE"; - - position: absolute; - top: 0; - left: 0; - - padding: em(4) em(15) em(4) em(15); - - @include core-14; - background: $grey-2; - color: white; - } - - // Blue text for heading sizes - .highlight { - font-style: normal; - color: $hm-government; - } - - // Fix grid layout within example boxes for IE7 and below - // where box-sizing isn't supported: http://caniuse.com/#search=box-sizing - @mixin example-box-column($width) { - width: (($site-width - $gutter) * $width) - $gutter; - } - - @include ie-lte(7){ - - // Set example box width to 900px (removing left and right padding) - $example-box-width: $site-width - ($gutter * 2); - width: $example-box-width; - - // Recalculate grid column widths - .column-quarter { - @include example-box-column( 1/4 ); - } - .column-half { - @include example-box-column( 1/2 ); - } - .column-third { - @include example-box-column( 1/3 ); - } - .column-two-thirds { - @include example-box-column( 2/3 ); - } - - // Scale images to fit grid columns - img { - width: 100%; - } - } - -} - - -// 1. Layout -// ========================================================================== - -.example-grid p { - width: 100%; - background: file-url("examples/grid.png") 0 0 repeat; - margin-bottom: 0; - height: 30px; - @include media(tablet) { - height: 60px; - } - overflow: hidden; - text-indent: -999em; -} - - -// 2. Typography -// ========================================================================== - - -// 3. Colour -// ========================================================================== - -// Colour swatches -.swatch { - width: 60px; - height: 60px; - @include border-radius(100%); - @include media(mobile) { - clear: both; - float: left; - margin-right: $gutter-half; - margin-bottom: $gutter-half; - } - @include media(tablet) { - margin: 0 auto $gutter-half auto; - } -} - -// Sass list for colour palette -$palette: ( - ("purple", $purple), - ("mauve", $mauve), - ("fuschia", $fuschia), - ("pink", $pink), - ("baby-pink", $baby-pink), - ("red", $red), - ("mellow-red", $mellow-red), - ("orange", $orange), - ("brown", $brown), - ("yellow", $yellow), - ("green", $green), - ("grass-green", $grass-green), - ("turquoise", $turquoise), - ("light-blue", $light-blue) -); - -@mixin color-swatches { - @each $color in $palette { - $color-name: nth($color, 1); - $color-var: nth($color, 2); - .swatch-#{$color-name} { - background-color: $color-var; - } - } -} - -// Generate swatch classes for each colour in palette list -@include color-swatches; - -.swatch-alpha { - background-color: $alpha-colour; -} - -.swatch-beta { - background-color: $beta-colour; -} - -.swatch-discovery { - background-color: $discovery-colour; -} - -.swatch-live { - background-color: $live-colour; -} - -.swatch-error { - background-color: $error-colour; -} - -.swatch-focus { - background-color: $focus-colour; -} - -.swatch-button-colour { - background-color: $button-colour; -} - -.swatch-black { - background-color: $black; -} - -.swatch-grey-1 { - background-color: $grey-1; -} - -.swatch-grey-2 { - background-color: $grey-2; -} - -.swatch-grey-3 { - background-color: $grey-3; -} - -.swatch-grey-4 { - background-color: $grey-4; -} - -.swatch-white { - background-color: $white; - border: 1px solid $grey-3; -} - -.swatch-text-colour { - background-color: $text-colour; -} - -.swatch-text-secondary { - background-color: $secondary-text-colour; -} - -.swatch-page-colour { - background-color: $page-colour; - border: 1px solid $grey-3; -} - -.swatch-button-colour { - background-color: $button-colour; -} - -.swatch-link-colour { - background-color: $link-colour; -} - -.swatch-link-colour-visited { - background-color: $link-visited-colour; -} - -.swatch-link-colour-hover { - background-color: $link-hover-colour; -} - -.swatch-border-colour { - background-color: $border-colour; -} - -.swatch-panel-colour { - background-color: $panel-colour; -} - -.swatch-highlight-colour { - background-color: $highlight-colour; -} - -// Colour swatch layout -.swatch-wrapper { - @include media(tablet) { - float: left; - width: 20%; - text-align: center; - } - - .heading-small { - margin-bottom: em(10); - } - - ul { - padding-bottom: $gutter-half; - @include media(mobile) { - min-height: 50px; - padding-top: 10px; - } - } - li { - @include core-16; - } - b { - font-weight: bold; - text-transform: uppercase; - } -} - - -// 4. Images and icons -// ========================================================================== - -.example-images img { - max-width: 100%; - vertical-align: top; -} - - -// 5. Data -// ========================================================================== - -.data .bold-xlarge, -.data .bold-xxlarge { - line-height: 0.8; -} - -.example .data p { - margin-bottom: 0; -} - - -// 6. Forms -// ========================================================================== - - -// 7. Buttons -// ========================================================================== - -// Increase spacing under buttons in example boxes -.example-button .button { - margin-bottom: 15px; -} - -// Remove top margin from "Creating buttons" example -.example-button .heading-small { - margin-top: 0; -} - -// Make swatch wrapper full width for "Creating buttons" example -.example-button .swatch-wrapper { - width: 100%; -} - -// Remove bottom padding to keep "Creating buttons" example -.example-button ul { - padding-bottom: 0; -} - - -// 9. Alpha beta banners -// ========================================================================== - -// Alpha -.phase-banner-alpha { - @include phase-banner($state: alpha); -} - -// Beta -.phase-banner-beta { - @include phase-banner($state: beta); -} diff --git a/app/assets/stylesheets/govuk_elements/elements/_breadcrumb.scss b/app/assets/stylesheets/govuk_elements/elements/_breadcrumb.scss deleted file mode 100644 index 0fd659f0e..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/_breadcrumb.scss +++ /dev/null @@ -1,50 +0,0 @@ -// Global breadcrumb from Alphagov - static -// https://github.com/alphagov/static/blob/da8aeeaa749093eab30286d7fc9f965533b66f47/app/assets/stylesheets/helpers/_header.scss#L224 -// Modified to use the new grid layout mixins - -#global-breadcrumb { - - @extend %grid-row; - - ol { - - @include grid-column(1); - padding-top: 0.75em; - padding-bottom: 0.75em; - - li { - - @include core-16; - float: left; - - background-image: file-url("separator.png"); - @include device-pixel-ratio() { - background-image: file-url("separator-2x.png"); - background-size: 6px 11px; - } - - background-position: 100% 50%; - background-repeat: no-repeat; - - list-style: none; - - margin-right: 0.5em; - margin-bottom: 0.4em; - margin-left: 0; - padding-right: 1em; - - a { - color: $text-colour; - } - - strong { - font-weight: normal; - } - - &:last-child { - background-image: none; - margin-right: 0 - } - } - } -} diff --git a/app/assets/stylesheets/govuk_elements/elements/_buttons.scss b/app/assets/stylesheets/govuk_elements/elements/_buttons.scss deleted file mode 100644 index c7ed26455..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/_buttons.scss +++ /dev/null @@ -1,51 +0,0 @@ -// Buttons -// ========================================================================== - -.button { - @include button ($button-colour); - @include box-sizing (border-box); - margin: 0 $gutter-half $gutter-half 0; - padding: em(10) em(15) em(5) em(15); - vertical-align: top; - @include media (mobile) { - width: 100%; - } -} - -// Fix unwanted button padding in Firefox -.button::-moz-focus-inner { - border: 0; - padding: 0; -} - -.button:focus { - outline: 3px solid $focus-colour; -} - -// Disabled buttons -.button[disabled="disabled"] { - background: $button-colour; -} - -.button[disabled="disabled"]:focus { - outline: none; -} - -// Start now buttons -.button-start, -.button-get-started { - @include bold-24; - background-image: file-url("icons/icon-pointer.png"); - background-repeat: no-repeat; - background-position: 100% 50%; - padding: em(7) em(41) em(4) em(16); - - @include device-pixel-ratio { - background-image: file-url("icons/icon-pointer-2x.png"); - background-size: 30px 19px; - } - - @include ie(6) { - background-image: file-url("icons/icon-pointer-2x.png"); - } -} diff --git a/app/assets/stylesheets/govuk_elements/elements/_components.scss b/app/assets/stylesheets/govuk_elements/elements/_components.scss deleted file mode 100644 index d5f9a613b..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/_components.scss +++ /dev/null @@ -1,9 +0,0 @@ -// Box with turquoise background and white text -// Used for transaction end pages, and Bank Holidays -.govuk-box-highlight { - margin: 1em 0 1em 0; - padding: 2em 0 1em 0; - color: $white; - background: $turquoise; - text-align: center; -} diff --git a/app/assets/stylesheets/govuk_elements/elements/_details.scss b/app/assets/stylesheets/govuk_elements/elements/_details.scss deleted file mode 100644 index 8fcec7e18..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/_details.scss +++ /dev/null @@ -1,34 +0,0 @@ -// Details -// ========================================================================== - -details { - display: block; - - summary { - display: inline-block; - color: $govuk-blue; - cursor: pointer; - position: relative; - margin-bottom: em(5); - - &:hover { - color: $link-hover-colour; - } - - &:focus { - outline: 3px solid $focus-colour; - } - } - - // Underline only summary text (not the arrow) - .summary { - text-decoration: underline; - } - - // Match fallback arrow spacing with -webkit default - .arrow { - margin-right: .35em; - font-style: normal; - } - -} diff --git a/app/assets/stylesheets/govuk_elements/elements/_elements-typography.scss b/app/assets/stylesheets/govuk_elements/elements/_elements-typography.scss deleted file mode 100644 index 88c6342bf..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/_elements-typography.scss +++ /dev/null @@ -1,276 +0,0 @@ -// Typography -// ========================================================================== - -// Increase the base font size to 19px for the main content area -// Using the core-19 mixin from the govuk_toolkit _typography.scss file - -main { - @include core-19; - -webkit-font-smoothing: antialiased; -} - -// Core font sizes -.font-xxlarge { - @include core-80; -} - -.font-xlarge { - @include core-48; -} - -.font-large { - @include core-36; -} - -.font-medium { - @include core-24; -} - -.font-small { - @include core-19; -} - -.font-xsmall { - @include core-16; -} - -// Bold font sizes -.bold-xxlarge { - @include bold-80(); -} - -.bold-xlarge { - @include bold-48(); -} - -.bold-large { - @include bold-36(); -} - -.bold-medium { - @include bold-24(); -} - -.bold-small { - @include bold-19(); -} - -.bold-xsmall { - @include bold-16(); -} - -// Common heading sizes -// Using the bold-xx mixins from the govuk_toolkit _typography.scss file -// Spacing is set in em, using the px to em function in the elements _helpers.scss file - -// Headings -.heading-xlarge { - @include bold-48(); - - margin-top: em(15, 32); - margin-bottom: em(30, 32); - - @include media(tablet) { - margin-top: em(30, 48); - margin-bottom: em(60, 48); - } - - .heading-secondary { - @include heading-27(); - - display: block; - color: $secondary-text-colour; - } - -} - -.heading-large { - @include bold-36(); - - margin-top: em(25, 24); - margin-bottom: em(10, 24); - - @include media(tablet) { - margin-top: em(45, 36); - margin-bottom: em(20, 36); - } - - .heading-secondary { - @include heading-24(); - - display: block; - color: $secondary-text-colour; - } - -} - -.heading-medium { - @include bold-24(); - - margin-top: em(25, 20); - margin-bottom: em(10, 20); - - @include media(tablet) { - margin-top: em(45, 24); - margin-bottom: em(20, 24); - } - -} - -.heading-small { - @include bold-19(); - - margin-top: em(10, 16); - margin-bottom: em(5, 16); - - @include media(tablet) { - margin-top: em(20, 19); - } - -} - -// Text -p { - margin-top: em(5, 16); - margin-bottom: em(20, 16); - - @include media(tablet) { - margin-top: em(5); - margin-bottom: em(20); - } - -} - -// Lede, or intro text -.lede { - @include core-24; -} - -// Set a max-width for text blocks -// Less than 75 characters per line of text -.text { - max-width: 30em; -} - -.text-secondary { - color: $secondary-text-colour; -} - -// Link styles -.link { - color: $link-colour; - text-decoration: underline; -} - -.link:visited { - color: $link-visited-colour; -} - -.link:hover { - color: $link-hover-colour; -} - -.link:active { - color: $link-colour; -} - -// Back link styles - with left pointing arrow - -.link-back { - @include inline-block; - position: relative; - - @include core-16; - - margin-top: $gutter-half; - margin-bottom: $gutter-half; - padding-left: 14px; - - color: $black; - - &:link, - &:visited, - &:hover, - &:active { - color: $black; - } - - text-decoration: none; - border-bottom: 1px solid $black; - - // Back arrow - left pointing black arrow - &::before { - content: ''; - display: block; - width: 0; - height: 0; - - border-top: 5px solid transparent; - border-right: 6px solid #0b0c0c; - border-bottom: 5px solid transparent; - - position: absolute; - left: 0; - top: 50%; - margin-top: -6px; - } - - // Improve arrow shape in Firefox - @-moz-document url-prefix() { - &::before { - border-top: 5px dotted rgba(255, 0, 0, 0); - border-bottom: 5px dotted rgba(255, 0, 0, 0); - } - } - - // Fallback - // IE8 doesn't support rgba and only supports the single colon syntax for :before - // IE7 doesn't support pseudo-elements, let's fallback to an image instead. - // Ref: http://caniuse.com/#search=%3Abefore, http://caniuse.com/#search=rgba - @include ie-lte(8) { - background: file-url("icon-arrow-left.png") no-repeat 0 4px; - } - -} - -// Code styles -.code { - color: black; - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 14px; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - - color: $black; - background-color: $highlight-colour; - border: 1px solid $border-colour; - padding: 4px 4px 2px 4px; -} - -// Horizontal rule style -hr { - display: block; - background: $border-colour; - border: 0; - height: 1px; - margin-top: $gutter; - margin-bottom: $gutter; - padding: 0; - @include ie-lte(7) { - color: $border-colour; - } -} diff --git a/app/assets/stylesheets/govuk_elements/elements/_forms.scss b/app/assets/stylesheets/govuk_elements/elements/_forms.scss deleted file mode 100644 index a2b94cc83..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/_forms.scss +++ /dev/null @@ -1,225 +0,0 @@ -// 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%; - } -} diff --git a/app/assets/stylesheets/govuk_elements/elements/_helpers.scss b/app/assets/stylesheets/govuk_elements/elements/_helpers.scss deleted file mode 100644 index 68caab433..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/_helpers.scss +++ /dev/null @@ -1,44 +0,0 @@ -// Helpers -// ========================================================================== - -// Path to assets for use with file-url() is not already defined -@if ($path == false) { - $path: "/public/images/"; -} - -// 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%; - } - -} - -// 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; -} diff --git a/app/assets/stylesheets/govuk_elements/elements/_icons.scss b/app/assets/stylesheets/govuk_elements/elements/_icons.scss deleted file mode 100644 index f0c683541..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/_icons.scss +++ /dev/null @@ -1,244 +0,0 @@ -// GOV.UK icons - -.icon { - background-position: 0 0; - background-repeat: no-repeat; -} - -.icon-calendar { - width: 27px; - height: 27px; - background-image: file-url("icons/icon-calendar.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-calendar-2x.png"); - background-size: 100%; - } -} - -.icon-download { - width: 30px; - height: 39px; - background-image: file-url("icons/icon-file-download.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-file-download-2x.png"); - background-size: 100%; - } -} - -.icon-important { - width: 34px; - height: 34px; - background-image: file-url("icons/icon-important.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-important-2x.png"); - background-size: 100%; - } -} - -.icon-information { - width: 27px; - height: 27px; - background-image: file-url("icons/icon-information.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-information-2x.png"); - background-size: 100%; - } -} - -.icon-locator { - width: 26px; - height: 36px; - background-image: file-url("icons/icon-locator.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-locator-2x.png"); - background-size: 100%; - } -} - -.icon-search { - width: 30px; - height: 22px; - background-color: $black; - background-image: file-url("icons/icon-search.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-search-2x.png"); - background-size: 100%; - } -} - -// GOV.UK arrow icons -.icon-pointer { - width: 30px; - height: 19px; - background-color: $black; - background-image: file-url("icons/icon-pointer.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-pointer-2x.png"); - background-size: 100%; - } -} - -.icon-pointer-black { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-pointer-black.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-pointer-black-2x.png"); - background-size: 100%; - } -} - -// GOV.UK external link icons -// TODO (Are these provided by the template?) - -// GOV.UK step icons -.icon-step-1 { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-steps/icon-step-1.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-steps/icon-step-1-2x.png"); - background-size: 100%; - } -} - -.icon-step-2 { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-steps/icon-step-2.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-steps/icon-step-2-2x.png"); - background-size: 100%; - } -} - -.icon-step-3 { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-steps/icon-step-3.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-steps/icon-step-3-2x.png"); - background-size: 100%; - } -} - -.icon-step-4 { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-steps/icon-step-4.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-steps/icon-step-4-2x.png"); - background-size: 100%; - } -} - -.icon-step-5 { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-steps/icon-step-5.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-steps/icon-step-5-2x.png"); - background-size: 100%; - } -} - -.icon-step-6 { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-steps/icon-step-6.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-steps/icon-step-6-2x.png"); - background-size: 100%; - } -} - -.icon-step-7 { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-steps/icon-step-7.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-steps/icon-step-7-2x.png"); - background-size: 100%; - } -} - -.icon-step-8 { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-steps/icon-step-8.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-steps/icon-step-8-2x.png"); - background-size: 100%; - } -} - -.icon-step-9 { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-steps/icon-step-9.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-steps/icon-step-9-2x.png"); - background-size: 100%; - } -} - -.icon-step-10 { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-steps/icon-step-10.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-steps/icon-step-10-2x.png"); - background-size: 100%; - } -} - -.icon-step-11 { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-steps/icon-step-11.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-steps/icon-step-11-2x.png"); - background-size: 100%; - } -} - -.icon-step-12 { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-steps/icon-step-12.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-steps/icon-step-12-2x.png"); - background-size: 100%; - } -} - -.icon-step-13 { - width: 23px; - height: 23px; - background-image: file-url("icons/icon-steps/icon-step-13.png"); - - @include device-pixel-ratio() { - background-image: file-url("icons/icon-steps/icon-step-13-2x.png"); - background-size: 100%; - } -} diff --git a/app/assets/stylesheets/govuk_elements/elements/_layout.scss b/app/assets/stylesheets/govuk_elements/elements/_layout.scss deleted file mode 100644 index dacae96e8..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/_layout.scss +++ /dev/null @@ -1,63 +0,0 @@ -// Layout -// ========================================================================== - -// 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 - -//
-//
-// -//
-//
-// -//
-//
- -// 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); -} diff --git a/app/assets/stylesheets/govuk_elements/elements/_lists.scss b/app/assets/stylesheets/govuk_elements/elements/_lists.scss deleted file mode 100644 index 839cd3e7b..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/_lists.scss +++ /dev/null @@ -1,36 +0,0 @@ -// Lists -// ========================================================================== - -ul, -ol { - list-style-type: none; - 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; -} - diff --git a/app/assets/stylesheets/govuk_elements/elements/_panels.scss b/app/assets/stylesheets/govuk_elements/elements/_panels.scss deleted file mode 100644 index 8bb2a8633..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/_panels.scss +++ /dev/null @@ -1,31 +0,0 @@ -// Panels -// ========================================================================== - -// Indented panels with a grey left hand border -.panel-indent { - @extend %contain-floats; - clear: both; - border-left: 5px solid $border-colour; - - padding: em(15,19); - margin-bottom: em(15,19); - - :first-child { - margin-top: 0; - } - - :only-child, - :last-child { - margin-bottom: 0; - } - -} - -.panel-indent-info { - border-left-width: 10px; -} - -// Indented panels within form groups -.form-group .panel-indent { - padding-bottom: 0; -} diff --git a/app/assets/stylesheets/govuk_elements/elements/_reset.scss b/app/assets/stylesheets/govuk_elements/elements/_reset.scss deleted file mode 100644 index d157dbeed..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/_reset.scss +++ /dev/null @@ -1,33 +0,0 @@ -// 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; -} diff --git a/app/assets/stylesheets/govuk_elements/elements/_tables.scss b/app/assets/stylesheets/govuk_elements/elements/_tables.scss deleted file mode 100644 index 9afb7b1a9..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/_tables.scss +++ /dev/null @@ -1,32 +0,0 @@ -// Tables -// ========================================================================== - -table { - border-collapse: collapse; - border-spacing: 0; - width: 100%; - - th, - td { - @include core-16; - padding: em(12, 16) em(20, 16) em(9, 16) 0; - - text-align: left; - color: $black; - border-bottom: 1px solid $border-colour; - } - - th { - font-weight: 700; - // Right align headings for numeric content - &.numeric { - text-align: right; - } - } - - // Use tabular numbers for numeric table cells - td.numeric { - @include core-16($tabular-numbers: true); - text-align: right; - } -} diff --git a/app/assets/stylesheets/govuk_elements/elements/forms/_form-block-labels.scss b/app/assets/stylesheets/govuk_elements/elements/forms/_form-block-labels.scss deleted file mode 100644 index 17321ee55..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/forms/_form-block-labels.scss +++ /dev/null @@ -1,70 +0,0 @@ -// 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; -} diff --git a/app/assets/stylesheets/govuk_elements/elements/forms/_form-date.scss b/app/assets/stylesheets/govuk_elements/elements/forms/_form-date.scss deleted file mode 100644 index c5f94c780..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/forms/_form-date.scss +++ /dev/null @@ -1,38 +0,0 @@ -// 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; - } -} diff --git a/app/assets/stylesheets/govuk_elements/elements/forms/_form-validation.scss b/app/assets/stylesheets/govuk_elements/elements/forms/_form-validation.scss deleted file mode 100644 index 2b15b7700..000000000 --- a/app/assets/stylesheets/govuk_elements/elements/forms/_form-validation.scss +++ /dev/null @@ -1,104 +0,0 @@ -// 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; - } - } -} diff --git a/app/assets/stylesheets/govuk_elements/main-ie6.scss b/app/assets/stylesheets/govuk_elements/main-ie6.scss deleted file mode 100644 index 19bc97b8d..000000000 --- a/app/assets/stylesheets/govuk_elements/main-ie6.scss +++ /dev/null @@ -1,5 +0,0 @@ -$is-ie: true; -$ie-version: 6; -$mobile-ie6: false; - -@import "main"; diff --git a/app/assets/stylesheets/govuk_elements/main-ie7.scss b/app/assets/stylesheets/govuk_elements/main-ie7.scss deleted file mode 100644 index b7d73b866..000000000 --- a/app/assets/stylesheets/govuk_elements/main-ie7.scss +++ /dev/null @@ -1,4 +0,0 @@ -$is-ie: true; -$ie-version: 7; - -@import "main"; diff --git a/app/assets/stylesheets/govuk_elements/main-ie8.scss b/app/assets/stylesheets/govuk_elements/main-ie8.scss deleted file mode 100644 index 2bfc4904c..000000000 --- a/app/assets/stylesheets/govuk_elements/main-ie8.scss +++ /dev/null @@ -1,4 +0,0 @@ -$is-ie: true; -$ie-version: 8; - -@import "main"; diff --git a/app/assets/stylesheets/govuk_elements/main.scss b/app/assets/stylesheets/govuk_elements/main.scss deleted file mode 100644 index 6e425e092..000000000 --- a/app/assets/stylesheets/govuk_elements/main.scss +++ /dev/null @@ -1,28 +0,0 @@ -// GOV.UK front end toolkit -// Sass mixins and variables -// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets - - -@import "../govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta"; -@import "../govuk_frontend_toolkit/stylesheets/design-patterns/buttons"; - -// GOV.UK elements -@import "elements/helpers"; -@import "elements/reset"; -@import "elements/elements-typography"; -@import "elements/layout"; - -@import "elements/forms"; -@import "elements/forms/form-block-labels"; -@import "elements/forms/form-date"; -@import "elements/forms/form-validation"; - -@import "elements/tables"; -@import "elements/lists"; -@import "elements/details"; -@import "elements/panels"; -@import "elements/buttons"; -@import "elements/icons"; - -@import "elements/components"; -@import "elements/breadcrumb"; diff --git a/app/assets/stylesheets/govuk_frontend_toolkit b/app/assets/stylesheets/govuk_frontend_toolkit new file mode 160000 index 000000000..26b6a60d0 --- /dev/null +++ b/app/assets/stylesheets/govuk_frontend_toolkit @@ -0,0 +1 @@ +Subproject commit 26b6a60d076c0e717ee4316c21df8938acbf42ff diff --git a/app/templates/components/sms-message.html b/app/templates/components/sms-message.html new file mode 100644 index 000000000..2b794ba68 --- /dev/null +++ b/app/templates/components/sms-message.html @@ -0,0 +1,7 @@ +{% macro sms_message(body) %} +
+
+ {{ body|placeholders }} +
+
+{% endmacro %}