diff --git a/toolkit/scss/_document.scss b/toolkit/scss/_document.scss index 5790a2df..372108b5 100644 --- a/toolkit/scss/_document.scss +++ b/toolkit/scss/_document.scss @@ -1,8 +1,9 @@ -@import "_colours.scss"; -@import "_typography.scss"; -@import "_not-ie-conditional.scss"; -@import "_shims.scss"; -@import "_css3.scss"; +@import "colours"; +@import "typography"; +@import "not-ie-conditional"; +@import "shims"; +@import "css3"; +@import "forms/questions"; .document-list { margin: 0; @@ -17,10 +18,10 @@ .document-link { @include core-19; @include box-sizing(border-box); - margin: 5px 0; - padding: 10px 0 10px 0; - position: relative; @include inline-block; + @extend %question-meta-spacing; + + position: relative; width: 100%; /* Trigger HasLayout on older IEs */ } diff --git a/toolkit/scss/forms/_combinations.scss b/toolkit/scss/forms/_combinations.scss index 0e1fc0bb..bc5f7526 100644 --- a/toolkit/scss/forms/_combinations.scss +++ b/toolkit/scss/forms/_combinations.scss @@ -21,6 +21,7 @@ $border-width: $gutter / 6; span:last-child { padding-bottom: 2px; + margin-bottom: 0; } .validation-wrapper & { diff --git a/toolkit/scss/forms/_hint.scss b/toolkit/scss/forms/_hint.scss index 5f88a220..ccf70bd0 100644 --- a/toolkit/scss/forms/_hint.scss +++ b/toolkit/scss/forms/_hint.scss @@ -1,17 +1,26 @@ -@import "_colours.scss"; -@import "_typography.scss"; +@import "colours"; +@import "typography"; @import "shared_scss/_dmspeak.scss"; +@import "questions"; %hint, .hint { @extend %markdown-description; display: block; - margin: 0 0 5px 0; color: $secondary-text-colour; clear: both; + + p:last-child { + padding-bottom: 0; + } } .hint-underneath { @extend %hint; - padding-top: 10px; + + padding-top: 18px; + + @include media(tablet) { + padding-top: 17px; + } } diff --git a/toolkit/scss/forms/_pricing.scss b/toolkit/scss/forms/_pricing.scss index bcbc8e70..ead574db 100644 --- a/toolkit/scss/forms/_pricing.scss +++ b/toolkit/scss/forms/_pricing.scss @@ -1,7 +1,7 @@ -@import "_colours.scss"; -@import "_measurements.scss"; -@import "_shims.scss"; -@import "_typography.scss"; +@import "colours"; +@import "measurements"; +@import "shims"; +@import "typography"; @include media($min-width: 959px) { .column-two-thirds .pricing { @@ -11,7 +11,9 @@ .pricing { - margin-top: $gutter-half; + @include media(tablet) { + padding-top: 7px; + } .pricing-column { position: relative; diff --git a/toolkit/scss/forms/_questions.scss b/toolkit/scss/forms/_questions.scss index 3140a6ed..bc804973 100644 --- a/toolkit/scss/forms/_questions.scss +++ b/toolkit/scss/forms/_questions.scss @@ -1,22 +1,40 @@ -@import "_colours"; -@import "_typography.scss"; +@import "colours"; +@import "typography"; @import "shared_scss/_dmspeak.scss"; @import "shared_placeholders/_visuallyhidden.scss"; + +// Spacing rules based on those found in govuk elements selection buttons +// Version: https://github.com/alphagov/govuk_elements/commit/537a4c14641377e7686ccc7586c2632c1008d7dc +%question-meta-spacing { + margin-bottom: $gutter-one-third; + + @include media(tablet) { + padding-top: 7px; + padding-bottom: 7px; + } +} + .question, %question { @extend %contain-floats; margin: 15px 0 30px 0; clear: both; - .hint { - margin-bottom: 0; - } - // This preserves the vertical margins set on the .question-headings legend { height: 100%; } + + > span { + @extend %question-meta-spacing; + } + + .question-heading { + @extend %question-meta-spacing; + + padding-top: 0; + } } .question-first { @@ -27,8 +45,8 @@ .question-heading, %question-heading { @include heading-24; + font-weight: 700; - margin: 0 0 10px 0; p { margin-bottom: 10px; @@ -39,11 +57,6 @@ } } -.question-heading-with-hint { - @extend %question-heading; - margin-bottom: 0; -} - .question-description { @include copy-16; margin: 0 0 0 0; @@ -89,27 +102,20 @@ .question-optional { @include core-19; display: block; - margin-top: 10px; - padding-bottom: 10px; } .question-advice { @extend %markdown-description; - margin-top: 10px; - margin-bottom: 10px; display: block; } -.question-optional + .question-advice { - margin-top: 0; -} - .single-question-page { + .question { margin-top: 0; .question-advice { - margin-top: 0; + padding-top: 0; } } diff --git a/toolkit/scss/forms/_selection-buttons.scss b/toolkit/scss/forms/_selection-buttons.scss index c6c9ed1d..1beadb8f 100644 --- a/toolkit/scss/forms/_selection-buttons.scss +++ b/toolkit/scss/forms/_selection-buttons.scss @@ -8,19 +8,20 @@ @import "measurements"; @import "conditionals"; @import "typography"; +@import "questions"; // By default, block labels stack vertically .selection-button { @include core-19; /* Specific to Digital Marketplace */ + @extend %question-meta-spacing; + + padding: (8px $gutter-one-third 9px 50px); display: block; float: none; clear: left; position: relative; - padding: (8px $gutter-one-third 9px 50px); - margin-bottom: $gutter-one-third; - cursor: pointer; // Encourage clicking on block labels // remove 300ms pause on mobile @@ -29,8 +30,6 @@ @include media(tablet) { float: left; - padding-top: 7px; - padding-bottom: 7px; // width: 25%; - Test : check that text within labels will wrap } diff --git a/toolkit/scss/forms/_upload.scss b/toolkit/scss/forms/_upload.scss index b1a5084a..e60a3a62 100644 --- a/toolkit/scss/forms/_upload.scss +++ b/toolkit/scss/forms/_upload.scss @@ -1,4 +1,5 @@ -@import "_typography.scss"; +@import "typography"; +@import "questions"; .file-upload-existing-value { @include core-19; @@ -7,5 +8,8 @@ .file-upload-input { @include core-19; - margin-top: 5px; + @extend %question-meta-spacing; + + padding-bottom: 0; + margin-bottom: 0; } diff --git a/toolkit/scss/forms/_validation.scss b/toolkit/scss/forms/_validation.scss index e61c1d41..abf7c22c 100644 --- a/toolkit/scss/forms/_validation.scss +++ b/toolkit/scss/forms/_validation.scss @@ -1,6 +1,7 @@ @import "colours"; @import "typography"; @import "shims"; +@import "questions"; .validation-masthead { @@ -41,21 +42,21 @@ margin: 15px 0 30px 0; @extend %contain-floats; - .question { + .question, + .question button { margin: 0; } - .question-heading, - .question-heading-with-hint { + .question-heading { padding-top: 0; } - } .validation-message { @include core-19; + @extend %question-meta-spacing; + display: block; font-weight: bold; color: $red; - padding: 5px 0 7px 0; } diff --git a/toolkit/scss/shared_scss/_dmspeak.scss b/toolkit/scss/shared_scss/_dmspeak.scss index eed45115..a11ee841 100644 --- a/toolkit/scss/shared_scss/_dmspeak.scss +++ b/toolkit/scss/shared_scss/_dmspeak.scss @@ -1,5 +1,5 @@ -@import "_typography.scss"; -@import "lists.scss"; +@import "typography"; +@import "lists"; // The following placeholders must be present in your main stylesheet: // - shared_placeholders/_dm-typography.scss @@ -41,6 +41,10 @@ @include list-spacing($list-margin-top: -10px, $list-item-margin-bottom: 0) } + p:last-child { + padding-bottom: 0; + } + ul, ol { padding-bottom: 10px; padding-left: 20px; diff --git a/toolkit/templates/forms/list-entry.html b/toolkit/templates/forms/list-entry.html index 72bcf168..4b236570 100644 --- a/toolkit/templates/forms/list-entry.html +++ b/toolkit/templates/forms/list-entry.html @@ -13,7 +13,7 @@ {% endif %}
- + {% if question_number %} {{ question_number }} diff --git a/toolkit/templates/forms/pricing.html b/toolkit/templates/forms/pricing.html index 27b3ac5f..421f6e6b 100644 --- a/toolkit/templates/forms/pricing.html +++ b/toolkit/templates/forms/pricing.html @@ -62,7 +62,7 @@ {% else %}
- + {{ question }} {% if error %} diff --git a/toolkit/templates/forms/textbox.html b/toolkit/templates/forms/textbox.html index dc3eabed..f1824596 100644 --- a/toolkit/templates/forms/textbox.html +++ b/toolkit/templates/forms/textbox.html @@ -10,7 +10,7 @@ {% endif %}