From e3ac13f43c2e7b7a5b9d3d7fb0ba36683a64d975 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Fri, 14 Feb 2020 17:05:53 +0000 Subject: [PATCH 1/3] Import components without re-importing base layers We currently import the settings, tools and helpers layers within each component so that users can import just a single component (e.g. `@import govuk/components/button/button`) and it'll import its own dependencies. However, Ruby Sass in particular is slow to resolve these imports, and so when importing `govuk/all`, the fact that every component imports the dependencies again has a big impact on the compilation time. By moving everything except the imports into a separate file (`_style.scss`) and including that in the original component .scss file, we can then import just the styles when importing all and shortcut all of the imports. --- src/govuk/components/_all.scss | 58 +-- .../components/accordion/_accordion.scss | 205 +---------- src/govuk/components/accordion/_style.scss | 203 +++++++++++ .../components/back-link/_back-link.scss | 62 +--- src/govuk/components/back-link/_style.scss | 61 ++++ .../components/breadcrumbs/_breadcrumbs.scss | 111 +----- src/govuk/components/breadcrumbs/_style.scss | 110 ++++++ src/govuk/components/button/_button.scss | 271 +------------- src/govuk/components/button/_style.scss | 270 ++++++++++++++ .../character-count/_character-count.scss | 28 +- .../components/character-count/_style.scss | 27 ++ .../components/checkboxes/_checkboxes.scss | 300 +-------------- src/govuk/components/checkboxes/_style.scss | 299 +++++++++++++++ .../components/date-input/_date-input.scss | 27 +- src/govuk/components/date-input/_style.scss | 26 ++ src/govuk/components/details/_details.scss | 85 +---- src/govuk/components/details/_style.scss | 84 +++++ .../error-message/_error-message.scss | 12 +- .../components/error-message/_style.scss | 11 + .../error-summary/_error-summary.scss | 56 +-- .../components/error-summary/_style.scss | 55 +++ src/govuk/components/fieldset/_fieldset.scss | 65 +--- src/govuk/components/fieldset/_style.scss | 64 ++++ .../components/file-upload/_file-upload.scss | 78 +--- src/govuk/components/file-upload/_style.scss | 77 ++++ src/govuk/components/footer/_footer.scss | 216 +---------- src/govuk/components/footer/_style.scss | 215 +++++++++++ src/govuk/components/header/_header.scss | 315 +--------------- src/govuk/components/header/_style.scss | 314 ++++++++++++++++ src/govuk/components/hint/_hint.scss | 47 +-- src/govuk/components/hint/_style.scss | 46 +++ src/govuk/components/input/_input.scss | 98 +---- src/govuk/components/input/_style.scss | 97 +++++ .../components/inset-text/_inset-text.scss | 25 +- src/govuk/components/inset-text/_style.scss | 24 ++ src/govuk/components/label/_label.scss | 42 +-- src/govuk/components/label/_style.scss | 41 +++ src/govuk/components/panel/_panel.scss | 41 +-- src/govuk/components/panel/_style.scss | 40 ++ .../phase-banner/_phase-banner.scss | 28 +- src/govuk/components/phase-banner/_style.scss | 27 ++ src/govuk/components/radios/_radios.scss | 342 +----------------- src/govuk/components/radios/_style.scss | 341 +++++++++++++++++ src/govuk/components/select/_select.scss | 54 +-- src/govuk/components/select/_style.scss | 53 +++ .../components/skip-link/_skip-link.scss | 34 +- src/govuk/components/skip-link/_style.scss | 33 ++ src/govuk/components/summary-list/_style.scss | 153 ++++++++ .../summary-list/_summary-list.scss | 154 +------- src/govuk/components/table/_style.scss | 50 +++ src/govuk/components/table/_table.scss | 51 +-- src/govuk/components/tabs/_style.scss | 138 +++++++ src/govuk/components/tabs/_tabs.scss | 139 +------ src/govuk/components/tag/_style.scss | 40 ++ src/govuk/components/tag/_tag.scss | 41 +-- src/govuk/components/textarea/_style.scss | 51 +++ src/govuk/components/textarea/_textarea.scss | 52 +-- src/govuk/components/warning-text/_style.scss | 53 +++ .../warning-text/_warning-text.scss | 54 +-- 59 files changed, 3061 insertions(+), 3033 deletions(-) create mode 100644 src/govuk/components/accordion/_style.scss create mode 100644 src/govuk/components/back-link/_style.scss create mode 100644 src/govuk/components/breadcrumbs/_style.scss create mode 100644 src/govuk/components/button/_style.scss create mode 100644 src/govuk/components/character-count/_style.scss create mode 100644 src/govuk/components/checkboxes/_style.scss create mode 100644 src/govuk/components/date-input/_style.scss create mode 100644 src/govuk/components/details/_style.scss create mode 100644 src/govuk/components/error-message/_style.scss create mode 100644 src/govuk/components/error-summary/_style.scss create mode 100644 src/govuk/components/fieldset/_style.scss create mode 100644 src/govuk/components/file-upload/_style.scss create mode 100644 src/govuk/components/footer/_style.scss create mode 100644 src/govuk/components/header/_style.scss create mode 100644 src/govuk/components/hint/_style.scss create mode 100644 src/govuk/components/input/_style.scss create mode 100644 src/govuk/components/inset-text/_style.scss create mode 100644 src/govuk/components/label/_style.scss create mode 100644 src/govuk/components/panel/_style.scss create mode 100644 src/govuk/components/phase-banner/_style.scss create mode 100644 src/govuk/components/radios/_style.scss create mode 100644 src/govuk/components/select/_style.scss create mode 100644 src/govuk/components/skip-link/_style.scss create mode 100644 src/govuk/components/summary-list/_style.scss create mode 100644 src/govuk/components/table/_style.scss create mode 100644 src/govuk/components/tabs/_style.scss create mode 100644 src/govuk/components/tag/_style.scss create mode 100644 src/govuk/components/textarea/_style.scss create mode 100644 src/govuk/components/warning-text/_style.scss diff --git a/src/govuk/components/_all.scss b/src/govuk/components/_all.scss index 8261249513..66cd15c5ce 100644 --- a/src/govuk/components/_all.scss +++ b/src/govuk/components/_all.scss @@ -1,29 +1,29 @@ -@import "accordion/accordion"; -@import "back-link/back-link"; -@import "breadcrumbs/breadcrumbs"; -@import "button/button"; -@import "checkboxes/checkboxes"; -@import "character-count/character-count"; -@import "summary-list/summary-list"; -@import "date-input/date-input"; -@import "details/details"; -@import "error-message/error-message"; -@import "error-summary/error-summary"; -@import "fieldset/fieldset"; -@import "file-upload/file-upload"; -@import "footer/footer"; -@import "hint/hint"; -@import "header/header"; -@import "input/input"; -@import "inset-text/inset-text"; -@import "label/label"; -@import "panel/panel"; -@import "phase-banner/phase-banner"; -@import "tabs/tabs"; -@import "tag/tag"; -@import "radios/radios"; -@import "select/select"; -@import "skip-link/skip-link"; -@import "table/table"; -@import "textarea/textarea"; -@import "warning-text/warning-text"; +@import "accordion/style"; +@import "back-link/style"; +@import "breadcrumbs/style"; +@import "button/style"; +@import "checkboxes/style"; +@import "character-count/style"; +@import "summary-list/style"; +@import "date-input/style"; +@import "details/style"; +@import "error-message/style"; +@import "error-summary/style"; +@import "fieldset/style"; +@import "file-upload/style"; +@import "footer/style"; +@import "hint/style"; +@import "header/style"; +@import "input/style"; +@import "inset-text/style"; +@import "label/style"; +@import "panel/style"; +@import "phase-banner/style"; +@import "tabs/style"; +@import "tag/style"; +@import "radios/style"; +@import "select/style"; +@import "skip-link/style"; +@import "table/style"; +@import "textarea/style"; +@import "warning-text/style"; diff --git a/src/govuk/components/accordion/_accordion.scss b/src/govuk/components/accordion/_accordion.scss index e18c9dc469..8b5953fd29 100644 --- a/src/govuk/components/accordion/_accordion.scss +++ b/src/govuk/components/accordion/_accordion.scss @@ -2,207 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; - -@include govuk-exports("govuk/component/accordion") { - - $govuk-accordion-link-colour: $govuk-link-colour; - $govuk-accordion-link-hover-colour: govuk-colour("light-blue"); - $govuk-accordion-border-width: 3px; - - .govuk-accordion { - @include govuk-responsive-margin(6, "bottom"); - } - - // Borders between accordion sections - .govuk-accordion__section { - padding-top: govuk-spacing(3); - } - - .govuk-accordion__section-header { - padding-top: govuk-spacing(3); - padding-bottom: govuk-spacing(3); - } - - .govuk-accordion__section-heading { - margin-top: 0; // Override browser default - margin-bottom: 0; // Override browser default - } - - // Buttons within the sections don’t need default styling - .govuk-accordion__section-button { - @include govuk-font($size: 24, $weight: bold); - display: inline-block; - margin-bottom: 0; - padding-top: govuk-spacing(3); - } - - .govuk-accordion__section-summary { - margin-top: govuk-spacing(2); - margin-bottom: 0; - } - - // Remove the bottom margin from the last item inside the content - .govuk-accordion__section-content > :last-child { - margin-bottom: 0; - } - - // JavaScript enabled - .js-enabled { - - .govuk-accordion { - // Border at the bottom of the whole accordion - border-bottom: 1px solid $govuk-border-colour; - } - - // Borders between accordion sections - .govuk-accordion__section { - padding-top: 0; - } - - // Hide the body of collapsed sections - .govuk-accordion__section-content { - display: none; - @include govuk-responsive-padding(3, "top"); - @include govuk-responsive-padding(3, "bottom"); - } - - // Show the body of expanded sections - .govuk-accordion__section--expanded .govuk-accordion__section-content { - display: block; - } - - // This is styled to look like a link not a button - .govuk-accordion__open-all { - @include govuk-font($size: 16); - position: relative; - z-index: 1; - margin: 0; - padding: 0; - border-width: 0; - color: $govuk-link-colour; - background: none; - cursor: pointer; - -webkit-appearance: none; - - @include govuk-link-common; - @include govuk-link-style-default; - - // Remove default button focus outline in Firefox - &::-moz-focus-inner { - padding: 0; - border: 0; - } - } - - // Section headers have a pointer cursor as an additional affordance - .govuk-accordion__section-header { - position: relative; - // Safe area on the right to avoid clashing with icon - padding-right: 40px; - border-top: 1px solid $govuk-border-colour; - color: $govuk-accordion-link-colour; - cursor: pointer; - } - - // For devices that can't hover such as touch devices, - // remove hover state as it can be stuck in that state (iOS). - @media (hover: none) { - .govuk-accordion__section-header:hover { - border-top-color: $govuk-accordion-link-colour; - box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour; - } - } - - // Buttons within the headers don’t need default styling - .govuk-accordion__section-button { - @include govuk-typography-common; - margin-top: 0; - margin-bottom: 0; - margin-left: 0; - padding: 0; - border-width: 0; - color: inherit; - background: none; - text-align: left; - cursor: pointer; - -webkit-appearance: none; - - &:focus { - @include govuk-focused-text; - } - - // Remove default button focus outline in Firefox - &::-moz-focus-inner { - padding: 0; - border: 0; - } - } - - // Extend the touch area of the button to span the section header - .govuk-accordion__section-button:after { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - .govuk-accordion__section-button:hover:not(:focus) { - text-decoration: underline; - } - - // For devices that can't hover such as touch devices, - // remove hover state as it can be stuck in that state (iOS). - @media (hover: none) { - .govuk-accordion__section-button:hover { - text-decoration: none; - } - } - - .govuk-accordion__controls { - text-align: right; - } - - // Display an icon to the right of each header to indicate open/closed status, - // and as an additional affordance. - .govuk-accordion__icon { - position: absolute; - top: 50%; - right: 15px; - width: 16px; - height: 16px; - margin-top: -8px; - } - - .govuk-accordion__icon:after, - .govuk-accordion__icon:before { - content: ""; - box-sizing: border-box; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 25%; - height: 25%; - margin: auto; - border: 2px solid transparent; - background-color: govuk-colour("black"); - } - - .govuk-accordion__icon:before { - width: 100%; - } - - .govuk-accordion__icon:after { - height: 100%; - } - - // Vertical bar should be hidden when section is open, to display a '-' icon - .govuk-accordion__section--expanded .govuk-accordion__icon:after { - content: " "; - display: none; - } - } -} +@import "./style"; diff --git a/src/govuk/components/accordion/_style.scss b/src/govuk/components/accordion/_style.scss new file mode 100644 index 0000000000..e3056d5f1e --- /dev/null +++ b/src/govuk/components/accordion/_style.scss @@ -0,0 +1,203 @@ +@include govuk-exports("govuk/component/accordion") { + + $govuk-accordion-link-colour: $govuk-link-colour; + $govuk-accordion-link-hover-colour: govuk-colour("light-blue"); + $govuk-accordion-border-width: 3px; + + .govuk-accordion { + @include govuk-responsive-margin(6, "bottom"); + } + + // Borders between accordion sections + .govuk-accordion__section { + padding-top: govuk-spacing(3); + } + + .govuk-accordion__section-header { + padding-top: govuk-spacing(3); + padding-bottom: govuk-spacing(3); + } + + .govuk-accordion__section-heading { + margin-top: 0; // Override browser default + margin-bottom: 0; // Override browser default + } + + // Buttons within the sections don’t need default styling + .govuk-accordion__section-button { + @include govuk-font($size: 24, $weight: bold); + display: inline-block; + margin-bottom: 0; + padding-top: govuk-spacing(3); + } + + .govuk-accordion__section-summary { + margin-top: govuk-spacing(2); + margin-bottom: 0; + } + + // Remove the bottom margin from the last item inside the content + .govuk-accordion__section-content > :last-child { + margin-bottom: 0; + } + + // JavaScript enabled + .js-enabled { + + .govuk-accordion { + // Border at the bottom of the whole accordion + border-bottom: 1px solid $govuk-border-colour; + } + + // Borders between accordion sections + .govuk-accordion__section { + padding-top: 0; + } + + // Hide the body of collapsed sections + .govuk-accordion__section-content { + display: none; + @include govuk-responsive-padding(3, "top"); + @include govuk-responsive-padding(3, "bottom"); + } + + // Show the body of expanded sections + .govuk-accordion__section--expanded .govuk-accordion__section-content { + display: block; + } + + // This is styled to look like a link not a button + .govuk-accordion__open-all { + @include govuk-font($size: 16); + position: relative; + z-index: 1; + margin: 0; + padding: 0; + border-width: 0; + color: $govuk-link-colour; + background: none; + cursor: pointer; + -webkit-appearance: none; + + @include govuk-link-common; + @include govuk-link-style-default; + + // Remove default button focus outline in Firefox + &::-moz-focus-inner { + padding: 0; + border: 0; + } + } + + // Section headers have a pointer cursor as an additional affordance + .govuk-accordion__section-header { + position: relative; + // Safe area on the right to avoid clashing with icon + padding-right: 40px; + border-top: 1px solid $govuk-border-colour; + color: $govuk-accordion-link-colour; + cursor: pointer; + } + + // For devices that can't hover such as touch devices, + // remove hover state as it can be stuck in that state (iOS). + @media (hover: none) { + .govuk-accordion__section-header:hover { + border-top-color: $govuk-accordion-link-colour; + box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour; + } + } + + // Buttons within the headers don’t need default styling + .govuk-accordion__section-button { + @include govuk-typography-common; + margin-top: 0; + margin-bottom: 0; + margin-left: 0; + padding: 0; + border-width: 0; + color: inherit; + background: none; + text-align: left; + cursor: pointer; + -webkit-appearance: none; + + &:focus { + @include govuk-focused-text; + } + + // Remove default button focus outline in Firefox + &::-moz-focus-inner { + padding: 0; + border: 0; + } + } + + // Extend the touch area of the button to span the section header + .govuk-accordion__section-button:after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + .govuk-accordion__section-button:hover:not(:focus) { + text-decoration: underline; + } + + // For devices that can't hover such as touch devices, + // remove hover state as it can be stuck in that state (iOS). + @media (hover: none) { + .govuk-accordion__section-button:hover { + text-decoration: none; + } + } + + .govuk-accordion__controls { + text-align: right; + } + + // Display an icon to the right of each header to indicate open/closed status, + // and as an additional affordance. + .govuk-accordion__icon { + position: absolute; + top: 50%; + right: 15px; + width: 16px; + height: 16px; + margin-top: -8px; + } + + .govuk-accordion__icon:after, + .govuk-accordion__icon:before { + content: ""; + box-sizing: border-box; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 25%; + height: 25%; + margin: auto; + border: 2px solid transparent; + background-color: govuk-colour("black"); + } + + .govuk-accordion__icon:before { + width: 100%; + } + + .govuk-accordion__icon:after { + height: 100%; + } + + // Vertical bar should be hidden when section is open, to display a '-' icon + .govuk-accordion__section--expanded .govuk-accordion__icon:after { + content: " "; + display: none; + } + } +} diff --git a/src/govuk/components/back-link/_back-link.scss b/src/govuk/components/back-link/_back-link.scss index 3f4c8563b4..8b5953fd29 100644 --- a/src/govuk/components/back-link/_back-link.scss +++ b/src/govuk/components/back-link/_back-link.scss @@ -2,64 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/back-link") { - - .govuk-back-link { - @include govuk-typography-responsive($size: 16); - @include govuk-link-common; - @include govuk-link-style-text; - - display: inline-block; - position: relative; - - margin-top: govuk-spacing(3); - margin-bottom: govuk-spacing(3); - - // Allow space for the arrow - padding-left: 14px; - } - - // Only add a custom underline if the component is linkable - .govuk-back-link[href] { - // Use border-bottom rather than text-decoration so that the arrow is - // underlined as well. - border-bottom: 1px solid govuk-colour("black"); - - // Underline is provided by a bottom border - text-decoration: none; - - // When the back link is focused, hide the bottom link border as the - // focus styles has a bottom border. - &:focus { - border-bottom-color: transparent; - } - } - - // Prepend left pointing arrow - .govuk-back-link:before { - @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px); - - content: ""; - - // Vertically align with the parent element - position: absolute; - - top: 0; - bottom: 0; - left: 0; - - margin: auto; - } - - @if $govuk-use-legacy-font { - // Begin adjustments for font baseline offset - // These should be removed when legacy font support is dropped - .govuk-back-link:before { - $offset: 1px; - - top: $offset * -1; - bottom: $offset; - } - } - -} +@import "./style"; diff --git a/src/govuk/components/back-link/_style.scss b/src/govuk/components/back-link/_style.scss new file mode 100644 index 0000000000..38160bea73 --- /dev/null +++ b/src/govuk/components/back-link/_style.scss @@ -0,0 +1,61 @@ +@include govuk-exports("govuk/component/back-link") { + + .govuk-back-link { + @include govuk-typography-responsive($size: 16); + @include govuk-link-common; + @include govuk-link-style-text; + + display: inline-block; + position: relative; + + margin-top: govuk-spacing(3); + margin-bottom: govuk-spacing(3); + + // Allow space for the arrow + padding-left: 14px; + } + + // Only add a custom underline if the component is linkable + .govuk-back-link[href] { + // Use border-bottom rather than text-decoration so that the arrow is + // underlined as well. + border-bottom: 1px solid govuk-colour("black"); + + // Underline is provided by a bottom border + text-decoration: none; + + // When the back link is focused, hide the bottom link border as the + // focus styles has a bottom border. + &:focus { + border-bottom-color: transparent; + } + } + + // Prepend left pointing arrow + .govuk-back-link:before { + @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px); + + content: ""; + + // Vertically align with the parent element + position: absolute; + + top: 0; + bottom: 0; + left: 0; + + margin: auto; + } + + @if $govuk-use-legacy-font { + // Begin adjustments for font baseline offset + // These should be removed when legacy font support is dropped + .govuk-back-link:before { + $offset: 1px; + + top: $offset * -1; + bottom: $offset; + } + } + +} diff --git a/src/govuk/components/breadcrumbs/_breadcrumbs.scss b/src/govuk/components/breadcrumbs/_breadcrumbs.scss index 14d2e2c2ac..8b5953fd29 100644 --- a/src/govuk/components/breadcrumbs/_breadcrumbs.scss +++ b/src/govuk/components/breadcrumbs/_breadcrumbs.scss @@ -2,113 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/breadcrumbs") { - - // Size of chevron (excluding border) - $chevron-size: 7px; - - // Size of chevron border - $chevron-border-width: 1px; - - // Colour of chevron - $chevron-border-colour: $govuk-secondary-text-colour; - - // Calculated altitude (△↕) of the right-angled isosceles chevron with sides - // of length 8 (7px + 1px border): - // - // √(8² + 8²) * 0.5 ≅ 5.655 - $chevron-altitude-calculated: 5.655px; - - .govuk-breadcrumbs { - @include govuk-font($size: 16); - @include govuk-text-colour; - - margin-top: govuk-spacing(3); - margin-bottom: govuk-spacing(2); - } - - .govuk-breadcrumbs__list { - @include govuk-clearfix; - - margin: 0; - padding: 0; - list-style-type: none; - } - - .govuk-breadcrumbs__list-item { - - display: inline-block; - position: relative; - - margin-bottom: govuk-spacing(1); - - // Add both margin and padding such that the chevron appears centrally - // between each breadcrumb item - margin-left: govuk-spacing(2); - padding-left: govuk-spacing(2) + $chevron-altitude-calculated; - - float: left; - - // Create a chevron using a box with borders on two sides, rotated 45deg. - &:before { - content: ""; - display: block; - - position: absolute; - - @if $govuk-use-legacy-font { - // Begin adjustments for font baseline offset - // These should be removed when legacy font support is dropped - top: -1px; - bottom: 1px; - - } @else { - top: 0; - bottom: 0; - } - - // Offset by the difference between the width of the non-rotated square - // and its width when rotated - left: (($chevron-altitude-calculated * -2) + $chevron-size + $chevron-border-width); - - width: $chevron-size; - height: $chevron-size; - - margin: auto 0; - - transform: rotate(45deg); - - border: solid; - border-width: $chevron-border-width $chevron-border-width 0 0; - border-color: $chevron-border-colour; - - // Fall back to a greater than sign for IE8 - @include govuk-if-ie8 { - content: "\003e"; // Greater than sign (>) - width: auto; - height: auto; - border: 0; - color: $chevron-border-colour; - - // IE8 doesn't seem to like rendering pseudo-elements using @font-faces, - // so fall back to using another sans-serif font to render the chevron. - font-family: Arial, sans-serif; - } - } - - &:first-child { - margin-left: 0; - padding-left: 0; - - &:before { - content: none; - display: none; - } - } - } - - .govuk-breadcrumbs__link { - @include govuk-link-common; - @include govuk-link-style-text; - } -} +@import "./style"; diff --git a/src/govuk/components/breadcrumbs/_style.scss b/src/govuk/components/breadcrumbs/_style.scss new file mode 100644 index 0000000000..fa37ee9b83 --- /dev/null +++ b/src/govuk/components/breadcrumbs/_style.scss @@ -0,0 +1,110 @@ +@include govuk-exports("govuk/component/breadcrumbs") { + + // Size of chevron (excluding border) + $chevron-size: 7px; + + // Size of chevron border + $chevron-border-width: 1px; + + // Colour of chevron + $chevron-border-colour: $govuk-secondary-text-colour; + + // Calculated altitude (△↕) of the right-angled isosceles chevron with sides + // of length 8 (7px + 1px border): + // + // √(8² + 8²) * 0.5 ≅ 5.655 + $chevron-altitude-calculated: 5.655px; + + .govuk-breadcrumbs { + @include govuk-font($size: 16); + @include govuk-text-colour; + + margin-top: govuk-spacing(3); + margin-bottom: govuk-spacing(2); + } + + .govuk-breadcrumbs__list { + @include govuk-clearfix; + + margin: 0; + padding: 0; + list-style-type: none; + } + + .govuk-breadcrumbs__list-item { + + display: inline-block; + position: relative; + + margin-bottom: govuk-spacing(1); + + // Add both margin and padding such that the chevron appears centrally + // between each breadcrumb item + margin-left: govuk-spacing(2); + padding-left: govuk-spacing(2) + $chevron-altitude-calculated; + + float: left; + + // Create a chevron using a box with borders on two sides, rotated 45deg. + &:before { + content: ""; + display: block; + + position: absolute; + + @if $govuk-use-legacy-font { + // Begin adjustments for font baseline offset + // These should be removed when legacy font support is dropped + top: -1px; + bottom: 1px; + + } @else { + top: 0; + bottom: 0; + } + + // Offset by the difference between the width of the non-rotated square + // and its width when rotated + left: (($chevron-altitude-calculated * -2) + $chevron-size + $chevron-border-width); + + width: $chevron-size; + height: $chevron-size; + + margin: auto 0; + + transform: rotate(45deg); + + border: solid; + border-width: $chevron-border-width $chevron-border-width 0 0; + border-color: $chevron-border-colour; + + // Fall back to a greater than sign for IE8 + @include govuk-if-ie8 { + content: "\003e"; // Greater than sign (>) + width: auto; + height: auto; + border: 0; + color: $chevron-border-colour; + + // IE8 doesn't seem to like rendering pseudo-elements using @font-faces, + // so fall back to using another sans-serif font to render the chevron. + font-family: Arial, sans-serif; + } + } + + &:first-child { + margin-left: 0; + padding-left: 0; + + &:before { + content: none; + display: none; + } + } + } + + .govuk-breadcrumbs__link { + @include govuk-link-common; + @include govuk-link-style-text; + } +} diff --git a/src/govuk/components/button/_button.scss b/src/govuk/components/button/_button.scss index f2de6f65d4..8b5953fd29 100644 --- a/src/govuk/components/button/_button.scss +++ b/src/govuk/components/button/_button.scss @@ -2,273 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/button") { - $govuk-button-colour: govuk-colour("green", $legacy: #00823b); // sass-lint:disable no-color-literals - $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%); - $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%); - $govuk-button-text-colour: govuk-colour("white"); - - // Secondary button variables - $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3"); - $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%); - $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%); - $govuk-secondary-button-text-colour: govuk-colour("black"); - - // Warning button variables - $govuk-warning-button-colour: govuk-colour("red"); - $govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%); - $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%); - $govuk-warning-button-text-colour: govuk-colour("white"); - - // Because the shadow (s0) is visually 'part of' the button, we need to reduce - // the height of the button to compensate by adjusting its padding (s1) and - // increase the bottom margin to include it (s2). - $button-shadow-size: $govuk-border-width-form-element; - - .govuk-button { - @include govuk-font($size: 19, $line-height: 19px); - - box-sizing: border-box; - display: inline-block; - position: relative; - width: 100%; - margin-top: 0; - @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2 - padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1 - border: $govuk-border-width-form-element solid transparent; - border-radius: 0; - color: $govuk-button-text-colour; - background-color: $govuk-button-colour; - box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0 - text-align: center; - vertical-align: top; - cursor: pointer; - -webkit-appearance: none; - - @include govuk-if-ie8 { - border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; - } - - @include govuk-media-query($from: tablet) { - width: auto; - } - - // Ensure that any global link styles are overridden - &:link, - &:visited, - &:active, - &:hover { - color: $govuk-button-text-colour; - text-decoration: none; - } - - // Fix unwanted button padding in Firefox - &::-moz-focus-inner { - padding: 0; - border: 0; - } - - &:hover { - background-color: $govuk-button-hover-colour; - } - - &:active { - // Bump the button down so it looks like its being pressed in - top: $button-shadow-size; - - @include govuk-if-ie8 { - border-bottom-width: 0; - } - } - - &:focus { - border-color: $govuk-focus-colour; - // When colours are overridden, for example when users have a dark mode, - // backgrounds and box-shadows disappear, so we need to ensure there's a - // transparent outline which will be set to a visible colour. - // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines - @include govuk-not-ie8 { - outline: $govuk-focus-width solid transparent; - } - // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines. - @include govuk-if-ie8 { - color: $govuk-focus-text-colour; - background-color: $govuk-focus-colour; - } - box-shadow: inset 0 0 0 1px $govuk-focus-colour; - } - - // alphagov/govuk_template includes a specific a:link:focus selector - // designed to make unvisited links a slightly darker blue when focussed, so - // we need to override the text colour for that combination of selectors so - // so that unvisited links styled as buttons do not end up with dark blue - // text when focussed. - @include govuk-compatibility(govuk_template) { - &:link:focus { - color: $govuk-button-text-colour; - } - } - - &:focus:not(:active):not(:hover) { - border-color: $govuk-focus-colour; - color: $govuk-focus-text-colour; - background-color: $govuk-focus-colour; - box-shadow: 0 2px 0 $govuk-focus-text-colour; - } - - // The following adjustments do not work for as - // non-container elements cannot include pseudo elements (i.e. ::before). - - // Use a pseudo element to expand the click target area to include the - // button's shadow as well, in case users try to click it. - &::before { - content: ""; - display: block; - - position: absolute; - - top: -$govuk-border-width-form-element; - right: -$govuk-border-width-form-element; - bottom: -($govuk-border-width-form-element + $button-shadow-size); - left: -$govuk-border-width-form-element; - - background: transparent; - } - - // When the button is active it is shifted down by $button-shadow-size to - // denote a 'pressed' state. If the user happened to click at the very top - // of the button, their mouse is no longer over the button (because it has - // 'moved beneath them') and so the click event is not fired. - // - // This corrects that by shifting the top of the pseudo element so that it - // continues to cover the area that the user originally clicked, which means - // the click event is still fired. - // - // 🎉 - &:active::before { - top: -($govuk-border-width-form-element + $button-shadow-size); - } - } - - .govuk-button--disabled, - .govuk-button[disabled="disabled"], - .govuk-button[disabled] { - opacity: (.5); - - &:hover { - background-color: $govuk-button-colour; - cursor: default; - } - - &:focus { - outline: none; - } - - &:active { - top: 0; - box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0 - @include govuk-if-ie8 { - border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0 - } - } - } - - .govuk-button--secondary { - background-color: $govuk-secondary-button-colour; - box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour; - - &, - &:link, - &:visited, - &:active, - &:hover { - color: $govuk-secondary-button-text-colour; - } - - // alphagov/govuk_template includes a specific a:link:focus selector - // designed to make unvisited links a slightly darker blue when focussed, so - // we need to override the text colour for that combination of selectors so - // so that unvisited links styled as buttons do not end up with dark blue - // text when focussed. - @include govuk-compatibility(govuk_template) { - &:link:focus { - color: $govuk-secondary-button-text-colour; - } - } - - &:hover { - background-color: $govuk-secondary-button-hover-colour; - - &[disabled] { - background-color: $govuk-secondary-button-colour; - } - } - } - - .govuk-button--warning { - background-color: $govuk-warning-button-colour; - box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour; - - &, - &:link, - &:visited, - &:active, - &:hover { - color: $govuk-warning-button-text-colour; - } - - // alphagov/govuk_template includes a specific a:link:focus selector - // designed to make unvisited links a slightly darker blue when focussed, so - // we need to override the text colour for that combination of selectors so - // so that unvisited links styled as buttons do not end up with dark blue - // text when focussed. - @include govuk-compatibility(govuk_template) { - &:link:focus { - color: $govuk-warning-button-text-colour; - } - } - - &:hover { - background-color: $govuk-warning-button-hover-colour; - - &[disabled] { - background-color: $govuk-warning-button-colour; - } - } - } - - .govuk-button--start { - @include govuk-typography-weight-bold; - @include govuk-typography-responsive($size: 24, $override-line-height: 1); - - display: inline-flex; - min-height: auto; - - justify-content: center; - } - - .govuk-button__start-icon { - margin-left: govuk-spacing(1); - - @include govuk-media-query($from: desktop) { - margin-left: govuk-spacing(2); - } - vertical-align: middle; - flex-shrink: 0; - align-self: center; - } - - @if $govuk-use-legacy-font { - // Begin adjustments for font baseline offset when using v1 of nta - $offset: 2; - - .govuk-button { - padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1 - padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1 - } - - .govuk-button__start-icon { - margin-top: -3px; - } - } -} +@import "./style"; diff --git a/src/govuk/components/button/_style.scss b/src/govuk/components/button/_style.scss new file mode 100644 index 0000000000..f86ee31ddb --- /dev/null +++ b/src/govuk/components/button/_style.scss @@ -0,0 +1,270 @@ +@include govuk-exports("govuk/component/button") { + $govuk-button-colour: govuk-colour("green", $legacy: #00823b); // sass-lint:disable no-color-literals + $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%); + $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%); + $govuk-button-text-colour: govuk-colour("white"); + + // Secondary button variables + $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3"); + $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%); + $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%); + $govuk-secondary-button-text-colour: govuk-colour("black"); + + // Warning button variables + $govuk-warning-button-colour: govuk-colour("red"); + $govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%); + $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%); + $govuk-warning-button-text-colour: govuk-colour("white"); + + // Because the shadow (s0) is visually 'part of' the button, we need to reduce + // the height of the button to compensate by adjusting its padding (s1) and + // increase the bottom margin to include it (s2). + $button-shadow-size: $govuk-border-width-form-element; + + .govuk-button { + @include govuk-font($size: 19, $line-height: 19px); + + box-sizing: border-box; + display: inline-block; + position: relative; + width: 100%; + margin-top: 0; + @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2 + padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1 + border: $govuk-border-width-form-element solid transparent; + border-radius: 0; + color: $govuk-button-text-colour; + background-color: $govuk-button-colour; + box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0 + text-align: center; + vertical-align: top; + cursor: pointer; + -webkit-appearance: none; + + @include govuk-if-ie8 { + border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; + } + + @include govuk-media-query($from: tablet) { + width: auto; + } + + // Ensure that any global link styles are overridden + &:link, + &:visited, + &:active, + &:hover { + color: $govuk-button-text-colour; + text-decoration: none; + } + + // Fix unwanted button padding in Firefox + &::-moz-focus-inner { + padding: 0; + border: 0; + } + + &:hover { + background-color: $govuk-button-hover-colour; + } + + &:active { + // Bump the button down so it looks like its being pressed in + top: $button-shadow-size; + + @include govuk-if-ie8 { + border-bottom-width: 0; + } + } + + &:focus { + border-color: $govuk-focus-colour; + // When colours are overridden, for example when users have a dark mode, + // backgrounds and box-shadows disappear, so we need to ensure there's a + // transparent outline which will be set to a visible colour. + // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines + @include govuk-not-ie8 { + outline: $govuk-focus-width solid transparent; + } + // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines. + @include govuk-if-ie8 { + color: $govuk-focus-text-colour; + background-color: $govuk-focus-colour; + } + box-shadow: inset 0 0 0 1px $govuk-focus-colour; + } + + // alphagov/govuk_template includes a specific a:link:focus selector + // designed to make unvisited links a slightly darker blue when focussed, so + // we need to override the text colour for that combination of selectors so + // so that unvisited links styled as buttons do not end up with dark blue + // text when focussed. + @include govuk-compatibility(govuk_template) { + &:link:focus { + color: $govuk-button-text-colour; + } + } + + &:focus:not(:active):not(:hover) { + border-color: $govuk-focus-colour; + color: $govuk-focus-text-colour; + background-color: $govuk-focus-colour; + box-shadow: 0 2px 0 $govuk-focus-text-colour; + } + + // The following adjustments do not work for as + // non-container elements cannot include pseudo elements (i.e. ::before). + + // Use a pseudo element to expand the click target area to include the + // button's shadow as well, in case users try to click it. + &::before { + content: ""; + display: block; + + position: absolute; + + top: -$govuk-border-width-form-element; + right: -$govuk-border-width-form-element; + bottom: -($govuk-border-width-form-element + $button-shadow-size); + left: -$govuk-border-width-form-element; + + background: transparent; + } + + // When the button is active it is shifted down by $button-shadow-size to + // denote a 'pressed' state. If the user happened to click at the very top + // of the button, their mouse is no longer over the button (because it has + // 'moved beneath them') and so the click event is not fired. + // + // This corrects that by shifting the top of the pseudo element so that it + // continues to cover the area that the user originally clicked, which means + // the click event is still fired. + // + // 🎉 + &:active::before { + top: -($govuk-border-width-form-element + $button-shadow-size); + } + } + + .govuk-button--disabled, + .govuk-button[disabled="disabled"], + .govuk-button[disabled] { + opacity: (.5); + + &:hover { + background-color: $govuk-button-colour; + cursor: default; + } + + &:focus { + outline: none; + } + + &:active { + top: 0; + box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0 + @include govuk-if-ie8 { + border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0 + } + } + } + + .govuk-button--secondary { + background-color: $govuk-secondary-button-colour; + box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour; + + &, + &:link, + &:visited, + &:active, + &:hover { + color: $govuk-secondary-button-text-colour; + } + + // alphagov/govuk_template includes a specific a:link:focus selector + // designed to make unvisited links a slightly darker blue when focussed, so + // we need to override the text colour for that combination of selectors so + // so that unvisited links styled as buttons do not end up with dark blue + // text when focussed. + @include govuk-compatibility(govuk_template) { + &:link:focus { + color: $govuk-secondary-button-text-colour; + } + } + + &:hover { + background-color: $govuk-secondary-button-hover-colour; + + &[disabled] { + background-color: $govuk-secondary-button-colour; + } + } + } + + .govuk-button--warning { + background-color: $govuk-warning-button-colour; + box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour; + + &, + &:link, + &:visited, + &:active, + &:hover { + color: $govuk-warning-button-text-colour; + } + + // alphagov/govuk_template includes a specific a:link:focus selector + // designed to make unvisited links a slightly darker blue when focussed, so + // we need to override the text colour for that combination of selectors so + // so that unvisited links styled as buttons do not end up with dark blue + // text when focussed. + @include govuk-compatibility(govuk_template) { + &:link:focus { + color: $govuk-warning-button-text-colour; + } + } + + &:hover { + background-color: $govuk-warning-button-hover-colour; + + &[disabled] { + background-color: $govuk-warning-button-colour; + } + } + } + + .govuk-button--start { + @include govuk-typography-weight-bold; + @include govuk-typography-responsive($size: 24, $override-line-height: 1); + + display: inline-flex; + min-height: auto; + + justify-content: center; + } + + .govuk-button__start-icon { + margin-left: govuk-spacing(1); + + @include govuk-media-query($from: desktop) { + margin-left: govuk-spacing(2); + } + vertical-align: middle; + flex-shrink: 0; + align-self: center; + } + + @if $govuk-use-legacy-font { + // Begin adjustments for font baseline offset when using v1 of nta + $offset: 2; + + .govuk-button { + padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1 + padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1 + } + + .govuk-button__start-icon { + margin-top: -3px; + } + } +} diff --git a/src/govuk/components/character-count/_character-count.scss b/src/govuk/components/character-count/_character-count.scss index b4e399daeb..8b5953fd29 100644 --- a/src/govuk/components/character-count/_character-count.scss +++ b/src/govuk/components/character-count/_character-count.scss @@ -2,30 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@import "../error-message/error-message"; -@import "../hint/hint"; -@import "../label/label"; - -@include govuk-exports("govuk/component/character-count") { - .govuk-character-count { - @include govuk-responsive-margin(6, "bottom"); - - .govuk-form-group, - .govuk-textarea { - margin-bottom: govuk-spacing(1); - } - - .govuk-textarea--error { - padding: govuk-spacing(1) - 2; // Stop a "jump" when width of border changes - } - } - - .govuk-character-count__message { - margin-top: 0; - margin-bottom: 0; - } - - .govuk-character-count__message--disabled { - visibility: hidden; - } -} +@import "./style"; diff --git a/src/govuk/components/character-count/_style.scss b/src/govuk/components/character-count/_style.scss new file mode 100644 index 0000000000..50c595688f --- /dev/null +++ b/src/govuk/components/character-count/_style.scss @@ -0,0 +1,27 @@ +@import "../error-message/error-message"; +@import "../hint/hint"; +@import "../label/label"; + +@include govuk-exports("govuk/component/character-count") { + .govuk-character-count { + @include govuk-responsive-margin(6, "bottom"); + + .govuk-form-group, + .govuk-textarea { + margin-bottom: govuk-spacing(1); + } + + .govuk-textarea--error { + padding: govuk-spacing(1) - 2; // Stop a "jump" when width of border changes + } + } + + .govuk-character-count__message { + margin-top: 0; + margin-bottom: 0; + } + + .govuk-character-count__message--disabled { + visibility: hidden; + } +} diff --git a/src/govuk/components/checkboxes/_checkboxes.scss b/src/govuk/components/checkboxes/_checkboxes.scss index edd055aa28..8b5953fd29 100644 --- a/src/govuk/components/checkboxes/_checkboxes.scss +++ b/src/govuk/components/checkboxes/_checkboxes.scss @@ -2,302 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@import "../error-message/error-message"; -@import "../fieldset/fieldset"; -@import "../hint/hint"; -@import "../label/label"; - -@include govuk-exports("govuk/component/checkboxes") { - - $govuk-touch-target-size: 44px; - $govuk-checkboxes-size: 40px; - $govuk-small-checkboxes-size: 24px; - $govuk-checkboxes-label-padding-left-right: govuk-spacing(3); - - .govuk-checkboxes__item { - @include govuk-font($size: 19); - - display: block; - position: relative; - - min-height: $govuk-checkboxes-size; - - margin-bottom: govuk-spacing(2); - padding-left: $govuk-checkboxes-size; - - clear: left; - } - - .govuk-checkboxes__item:last-child, - .govuk-checkboxes__item:last-of-type { - margin-bottom: 0; - } - - .govuk-checkboxes__input { - $input-offset: ($govuk-touch-target-size - $govuk-checkboxes-size) / 2; - - cursor: pointer; - - // IE8 doesn’t support pseudo-elements, so we don’t want to hide native - // elements there. - @include govuk-not-ie8 { - position: absolute; - - z-index: 1; - top: $input-offset * -1; - left: $input-offset * -1; - - width: $govuk-touch-target-size; - height: $govuk-touch-target-size; - margin: 0; - - opacity: 0; - } - - @include govuk-if-ie8 { - margin-top: 10px; - margin-right: $govuk-checkboxes-size / -2; - margin-left: $govuk-checkboxes-size / -2; - float: left; - - // add focus outline to input - &:focus { - outline: $govuk-focus-width solid $govuk-focus-colour; - } - } - } - - .govuk-checkboxes__label { - display: inline-block; - margin-bottom: 0; - padding: 8px $govuk-checkboxes-label-padding-left-right govuk-spacing(1); - cursor: pointer; - // remove 300ms pause on mobile - touch-action: manipulation; - } - - // [ ] Check box - .govuk-checkboxes__label::before { - content: ""; - box-sizing: border-box; - position: absolute; - top: 0; - left: 0; - width: $govuk-checkboxes-size; - height: $govuk-checkboxes-size; - border: $govuk-border-width-form-element solid currentColor; - background: transparent; - } - - // ✔ Check mark - // - // The check mark is a box with a border on the left and bottom side (└──), - // rotated 45 degrees - .govuk-checkboxes__label::after { - content: ""; - - position: absolute; - top: 11px; - left: 9px; - width: 18px; - height: 7px; - - transform: rotate(-45deg); - border: solid; - border-width: 0 0 $govuk-border-width $govuk-border-width; - // Fix bug in IE11 caused by transform rotate (-45deg). - // See: alphagov/govuk_elements/issues/518 - border-top-color: transparent; - - opacity: 0; - - background: transparent; - } - - .govuk-checkboxes__hint { - display: block; - padding-right: $govuk-checkboxes-label-padding-left-right; - padding-left: $govuk-checkboxes-label-padding-left-right; - } - - // Focused state - .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - border-width: 4px; - box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour; - } - - // Selected state - .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after { - opacity: 1; - } - - // Disabled state - .govuk-checkboxes__input:disabled, - .govuk-checkboxes__input:disabled + .govuk-checkboxes__label { - cursor: default; - } - - .govuk-checkboxes__input:disabled + .govuk-checkboxes__label { - opacity: .5; - } - - // ========================================================= - // Conditional reveals - // ========================================================= - - // The narrow border is used in the conditional reveals because the border has - // to be an even number in order to be centred under the 40px checkbox or radio. - $conditional-border-width: $govuk-border-width-narrow; - // Calculate the amount of padding needed to keep the border centered against the checkbox. - $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2); - // Move the border centered with the checkbox - $conditional-margin-left: $conditional-border-padding; - // Move the contents of the conditional inline with the label - $conditional-padding-left: $conditional-border-padding + $govuk-checkboxes-label-padding-left-right; - - .govuk-checkboxes__conditional { - @include govuk-responsive-margin(4, "bottom"); - margin-left: $conditional-margin-left; - padding-left: $conditional-padding-left; - border-left: $conditional-border-width solid $govuk-border-colour; - - .js-enabled &--hidden { - display: none; - } - - & > :last-child { - margin-bottom: 0; - } - } - - // ========================================================= - // Small checkboxes - // ========================================================= - - .govuk-checkboxes--small { - - $input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2; - $label-offset: $govuk-touch-target-size - $input-offset; - - .govuk-checkboxes__item { - @include govuk-clearfix; - min-height: 0; - margin-bottom: 0; - padding-left: $label-offset; - float: left; - } - - // Shift the touch target into the left margin so that the visible edge of - // the control is aligned - // - // ┆What colours do you like? - // ┌┆───┐ - // │┆[] │ Purple - // └┆▲──┘ - // ▲┆└─ Check box pseudo element, aligned with margin - // └─── Touch target (invisible input), shifted into the margin - .govuk-checkboxes__input { - @include govuk-not-ie8 { - left: $input-offset * -1; - } - - @include govuk-if-ie8 { - margin-left: $govuk-small-checkboxes-size * -1; - } - } - - // Adjust the size and position of the label. - // - // Unlike larger checkboxes, we also have to float the label in order to - // 'shrink' it, preventing the hover state from kicking in across the full - // width of the parent element. - .govuk-checkboxes__label { - margin-top: -2px; - padding: 13px govuk-spacing(3) 13px 1px; - float: left; - - @include govuk-media-query($from: tablet) { - padding: 11px govuk-spacing(3) 10px 1px; - } - } - - // [ ] Check box - // - // Reduce the size of the check box [1], vertically center it within the - // touch target [2] - .govuk-checkboxes__label::before { - top: $input-offset - $govuk-border-width-form-element; // 2 - width: $govuk-small-checkboxes-size; // 1 - height: $govuk-small-checkboxes-size; // 1 - } - - // ✔ Check mark - // - // Reduce the size of the check mark and re-align within the checkbox - .govuk-checkboxes__label::after { - top: 15px; - left: 6px; - width: 9px; - height: 3.5px; - border-width: 0 0 3px 3px; - } - - // Fix position of hint with small checkboxes - // - // Do not use hints with small checkboxes – because they're within the input - // wrapper they trigger the hover state, but clicking them doesn't actually - // activate the control. - // - // (If you do use them, they won't look completely broken... but seriously, - // don't use them) - .govuk-checkboxes__hint { - padding: 0; - clear: both; - } - - // Align conditional reveals with small checkboxes - .govuk-checkboxes__conditional { - $margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2); - margin-left: $margin-left; - padding-left: $label-offset - ($margin-left + $conditional-border-width); - clear: both; - } - - // Hover state for small checkboxes. - // - // We use a hover state for small checkboxes because the touch target size - // is so much larger than their visible size, and so we need to provide - // feedback to the user as to which checkbox they will select when their - // cursor is outside of the visible area. - .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour; - } - - // Because we've overridden the border-shadow provided by the focus state, - // we need to redefine that too. - // - // We use two box shadows, one that restores the original focus state [1] - // and another that then applies the hover state [2]. - .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - // sass-lint:disable indentation - box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, // 1 - 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2 - } - - // For devices that explicitly don't support hover, don't provide a hover - // state (e.g. on touch devices like iOS). - // - // We can't use `@media (hover: hover)` because we wouldn't get the hover - // state in browsers that don't support `@media (hover)` (like Internet - // Explorer) – so we have to 'undo' the hover state instead. - @media (hover: none), (pointer: coarse) { - .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { - box-shadow: initial; - } - - .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { - box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour; - } - } - } -} +@import "./style"; diff --git a/src/govuk/components/checkboxes/_style.scss b/src/govuk/components/checkboxes/_style.scss new file mode 100644 index 0000000000..6f272818d6 --- /dev/null +++ b/src/govuk/components/checkboxes/_style.scss @@ -0,0 +1,299 @@ +@import "../error-message/error-message"; +@import "../fieldset/fieldset"; +@import "../hint/hint"; +@import "../label/label"; + +@include govuk-exports("govuk/component/checkboxes") { + + $govuk-touch-target-size: 44px; + $govuk-checkboxes-size: 40px; + $govuk-small-checkboxes-size: 24px; + $govuk-checkboxes-label-padding-left-right: govuk-spacing(3); + + .govuk-checkboxes__item { + @include govuk-font($size: 19); + + display: block; + position: relative; + + min-height: $govuk-checkboxes-size; + + margin-bottom: govuk-spacing(2); + padding-left: $govuk-checkboxes-size; + + clear: left; + } + + .govuk-checkboxes__item:last-child, + .govuk-checkboxes__item:last-of-type { + margin-bottom: 0; + } + + .govuk-checkboxes__input { + $input-offset: ($govuk-touch-target-size - $govuk-checkboxes-size) / 2; + + cursor: pointer; + + // IE8 doesn’t support pseudo-elements, so we don’t want to hide native + // elements there. + @include govuk-not-ie8 { + position: absolute; + + z-index: 1; + top: $input-offset * -1; + left: $input-offset * -1; + + width: $govuk-touch-target-size; + height: $govuk-touch-target-size; + margin: 0; + + opacity: 0; + } + + @include govuk-if-ie8 { + margin-top: 10px; + margin-right: $govuk-checkboxes-size / -2; + margin-left: $govuk-checkboxes-size / -2; + float: left; + + // add focus outline to input + &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + } + } + } + + .govuk-checkboxes__label { + display: inline-block; + margin-bottom: 0; + padding: 8px $govuk-checkboxes-label-padding-left-right govuk-spacing(1); + cursor: pointer; + // remove 300ms pause on mobile + touch-action: manipulation; + } + + // [ ] Check box + .govuk-checkboxes__label::before { + content: ""; + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + width: $govuk-checkboxes-size; + height: $govuk-checkboxes-size; + border: $govuk-border-width-form-element solid currentColor; + background: transparent; + } + + // ✔ Check mark + // + // The check mark is a box with a border on the left and bottom side (└──), + // rotated 45 degrees + .govuk-checkboxes__label::after { + content: ""; + + position: absolute; + top: 11px; + left: 9px; + width: 18px; + height: 7px; + + transform: rotate(-45deg); + border: solid; + border-width: 0 0 $govuk-border-width $govuk-border-width; + // Fix bug in IE11 caused by transform rotate (-45deg). + // See: alphagov/govuk_elements/issues/518 + border-top-color: transparent; + + opacity: 0; + + background: transparent; + } + + .govuk-checkboxes__hint { + display: block; + padding-right: $govuk-checkboxes-label-padding-left-right; + padding-left: $govuk-checkboxes-label-padding-left-right; + } + + // Focused state + .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { + border-width: 4px; + box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour; + } + + // Selected state + .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after { + opacity: 1; + } + + // Disabled state + .govuk-checkboxes__input:disabled, + .govuk-checkboxes__input:disabled + .govuk-checkboxes__label { + cursor: default; + } + + .govuk-checkboxes__input:disabled + .govuk-checkboxes__label { + opacity: .5; + } + + // ========================================================= + // Conditional reveals + // ========================================================= + + // The narrow border is used in the conditional reveals because the border has + // to be an even number in order to be centred under the 40px checkbox or radio. + $conditional-border-width: $govuk-border-width-narrow; + // Calculate the amount of padding needed to keep the border centered against the checkbox. + $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2); + // Move the border centered with the checkbox + $conditional-margin-left: $conditional-border-padding; + // Move the contents of the conditional inline with the label + $conditional-padding-left: $conditional-border-padding + $govuk-checkboxes-label-padding-left-right; + + .govuk-checkboxes__conditional { + @include govuk-responsive-margin(4, "bottom"); + margin-left: $conditional-margin-left; + padding-left: $conditional-padding-left; + border-left: $conditional-border-width solid $govuk-border-colour; + + .js-enabled &--hidden { + display: none; + } + + & > :last-child { + margin-bottom: 0; + } + } + + // ========================================================= + // Small checkboxes + // ========================================================= + + .govuk-checkboxes--small { + + $input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2; + $label-offset: $govuk-touch-target-size - $input-offset; + + .govuk-checkboxes__item { + @include govuk-clearfix; + min-height: 0; + margin-bottom: 0; + padding-left: $label-offset; + float: left; + } + + // Shift the touch target into the left margin so that the visible edge of + // the control is aligned + // + // ┆What colours do you like? + // ┌┆───┐ + // │┆[] │ Purple + // └┆▲──┘ + // ▲┆└─ Check box pseudo element, aligned with margin + // └─── Touch target (invisible input), shifted into the margin + .govuk-checkboxes__input { + @include govuk-not-ie8 { + left: $input-offset * -1; + } + + @include govuk-if-ie8 { + margin-left: $govuk-small-checkboxes-size * -1; + } + } + + // Adjust the size and position of the label. + // + // Unlike larger checkboxes, we also have to float the label in order to + // 'shrink' it, preventing the hover state from kicking in across the full + // width of the parent element. + .govuk-checkboxes__label { + margin-top: -2px; + padding: 13px govuk-spacing(3) 13px 1px; + float: left; + + @include govuk-media-query($from: tablet) { + padding: 11px govuk-spacing(3) 10px 1px; + } + } + + // [ ] Check box + // + // Reduce the size of the check box [1], vertically center it within the + // touch target [2] + .govuk-checkboxes__label::before { + top: $input-offset - $govuk-border-width-form-element; // 2 + width: $govuk-small-checkboxes-size; // 1 + height: $govuk-small-checkboxes-size; // 1 + } + + // ✔ Check mark + // + // Reduce the size of the check mark and re-align within the checkbox + .govuk-checkboxes__label::after { + top: 15px; + left: 6px; + width: 9px; + height: 3.5px; + border-width: 0 0 3px 3px; + } + + // Fix position of hint with small checkboxes + // + // Do not use hints with small checkboxes – because they're within the input + // wrapper they trigger the hover state, but clicking them doesn't actually + // activate the control. + // + // (If you do use them, they won't look completely broken... but seriously, + // don't use them) + .govuk-checkboxes__hint { + padding: 0; + clear: both; + } + + // Align conditional reveals with small checkboxes + .govuk-checkboxes__conditional { + $margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2); + margin-left: $margin-left; + padding-left: $label-offset - ($margin-left + $conditional-border-width); + clear: both; + } + + // Hover state for small checkboxes. + // + // We use a hover state for small checkboxes because the touch target size + // is so much larger than their visible size, and so we need to provide + // feedback to the user as to which checkbox they will select when their + // cursor is outside of the visible area. + .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { + box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour; + } + + // Because we've overridden the border-shadow provided by the focus state, + // we need to redefine that too. + // + // We use two box shadows, one that restores the original focus state [1] + // and another that then applies the hover state [2]. + .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { + // sass-lint:disable indentation + box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour, // 1 + 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2 + } + + // For devices that explicitly don't support hover, don't provide a hover + // state (e.g. on touch devices like iOS). + // + // We can't use `@media (hover: hover)` because we wouldn't get the hover + // state in browsers that don't support `@media (hover)` (like Internet + // Explorer) – so we have to 'undo' the hover state instead. + @media (hover: none), (pointer: coarse) { + .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before { + box-shadow: initial; + } + + .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before { + box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour; + } + } + } +} diff --git a/src/govuk/components/date-input/_date-input.scss b/src/govuk/components/date-input/_date-input.scss index 642c45688a..8b5953fd29 100644 --- a/src/govuk/components/date-input/_date-input.scss +++ b/src/govuk/components/date-input/_date-input.scss @@ -2,29 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@import "../error-message/error-message"; -@import "../input/input"; -@import "../hint/hint"; -@import "../label/label"; - -@include govuk-exports("govuk/component/date-input") { - .govuk-date-input { - @include govuk-clearfix; - // font-size: 0 removes whitespace caused by inline-block - font-size: 0; - } - - .govuk-date-input__item { - display: inline-block; - margin-right: govuk-spacing(4); - margin-bottom: 0; - } - - .govuk-date-input__label { - display: block; - } - - .govuk-date-input__input { - margin-bottom: 0; - } -} +@import "./style"; diff --git a/src/govuk/components/date-input/_style.scss b/src/govuk/components/date-input/_style.scss new file mode 100644 index 0000000000..873ea0f830 --- /dev/null +++ b/src/govuk/components/date-input/_style.scss @@ -0,0 +1,26 @@ +@import "../error-message/error-message"; +@import "../input/input"; +@import "../hint/hint"; +@import "../label/label"; + +@include govuk-exports("govuk/component/date-input") { + .govuk-date-input { + @include govuk-clearfix; + // font-size: 0 removes whitespace caused by inline-block + font-size: 0; + } + + .govuk-date-input__item { + display: inline-block; + margin-right: govuk-spacing(4); + margin-bottom: 0; + } + + .govuk-date-input__label { + display: block; + } + + .govuk-date-input__input { + margin-bottom: 0; + } +} diff --git a/src/govuk/components/details/_details.scss b/src/govuk/components/details/_details.scss index eced90e2b1..8b5953fd29 100644 --- a/src/govuk/components/details/_details.scss +++ b/src/govuk/components/details/_details.scss @@ -2,87 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/details") { - - .govuk-details { - @include govuk-font($size: 19); - @include govuk-text-colour; - @include govuk-responsive-margin(6, "bottom"); - - display: block; - } - - .govuk-details__summary { - // Make the focus outline shrink-wrap the text content of the summary - display: inline-block; - - // Absolutely position the marker against this element - position: relative; - - margin-bottom: govuk-spacing(1); - - // Allow for absolutely positioned marker and align with disclosed text - padding-left: govuk-spacing(4) + $govuk-border-width; - - // Style the summary to look like a link... - color: $govuk-link-colour; - cursor: pointer; - - &:hover { - color: $govuk-link-hover-colour; - } - - &:focus { - @include govuk-focused-text; - } - } - - // ...but only underline the text, not the arrow - .govuk-details__summary-text { - text-decoration: underline; - } - - // Remove the underline when focussed to avoid duplicate borders - .govuk-details__summary:focus .govuk-details__summary-text { - text-decoration: none; - } - - // Remove the default details marker so we can style our own consistently and - // ensure it displays in Firefox (see implementation.md for details) - .govuk-details__summary::-webkit-details-marker { - display: none; - } - - // Append our own open / closed marker using a pseudo-element - .govuk-details__summary:before { - content: ""; - position: absolute; - - top: -1px; - bottom: 0; - left: 0; - - margin: auto; - - @include govuk-shape-arrow($direction: right, $base: 14px); - - .govuk-details[open] > & { - @include govuk-shape-arrow($direction: down, $base: 14px); - } - } - - .govuk-details__text { - padding: govuk-spacing(3); - padding-left: govuk-spacing(4); - border-left: $govuk-border-width solid $govuk-border-colour; - } - - .govuk-details__text p { - margin-top: 0; - margin-bottom: govuk-spacing(4); - } - - .govuk-details__text > :last-child { - margin-bottom: 0; - } -} +@import "./style"; diff --git a/src/govuk/components/details/_style.scss b/src/govuk/components/details/_style.scss new file mode 100644 index 0000000000..83c48ef4fd --- /dev/null +++ b/src/govuk/components/details/_style.scss @@ -0,0 +1,84 @@ +@include govuk-exports("govuk/component/details") { + + .govuk-details { + @include govuk-font($size: 19); + @include govuk-text-colour; + @include govuk-responsive-margin(6, "bottom"); + + display: block; + } + + .govuk-details__summary { + // Make the focus outline shrink-wrap the text content of the summary + display: inline-block; + + // Absolutely position the marker against this element + position: relative; + + margin-bottom: govuk-spacing(1); + + // Allow for absolutely positioned marker and align with disclosed text + padding-left: govuk-spacing(4) + $govuk-border-width; + + // Style the summary to look like a link... + color: $govuk-link-colour; + cursor: pointer; + + &:hover { + color: $govuk-link-hover-colour; + } + + &:focus { + @include govuk-focused-text; + } + } + + // ...but only underline the text, not the arrow + .govuk-details__summary-text { + text-decoration: underline; + } + + // Remove the underline when focussed to avoid duplicate borders + .govuk-details__summary:focus .govuk-details__summary-text { + text-decoration: none; + } + + // Remove the default details marker so we can style our own consistently and + // ensure it displays in Firefox (see implementation.md for details) + .govuk-details__summary::-webkit-details-marker { + display: none; + } + + // Append our own open / closed marker using a pseudo-element + .govuk-details__summary:before { + content: ""; + position: absolute; + + top: -1px; + bottom: 0; + left: 0; + + margin: auto; + + @include govuk-shape-arrow($direction: right, $base: 14px); + + .govuk-details[open] > & { + @include govuk-shape-arrow($direction: down, $base: 14px); + } + } + + .govuk-details__text { + padding: govuk-spacing(3); + padding-left: govuk-spacing(4); + border-left: $govuk-border-width solid $govuk-border-colour; + } + + .govuk-details__text p { + margin-top: 0; + margin-bottom: govuk-spacing(4); + } + + .govuk-details__text > :last-child { + margin-bottom: 0; + } +} diff --git a/src/govuk/components/error-message/_error-message.scss b/src/govuk/components/error-message/_error-message.scss index b97298c3ac..8b5953fd29 100644 --- a/src/govuk/components/error-message/_error-message.scss +++ b/src/govuk/components/error-message/_error-message.scss @@ -2,14 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/error-message") { - .govuk-error-message { - @include govuk-font($size: 19, $weight: bold); - - display: block; - margin-bottom: govuk-spacing(3); - clear: both; - - color: $govuk-error-colour; - } -} +@import "./style"; diff --git a/src/govuk/components/error-message/_style.scss b/src/govuk/components/error-message/_style.scss new file mode 100644 index 0000000000..5cfa5394ca --- /dev/null +++ b/src/govuk/components/error-message/_style.scss @@ -0,0 +1,11 @@ +@include govuk-exports("govuk/component/error-message") { + .govuk-error-message { + @include govuk-font($size: 19, $weight: bold); + + display: block; + margin-bottom: govuk-spacing(3); + clear: both; + + color: $govuk-error-colour; + } +} diff --git a/src/govuk/components/error-summary/_error-summary.scss b/src/govuk/components/error-summary/_error-summary.scss index f7379a210e..8b5953fd29 100644 --- a/src/govuk/components/error-summary/_error-summary.scss +++ b/src/govuk/components/error-summary/_error-summary.scss @@ -2,58 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@import "../../core/lists"; - -@include govuk-exports("govuk/component/error-summary") { - - .govuk-error-summary { - @include govuk-text-colour; - @include govuk-responsive-padding(4); - @include govuk-responsive-margin(8, "bottom"); - - border: $govuk-border-width solid $govuk-error-colour; - - &:focus { - outline: $govuk-focus-width solid $govuk-focus-colour; - } - } - - .govuk-error-summary__title { - @include govuk-font($size: 24, $weight: bold); - - margin-top: 0; - @include govuk-responsive-margin(4, "bottom"); - } - - .govuk-error-summary__body { - @include govuk-font($size: 19); - - p { - margin-top: 0; - @include govuk-responsive-margin(4, "bottom"); - } - } - - // Cross-component class - adjusts styling of list component - .govuk-error-summary__list { - margin-top: 0; - margin-bottom: 0; - } - - .govuk-error-summary__list a { - @include govuk-typography-weight-bold; - - // Override default link styling to use error colour - &:link, - &:visited, - &:hover, - &:active { - color: $govuk-error-colour; - } - - &:focus { - @include govuk-focused-text; - } - } - -} +@import "./style"; diff --git a/src/govuk/components/error-summary/_style.scss b/src/govuk/components/error-summary/_style.scss new file mode 100644 index 0000000000..ba542c4589 --- /dev/null +++ b/src/govuk/components/error-summary/_style.scss @@ -0,0 +1,55 @@ +@import "../../core/lists"; + +@include govuk-exports("govuk/component/error-summary") { + + .govuk-error-summary { + @include govuk-text-colour; + @include govuk-responsive-padding(4); + @include govuk-responsive-margin(8, "bottom"); + + border: $govuk-border-width solid $govuk-error-colour; + + &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + } + } + + .govuk-error-summary__title { + @include govuk-font($size: 24, $weight: bold); + + margin-top: 0; + @include govuk-responsive-margin(4, "bottom"); + } + + .govuk-error-summary__body { + @include govuk-font($size: 19); + + p { + margin-top: 0; + @include govuk-responsive-margin(4, "bottom"); + } + } + + // Cross-component class - adjusts styling of list component + .govuk-error-summary__list { + margin-top: 0; + margin-bottom: 0; + } + + .govuk-error-summary__list a { + @include govuk-typography-weight-bold; + + // Override default link styling to use error colour + &:link, + &:visited, + &:hover, + &:active { + color: $govuk-error-colour; + } + + &:focus { + @include govuk-focused-text; + } + } + +} diff --git a/src/govuk/components/fieldset/_fieldset.scss b/src/govuk/components/fieldset/_fieldset.scss index 5fc9102620..8b5953fd29 100644 --- a/src/govuk/components/fieldset/_fieldset.scss +++ b/src/govuk/components/fieldset/_fieldset.scss @@ -2,67 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/fieldset") { - .govuk-fieldset { - min-width: 0; - margin: 0; - padding: 0; - border: 0; - @include govuk-clearfix; - } - - // Fix for Firefox < 53 - // https://bugzilla.mozilla.org/show_bug.cgi?id=504622 - @supports not (caret-color: auto) { - .govuk-fieldset, - x:-moz-any-link { - display: table-cell; - } - } - - .govuk-fieldset__legend { - @include govuk-font($size: 19); - @include govuk-text-colour; - - // Fix legend text wrapping in Edge and IE - // 1. IE9-11 & Edge 12-13 - // 2. IE8-11 - box-sizing: border-box; // 1 - display: table; // 2 - max-width: 100%; // 1 - margin-bottom: govuk-spacing(2); - padding: 0; - - white-space: normal; // 1 - } - - // Modifiers that make legends look more like their equivalent headings - - .govuk-fieldset__legend--xl { - @include govuk-font($size: 48, $weight: bold); - margin-bottom: govuk-spacing(3); - } - - .govuk-fieldset__legend--l { - @include govuk-font($size: 36, $weight: bold); - margin-bottom: govuk-spacing(3); - } - - .govuk-fieldset__legend--m { - @include govuk-font($size: 24, $weight: bold); - margin-bottom: govuk-spacing(3); - } - - .govuk-fieldset__legend--s { - @include govuk-font($size: 19, $weight: bold); - } - - // When the legend contains an H1, we want the H1 to inherit all styles from - // the legend. Effectively we want to be able to treat the heading as if it is - // not there. - .govuk-fieldset__heading { - margin: 0; - font-size: inherit; - font-weight: inherit; - } -} +@import "./style"; diff --git a/src/govuk/components/fieldset/_style.scss b/src/govuk/components/fieldset/_style.scss new file mode 100644 index 0000000000..5cbd9c979f --- /dev/null +++ b/src/govuk/components/fieldset/_style.scss @@ -0,0 +1,64 @@ +@include govuk-exports("govuk/component/fieldset") { + .govuk-fieldset { + min-width: 0; + margin: 0; + padding: 0; + border: 0; + @include govuk-clearfix; + } + + // Fix for Firefox < 53 + // https://bugzilla.mozilla.org/show_bug.cgi?id=504622 + @supports not (caret-color: auto) { + .govuk-fieldset, + x:-moz-any-link { + display: table-cell; + } + } + + .govuk-fieldset__legend { + @include govuk-font($size: 19); + @include govuk-text-colour; + + // Fix legend text wrapping in Edge and IE + // 1. IE9-11 & Edge 12-13 + // 2. IE8-11 + box-sizing: border-box; // 1 + display: table; // 2 + max-width: 100%; // 1 + margin-bottom: govuk-spacing(2); + padding: 0; + + white-space: normal; // 1 + } + + // Modifiers that make legends look more like their equivalent headings + + .govuk-fieldset__legend--xl { + @include govuk-font($size: 48, $weight: bold); + margin-bottom: govuk-spacing(3); + } + + .govuk-fieldset__legend--l { + @include govuk-font($size: 36, $weight: bold); + margin-bottom: govuk-spacing(3); + } + + .govuk-fieldset__legend--m { + @include govuk-font($size: 24, $weight: bold); + margin-bottom: govuk-spacing(3); + } + + .govuk-fieldset__legend--s { + @include govuk-font($size: 19, $weight: bold); + } + + // When the legend contains an H1, we want the H1 to inherit all styles from + // the legend. Effectively we want to be able to treat the heading as if it is + // not there. + .govuk-fieldset__heading { + margin: 0; + font-size: inherit; + font-weight: inherit; + } +} diff --git a/src/govuk/components/file-upload/_file-upload.scss b/src/govuk/components/file-upload/_file-upload.scss index 225dc474bf..8b5953fd29 100644 --- a/src/govuk/components/file-upload/_file-upload.scss +++ b/src/govuk/components/file-upload/_file-upload.scss @@ -2,80 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@import "../error-message/error-message"; -@import "../hint/hint"; -@import "../label/label"; - -@include govuk-exports("govuk/component/file-upload") { - $component-padding: govuk-spacing(1); - - .govuk-file-upload { - @include govuk-font($size: 19); - @include govuk-text-colour; - padding-top: $component-padding; - padding-bottom: $component-padding; - - &:focus { - // "Yank" the padding with negative margin to avoid a jump - // when element is focused - margin-right: -$component-padding; - margin-left: -$component-padding; - padding-right: $component-padding; - padding-left: $component-padding; - - outline: $govuk-focus-width solid $govuk-focus-colour; - // Use `box-shadow` to add border instead of changing `border-width` - // (which changes element size) and since `outline` is already used for the - // yellow focus state. - box-shadow: inset 0 0 0 4px $govuk-input-border-colour; - - @include govuk-if-ie8 { - // IE8 doesn't support `box-shadow` so add an actual border - border: 4px solid $govuk-input-border-colour; - } - } - - // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196 - // so that component receives focus in Firefox. - // This can't be set together with `:focus` as all versions of IE fail - // to recognise `focus-within` and don't set any styles from the block - // when it's a selector. - &:focus-within { - margin-right: -$component-padding; - margin-left: -$component-padding; - padding-right: $component-padding; - padding-left: $component-padding; - - outline: $govuk-focus-width solid $govuk-focus-colour; - - box-shadow: inset 0 0 0 4px $govuk-input-border-colour; - } - } - - .govuk-file-upload--error { - // As `upload--error` has border, it needs to have the same padding as - // the standard focused element. - margin-right: -$component-padding; - margin-left: -$component-padding; - padding-right: $component-padding; - padding-left: $component-padding; - border: $govuk-border-width-form-element-error solid $govuk-error-colour; - - &:focus { - border-color: $govuk-input-border-colour; - // Remove `box-shadow` inherited from `:focus` as `file-upload--error` - // already has the thicker border. - box-shadow: none; - } - - // Repeat `:focus` styles to prevent error styles from being applied when - // input button is pressed as this moves the focus to "within". - // This can't be set together with `:focus` as all versions of IE fail - // to recognise `focus-within` and don't set any styles from the block - // when it's a selector. - &:focus-within { - border-color: $govuk-input-border-colour; - box-shadow: none; - } - } -} +@import "./style"; diff --git a/src/govuk/components/file-upload/_style.scss b/src/govuk/components/file-upload/_style.scss new file mode 100644 index 0000000000..af35b04c9f --- /dev/null +++ b/src/govuk/components/file-upload/_style.scss @@ -0,0 +1,77 @@ +@import "../error-message/error-message"; +@import "../hint/hint"; +@import "../label/label"; + +@include govuk-exports("govuk/component/file-upload") { + $component-padding: govuk-spacing(1); + + .govuk-file-upload { + @include govuk-font($size: 19); + @include govuk-text-colour; + padding-top: $component-padding; + padding-bottom: $component-padding; + + &:focus { + // "Yank" the padding with negative margin to avoid a jump + // when element is focused + margin-right: -$component-padding; + margin-left: -$component-padding; + padding-right: $component-padding; + padding-left: $component-padding; + + outline: $govuk-focus-width solid $govuk-focus-colour; + // Use `box-shadow` to add border instead of changing `border-width` + // (which changes element size) and since `outline` is already used for the + // yellow focus state. + box-shadow: inset 0 0 0 4px $govuk-input-border-colour; + + @include govuk-if-ie8 { + // IE8 doesn't support `box-shadow` so add an actual border + border: 4px solid $govuk-input-border-colour; + } + } + + // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196 + // so that component receives focus in Firefox. + // This can't be set together with `:focus` as all versions of IE fail + // to recognise `focus-within` and don't set any styles from the block + // when it's a selector. + &:focus-within { + margin-right: -$component-padding; + margin-left: -$component-padding; + padding-right: $component-padding; + padding-left: $component-padding; + + outline: $govuk-focus-width solid $govuk-focus-colour; + + box-shadow: inset 0 0 0 4px $govuk-input-border-colour; + } + } + + .govuk-file-upload--error { + // As `upload--error` has border, it needs to have the same padding as + // the standard focused element. + margin-right: -$component-padding; + margin-left: -$component-padding; + padding-right: $component-padding; + padding-left: $component-padding; + border: $govuk-border-width-form-element-error solid $govuk-error-colour; + + &:focus { + border-color: $govuk-input-border-colour; + // Remove `box-shadow` inherited from `:focus` as `file-upload--error` + // already has the thicker border. + box-shadow: none; + } + + // Repeat `:focus` styles to prevent error styles from being applied when + // input button is pressed as this moves the focus to "within". + // This can't be set together with `:focus` as all versions of IE fail + // to recognise `focus-within` and don't set any styles from the block + // when it's a selector. + &:focus-within { + border-color: $govuk-input-border-colour; + box-shadow: none; + } + } +} diff --git a/src/govuk/components/footer/_footer.scss b/src/govuk/components/footer/_footer.scss index 9a9c348289..8b5953fd29 100644 --- a/src/govuk/components/footer/_footer.scss +++ b/src/govuk/components/footer/_footer.scss @@ -2,218 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@import "../../helpers/typography"; - -@include govuk-exports("govuk/component/footer") { - - $govuk-footer-background: $govuk-canvas-background-colour; - $govuk-footer-border: $govuk-border-colour; - // This variable can be removed entirely once the legacy palette goes away, - // as it'll just be the same as $govuk-footer-border. - $govuk-footer-border-top: $govuk-border-colour; - $govuk-footer-text: $govuk-text-colour; - $govuk-footer-link: $govuk-footer-text; - $govuk-footer-link-hover: false; - - @if ($govuk-use-legacy-palette) { - // sass-lint:disable no-color-literals - $govuk-footer-border-top: #a1acb2; - $govuk-footer-border: govuk-colour("grey-2"); - $govuk-footer-text: #454a4c; - $govuk-footer-link: $govuk-footer-text; - - // Only used with the legacy palette - $govuk-footer-link-hover: #171819; - } - - // Based on the govuk-crest-2x.png image dimensions. - $govuk-footer-crest-image-width-2x: 250px; - $govuk-footer-crest-image-height-2x: 204px; - // Half the 2x image so that it fits the regular 1x size. - $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2); - $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2); - - .govuk-footer { - @include govuk-font($size: 16); - @include govuk-responsive-padding(7, "top"); - @include govuk-responsive-padding(5, "bottom"); - - border-top: 1px solid $govuk-footer-border-top; - color: $govuk-footer-text; - background: $govuk-footer-background; - } - - .govuk-footer__link { - @if ($govuk-use-legacy-palette) { - &:link, - &:visited { - color: $govuk-footer-link; - } - - &:hover, - &:active { - color: $govuk-footer-link-hover; - } - } @else { - &:link, - &:visited, - &:hover, - &:active { - color: $govuk-footer-link; - } - } - - &:focus { - @include govuk-focused-text; - } - - // alphagov/govuk_template includes a specific a:link:focus selector - // designed to make unvisited links a slightly darker blue when focussed, so - // we need to override the text colour for that combination of selectors. - @include govuk-compatibility(govuk_template) { - &:link:focus { - @include govuk-text-colour; - } - } - } - - .govuk-footer__section-break { - margin: 0; // Reset `
` default margins - @include govuk-responsive-margin(8, "bottom"); - border: 0; // Reset `
` default borders - border-bottom: 1px solid $govuk-footer-border; - } - - .govuk-footer__meta { - display: flex; // Support: Flexbox - margin-right: -$govuk-gutter-half; - margin-left: -$govuk-gutter-half; - flex-wrap: wrap; // Support: Flexbox - align-items: flex-end; // Support: Flexbox - justify-content: center; // Support: Flexbox - } - - .govuk-footer__meta-item { - margin-right: $govuk-gutter-half; - margin-bottom: govuk-spacing(5); - margin-left: $govuk-gutter-half; - } - - .govuk-footer__meta-item--grow { - flex: 1; // Support: Flexbox - @include govuk-media-query ($until: tablet) { - flex-basis: 320px; // Support: Flexbox - } - } - - .govuk-footer__licence-logo { - display: inline-block; - margin-right: govuk-spacing(2); - @include govuk-media-query ($until: desktop) { - margin-bottom: govuk-spacing(3); - } - vertical-align: top; - } - - .govuk-footer__licence-description { - display: inline-block; - } - - .govuk-footer__copyright-logo { - display: inline-block; - min-width: $govuk-footer-crest-image-width; - padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2)); - background-image: govuk-image-url("govuk-crest.png"); - @include govuk-device-pixel-ratio { - background-image: govuk-image-url("govuk-crest-2x.png"); - } - background-repeat: no-repeat; - background-position: 50% 0%; - background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height; - text-align: center; - text-decoration: none; - white-space: nowrap; - } - - .govuk-footer__inline-list { - margin-top: 0; - margin-bottom: govuk-spacing(3); - padding: 0; - } - - .govuk-footer__meta-custom { - margin-bottom: govuk-spacing(4); - } - - .govuk-footer__inline-list-item { - display: inline-block; - margin-right: govuk-spacing(3); - margin-bottom: govuk-spacing(1); - } - - .govuk-footer__heading { - @include govuk-responsive-margin(7, "bottom"); - padding-bottom: govuk-spacing(4); - @include govuk-media-query ($until: tablet) { - padding-bottom: govuk-spacing(2); - } - border-bottom: 1px solid $govuk-footer-border; - } - - .govuk-footer__navigation { - display: flex; // Support: Flexbox - margin-right: -$govuk-gutter-half; - margin-left: -$govuk-gutter-half; - flex-wrap: wrap; // Support: Flexbox - } - - .govuk-footer__section { - display: inline-block; - margin-right: $govuk-gutter-half; - margin-bottom: $govuk-gutter; - margin-left: $govuk-gutter-half; - vertical-align: top; - // Ensure columns take up equal width (typically one-half:one-half) - flex-grow: 1; // Support: Flexbox - flex-shrink: 1; // Support: Flexbox - @include govuk-media-query ($until: desktop) { - // Make sure columns do not drop below 200px in width - // Will typically result in wrapping, and end up in a single column on smaller screens. - flex-basis: 200px; // Support: Flexbox - } - } - - // If there are only two sections, set the layout to be two-third:one-third on desktop - @include govuk-media-query ($from: desktop) { - // We match the first section with `:first-child`. - // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`. - .govuk-footer__section:first-child:nth-last-child(2) { - flex-grow: 2; // Support: Flexbox - } - } - - .govuk-footer__list { - margin: 0; - padding: 0; - list-style: none; - column-gap: $govuk-gutter; // Support: Columns - } - - @include govuk-media-query ($from: desktop) { - .govuk-footer__list--columns-2 { - column-count: 2; // Support: Columns - } - - .govuk-footer__list--columns-3 { - column-count: 3; // Support: Columns - } - } - - .govuk-footer__list-item { - @include govuk-responsive-margin(4, "bottom"); - } - - .govuk-footer__list-item:last-child { - margin-bottom: 0; - } -} +@import "./style"; diff --git a/src/govuk/components/footer/_style.scss b/src/govuk/components/footer/_style.scss new file mode 100644 index 0000000000..0c62e4d12b --- /dev/null +++ b/src/govuk/components/footer/_style.scss @@ -0,0 +1,215 @@ +@import "../../helpers/typography"; + +@include govuk-exports("govuk/component/footer") { + + $govuk-footer-background: $govuk-canvas-background-colour; + $govuk-footer-border: $govuk-border-colour; + // This variable can be removed entirely once the legacy palette goes away, + // as it'll just be the same as $govuk-footer-border. + $govuk-footer-border-top: $govuk-border-colour; + $govuk-footer-text: $govuk-text-colour; + $govuk-footer-link: $govuk-footer-text; + $govuk-footer-link-hover: false; + + @if ($govuk-use-legacy-palette) { + // sass-lint:disable no-color-literals + $govuk-footer-border-top: #a1acb2; + $govuk-footer-border: govuk-colour("grey-2"); + $govuk-footer-text: #454a4c; + $govuk-footer-link: $govuk-footer-text; + + // Only used with the legacy palette + $govuk-footer-link-hover: #171819; + } + + // Based on the govuk-crest-2x.png image dimensions. + $govuk-footer-crest-image-width-2x: 250px; + $govuk-footer-crest-image-height-2x: 204px; + // Half the 2x image so that it fits the regular 1x size. + $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2); + $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2); + + .govuk-footer { + @include govuk-font($size: 16); + @include govuk-responsive-padding(7, "top"); + @include govuk-responsive-padding(5, "bottom"); + + border-top: 1px solid $govuk-footer-border-top; + color: $govuk-footer-text; + background: $govuk-footer-background; + } + + .govuk-footer__link { + @if ($govuk-use-legacy-palette) { + &:link, + &:visited { + color: $govuk-footer-link; + } + + &:hover, + &:active { + color: $govuk-footer-link-hover; + } + } @else { + &:link, + &:visited, + &:hover, + &:active { + color: $govuk-footer-link; + } + } + + &:focus { + @include govuk-focused-text; + } + + // alphagov/govuk_template includes a specific a:link:focus selector + // designed to make unvisited links a slightly darker blue when focussed, so + // we need to override the text colour for that combination of selectors. + @include govuk-compatibility(govuk_template) { + &:link:focus { + @include govuk-text-colour; + } + } + } + + .govuk-footer__section-break { + margin: 0; // Reset `
` default margins + @include govuk-responsive-margin(8, "bottom"); + border: 0; // Reset `
` default borders + border-bottom: 1px solid $govuk-footer-border; + } + + .govuk-footer__meta { + display: flex; // Support: Flexbox + margin-right: -$govuk-gutter-half; + margin-left: -$govuk-gutter-half; + flex-wrap: wrap; // Support: Flexbox + align-items: flex-end; // Support: Flexbox + justify-content: center; // Support: Flexbox + } + + .govuk-footer__meta-item { + margin-right: $govuk-gutter-half; + margin-bottom: govuk-spacing(5); + margin-left: $govuk-gutter-half; + } + + .govuk-footer__meta-item--grow { + flex: 1; // Support: Flexbox + @include govuk-media-query ($until: tablet) { + flex-basis: 320px; // Support: Flexbox + } + } + + .govuk-footer__licence-logo { + display: inline-block; + margin-right: govuk-spacing(2); + @include govuk-media-query ($until: desktop) { + margin-bottom: govuk-spacing(3); + } + vertical-align: top; + } + + .govuk-footer__licence-description { + display: inline-block; + } + + .govuk-footer__copyright-logo { + display: inline-block; + min-width: $govuk-footer-crest-image-width; + padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2)); + background-image: govuk-image-url("govuk-crest.png"); + @include govuk-device-pixel-ratio { + background-image: govuk-image-url("govuk-crest-2x.png"); + } + background-repeat: no-repeat; + background-position: 50% 0%; + background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height; + text-align: center; + text-decoration: none; + white-space: nowrap; + } + + .govuk-footer__inline-list { + margin-top: 0; + margin-bottom: govuk-spacing(3); + padding: 0; + } + + .govuk-footer__meta-custom { + margin-bottom: govuk-spacing(4); + } + + .govuk-footer__inline-list-item { + display: inline-block; + margin-right: govuk-spacing(3); + margin-bottom: govuk-spacing(1); + } + + .govuk-footer__heading { + @include govuk-responsive-margin(7, "bottom"); + padding-bottom: govuk-spacing(4); + @include govuk-media-query ($until: tablet) { + padding-bottom: govuk-spacing(2); + } + border-bottom: 1px solid $govuk-footer-border; + } + + .govuk-footer__navigation { + display: flex; // Support: Flexbox + margin-right: -$govuk-gutter-half; + margin-left: -$govuk-gutter-half; + flex-wrap: wrap; // Support: Flexbox + } + + .govuk-footer__section { + display: inline-block; + margin-right: $govuk-gutter-half; + margin-bottom: $govuk-gutter; + margin-left: $govuk-gutter-half; + vertical-align: top; + // Ensure columns take up equal width (typically one-half:one-half) + flex-grow: 1; // Support: Flexbox + flex-shrink: 1; // Support: Flexbox + @include govuk-media-query ($until: desktop) { + // Make sure columns do not drop below 200px in width + // Will typically result in wrapping, and end up in a single column on smaller screens. + flex-basis: 200px; // Support: Flexbox + } + } + + // If there are only two sections, set the layout to be two-third:one-third on desktop + @include govuk-media-query ($from: desktop) { + // We match the first section with `:first-child`. + // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`. + .govuk-footer__section:first-child:nth-last-child(2) { + flex-grow: 2; // Support: Flexbox + } + } + + .govuk-footer__list { + margin: 0; + padding: 0; + list-style: none; + column-gap: $govuk-gutter; // Support: Columns + } + + @include govuk-media-query ($from: desktop) { + .govuk-footer__list--columns-2 { + column-count: 2; // Support: Columns + } + + .govuk-footer__list--columns-3 { + column-count: 3; // Support: Columns + } + } + + .govuk-footer__list-item { + @include govuk-responsive-margin(4, "bottom"); + } + + .govuk-footer__list-item:last-child { + margin-bottom: 0; + } +} diff --git a/src/govuk/components/header/_header.scss b/src/govuk/components/header/_header.scss index c9d31b4326..8b5953fd29 100644 --- a/src/govuk/components/header/_header.scss +++ b/src/govuk/components/header/_header.scss @@ -2,317 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@import "../../helpers/typography"; - -@include govuk-exports("govuk/component/header") { - - $govuk-header-background: govuk-colour("black"); - $govuk-header-border-color: $govuk-brand-colour; - $govuk-header-border-width: govuk-spacing(2); - $govuk-header-text: govuk-colour("white"); - $govuk-header-link: govuk-colour("white"); - $govuk-header-link-hover: govuk-colour("white"); - $govuk-header-link-active: #1d8feb; - $govuk-header-nav-item-border-color: #2e3133; - - .govuk-header { - @include govuk-font($size: 16); - - border-bottom: govuk-spacing(2) solid govuk-colour("white"); - color: $govuk-header-text; - background: $govuk-header-background; - - } - - .govuk-header__container--full-width { - padding: 0 govuk-spacing(3); - border-color: $govuk-header-border-color; - - .govuk-header__menu-button { - right: govuk-spacing(3); - } - } - - .govuk-header__container { - @include govuk-clearfix; - position: relative; - margin-bottom: -$govuk-header-border-width; - padding-top: govuk-spacing(2); - border-bottom: $govuk-header-border-width solid $govuk-header-border-color; - } - - .govuk-header__logotype { - display: inline-block; - margin-right: govuk-spacing(1); - } - - .govuk-header__logotype-crown { - position: relative; - top: -1px; - margin-right: 1px; - fill: currentColor; - vertical-align: top; - } - - .govuk-header__logotype-crown-fallback-image { - width: 36px; - height: 32px; - border: 0; - vertical-align: middle; - } - - .govuk-header__product-name { - @include govuk-font($size: 24, $line-height: 1); - display: inline-table; - padding-right: govuk-spacing(2); - } - - .govuk-header__link { - text-decoration: none; - - &:link, - &:visited { - color: $govuk-header-link; - } - - &:hover { - text-decoration: underline; - } - - &:focus { - @include govuk-focused-text; - } - - // alphagov/govuk_template includes a specific a:link:focus selector - // designed to make unvisited links a slightly darker blue when focussed, so - // we need to override the text colour for that combination of selectors. - @include govuk-compatibility(govuk_template) { - &:link:focus { - @include govuk-text-colour; - } - } - } - - .govuk-header__link--homepage { - // Font size needs to be set on the link so that the box sizing is correct - // in Firefox - @include govuk-font($size: false, $weight: bold); - - display: inline-block; - font-size: 30px; // We don't have a mixin that produces 30px font size - line-height: 1; - - &:link, - &:visited { - text-decoration: none; - } - - &:hover, - &:active { - // Negate the added border - margin-bottom: -1px; - // Omitting colour will use default value of currentColor – if we - // specified currentColor explicitly IE8 would ignore this rule. - border-bottom: 1px solid; - } - - // Remove any borders that show when focused and hovered. - &:focus { - margin-bottom: 0; - border-bottom: 0; - } - } - - .govuk-header__link--service-name { - display: inline-block; - margin-bottom: govuk-spacing(2); - @include govuk-font($size: 24, $weight: bold); - } - - .govuk-header__logo, - .govuk-header__content { - box-sizing: border-box; - } - - .govuk-header__logo { - @include govuk-responsive-margin(2, "bottom"); - padding-right: govuk-spacing(8); - - @include govuk-media-query ($from: desktop) { - width: 33.33%; - padding-right: $govuk-gutter-half; - float: left; - vertical-align: top; - } - } - - .govuk-header__content { - @include govuk-media-query ($from: desktop) { - width: 66.66%; - padding-left: $govuk-gutter-half; - float: left; - } - } - - .govuk-header__menu-button { - @include govuk-font($size: 16); - display: none; - position: absolute; - top: govuk-spacing(4); - right: 0; - margin: 0; - padding: 0; - border: 0; - color: $govuk-header-link; - background: none; - - &:hover { - text-decoration: underline; - } - - &:focus { - @include govuk-focused-text; - } - - &::after { - @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block); - content: ""; - margin-left: govuk-spacing(1); - } - - @include govuk-media-query ($from: tablet) { - top: govuk-spacing(3); - } - } - - .govuk-header__menu-button--open { - &::after { - @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block); - } - } - - .govuk-header__navigation { - @include govuk-responsive-margin(2, "bottom"); - display: block; - margin: 0; - padding: 0; - list-style: none; - } - - .js-enabled { - .govuk-header__menu-button { - display: block; - @include govuk-media-query ($from: desktop) { - display: none; - } - } - - .govuk-header__navigation { - display: none; - @include govuk-media-query ($from: desktop) { - display: block; - } - } - - .govuk-header__navigation--open { - display: block; - } - } - - - .govuk-header__navigation--end { - @include govuk-media-query ($from: desktop) { - margin: 0; - padding: govuk-spacing(1) 0; - text-align: right; - } - } - - .govuk-header__navigation--no-service-name { - padding-top: govuk-spacing(7); - } - - .govuk-header__navigation-item { - padding: govuk-spacing(2) 0; - border-bottom: 1px solid $govuk-header-nav-item-border-color; - - @include govuk-media-query ($from: desktop) { - display: inline-block; - margin-right: govuk-spacing(3); - padding: govuk-spacing(1) 0; - border: 0; - } - - a { - @include govuk-font($size: 16, $weight: bold); - white-space: nowrap; - } - } - - .govuk-header__navigation-item--active { - a { - &:link, - &:hover, - &:visited { - color: $govuk-header-link-active; - } - - // When focussed, the text colour needs to be darker to ensure that colour - // contrast is still acceptable - &:focus { - color: $govuk-focus-text-colour; - } - } - } - - .govuk-header__navigation-item:last-child { - margin-right: 0; - } - - @include govuk-media-query($media-type: print) { - .govuk-header { - border-bottom-width: 0; - color: govuk-colour("black"); - background: transparent; - } - - // Hide the inverted crown when printing in browsers that don't support SVG. - .govuk-header__logotype-crown-fallback-image { - display: none; - } - - .govuk-header__link { - &:link, - &:visited { - color: govuk-colour("black"); - } - - // Do not append link href to GOV.UK link when printing (e.g. '(/)') - &:after { - display: none; - } - } - } - - @if $govuk-use-legacy-font { - // Begin adjustments for font baseline offset - // These should be removed when the font is updated with the correct baseline - .govuk-header__logotype-crown, - .govuk-header__logotype-crown-fallback-image { - position: relative; - top: -4px; - vertical-align: middle; - } - - .govuk-header { - $offset: 3px; - padding-top: $offset; - } - - .govuk-header__link--homepage { - line-height: 30px; - } - // End adjustments - } - -} +@import "./style"; diff --git a/src/govuk/components/header/_style.scss b/src/govuk/components/header/_style.scss new file mode 100644 index 0000000000..4de228201d --- /dev/null +++ b/src/govuk/components/header/_style.scss @@ -0,0 +1,314 @@ +@import "../../helpers/typography"; + +@include govuk-exports("govuk/component/header") { + + $govuk-header-background: govuk-colour("black"); + $govuk-header-border-color: $govuk-brand-colour; + $govuk-header-border-width: govuk-spacing(2); + $govuk-header-text: govuk-colour("white"); + $govuk-header-link: govuk-colour("white"); + $govuk-header-link-hover: govuk-colour("white"); + $govuk-header-link-active: #1d8feb; + $govuk-header-nav-item-border-color: #2e3133; + + .govuk-header { + @include govuk-font($size: 16); + + border-bottom: govuk-spacing(2) solid govuk-colour("white"); + color: $govuk-header-text; + background: $govuk-header-background; + + } + + .govuk-header__container--full-width { + padding: 0 govuk-spacing(3); + border-color: $govuk-header-border-color; + + .govuk-header__menu-button { + right: govuk-spacing(3); + } + } + + .govuk-header__container { + @include govuk-clearfix; + position: relative; + margin-bottom: -$govuk-header-border-width; + padding-top: govuk-spacing(2); + border-bottom: $govuk-header-border-width solid $govuk-header-border-color; + } + + .govuk-header__logotype { + display: inline-block; + margin-right: govuk-spacing(1); + } + + .govuk-header__logotype-crown { + position: relative; + top: -1px; + margin-right: 1px; + fill: currentColor; + vertical-align: top; + } + + .govuk-header__logotype-crown-fallback-image { + width: 36px; + height: 32px; + border: 0; + vertical-align: middle; + } + + .govuk-header__product-name { + @include govuk-font($size: 24, $line-height: 1); + display: inline-table; + padding-right: govuk-spacing(2); + } + + .govuk-header__link { + text-decoration: none; + + &:link, + &:visited { + color: $govuk-header-link; + } + + &:hover { + text-decoration: underline; + } + + &:focus { + @include govuk-focused-text; + } + + // alphagov/govuk_template includes a specific a:link:focus selector + // designed to make unvisited links a slightly darker blue when focussed, so + // we need to override the text colour for that combination of selectors. + @include govuk-compatibility(govuk_template) { + &:link:focus { + @include govuk-text-colour; + } + } + } + + .govuk-header__link--homepage { + // Font size needs to be set on the link so that the box sizing is correct + // in Firefox + @include govuk-font($size: false, $weight: bold); + + display: inline-block; + font-size: 30px; // We don't have a mixin that produces 30px font size + line-height: 1; + + &:link, + &:visited { + text-decoration: none; + } + + &:hover, + &:active { + // Negate the added border + margin-bottom: -1px; + // Omitting colour will use default value of currentColor – if we + // specified currentColor explicitly IE8 would ignore this rule. + border-bottom: 1px solid; + } + + // Remove any borders that show when focused and hovered. + &:focus { + margin-bottom: 0; + border-bottom: 0; + } + } + + .govuk-header__link--service-name { + display: inline-block; + margin-bottom: govuk-spacing(2); + @include govuk-font($size: 24, $weight: bold); + } + + .govuk-header__logo, + .govuk-header__content { + box-sizing: border-box; + } + + .govuk-header__logo { + @include govuk-responsive-margin(2, "bottom"); + padding-right: govuk-spacing(8); + + @include govuk-media-query ($from: desktop) { + width: 33.33%; + padding-right: $govuk-gutter-half; + float: left; + vertical-align: top; + } + } + + .govuk-header__content { + @include govuk-media-query ($from: desktop) { + width: 66.66%; + padding-left: $govuk-gutter-half; + float: left; + } + } + + .govuk-header__menu-button { + @include govuk-font($size: 16); + display: none; + position: absolute; + top: govuk-spacing(4); + right: 0; + margin: 0; + padding: 0; + border: 0; + color: $govuk-header-link; + background: none; + + &:hover { + text-decoration: underline; + } + + &:focus { + @include govuk-focused-text; + } + + &::after { + @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block); + content: ""; + margin-left: govuk-spacing(1); + } + + @include govuk-media-query ($from: tablet) { + top: govuk-spacing(3); + } + } + + .govuk-header__menu-button--open { + &::after { + @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block); + } + } + + .govuk-header__navigation { + @include govuk-responsive-margin(2, "bottom"); + display: block; + margin: 0; + padding: 0; + list-style: none; + } + + .js-enabled { + .govuk-header__menu-button { + display: block; + @include govuk-media-query ($from: desktop) { + display: none; + } + } + + .govuk-header__navigation { + display: none; + @include govuk-media-query ($from: desktop) { + display: block; + } + } + + .govuk-header__navigation--open { + display: block; + } + } + + + .govuk-header__navigation--end { + @include govuk-media-query ($from: desktop) { + margin: 0; + padding: govuk-spacing(1) 0; + text-align: right; + } + } + + .govuk-header__navigation--no-service-name { + padding-top: govuk-spacing(7); + } + + .govuk-header__navigation-item { + padding: govuk-spacing(2) 0; + border-bottom: 1px solid $govuk-header-nav-item-border-color; + + @include govuk-media-query ($from: desktop) { + display: inline-block; + margin-right: govuk-spacing(3); + padding: govuk-spacing(1) 0; + border: 0; + } + + a { + @include govuk-font($size: 16, $weight: bold); + white-space: nowrap; + } + } + + .govuk-header__navigation-item--active { + a { + &:link, + &:hover, + &:visited { + color: $govuk-header-link-active; + } + + // When focussed, the text colour needs to be darker to ensure that colour + // contrast is still acceptable + &:focus { + color: $govuk-focus-text-colour; + } + } + } + + .govuk-header__navigation-item:last-child { + margin-right: 0; + } + + @include govuk-media-query($media-type: print) { + .govuk-header { + border-bottom-width: 0; + color: govuk-colour("black"); + background: transparent; + } + + // Hide the inverted crown when printing in browsers that don't support SVG. + .govuk-header__logotype-crown-fallback-image { + display: none; + } + + .govuk-header__link { + &:link, + &:visited { + color: govuk-colour("black"); + } + + // Do not append link href to GOV.UK link when printing (e.g. '(/)') + &:after { + display: none; + } + } + } + + @if $govuk-use-legacy-font { + // Begin adjustments for font baseline offset + // These should be removed when the font is updated with the correct baseline + .govuk-header__logotype-crown, + .govuk-header__logotype-crown-fallback-image { + position: relative; + top: -4px; + vertical-align: middle; + } + + .govuk-header { + $offset: 3px; + padding-top: $offset; + } + + .govuk-header__link--homepage { + line-height: 30px; + } + // End adjustments + } + +} diff --git a/src/govuk/components/hint/_hint.scss b/src/govuk/components/hint/_hint.scss index 7dab10c46a..8b5953fd29 100644 --- a/src/govuk/components/hint/_hint.scss +++ b/src/govuk/components/hint/_hint.scss @@ -2,49 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/hint") { - .govuk-hint { - @include govuk-font($size: 19); - - display: block; - - margin-bottom: govuk-spacing(3); - - color: $govuk-secondary-text-colour; - } - - // Reduces margin-bottom of hint when used after the default label (no class) - // or govuk-label--s for better vertical alignment. - - // This adjustment will not work when the label is inside the

, however it - // is unlikely that the default or govuk-label--s class would be used in this - // case. - - // This adjustment will not work in browsers that do not support :not(). - // Users with these browsers will see the default size margin (5px larger). - - .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint { - margin-bottom: govuk-spacing(2); - } - - // Reduces margin-bottom of hint when used after the default legend (no class) - // or govuk-fieldset__legend--s for better vertical alignment. - - // This adjustment will not work when the legend is outside the

, however - // it is unlikely that the default or govuk-fieldset__legend--s class would be - // used in this case. - - // This adjustment will not work in browsers that do not support :not(). - // Users with these browsers will see the default size margin (5px larger). - - .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint { - margin-bottom: govuk-spacing(2); - } - - // Reduces visual spacing of legend when there is a hint - - .govuk-fieldset__legend + .govuk-hint, - .govuk-fieldset__legend + .govuk-hint { - margin-top: -(govuk-spacing(1)); - } -} +@import "./style"; diff --git a/src/govuk/components/hint/_style.scss b/src/govuk/components/hint/_style.scss new file mode 100644 index 0000000000..63932b639d --- /dev/null +++ b/src/govuk/components/hint/_style.scss @@ -0,0 +1,46 @@ +@include govuk-exports("govuk/component/hint") { + .govuk-hint { + @include govuk-font($size: 19); + + display: block; + + margin-bottom: govuk-spacing(3); + + color: $govuk-secondary-text-colour; + } + + // Reduces margin-bottom of hint when used after the default label (no class) + // or govuk-label--s for better vertical alignment. + + // This adjustment will not work when the label is inside the

, however it + // is unlikely that the default or govuk-label--s class would be used in this + // case. + + // This adjustment will not work in browsers that do not support :not(). + // Users with these browsers will see the default size margin (5px larger). + + .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint { + margin-bottom: govuk-spacing(2); + } + + // Reduces margin-bottom of hint when used after the default legend (no class) + // or govuk-fieldset__legend--s for better vertical alignment. + + // This adjustment will not work when the legend is outside the

, however + // it is unlikely that the default or govuk-fieldset__legend--s class would be + // used in this case. + + // This adjustment will not work in browsers that do not support :not(). + // Users with these browsers will see the default size margin (5px larger). + + .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint { + margin-bottom: govuk-spacing(2); + } + + // Reduces visual spacing of legend when there is a hint + + .govuk-fieldset__legend + .govuk-hint, + .govuk-fieldset__legend + .govuk-hint { + margin-top: -(govuk-spacing(1)); + } +} diff --git a/src/govuk/components/input/_input.scss b/src/govuk/components/input/_input.scss index ea17f91039..8b5953fd29 100644 --- a/src/govuk/components/input/_input.scss +++ b/src/govuk/components/input/_input.scss @@ -2,100 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@import "../error-message/error-message"; -@import "../hint/hint"; -@import "../label/label"; - -@include govuk-exports("govuk/component/input") { - .govuk-input { - @include govuk-font($size: 19); - - box-sizing: border-box; - width: 100%; - height: 40px; - @if $govuk-typography-use-rem { - height: govuk-px-to-rem(40px); - } - margin-top: 0; - - padding: govuk-spacing(1); - // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476) - // as background-color and color need to always be set together, color should not be set either - border: $govuk-border-width-form-element solid $govuk-input-border-colour; - border-radius: 0; - - // Disable inner shadow and remove rounded corners - appearance: none; - - &:focus { - outline: $govuk-focus-width solid $govuk-focus-colour; - // Ensure outline appears outside of the element - outline-offset: 0; - // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with - // components such as textarea where we avoid changing `border-width` as - // it will change the element size. Also, `outline` cannot be utilised - // here as it is already used for the yellow focus state. - box-shadow: inset 0 0 0 $govuk-border-width-form-element; - - @include govuk-if-ie8 { - // IE8 doesn't support `box-shadow` so double the border with - // `border-width`. - border-width: $govuk-border-width-form-element * 2; - } - } - } - - .govuk-input::-webkit-outer-spin-button, - .govuk-input::-webkit-inner-spin-button { - margin: 0; - -webkit-appearance: none; - } - - .govuk-input[type="number"] { - -moz-appearance: textfield; - } - - .govuk-input--error { - border: $govuk-border-width-form-element-error solid $govuk-error-colour; - - &:focus { - border-color: $govuk-input-border-colour; - // Remove `box-shadow` inherited from `:focus` as `input--error` - // already has the thicker border. - box-shadow: none; - } - } - - // The ex measurements are based on the number of W's that can fit inside the input - // Extra space is left on the right hand side to allow for the Safari prefill icon - // Linear regression estimation based on visual tests: y = 1.76 + 1.81x - - .govuk-input--width-30 { - max-width: 56ex + 3ex; - } - - .govuk-input--width-20 { - max-width: 38ex + 3ex; - } - - .govuk-input--width-10 { - max-width: 20ex + 3ex; - } - - .govuk-input--width-5 { - max-width: 10.8ex; - } - - .govuk-input--width-4 { - max-width: 9ex; - } - - .govuk-input--width-3 { - max-width: 7.2ex; - } - - .govuk-input--width-2 { - max-width: 5.4ex; - } - -} +@import "./style"; diff --git a/src/govuk/components/input/_style.scss b/src/govuk/components/input/_style.scss new file mode 100644 index 0000000000..91eb04eea5 --- /dev/null +++ b/src/govuk/components/input/_style.scss @@ -0,0 +1,97 @@ +@import "../error-message/error-message"; +@import "../hint/hint"; +@import "../label/label"; + +@include govuk-exports("govuk/component/input") { + .govuk-input { + @include govuk-font($size: 19); + + box-sizing: border-box; + width: 100%; + height: 40px; + @if $govuk-typography-use-rem { + height: govuk-px-to-rem(40px); + } + margin-top: 0; + + padding: govuk-spacing(1); + // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476) + // as background-color and color need to always be set together, color should not be set either + border: $govuk-border-width-form-element solid $govuk-input-border-colour; + border-radius: 0; + + // Disable inner shadow and remove rounded corners + appearance: none; + + &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + // Ensure outline appears outside of the element + outline-offset: 0; + // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with + // components such as textarea where we avoid changing `border-width` as + // it will change the element size. Also, `outline` cannot be utilised + // here as it is already used for the yellow focus state. + box-shadow: inset 0 0 0 $govuk-border-width-form-element; + + @include govuk-if-ie8 { + // IE8 doesn't support `box-shadow` so double the border with + // `border-width`. + border-width: $govuk-border-width-form-element * 2; + } + } + } + + .govuk-input::-webkit-outer-spin-button, + .govuk-input::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; + } + + .govuk-input[type="number"] { + -moz-appearance: textfield; + } + + .govuk-input--error { + border: $govuk-border-width-form-element-error solid $govuk-error-colour; + + &:focus { + border-color: $govuk-input-border-colour; + // Remove `box-shadow` inherited from `:focus` as `input--error` + // already has the thicker border. + box-shadow: none; + } + } + + // The ex measurements are based on the number of W's that can fit inside the input + // Extra space is left on the right hand side to allow for the Safari prefill icon + // Linear regression estimation based on visual tests: y = 1.76 + 1.81x + + .govuk-input--width-30 { + max-width: 56ex + 3ex; + } + + .govuk-input--width-20 { + max-width: 38ex + 3ex; + } + + .govuk-input--width-10 { + max-width: 20ex + 3ex; + } + + .govuk-input--width-5 { + max-width: 10.8ex; + } + + .govuk-input--width-4 { + max-width: 9ex; + } + + .govuk-input--width-3 { + max-width: 7.2ex; + } + + .govuk-input--width-2 { + max-width: 5.4ex; + } + +} diff --git a/src/govuk/components/inset-text/_inset-text.scss b/src/govuk/components/inset-text/_inset-text.scss index 524dc50c8f..8b5953fd29 100644 --- a/src/govuk/components/inset-text/_inset-text.scss +++ b/src/govuk/components/inset-text/_inset-text.scss @@ -2,27 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/inset-text") { - .govuk-inset-text { - @include govuk-font($size: 19); - @include govuk-text-colour; - padding: govuk-spacing(3); - // Margin top intended to collapse - // This adds an additional 10px to the paragraph above - @include govuk-responsive-margin(6, "top"); - @include govuk-responsive-margin(6, "bottom"); - - clear: both; - - border-left: $govuk-border-width-wide solid $govuk-border-colour; - - > :first-child { - margin-top: 0; - } - - > :only-child, - > :last-child { - margin-bottom: 0; - } - } -} +@import "./style"; diff --git a/src/govuk/components/inset-text/_style.scss b/src/govuk/components/inset-text/_style.scss new file mode 100644 index 0000000000..9a2b2c9e84 --- /dev/null +++ b/src/govuk/components/inset-text/_style.scss @@ -0,0 +1,24 @@ +@include govuk-exports("govuk/component/inset-text") { + .govuk-inset-text { + @include govuk-font($size: 19); + @include govuk-text-colour; + padding: govuk-spacing(3); + // Margin top intended to collapse + // This adds an additional 10px to the paragraph above + @include govuk-responsive-margin(6, "top"); + @include govuk-responsive-margin(6, "bottom"); + + clear: both; + + border-left: $govuk-border-width-wide solid $govuk-border-colour; + + > :first-child { + margin-top: 0; + } + + > :only-child, + > :last-child { + margin-bottom: 0; + } + } +} diff --git a/src/govuk/components/label/_label.scss b/src/govuk/components/label/_label.scss index bfe400e57b..8b5953fd29 100644 --- a/src/govuk/components/label/_label.scss +++ b/src/govuk/components/label/_label.scss @@ -2,44 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/label") { - .govuk-label { - @include govuk-font($size: 19); - @include govuk-text-colour; - - display: block; - - margin-bottom: govuk-spacing(1); - } - - // Modifiers that make labels look more like their equivalent headings - - .govuk-label--xl { - @include govuk-font($size: 48, $weight: bold); - margin-bottom: govuk-spacing(3); - } - - .govuk-label--l { - @include govuk-font($size: 36, $weight: bold); - margin-bottom: govuk-spacing(3); - } - - .govuk-label--m { - @include govuk-font($size: 24, $weight: bold); - margin-bottom: govuk-spacing(2); - } - - .govuk-label--s { - @include govuk-font($size: 19, $weight: bold); - } - - // When the label is nested inside a heading, override the heading so that it - // does not have a margin. Effectively we want to be able to treat the heading - // as if it is not there. - // - // This breaks BEM conventions because it exists as a parent of the 'block', - // so we can't really consider an element. - .govuk-label-wrapper { - margin: 0; - } -} +@import "./style"; diff --git a/src/govuk/components/label/_style.scss b/src/govuk/components/label/_style.scss new file mode 100644 index 0000000000..4c10ce9086 --- /dev/null +++ b/src/govuk/components/label/_style.scss @@ -0,0 +1,41 @@ +@include govuk-exports("govuk/component/label") { + .govuk-label { + @include govuk-font($size: 19); + @include govuk-text-colour; + + display: block; + + margin-bottom: govuk-spacing(1); + } + + // Modifiers that make labels look more like their equivalent headings + + .govuk-label--xl { + @include govuk-font($size: 48, $weight: bold); + margin-bottom: govuk-spacing(3); + } + + .govuk-label--l { + @include govuk-font($size: 36, $weight: bold); + margin-bottom: govuk-spacing(3); + } + + .govuk-label--m { + @include govuk-font($size: 24, $weight: bold); + margin-bottom: govuk-spacing(2); + } + + .govuk-label--s { + @include govuk-font($size: 19, $weight: bold); + } + + // When the label is nested inside a heading, override the heading so that it + // does not have a margin. Effectively we want to be able to treat the heading + // as if it is not there. + // + // This breaks BEM conventions because it exists as a parent of the 'block', + // so we can't really consider an element. + .govuk-label-wrapper { + margin: 0; + } +} diff --git a/src/govuk/components/panel/_panel.scss b/src/govuk/components/panel/_panel.scss index d0267f7fc5..8b5953fd29 100644 --- a/src/govuk/components/panel/_panel.scss +++ b/src/govuk/components/panel/_panel.scss @@ -2,43 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/panel") { - - .govuk-panel { - @include govuk-font($size: 19); - - box-sizing: border-box; - - margin-bottom: govuk-spacing(3); - padding: govuk-spacing(7) - $govuk-border-width; - - border: $govuk-border-width solid transparent; - - text-align: center; - - @include govuk-media-query($until: tablet) { - padding: govuk-spacing(6) - $govuk-border-width; - } - } - - .govuk-panel--confirmation { - color: govuk-colour("white"); - background: govuk-colour("green", $legacy: "turquoise"); - } - - .govuk-panel__title { - margin-top: 0; - margin-bottom: govuk-spacing(6); - - @include govuk-font($size: 48, $weight: bold); - } - - .govuk-panel__title:last-child { - margin-bottom: 0; - } - - .govuk-panel__body { - @include govuk-font($size: 36); - } - -} +@import "./style"; diff --git a/src/govuk/components/panel/_style.scss b/src/govuk/components/panel/_style.scss new file mode 100644 index 0000000000..58496d70c5 --- /dev/null +++ b/src/govuk/components/panel/_style.scss @@ -0,0 +1,40 @@ +@include govuk-exports("govuk/component/panel") { + + .govuk-panel { + @include govuk-font($size: 19); + + box-sizing: border-box; + + margin-bottom: govuk-spacing(3); + padding: govuk-spacing(7) - $govuk-border-width; + + border: $govuk-border-width solid transparent; + + text-align: center; + + @include govuk-media-query($until: tablet) { + padding: govuk-spacing(6) - $govuk-border-width; + } + } + + .govuk-panel--confirmation { + color: govuk-colour("white"); + background: govuk-colour("green", $legacy: "turquoise"); + } + + .govuk-panel__title { + margin-top: 0; + margin-bottom: govuk-spacing(6); + + @include govuk-font($size: 48, $weight: bold); + } + + .govuk-panel__title:last-child { + margin-bottom: 0; + } + + .govuk-panel__body { + @include govuk-font($size: 36); + } + +} diff --git a/src/govuk/components/phase-banner/_phase-banner.scss b/src/govuk/components/phase-banner/_phase-banner.scss index fc9ec56bc2..8b5953fd29 100644 --- a/src/govuk/components/phase-banner/_phase-banner.scss +++ b/src/govuk/components/phase-banner/_phase-banner.scss @@ -2,30 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@import "../tag/tag"; - -@include govuk-exports("govuk/component/phase-banner") { - .govuk-phase-banner { - padding-top: govuk-spacing(2); - padding-bottom: govuk-spacing(2); - - border-bottom: 1px solid $govuk-border-colour; - } - - .govuk-phase-banner__content { - @include govuk-font($size: 16); - @include govuk-text-colour; - - display: table; - margin: 0; - } - - .govuk-phase-banner__content__tag { - margin-right: govuk-spacing(2); - } - - .govuk-phase-banner__text { - display: table-cell; - vertical-align: baseline; - } -} +@import "./style"; diff --git a/src/govuk/components/phase-banner/_style.scss b/src/govuk/components/phase-banner/_style.scss new file mode 100644 index 0000000000..a270d092c9 --- /dev/null +++ b/src/govuk/components/phase-banner/_style.scss @@ -0,0 +1,27 @@ +@import "../tag/tag"; + +@include govuk-exports("govuk/component/phase-banner") { + .govuk-phase-banner { + padding-top: govuk-spacing(2); + padding-bottom: govuk-spacing(2); + + border-bottom: 1px solid $govuk-border-colour; + } + + .govuk-phase-banner__content { + @include govuk-font($size: 16); + @include govuk-text-colour; + + display: table; + margin: 0; + } + + .govuk-phase-banner__content__tag { + margin-right: govuk-spacing(2); + } + + .govuk-phase-banner__text { + display: table-cell; + vertical-align: baseline; + } +} diff --git a/src/govuk/components/radios/_radios.scss b/src/govuk/components/radios/_radios.scss index e493d73935..8b5953fd29 100644 --- a/src/govuk/components/radios/_radios.scss +++ b/src/govuk/components/radios/_radios.scss @@ -2,344 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@import "../error-message/error-message"; -@import "../fieldset/fieldset"; -@import "../hint/hint"; -@import "../label/label"; - -@include govuk-exports("govuk/component/radios") { - - $govuk-touch-target-size: 44px; - $govuk-radios-size: 40px; - $govuk-small-radios-size: 24px; - $govuk-radios-label-padding-left-right: govuk-spacing(3); - // When the default focus width is used on a curved edge it looks visually smaller. - // So for the circular radios we bump the default to make it look visually consistent. - $govuk-radios-focus-width: $govuk-focus-width + 1px; - - .govuk-radios__item { - @include govuk-font($size: 19); - - display: block; - position: relative; - - min-height: $govuk-radios-size; - - margin-bottom: govuk-spacing(2); - padding-left: $govuk-radios-size; - - clear: left; - } - - .govuk-radios__item:last-child, - .govuk-radios__item:last-of-type { - margin-bottom: 0; - } - - .govuk-radios__input { - $input-offset: ($govuk-touch-target-size - $govuk-radios-size) / 2; - - cursor: pointer; - - // IE8 doesn’t support pseudo-elements, so we don’t want to hide native - // elements there. - @include govuk-not-ie8 { - position: absolute; - - z-index: 1; - top: $input-offset * -1; - left: $input-offset * -1; - - width: $govuk-touch-target-size; - height: $govuk-touch-target-size; - margin: 0; - - opacity: 0; - } - - @include govuk-if-ie8 { - margin-top: 10px; - margin-right: $govuk-radios-size / -2; - margin-left: $govuk-radios-size / -2; - float: left; - - // add focus outline to input - &:focus { - outline: $govuk-focus-width solid $govuk-focus-colour; - } - } - } - - .govuk-radios__label { - display: inline-block; - margin-bottom: 0; - padding: 8px $govuk-radios-label-padding-left-right govuk-spacing(1); - cursor: pointer; - // remove 300ms pause on mobile - touch-action: manipulation; - } - - // ( ) Radio ring - .govuk-radios__label::before { - content: ""; - box-sizing: border-box; - position: absolute; - top: 0; - left: 0; - - width: $govuk-radios-size; - height: $govuk-radios-size; - - border: $govuk-border-width-form-element solid currentColor; - border-radius: 50%; - background: transparent; - } - - // • Radio button - // - // We create the 'button' entirely out of 'border' so that they remain - // 'filled' even when colours are overridden in the browser. - .govuk-radios__label::after { - content: ""; - - position: absolute; - top: govuk-spacing(2); - left: govuk-spacing(2); - - width: 0; - height: 0; - - border: govuk-spacing(2) solid currentColor; - border-radius: 50%; - opacity: 0; - background: currentColor; - } - - .govuk-radios__hint { - display: block; - padding-right: $govuk-radios-label-padding-left-right; - padding-left: $govuk-radios-label-padding-left-right; - } - - // Focused state - .govuk-radios__input:focus + .govuk-radios__label::before { - border-width: 4px; - box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour; - } - - // Selected state - .govuk-radios__input:checked + .govuk-radios__label::after { - opacity: 1; - } - - // Disabled state - .govuk-radios__input:disabled, - .govuk-radios__input:disabled + .govuk-radios__label { - cursor: default; - } - - .govuk-radios__input:disabled + .govuk-radios__label { - opacity: .5; - } - - // ========================================================= - // Inline radios - // ========================================================= - - .govuk-radios--inline { - @include govuk-media-query ($from: tablet) { - @include govuk-clearfix; - - .govuk-radios__item { - margin-right: govuk-spacing(4); - float: left; - clear: none; - } - } - - // Prevent inline modifier being used with conditional reveals - &.govuk-radios--conditional { - .govuk-radios__item { - margin-right: 0; - float: none; - } - } - } - - // ========================================================= - // Dividers ('or') - // ========================================================= - - .govuk-radios__divider { - $govuk-divider-size: $govuk-radios-size !default; - @include govuk-font($size: 19); - @include govuk-text-colour; - width: $govuk-divider-size; - margin-bottom: govuk-spacing(2); - text-align: center; - } - - // ========================================================= - // Conditional reveals - // ========================================================= - - // The narrow border is used in the conditional reveals because the border has - // to be an even number in order to be centred under the 40px checkbox or radio. - $conditional-border-width: $govuk-border-width-narrow; - // Calculate the amount of padding needed to keep the border centered against the radios. - $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2); - // Move the border centered with the radios - $conditional-margin-left: $conditional-border-padding; - // Move the contents of the conditional inline with the label - $conditional-padding-left: $conditional-border-padding + $govuk-radios-label-padding-left-right; - - .govuk-radios__conditional { - @include govuk-responsive-margin(4, "bottom"); - margin-left: $conditional-margin-left; - padding-left: $conditional-padding-left; - border-left: $conditional-border-width solid $govuk-border-colour; - - .js-enabled &--hidden { - display: none; - } - - & > :last-child { - margin-bottom: 0; - } - } - - // ========================================================= - // Small checkboxes - // ========================================================= - - .govuk-radios--small { - - $input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2; - $label-offset: $govuk-touch-target-size - $input-offset; - - .govuk-radios__item { - @include govuk-clearfix; - min-height: 0; - margin-bottom: 0; - padding-left: $label-offset; - float: left; - } - - // Shift the touch target into the left margin so that the visible edge of - // the control is aligned - // - // ┆Which colour is your favourite? - // ┌┆───┐ - // │┆() │ Purple - // └┆▲──┘ - // ▲┆└─ Radio pseudo element, aligned with margin - // └─── Touch target (invisible input), shifted into the margin - .govuk-radios__input { - @include govuk-not-ie8 { - left: $input-offset * -1; - } - - @include govuk-if-ie8 { - margin-left: $govuk-small-radios-size * -1; - } - } - - // Adjust the size and position of the label. - // - // Unlike larger radios, we also have to float the label in order to - // 'shrink' it, preventing the hover state from kicking in across the full - // width of the parent element. - .govuk-radios__label { - margin-top: -2px; - padding: 13px govuk-spacing(3) 13px 1px; - float: left; - - @include govuk-media-query($from: tablet) { - padding: 11px govuk-spacing(3) 10px 1px; - } - } - - // ( ) Radio ring - // - // Reduce the size of the control [1], vertically centering it within the - // touch target [2] - .govuk-radios__label::before { - top: $input-offset - $govuk-border-width-form-element; // 2 - width: $govuk-small-radios-size; // 1 - height: $govuk-small-radios-size; // 1 - } - - // • Radio button - // - // Reduce the size of the 'button' and center it within the ring - .govuk-radios__label::after { - top: 15px; - left: 7px; - border-width: 5px; - } - - // Fix position of hint with small radios - // - // Do not use hints with small radios – because they're within the input - // wrapper they trigger the hover state, but clicking them doesn't actually - // activate the control. - // - // (If you do use them, they won't look completely broken... but seriously, - // don't use them) - .govuk-radios__hint { - padding: 0; - clear: both; - pointer-events: none; - } - - // Align conditional reveals with small radios - .govuk-radios__conditional { - $margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2); - margin-left: $margin-left; - padding-left: $label-offset - ($margin-left + $conditional-border-width); - clear: both; - } - - .govuk-radios__divider { - width: $govuk-small-radios-size; - margin-bottom: govuk-spacing(1); - } - - // Hover state for small radios. - // - // We use a hover state for small radios because the touch target size - // is so much larger than their visible size, and so we need to provide - // feedback to the user as to which radio they will select when their - // cursor is outside of the visible area. - .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { - box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour; - } - - // Because we've overridden the border-shadow provided by the focus state, - // we need to redefine that too. - // - // We use two box shadows, one that restores the original focus state [1] - // and another that then applies the hover state [2]. - .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - // sass-lint:disable indentation - box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1 - 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2 - } - - // For devices that explicitly don't support hover, don't provide a hover - // state (e.g. on touch devices like iOS). - // - // We can't use `@media (hover: hover)` because we wouldn't get the hover - // state in browsers that don't support `@media (hover)` (like Internet - // Explorer) – so we have to 'undo' the hover state instead. - @media (hover: none), (pointer: coarse) { - .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { - box-shadow: initial; - } - - .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { - box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour; - } - } - } -} +@import "./style"; diff --git a/src/govuk/components/radios/_style.scss b/src/govuk/components/radios/_style.scss new file mode 100644 index 0000000000..8ef9b8e292 --- /dev/null +++ b/src/govuk/components/radios/_style.scss @@ -0,0 +1,341 @@ +@import "../error-message/error-message"; +@import "../fieldset/fieldset"; +@import "../hint/hint"; +@import "../label/label"; + +@include govuk-exports("govuk/component/radios") { + + $govuk-touch-target-size: 44px; + $govuk-radios-size: 40px; + $govuk-small-radios-size: 24px; + $govuk-radios-label-padding-left-right: govuk-spacing(3); + // When the default focus width is used on a curved edge it looks visually smaller. + // So for the circular radios we bump the default to make it look visually consistent. + $govuk-radios-focus-width: $govuk-focus-width + 1px; + + .govuk-radios__item { + @include govuk-font($size: 19); + + display: block; + position: relative; + + min-height: $govuk-radios-size; + + margin-bottom: govuk-spacing(2); + padding-left: $govuk-radios-size; + + clear: left; + } + + .govuk-radios__item:last-child, + .govuk-radios__item:last-of-type { + margin-bottom: 0; + } + + .govuk-radios__input { + $input-offset: ($govuk-touch-target-size - $govuk-radios-size) / 2; + + cursor: pointer; + + // IE8 doesn’t support pseudo-elements, so we don’t want to hide native + // elements there. + @include govuk-not-ie8 { + position: absolute; + + z-index: 1; + top: $input-offset * -1; + left: $input-offset * -1; + + width: $govuk-touch-target-size; + height: $govuk-touch-target-size; + margin: 0; + + opacity: 0; + } + + @include govuk-if-ie8 { + margin-top: 10px; + margin-right: $govuk-radios-size / -2; + margin-left: $govuk-radios-size / -2; + float: left; + + // add focus outline to input + &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + } + } + } + + .govuk-radios__label { + display: inline-block; + margin-bottom: 0; + padding: 8px $govuk-radios-label-padding-left-right govuk-spacing(1); + cursor: pointer; + // remove 300ms pause on mobile + touch-action: manipulation; + } + + // ( ) Radio ring + .govuk-radios__label::before { + content: ""; + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + + width: $govuk-radios-size; + height: $govuk-radios-size; + + border: $govuk-border-width-form-element solid currentColor; + border-radius: 50%; + background: transparent; + } + + // • Radio button + // + // We create the 'button' entirely out of 'border' so that they remain + // 'filled' even when colours are overridden in the browser. + .govuk-radios__label::after { + content: ""; + + position: absolute; + top: govuk-spacing(2); + left: govuk-spacing(2); + + width: 0; + height: 0; + + border: govuk-spacing(2) solid currentColor; + border-radius: 50%; + opacity: 0; + background: currentColor; + } + + .govuk-radios__hint { + display: block; + padding-right: $govuk-radios-label-padding-left-right; + padding-left: $govuk-radios-label-padding-left-right; + } + + // Focused state + .govuk-radios__input:focus + .govuk-radios__label::before { + border-width: 4px; + box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour; + } + + // Selected state + .govuk-radios__input:checked + .govuk-radios__label::after { + opacity: 1; + } + + // Disabled state + .govuk-radios__input:disabled, + .govuk-radios__input:disabled + .govuk-radios__label { + cursor: default; + } + + .govuk-radios__input:disabled + .govuk-radios__label { + opacity: .5; + } + + // ========================================================= + // Inline radios + // ========================================================= + + .govuk-radios--inline { + @include govuk-media-query ($from: tablet) { + @include govuk-clearfix; + + .govuk-radios__item { + margin-right: govuk-spacing(4); + float: left; + clear: none; + } + } + + // Prevent inline modifier being used with conditional reveals + &.govuk-radios--conditional { + .govuk-radios__item { + margin-right: 0; + float: none; + } + } + } + + // ========================================================= + // Dividers ('or') + // ========================================================= + + .govuk-radios__divider { + $govuk-divider-size: $govuk-radios-size !default; + @include govuk-font($size: 19); + @include govuk-text-colour; + width: $govuk-divider-size; + margin-bottom: govuk-spacing(2); + text-align: center; + } + + // ========================================================= + // Conditional reveals + // ========================================================= + + // The narrow border is used in the conditional reveals because the border has + // to be an even number in order to be centred under the 40px checkbox or radio. + $conditional-border-width: $govuk-border-width-narrow; + // Calculate the amount of padding needed to keep the border centered against the radios. + $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2); + // Move the border centered with the radios + $conditional-margin-left: $conditional-border-padding; + // Move the contents of the conditional inline with the label + $conditional-padding-left: $conditional-border-padding + $govuk-radios-label-padding-left-right; + + .govuk-radios__conditional { + @include govuk-responsive-margin(4, "bottom"); + margin-left: $conditional-margin-left; + padding-left: $conditional-padding-left; + border-left: $conditional-border-width solid $govuk-border-colour; + + .js-enabled &--hidden { + display: none; + } + + & > :last-child { + margin-bottom: 0; + } + } + + // ========================================================= + // Small checkboxes + // ========================================================= + + .govuk-radios--small { + + $input-offset: ($govuk-touch-target-size - $govuk-small-radios-size) / 2; + $label-offset: $govuk-touch-target-size - $input-offset; + + .govuk-radios__item { + @include govuk-clearfix; + min-height: 0; + margin-bottom: 0; + padding-left: $label-offset; + float: left; + } + + // Shift the touch target into the left margin so that the visible edge of + // the control is aligned + // + // ┆Which colour is your favourite? + // ┌┆───┐ + // │┆() │ Purple + // └┆▲──┘ + // ▲┆└─ Radio pseudo element, aligned with margin + // └─── Touch target (invisible input), shifted into the margin + .govuk-radios__input { + @include govuk-not-ie8 { + left: $input-offset * -1; + } + + @include govuk-if-ie8 { + margin-left: $govuk-small-radios-size * -1; + } + } + + // Adjust the size and position of the label. + // + // Unlike larger radios, we also have to float the label in order to + // 'shrink' it, preventing the hover state from kicking in across the full + // width of the parent element. + .govuk-radios__label { + margin-top: -2px; + padding: 13px govuk-spacing(3) 13px 1px; + float: left; + + @include govuk-media-query($from: tablet) { + padding: 11px govuk-spacing(3) 10px 1px; + } + } + + // ( ) Radio ring + // + // Reduce the size of the control [1], vertically centering it within the + // touch target [2] + .govuk-radios__label::before { + top: $input-offset - $govuk-border-width-form-element; // 2 + width: $govuk-small-radios-size; // 1 + height: $govuk-small-radios-size; // 1 + } + + // • Radio button + // + // Reduce the size of the 'button' and center it within the ring + .govuk-radios__label::after { + top: 15px; + left: 7px; + border-width: 5px; + } + + // Fix position of hint with small radios + // + // Do not use hints with small radios – because they're within the input + // wrapper they trigger the hover state, but clicking them doesn't actually + // activate the control. + // + // (If you do use them, they won't look completely broken... but seriously, + // don't use them) + .govuk-radios__hint { + padding: 0; + clear: both; + pointer-events: none; + } + + // Align conditional reveals with small radios + .govuk-radios__conditional { + $margin-left: ($govuk-small-radios-size / 2) - ($conditional-border-width / 2); + margin-left: $margin-left; + padding-left: $label-offset - ($margin-left + $conditional-border-width); + clear: both; + } + + .govuk-radios__divider { + width: $govuk-small-radios-size; + margin-bottom: govuk-spacing(1); + } + + // Hover state for small radios. + // + // We use a hover state for small radios because the touch target size + // is so much larger than their visible size, and so we need to provide + // feedback to the user as to which radio they will select when their + // cursor is outside of the visible area. + .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { + box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour; + } + + // Because we've overridden the border-shadow provided by the focus state, + // we need to redefine that too. + // + // We use two box shadows, one that restores the original focus state [1] + // and another that then applies the hover state [2]. + .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { + // sass-lint:disable indentation + box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1 + 0 0 0 $govuk-hover-width $govuk-hover-colour; // 2 + } + + // For devices that explicitly don't support hover, don't provide a hover + // state (e.g. on touch devices like iOS). + // + // We can't use `@media (hover: hover)` because we wouldn't get the hover + // state in browsers that don't support `@media (hover)` (like Internet + // Explorer) – so we have to 'undo' the hover state instead. + @media (hover: none), (pointer: coarse) { + .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before { + box-shadow: initial; + } + + .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before { + box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour; + } + } + } +} diff --git a/src/govuk/components/select/_select.scss b/src/govuk/components/select/_select.scss index e0daa3c547..8b5953fd29 100644 --- a/src/govuk/components/select/_select.scss +++ b/src/govuk/components/select/_select.scss @@ -2,56 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@import "../error-message/error-message"; -@import "../hint/hint"; -@import "../label/label"; - -@include govuk-exports("govuk/component/select") { - .govuk-select { - @include govuk-font($size: 19, $line-height: 1.25); - - box-sizing: border-box; // should this be global? - max-width: 100%; - height: 40px; - @if $govuk-typography-use-rem { - height: govuk-px-to-rem(40px); - } - padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements - border: $govuk-border-width-form-element solid $govuk-input-border-colour; - - &:focus { - outline: $govuk-focus-width solid $govuk-focus-colour; - // Ensure outline appears outside of the element - outline-offset: 0; - // Double the border by adding its width again. Use `box-shadow` to do - // this instead of changing `border-width` (which changes element size) and - // since `outline` is already used for the yellow focus state. - box-shadow: inset 0 0 0 $govuk-border-width-form-element; - - @include govuk-if-ie8 { - // IE8 doesn't support `box-shadow` so double the border with - // `border-width`. - border-width: $govuk-border-width-form-element * 2; - } - } - } - - .govuk-select option:active, - .govuk-select option:checked, - .govuk-select:focus::-ms-value { - color: govuk-colour("white"); - background-color: govuk-colour("blue"); - } - - .govuk-select--error { - border: $govuk-border-width-form-element-error solid $govuk-error-colour; - - &:focus { - border-color: $govuk-input-border-colour; - // Remove `box-shadow` inherited from `:focus` as `select--error` - // already has the thicker border. - box-shadow: none; - } - } - -} +@import "./style"; diff --git a/src/govuk/components/select/_style.scss b/src/govuk/components/select/_style.scss new file mode 100644 index 0000000000..46df5c647a --- /dev/null +++ b/src/govuk/components/select/_style.scss @@ -0,0 +1,53 @@ +@import "../error-message/error-message"; +@import "../hint/hint"; +@import "../label/label"; + +@include govuk-exports("govuk/component/select") { + .govuk-select { + @include govuk-font($size: 19, $line-height: 1.25); + + box-sizing: border-box; // should this be global? + max-width: 100%; + height: 40px; + @if $govuk-typography-use-rem { + height: govuk-px-to-rem(40px); + } + padding: govuk-spacing(1); // was 5px 4px 4px - size of it should be adjusted to match other form elements + border: $govuk-border-width-form-element solid $govuk-input-border-colour; + + &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + // Ensure outline appears outside of the element + outline-offset: 0; + // Double the border by adding its width again. Use `box-shadow` to do + // this instead of changing `border-width` (which changes element size) and + // since `outline` is already used for the yellow focus state. + box-shadow: inset 0 0 0 $govuk-border-width-form-element; + + @include govuk-if-ie8 { + // IE8 doesn't support `box-shadow` so double the border with + // `border-width`. + border-width: $govuk-border-width-form-element * 2; + } + } + } + + .govuk-select option:active, + .govuk-select option:checked, + .govuk-select:focus::-ms-value { + color: govuk-colour("white"); + background-color: govuk-colour("blue"); + } + + .govuk-select--error { + border: $govuk-border-width-form-element-error solid $govuk-error-colour; + + &:focus { + border-color: $govuk-input-border-colour; + // Remove `box-shadow` inherited from `:focus` as `select--error` + // already has the thicker border. + box-shadow: none; + } + } + +} diff --git a/src/govuk/components/skip-link/_skip-link.scss b/src/govuk/components/skip-link/_skip-link.scss index 934dcc3a17..8b5953fd29 100644 --- a/src/govuk/components/skip-link/_skip-link.scss +++ b/src/govuk/components/skip-link/_skip-link.scss @@ -2,36 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/skip-link") { - .govuk-skip-link { - @include govuk-visually-hidden-focusable; - @include govuk-typography-common; - @include govuk-link-style-text; - @include govuk-typography-responsive($size: 16); - - display: block; - padding: govuk-spacing(2) govuk-spacing(3); - - // Respect 'display cutout' safe area (avoids notches and rounded corners) - @supports (padding: unquote("max(calc(0px))")) { - $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right)); - $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left)); - - // Use max() to pick largest padding, default or with safe area - // Escaped due to Sass max() vs. CSS native max() - padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})"); - padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})"); - } - - &:focus { - outline: $govuk-focus-width solid $govuk-focus-colour; - background-color: $govuk-focus-colour; - - // Undo unwanted changes when global styles are enabled - @if ($govuk-global-styles) { - box-shadow: none; - text-decoration: underline; - } - } - } -} +@import "./style"; diff --git a/src/govuk/components/skip-link/_style.scss b/src/govuk/components/skip-link/_style.scss new file mode 100644 index 0000000000..03e5d883a0 --- /dev/null +++ b/src/govuk/components/skip-link/_style.scss @@ -0,0 +1,33 @@ +@include govuk-exports("govuk/component/skip-link") { + .govuk-skip-link { + @include govuk-visually-hidden-focusable; + @include govuk-typography-common; + @include govuk-link-style-text; + @include govuk-typography-responsive($size: 16); + + display: block; + padding: govuk-spacing(2) govuk-spacing(3); + + // Respect 'display cutout' safe area (avoids notches and rounded corners) + @supports (padding: unquote("max(calc(0px))")) { + $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right)); + $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left)); + + // Use max() to pick largest padding, default or with safe area + // Escaped due to Sass max() vs. CSS native max() + padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})"); + padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})"); + } + + &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + background-color: $govuk-focus-colour; + + // Undo unwanted changes when global styles are enabled + @if ($govuk-global-styles) { + box-shadow: none; + text-decoration: underline; + } + } + } +} diff --git a/src/govuk/components/summary-list/_style.scss b/src/govuk/components/summary-list/_style.scss new file mode 100644 index 0000000000..5e09b5797d --- /dev/null +++ b/src/govuk/components/summary-list/_style.scss @@ -0,0 +1,153 @@ +@include govuk-exports("govuk/component/summary-list") { + + .govuk-summary-list { + @include govuk-font($size: 19); + @include govuk-text-colour; + @include govuk-media-query($from: tablet) { + display: table; + width: 100%; + table-layout: fixed; // Required to allow us to wrap words that overflow. + } + margin: 0; // Reset default user agent styles + @include govuk-responsive-margin(6, "bottom"); + } + + .govuk-summary-list__row { + @include govuk-media-query($until: tablet) { + margin-bottom: govuk-spacing(3); + border-bottom: 1px solid $govuk-border-colour; + } + @include govuk-media-query($from: tablet) { + display: table-row; + } + } + + .govuk-summary-list__key, + .govuk-summary-list__value, + .govuk-summary-list__actions { + margin: 0; // Reset default user agent styles + + @include govuk-media-query($from: tablet) { + display: table-cell; + padding-right: govuk-spacing(4); + } + } + + .govuk-summary-list__key, + .govuk-summary-list__value, + .govuk-summary-list__actions { + @include govuk-media-query($from: tablet) { + padding-top: govuk-spacing(2); + padding-bottom: govuk-spacing(2); + border-bottom: 1px solid $govuk-border-colour; + } + } + + .govuk-summary-list__actions { + margin-bottom: govuk-spacing(3); + @include govuk-media-query($from: tablet) { + width: 20%; + padding-right: 0; + text-align: right; + } + } + + .govuk-summary-list__key, + .govuk-summary-list__value { + // Automatic wrapping for unbreakable text (e.g. URLs) + word-wrap: break-word; // Fallback for older browsers only + overflow-wrap: break-word; + } + + .govuk-summary-list__key { + margin-bottom: govuk-spacing(1); + @include govuk-typography-weight-bold; + @include govuk-media-query($from: tablet) { + width: 30%; + } + } + + .govuk-summary-list__value { + @include govuk-media-query($until: tablet) { + margin-bottom: govuk-spacing(3); + } + @include govuk-media-query($from: tablet) { + width: 50%; + } + } + + // Expand width when value is last column (no action) + .govuk-summary-list__value:last-child { + @include govuk-media-query($from: tablet) { + width: 70%; + } + } + + .govuk-summary-list__value > p { + margin-bottom: govuk-spacing(2); + } + + .govuk-summary-list__value > :last-child { + margin-bottom: 0; + } + + .govuk-summary-list__actions-list { + width: 100%; + margin: 0; // Reset default user agent styles + padding: 0; // Reset default user agent styles + } + + .govuk-summary-list__actions-list-item { + display: inline; + margin-right: govuk-spacing(2); + padding-right: govuk-spacing(2); + } + + // In older browsers such as IE8, :last-child is not available, + // so only show the border divider where it is available. + .govuk-summary-list__actions-list-item:not(:last-child) { + border-right: 1px solid $govuk-border-colour; + } + + .govuk-summary-list__actions-list-item:last-child { + margin-right: 0; + padding-right: 0; + border: 0; + } + + // No border on entire summary list + .govuk-summary-list--no-border { + @include govuk-media-query($until: tablet) { + .govuk-summary-list__row { + border: 0; + } + } + + @include govuk-media-query($from: tablet) { + .govuk-summary-list__key, + .govuk-summary-list__value, + .govuk-summary-list__actions { + // Remove 1px border, add 1px height back on + padding-bottom: govuk-spacing(2) + 1px; + border: 0; + } + } + } + + // No border on specific rows + .govuk-summary-list__row--no-border { + @include govuk-media-query($until: tablet) { + border: 0; + } + + @include govuk-media-query($from: tablet) { + .govuk-summary-list__key, + .govuk-summary-list__value, + .govuk-summary-list__actions { + // Remove 1px border, add 1px height back on + padding-bottom: govuk-spacing(2) + 1px; + border: 0; + } + } + } +} diff --git a/src/govuk/components/summary-list/_summary-list.scss b/src/govuk/components/summary-list/_summary-list.scss index e0a53a1f81..8b5953fd29 100644 --- a/src/govuk/components/summary-list/_summary-list.scss +++ b/src/govuk/components/summary-list/_summary-list.scss @@ -2,156 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/summary-list") { - - .govuk-summary-list { - @include govuk-font($size: 19); - @include govuk-text-colour; - @include govuk-media-query($from: tablet) { - display: table; - width: 100%; - table-layout: fixed; // Required to allow us to wrap words that overflow. - } - margin: 0; // Reset default user agent styles - @include govuk-responsive-margin(6, "bottom"); - } - - .govuk-summary-list__row { - @include govuk-media-query($until: tablet) { - margin-bottom: govuk-spacing(3); - border-bottom: 1px solid $govuk-border-colour; - } - @include govuk-media-query($from: tablet) { - display: table-row; - } - } - - .govuk-summary-list__key, - .govuk-summary-list__value, - .govuk-summary-list__actions { - margin: 0; // Reset default user agent styles - - @include govuk-media-query($from: tablet) { - display: table-cell; - padding-right: govuk-spacing(4); - } - } - - .govuk-summary-list__key, - .govuk-summary-list__value, - .govuk-summary-list__actions { - @include govuk-media-query($from: tablet) { - padding-top: govuk-spacing(2); - padding-bottom: govuk-spacing(2); - border-bottom: 1px solid $govuk-border-colour; - } - } - - .govuk-summary-list__actions { - margin-bottom: govuk-spacing(3); - @include govuk-media-query($from: tablet) { - width: 20%; - padding-right: 0; - text-align: right; - } - } - - .govuk-summary-list__key, - .govuk-summary-list__value { - // Automatic wrapping for unbreakable text (e.g. URLs) - word-wrap: break-word; // Fallback for older browsers only - overflow-wrap: break-word; - } - - .govuk-summary-list__key { - margin-bottom: govuk-spacing(1); - @include govuk-typography-weight-bold; - @include govuk-media-query($from: tablet) { - width: 30%; - } - } - - .govuk-summary-list__value { - @include govuk-media-query($until: tablet) { - margin-bottom: govuk-spacing(3); - } - @include govuk-media-query($from: tablet) { - width: 50%; - } - } - - // Expand width when value is last column (no action) - .govuk-summary-list__value:last-child { - @include govuk-media-query($from: tablet) { - width: 70%; - } - } - - .govuk-summary-list__value > p { - margin-bottom: govuk-spacing(2); - } - - .govuk-summary-list__value > :last-child { - margin-bottom: 0; - } - - .govuk-summary-list__actions-list { - width: 100%; - margin: 0; // Reset default user agent styles - padding: 0; // Reset default user agent styles - } - - .govuk-summary-list__actions-list-item { - display: inline; - margin-right: govuk-spacing(2); - padding-right: govuk-spacing(2); - } - - // In older browsers such as IE8, :last-child is not available, - // so only show the border divider where it is available. - .govuk-summary-list__actions-list-item:not(:last-child) { - border-right: 1px solid $govuk-border-colour; - } - - .govuk-summary-list__actions-list-item:last-child { - margin-right: 0; - padding-right: 0; - border: 0; - } - - // No border on entire summary list - .govuk-summary-list--no-border { - @include govuk-media-query($until: tablet) { - .govuk-summary-list__row { - border: 0; - } - } - - @include govuk-media-query($from: tablet) { - .govuk-summary-list__key, - .govuk-summary-list__value, - .govuk-summary-list__actions { - // Remove 1px border, add 1px height back on - padding-bottom: govuk-spacing(2) + 1px; - border: 0; - } - } - } - - // No border on specific rows - .govuk-summary-list__row--no-border { - @include govuk-media-query($until: tablet) { - border: 0; - } - - @include govuk-media-query($from: tablet) { - .govuk-summary-list__key, - .govuk-summary-list__value, - .govuk-summary-list__actions { - // Remove 1px border, add 1px height back on - padding-bottom: govuk-spacing(2) + 1px; - border: 0; - } - } - } -} +@import "./style"; diff --git a/src/govuk/components/table/_style.scss b/src/govuk/components/table/_style.scss new file mode 100644 index 0000000000..f9f799e31d --- /dev/null +++ b/src/govuk/components/table/_style.scss @@ -0,0 +1,50 @@ +@include govuk-exports("govuk/component/table") { + .govuk-table { + @include govuk-font($size: 19); + @include govuk-text-colour; + width: 100%; + @include govuk-responsive-margin(6, "bottom"); + + border-spacing: 0; + border-collapse: collapse; + } + + .govuk-table__header { + @include govuk-typography-weight-bold; + } + + .govuk-table__header, + .govuk-table__cell { + padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0; + border-bottom: 1px solid $govuk-border-colour; + text-align: left; + vertical-align: top; + // GOV.UK Elements sets the font-size and line-height for all headers and cells + // in tables. + @include govuk-compatibility(govuk_elements) { + font-size: inherit; + line-height: inherit; + } + } + + .govuk-table__cell--numeric { + @include govuk-font($size: false, $tabular: true); + } + + .govuk-table__header--numeric, + .govuk-table__cell--numeric { + text-align: right; + } + + .govuk-table__header:last-child, + .govuk-table__cell:last-child { + padding-right: 0; + } + + .govuk-table__caption { + @include govuk-typography-weight-bold; + + display: table-caption; + text-align: left; + } +} diff --git a/src/govuk/components/table/_table.scss b/src/govuk/components/table/_table.scss index 583587cfd3..8b5953fd29 100644 --- a/src/govuk/components/table/_table.scss +++ b/src/govuk/components/table/_table.scss @@ -2,53 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/table") { - .govuk-table { - @include govuk-font($size: 19); - @include govuk-text-colour; - width: 100%; - @include govuk-responsive-margin(6, "bottom"); - - border-spacing: 0; - border-collapse: collapse; - } - - .govuk-table__header { - @include govuk-typography-weight-bold; - } - - .govuk-table__header, - .govuk-table__cell { - padding: govuk-spacing(2) govuk-spacing(4) govuk-spacing(2) 0; - border-bottom: 1px solid $govuk-border-colour; - text-align: left; - vertical-align: top; - // GOV.UK Elements sets the font-size and line-height for all headers and cells - // in tables. - @include govuk-compatibility(govuk_elements) { - font-size: inherit; - line-height: inherit; - } - } - - .govuk-table__cell--numeric { - @include govuk-font($size: false, $tabular: true); - } - - .govuk-table__header--numeric, - .govuk-table__cell--numeric { - text-align: right; - } - - .govuk-table__header:last-child, - .govuk-table__cell:last-child { - padding-right: 0; - } - - .govuk-table__caption { - @include govuk-typography-weight-bold; - - display: table-caption; - text-align: left; - } -} +@import "./style"; diff --git a/src/govuk/components/tabs/_style.scss b/src/govuk/components/tabs/_style.scss new file mode 100644 index 0000000000..91b78d1faa --- /dev/null +++ b/src/govuk/components/tabs/_style.scss @@ -0,0 +1,138 @@ +@include govuk-exports("govuk/component/tabs") { + + .govuk-tabs { + @include govuk-responsive-margin(1, "top"); + @include govuk-responsive-margin(6, "bottom"); + } + + .govuk-tabs__title { + @include govuk-font($size: 19); + @include govuk-text-colour; + margin-bottom: govuk-spacing(2); + } + + .govuk-tabs__list { + margin: 0; + padding: 0; + list-style: none; + @include govuk-responsive-margin(6, "bottom"); + } + + .govuk-tabs__list-item { + @include govuk-font($size: 19); + margin-left: govuk-spacing(5); + + &::before { + @include govuk-text-colour; + content: "\2014 "; // "— " + margin-left: - govuk-spacing(5); + padding-right: govuk-spacing(1); + } + } + + .govuk-tabs__tab { + @include govuk-link-style-default; + + display: inline-block; + margin-bottom: govuk-spacing(2); + + // Focus state for mobile and when JavaScript is disabled + // It is removed for JS-enabled desktop styles + &:focus { + @include govuk-focused-text; + } + } + + .govuk-tabs__panel { + @include govuk-responsive-margin(8, "bottom"); + } + + // JavaScript enabled + .js-enabled { + + @include govuk-media-query($from: tablet) { + + .govuk-tabs__list { + @include govuk-clearfix; + margin-bottom: 0; + border-bottom: 1px solid $govuk-border-colour; + } + + .govuk-tabs__title { + display: none; + } + + .govuk-tabs__list-item { + position: relative; + + margin-right: govuk-spacing(1); + margin-bottom: 0; + margin-left: 0; + padding: govuk-spacing(2) govuk-spacing(4); + + float: left; + background-color: govuk-colour("light-grey", $legacy: "grey-4"); + text-align: center; + + &::before { + content: none; + } + } + + .govuk-tabs__list-item--selected { + $border-width: 1px; + + position: relative; + + margin-top: - govuk-spacing(1); + + // Compensation for border (otherwise we get a shift) + margin-bottom: -$border-width; + padding-top: govuk-spacing(3) - $border-width; + padding-right: govuk-spacing(4) - $border-width; + padding-bottom: govuk-spacing(3) + $border-width; + padding-left: govuk-spacing(4) - $border-width; + + border: $border-width solid $govuk-border-colour; + border-bottom: 0; + + background-color: $govuk-body-background-colour; + + .govuk-tabs__tab { + text-decoration: none; + } + } + + .govuk-tabs__tab { + @include govuk-link-style-text; + + margin-bottom: 0; + + &::after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + } + + .govuk-tabs__panel { + @include govuk-responsive-margin(0, "bottom"); + padding: govuk-spacing(6) govuk-spacing(4); + border: 1px solid $govuk-border-colour; + border-top: 0; + + & > :last-child { + margin-bottom: 0; + } + } + + .govuk-tabs__panel--hidden { + display: none; + } + } + + } +} diff --git a/src/govuk/components/tabs/_tabs.scss b/src/govuk/components/tabs/_tabs.scss index ad612ff09e..8b5953fd29 100644 --- a/src/govuk/components/tabs/_tabs.scss +++ b/src/govuk/components/tabs/_tabs.scss @@ -2,141 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/tabs") { - - .govuk-tabs { - @include govuk-responsive-margin(1, "top"); - @include govuk-responsive-margin(6, "bottom"); - } - - .govuk-tabs__title { - @include govuk-font($size: 19); - @include govuk-text-colour; - margin-bottom: govuk-spacing(2); - } - - .govuk-tabs__list { - margin: 0; - padding: 0; - list-style: none; - @include govuk-responsive-margin(6, "bottom"); - } - - .govuk-tabs__list-item { - @include govuk-font($size: 19); - margin-left: govuk-spacing(5); - - &::before { - @include govuk-text-colour; - content: "\2014 "; // "— " - margin-left: - govuk-spacing(5); - padding-right: govuk-spacing(1); - } - } - - .govuk-tabs__tab { - @include govuk-link-style-default; - - display: inline-block; - margin-bottom: govuk-spacing(2); - - // Focus state for mobile and when JavaScript is disabled - // It is removed for JS-enabled desktop styles - &:focus { - @include govuk-focused-text; - } - } - - .govuk-tabs__panel { - @include govuk-responsive-margin(8, "bottom"); - } - - // JavaScript enabled - .js-enabled { - - @include govuk-media-query($from: tablet) { - - .govuk-tabs__list { - @include govuk-clearfix; - margin-bottom: 0; - border-bottom: 1px solid $govuk-border-colour; - } - - .govuk-tabs__title { - display: none; - } - - .govuk-tabs__list-item { - position: relative; - - margin-right: govuk-spacing(1); - margin-bottom: 0; - margin-left: 0; - padding: govuk-spacing(2) govuk-spacing(4); - - float: left; - background-color: govuk-colour("light-grey", $legacy: "grey-4"); - text-align: center; - - &::before { - content: none; - } - } - - .govuk-tabs__list-item--selected { - $border-width: 1px; - - position: relative; - - margin-top: - govuk-spacing(1); - - // Compensation for border (otherwise we get a shift) - margin-bottom: -$border-width; - padding-top: govuk-spacing(3) - $border-width; - padding-right: govuk-spacing(4) - $border-width; - padding-bottom: govuk-spacing(3) + $border-width; - padding-left: govuk-spacing(4) - $border-width; - - border: $border-width solid $govuk-border-colour; - border-bottom: 0; - - background-color: $govuk-body-background-colour; - - .govuk-tabs__tab { - text-decoration: none; - } - } - - .govuk-tabs__tab { - @include govuk-link-style-text; - - margin-bottom: 0; - - &::after { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - } - - .govuk-tabs__panel { - @include govuk-responsive-margin(0, "bottom"); - padding: govuk-spacing(6) govuk-spacing(4); - border: 1px solid $govuk-border-colour; - border-top: 0; - - & > :last-child { - margin-bottom: 0; - } - } - - .govuk-tabs__panel--hidden { - display: none; - } - } - - } -} +@import "./style"; diff --git a/src/govuk/components/tag/_style.scss b/src/govuk/components/tag/_style.scss new file mode 100644 index 0000000000..1ced210b6e --- /dev/null +++ b/src/govuk/components/tag/_style.scss @@ -0,0 +1,40 @@ +@include govuk-exports("govuk/component/tag") { + .govuk-tag { + + display: inline-block; + + // When a user customises their colours often the background is removed, + // by adding a outline we ensure that the tag component still keeps it's meaning. + // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ + outline: 2px solid transparent; + outline-offset: -2px; + + color: govuk-colour("white"); + background-color: govuk-colour("blue"); + letter-spacing: 1px; + + text-decoration: none; + text-transform: uppercase; + + @if $govuk-use-legacy-font { + // Since New Transport sits slightly higher than other common fonts. + // We use intentionally uneven padding to make it balanced, this can be + // removed using the version of the font that has a more common vertical spacing. + @include govuk-font($size: 16, $weight: bold, $line-height: 1.25); + padding-top: 4px; + padding-right: 8px; + padding-bottom: 1px; + padding-left: 8px; + } @else { + @include govuk-font($size: 16, $weight: bold, $line-height: 1); + padding-top: 5px; + padding-right: 8px; + padding-bottom: 4px; + padding-left: 8px; + } + } + + .govuk-tag--inactive { + background-color: govuk-colour("dark-grey", $legacy: "grey-1"); + } +} diff --git a/src/govuk/components/tag/_tag.scss b/src/govuk/components/tag/_tag.scss index 895113d399..8b5953fd29 100644 --- a/src/govuk/components/tag/_tag.scss +++ b/src/govuk/components/tag/_tag.scss @@ -2,43 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/tag") { - .govuk-tag { - - display: inline-block; - - // When a user customises their colours often the background is removed, - // by adding a outline we ensure that the tag component still keeps it's meaning. - // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ - outline: 2px solid transparent; - outline-offset: -2px; - - color: govuk-colour("white"); - background-color: govuk-colour("blue"); - letter-spacing: 1px; - - text-decoration: none; - text-transform: uppercase; - - @if $govuk-use-legacy-font { - // Since New Transport sits slightly higher than other common fonts. - // We use intentionally uneven padding to make it balanced, this can be - // removed using the version of the font that has a more common vertical spacing. - @include govuk-font($size: 16, $weight: bold, $line-height: 1.25); - padding-top: 4px; - padding-right: 8px; - padding-bottom: 1px; - padding-left: 8px; - } @else { - @include govuk-font($size: 16, $weight: bold, $line-height: 1); - padding-top: 5px; - padding-right: 8px; - padding-bottom: 4px; - padding-left: 8px; - } - } - - .govuk-tag--inactive { - background-color: govuk-colour("dark-grey", $legacy: "grey-1"); - } -} +@import "./style"; diff --git a/src/govuk/components/textarea/_style.scss b/src/govuk/components/textarea/_style.scss new file mode 100644 index 0000000000..369ff605c9 --- /dev/null +++ b/src/govuk/components/textarea/_style.scss @@ -0,0 +1,51 @@ +@import "../error-message/error-message"; +@import "../hint/hint"; +@import "../label/label"; + +@include govuk-exports("govuk/component/textarea") { + .govuk-textarea { + @include govuk-font($size: 19, $line-height: 1.25); + + box-sizing: border-box; // should this be global? + display: block; + width: 100%; + min-height: 40px; + @include govuk-responsive-margin(6, "bottom"); + padding: govuk-spacing(1); + + resize: vertical; + + border: $govuk-border-width-form-element solid $govuk-input-border-colour; + border-radius: 0; + + -webkit-appearance: none; + + &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + // Ensure outline appears outside of the element + outline-offset: 0; + // Double the border by adding its width again. Use `box-shadow` to do + // this instead of changing `border-width` (which changes element size) and + // since `outline` is already used for the yellow focus state. + box-shadow: inset 0 0 0 $govuk-border-width-form-element; + + @include govuk-if-ie8 { + // IE8 doesn't support `box-shadow` so double the border with + // `border-width`. + border-width: $govuk-border-width-form-element * 2; + } + } + } + + .govuk-textarea--error { + border: $govuk-border-width-form-element-error solid $govuk-error-colour; + + &:focus { + border-color: $govuk-input-border-colour; + // Remove `box-shadow` inherited from `:focus` as `textarea--error` + // already has the thicker border. + box-shadow: none; + } + + } +} diff --git a/src/govuk/components/textarea/_textarea.scss b/src/govuk/components/textarea/_textarea.scss index 2bda1bf380..8b5953fd29 100644 --- a/src/govuk/components/textarea/_textarea.scss +++ b/src/govuk/components/textarea/_textarea.scss @@ -2,54 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@import "../error-message/error-message"; -@import "../hint/hint"; -@import "../label/label"; - -@include govuk-exports("govuk/component/textarea") { - .govuk-textarea { - @include govuk-font($size: 19, $line-height: 1.25); - - box-sizing: border-box; // should this be global? - display: block; - width: 100%; - min-height: 40px; - @include govuk-responsive-margin(6, "bottom"); - padding: govuk-spacing(1); - - resize: vertical; - - border: $govuk-border-width-form-element solid $govuk-input-border-colour; - border-radius: 0; - - -webkit-appearance: none; - - &:focus { - outline: $govuk-focus-width solid $govuk-focus-colour; - // Ensure outline appears outside of the element - outline-offset: 0; - // Double the border by adding its width again. Use `box-shadow` to do - // this instead of changing `border-width` (which changes element size) and - // since `outline` is already used for the yellow focus state. - box-shadow: inset 0 0 0 $govuk-border-width-form-element; - - @include govuk-if-ie8 { - // IE8 doesn't support `box-shadow` so double the border with - // `border-width`. - border-width: $govuk-border-width-form-element * 2; - } - } - } - - .govuk-textarea--error { - border: $govuk-border-width-form-element-error solid $govuk-error-colour; - - &:focus { - border-color: $govuk-input-border-colour; - // Remove `box-shadow` inherited from `:focus` as `textarea--error` - // already has the thicker border. - box-shadow: none; - } - - } -} +@import "./style"; diff --git a/src/govuk/components/warning-text/_style.scss b/src/govuk/components/warning-text/_style.scss new file mode 100644 index 0000000000..6ed50c86f4 --- /dev/null +++ b/src/govuk/components/warning-text/_style.scss @@ -0,0 +1,53 @@ +@include govuk-exports("govuk/component/warning-text") { + + .govuk-warning-text { + position: relative; + @include govuk-responsive-margin(6, "bottom"); + padding: govuk-spacing(2) 0; + } + + .govuk-warning-text__assistive { + @include govuk-visually-hidden; + } + + .govuk-warning-text__icon { + @include govuk-font($size: false, $weight: bold); + + display: inline-block; + + position: absolute; + left: 0; + + min-width: 29px; + min-height: 29px; + margin-top: -7px; + + @include govuk-media-query($from: tablet) { + margin-top: -5px; + } + + // When a user customises their colours the background colour will often be removed. + // Adding a border to the component keeps it's shape as a circle. + border: 3px solid govuk-colour("black"); + border-radius: 50%; + + color: govuk-colour("white"); + background: govuk-colour("black"); + + font-size: 30px; + line-height: 29px; + + text-align: center; + + // Prevent the exclamation mark from being included when the warning text + // is copied, for example. + user-select: none; + } + + .govuk-warning-text__text { + @include govuk-font($size: 19, $weight: bold); + @include govuk-text-colour; + display: block; + padding-left: 45px; + } +} diff --git a/src/govuk/components/warning-text/_warning-text.scss b/src/govuk/components/warning-text/_warning-text.scss index 77440149f2..8b5953fd29 100644 --- a/src/govuk/components/warning-text/_warning-text.scss +++ b/src/govuk/components/warning-text/_warning-text.scss @@ -2,56 +2,4 @@ @import "../../tools/all"; @import "../../helpers/all"; -@include govuk-exports("govuk/component/warning-text") { - - .govuk-warning-text { - position: relative; - @include govuk-responsive-margin(6, "bottom"); - padding: govuk-spacing(2) 0; - } - - .govuk-warning-text__assistive { - @include govuk-visually-hidden; - } - - .govuk-warning-text__icon { - @include govuk-font($size: false, $weight: bold); - - display: inline-block; - - position: absolute; - left: 0; - - min-width: 29px; - min-height: 29px; - margin-top: -7px; - - @include govuk-media-query($from: tablet) { - margin-top: -5px; - } - - // When a user customises their colours the background colour will often be removed. - // Adding a border to the component keeps it's shape as a circle. - border: 3px solid govuk-colour("black"); - border-radius: 50%; - - color: govuk-colour("white"); - background: govuk-colour("black"); - - font-size: 30px; - line-height: 29px; - - text-align: center; - - // Prevent the exclamation mark from being included when the warning text - // is copied, for example. - user-select: none; - } - - .govuk-warning-text__text { - @include govuk-font($size: 19, $weight: bold); - @include govuk-text-colour; - display: block; - padding-left: 45px; - } -} +@import "./style"; From 5978c2b7032512113972d9da6fcbef93941123ef Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 27 Feb 2020 09:50:49 +0000 Subject: [PATCH 2/3] Move dependent component imports --- src/govuk/components/character-count/_character-count.scss | 4 ++++ src/govuk/components/character-count/_style.scss | 4 ---- src/govuk/components/checkboxes/_checkboxes.scss | 5 +++++ src/govuk/components/checkboxes/_style.scss | 5 ----- src/govuk/components/date-input/_date-input.scss | 5 +++++ src/govuk/components/date-input/_style.scss | 5 ----- src/govuk/components/error-summary/_error-summary.scss | 2 ++ src/govuk/components/error-summary/_style.scss | 2 -- src/govuk/components/file-upload/_file-upload.scss | 4 ++++ src/govuk/components/file-upload/_style.scss | 4 ---- src/govuk/components/input/_input.scss | 4 ++++ src/govuk/components/input/_style.scss | 4 ---- src/govuk/components/phase-banner/_phase-banner.scss | 2 ++ src/govuk/components/phase-banner/_style.scss | 2 -- src/govuk/components/radios/_radios.scss | 5 +++++ src/govuk/components/radios/_style.scss | 5 ----- src/govuk/components/select/_select.scss | 4 ++++ src/govuk/components/select/_style.scss | 4 ---- src/govuk/components/textarea/_style.scss | 4 ---- src/govuk/components/textarea/_textarea.scss | 4 ++++ 20 files changed, 39 insertions(+), 39 deletions(-) diff --git a/src/govuk/components/character-count/_character-count.scss b/src/govuk/components/character-count/_character-count.scss index 8b5953fd29..116aa12319 100644 --- a/src/govuk/components/character-count/_character-count.scss +++ b/src/govuk/components/character-count/_character-count.scss @@ -2,4 +2,8 @@ @import "../../tools/all"; @import "../../helpers/all"; +@import "../error-message/error-message"; +@import "../hint/hint"; +@import "../label/label"; + @import "./style"; diff --git a/src/govuk/components/character-count/_style.scss b/src/govuk/components/character-count/_style.scss index 50c595688f..79bf592291 100644 --- a/src/govuk/components/character-count/_style.scss +++ b/src/govuk/components/character-count/_style.scss @@ -1,7 +1,3 @@ -@import "../error-message/error-message"; -@import "../hint/hint"; -@import "../label/label"; - @include govuk-exports("govuk/component/character-count") { .govuk-character-count { @include govuk-responsive-margin(6, "bottom"); diff --git a/src/govuk/components/checkboxes/_checkboxes.scss b/src/govuk/components/checkboxes/_checkboxes.scss index 8b5953fd29..5310b47c10 100644 --- a/src/govuk/components/checkboxes/_checkboxes.scss +++ b/src/govuk/components/checkboxes/_checkboxes.scss @@ -2,4 +2,9 @@ @import "../../tools/all"; @import "../../helpers/all"; +@import "../error-message/error-message"; +@import "../fieldset/fieldset"; +@import "../hint/hint"; +@import "../label/label"; + @import "./style"; diff --git a/src/govuk/components/checkboxes/_style.scss b/src/govuk/components/checkboxes/_style.scss index 6f272818d6..ee53ce50a9 100644 --- a/src/govuk/components/checkboxes/_style.scss +++ b/src/govuk/components/checkboxes/_style.scss @@ -1,8 +1,3 @@ -@import "../error-message/error-message"; -@import "../fieldset/fieldset"; -@import "../hint/hint"; -@import "../label/label"; - @include govuk-exports("govuk/component/checkboxes") { $govuk-touch-target-size: 44px; diff --git a/src/govuk/components/date-input/_date-input.scss b/src/govuk/components/date-input/_date-input.scss index 8b5953fd29..ca2dbfd681 100644 --- a/src/govuk/components/date-input/_date-input.scss +++ b/src/govuk/components/date-input/_date-input.scss @@ -2,4 +2,9 @@ @import "../../tools/all"; @import "../../helpers/all"; +@import "../error-message/error-message"; +@import "../input/input"; +@import "../hint/hint"; +@import "../label/label"; + @import "./style"; diff --git a/src/govuk/components/date-input/_style.scss b/src/govuk/components/date-input/_style.scss index 873ea0f830..3b02d9675d 100644 --- a/src/govuk/components/date-input/_style.scss +++ b/src/govuk/components/date-input/_style.scss @@ -1,8 +1,3 @@ -@import "../error-message/error-message"; -@import "../input/input"; -@import "../hint/hint"; -@import "../label/label"; - @include govuk-exports("govuk/component/date-input") { .govuk-date-input { @include govuk-clearfix; diff --git a/src/govuk/components/error-summary/_error-summary.scss b/src/govuk/components/error-summary/_error-summary.scss index 8b5953fd29..1f20e241ff 100644 --- a/src/govuk/components/error-summary/_error-summary.scss +++ b/src/govuk/components/error-summary/_error-summary.scss @@ -2,4 +2,6 @@ @import "../../tools/all"; @import "../../helpers/all"; +@import "../../core/lists"; + @import "./style"; diff --git a/src/govuk/components/error-summary/_style.scss b/src/govuk/components/error-summary/_style.scss index ba542c4589..739d779304 100644 --- a/src/govuk/components/error-summary/_style.scss +++ b/src/govuk/components/error-summary/_style.scss @@ -1,5 +1,3 @@ -@import "../../core/lists"; - @include govuk-exports("govuk/component/error-summary") { .govuk-error-summary { diff --git a/src/govuk/components/file-upload/_file-upload.scss b/src/govuk/components/file-upload/_file-upload.scss index 8b5953fd29..116aa12319 100644 --- a/src/govuk/components/file-upload/_file-upload.scss +++ b/src/govuk/components/file-upload/_file-upload.scss @@ -2,4 +2,8 @@ @import "../../tools/all"; @import "../../helpers/all"; +@import "../error-message/error-message"; +@import "../hint/hint"; +@import "../label/label"; + @import "./style"; diff --git a/src/govuk/components/file-upload/_style.scss b/src/govuk/components/file-upload/_style.scss index af35b04c9f..68ffa07891 100644 --- a/src/govuk/components/file-upload/_style.scss +++ b/src/govuk/components/file-upload/_style.scss @@ -1,7 +1,3 @@ -@import "../error-message/error-message"; -@import "../hint/hint"; -@import "../label/label"; - @include govuk-exports("govuk/component/file-upload") { $component-padding: govuk-spacing(1); diff --git a/src/govuk/components/input/_input.scss b/src/govuk/components/input/_input.scss index 8b5953fd29..116aa12319 100644 --- a/src/govuk/components/input/_input.scss +++ b/src/govuk/components/input/_input.scss @@ -2,4 +2,8 @@ @import "../../tools/all"; @import "../../helpers/all"; +@import "../error-message/error-message"; +@import "../hint/hint"; +@import "../label/label"; + @import "./style"; diff --git a/src/govuk/components/input/_style.scss b/src/govuk/components/input/_style.scss index 91eb04eea5..5c9831d99e 100644 --- a/src/govuk/components/input/_style.scss +++ b/src/govuk/components/input/_style.scss @@ -1,7 +1,3 @@ -@import "../error-message/error-message"; -@import "../hint/hint"; -@import "../label/label"; - @include govuk-exports("govuk/component/input") { .govuk-input { @include govuk-font($size: 19); diff --git a/src/govuk/components/phase-banner/_phase-banner.scss b/src/govuk/components/phase-banner/_phase-banner.scss index 8b5953fd29..b2a80981ac 100644 --- a/src/govuk/components/phase-banner/_phase-banner.scss +++ b/src/govuk/components/phase-banner/_phase-banner.scss @@ -2,4 +2,6 @@ @import "../../tools/all"; @import "../../helpers/all"; +@import "../tag/tag"; + @import "./style"; diff --git a/src/govuk/components/phase-banner/_style.scss b/src/govuk/components/phase-banner/_style.scss index a270d092c9..44135d9c0d 100644 --- a/src/govuk/components/phase-banner/_style.scss +++ b/src/govuk/components/phase-banner/_style.scss @@ -1,5 +1,3 @@ -@import "../tag/tag"; - @include govuk-exports("govuk/component/phase-banner") { .govuk-phase-banner { padding-top: govuk-spacing(2); diff --git a/src/govuk/components/radios/_radios.scss b/src/govuk/components/radios/_radios.scss index 8b5953fd29..5310b47c10 100644 --- a/src/govuk/components/radios/_radios.scss +++ b/src/govuk/components/radios/_radios.scss @@ -2,4 +2,9 @@ @import "../../tools/all"; @import "../../helpers/all"; +@import "../error-message/error-message"; +@import "../fieldset/fieldset"; +@import "../hint/hint"; +@import "../label/label"; + @import "./style"; diff --git a/src/govuk/components/radios/_style.scss b/src/govuk/components/radios/_style.scss index 8ef9b8e292..759d4dc5a6 100644 --- a/src/govuk/components/radios/_style.scss +++ b/src/govuk/components/radios/_style.scss @@ -1,8 +1,3 @@ -@import "../error-message/error-message"; -@import "../fieldset/fieldset"; -@import "../hint/hint"; -@import "../label/label"; - @include govuk-exports("govuk/component/radios") { $govuk-touch-target-size: 44px; diff --git a/src/govuk/components/select/_select.scss b/src/govuk/components/select/_select.scss index 8b5953fd29..116aa12319 100644 --- a/src/govuk/components/select/_select.scss +++ b/src/govuk/components/select/_select.scss @@ -2,4 +2,8 @@ @import "../../tools/all"; @import "../../helpers/all"; +@import "../error-message/error-message"; +@import "../hint/hint"; +@import "../label/label"; + @import "./style"; diff --git a/src/govuk/components/select/_style.scss b/src/govuk/components/select/_style.scss index 46df5c647a..ae578d86a9 100644 --- a/src/govuk/components/select/_style.scss +++ b/src/govuk/components/select/_style.scss @@ -1,7 +1,3 @@ -@import "../error-message/error-message"; -@import "../hint/hint"; -@import "../label/label"; - @include govuk-exports("govuk/component/select") { .govuk-select { @include govuk-font($size: 19, $line-height: 1.25); diff --git a/src/govuk/components/textarea/_style.scss b/src/govuk/components/textarea/_style.scss index 369ff605c9..e2827dae40 100644 --- a/src/govuk/components/textarea/_style.scss +++ b/src/govuk/components/textarea/_style.scss @@ -1,7 +1,3 @@ -@import "../error-message/error-message"; -@import "../hint/hint"; -@import "../label/label"; - @include govuk-exports("govuk/component/textarea") { .govuk-textarea { @include govuk-font($size: 19, $line-height: 1.25); diff --git a/src/govuk/components/textarea/_textarea.scss b/src/govuk/components/textarea/_textarea.scss index 8b5953fd29..116aa12319 100644 --- a/src/govuk/components/textarea/_textarea.scss +++ b/src/govuk/components/textarea/_textarea.scss @@ -2,4 +2,8 @@ @import "../../tools/all"; @import "../../helpers/all"; +@import "../error-message/error-message"; +@import "../hint/hint"; +@import "../label/label"; + @import "./style"; From caeb140a7a647231f9b9446cf26143e2a877d90d Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 27 Feb 2020 09:51:37 +0000 Subject: [PATCH 3/3] Remove redundant imports We already import `helpers/all`, so we don't need to then import the typography helpers separately. --- src/govuk/components/footer/_style.scss | 2 -- src/govuk/components/header/_style.scss | 2 -- 2 files changed, 4 deletions(-) diff --git a/src/govuk/components/footer/_style.scss b/src/govuk/components/footer/_style.scss index 0c62e4d12b..f69ec336cb 100644 --- a/src/govuk/components/footer/_style.scss +++ b/src/govuk/components/footer/_style.scss @@ -1,5 +1,3 @@ -@import "../../helpers/typography"; - @include govuk-exports("govuk/component/footer") { $govuk-footer-background: $govuk-canvas-background-colour; diff --git a/src/govuk/components/header/_style.scss b/src/govuk/components/header/_style.scss index 4de228201d..c2a53c5e0e 100644 --- a/src/govuk/components/header/_style.scss +++ b/src/govuk/components/header/_style.scss @@ -1,5 +1,3 @@ -@import "../../helpers/typography"; - @include govuk-exports("govuk/component/header") { $govuk-header-background: govuk-colour("black");