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 %}