diff --git a/app/templates/components/components/back-link/_back-link.scss b/app/templates/components/components/back-link/_back-link.scss deleted file mode 100644 index 5cfe3a068..000000000 --- a/app/templates/components/components/back-link/_back-link.scss +++ /dev/null @@ -1,54 +0,0 @@ -@import "../../settings/all"; -@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; - - // 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; - - // Prepend left pointing arrow - &:before { - @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px); - - content: ""; - - // Vertically align with the parent element - position: absolute; - - top: -1px; - bottom: 1px; - left: 0; - - margin: auto; - } - } - - // Begin adjustments for font baseline offset - // These should be removed when the font is updated with the correct baseline - - .govuk-back-link:before { - $offset: 1px; - - top: $offset * -1; - bottom: $offset; - } -} diff --git a/app/templates/components/components/button/_button.scss b/app/templates/components/components/button/_button.scss deleted file mode 100644 index a39a62e29..000000000 --- a/app/templates/components/components/button/_button.scss +++ /dev/null @@ -1,256 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@include govuk-exports("govuk/component/button") { - // Primary button variables - $govuk-button-colour: #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("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); - @include govuk-focusable; - - 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 - ($button-shadow-size / 2)) govuk-spacing(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; - } - - // 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; - } - } - - // Fix unwanted button padding in Firefox - &::-moz-focus-inner { - padding: 0; - border: 0; - } - - &:hover, - &:focus { - background-color: $govuk-button-hover-colour; - } - - &:active { - top: $button-shadow-size; - box-shadow: none; - - @include govuk-if-ie8 { - border-bottom-width: 0; - } - } - - // 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, - &:focus { - 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, - &:focus { - 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); - - min-height: auto; - padding-top: govuk-spacing(2) - $govuk-border-width-form-element; - padding-right: govuk-spacing(7); - padding-bottom: govuk-spacing(2) - $govuk-border-width-form-element; - padding-left: govuk-spacing(3); - - background-image: govuk-image-url("icon-pointer.png"); - background-repeat: no-repeat; - background-position: 100% 50%; - - @include govuk-device-pixel-ratio { - background-image: govuk-image-url("icon-pointer-2x.png"); - background-size: 30px 19px; - } - } - - // Begin adjustments for font baseline offset - // These should be removed when the font is updated with the correct baseline - // For the 1px addition please see https://github.com/alphagov/govuk-frontend/pull/365#discussion_r154349428 - - $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 { - 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 - } -} diff --git a/app/templates/components/components/checkboxes/_checkboxes.scss b/app/templates/components/components/checkboxes/_checkboxes.scss deleted file mode 100644 index 86309549f..000000000 --- a/app/templates/components/components/checkboxes/_checkboxes.scss +++ /dev/null @@ -1,310 +0,0 @@ -@import "../../settings/all"; -@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 - -ms-touch-action: manipulation; - 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; - - -webkit-transform: rotate(-45deg); - - -ms-transform: rotate(-45deg); - - 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 { - // Since box-shadows are removed when users customise their colours, we set - // a transparent outline that is shown instead. - // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ - outline: $govuk-focus-width solid transparent; - outline-offset: $govuk-focus-width; - 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 - // ========================================================= - - $conditional-border-width: $govuk-border-width-mobile; - // 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/app/templates/components/components/details/_details.scss b/app/templates/components/components/details/_details.scss deleted file mode 100644 index 44c80ad58..000000000 --- a/app/templates/components/components/details/_details.scss +++ /dev/null @@ -1,89 +0,0 @@ -@import "../../settings/all"; -@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; - } - - // ...but only underline the text, not the arrow - .govuk-details__summary-text { - text-decoration: underline; - } - - .govuk-details__summary:hover { - color: $govuk-link-hover-colour; - } - - .govuk-details__summary:focus { - // -1px offset fixes gap between background and outline in Firefox - outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour; - outline-offset: -1px; - // When focussed, the text colour needs to be darker to ensure that colour - // contrast is still acceptable - color: $govuk-focus-text-colour; - background: $govuk-focus-colour; - } - - // 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: 0; - 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/app/templates/components/components/error-message/_error-message.scss b/app/templates/components/components/error-message/_error-message.scss deleted file mode 100644 index b97298c3a..000000000 --- a/app/templates/components/components/error-message/_error-message.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import "../../settings/all"; -@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; - } -} diff --git a/app/templates/components/components/fieldset/_fieldset.scss b/app/templates/components/components/fieldset/_fieldset.scss deleted file mode 100644 index fa7728e0f..000000000 --- a/app/templates/components/components/fieldset/_fieldset.scss +++ /dev/null @@ -1,70 +0,0 @@ -@import "../../settings/all"; -@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; - // Hack to let legends or elements within legends have margins in webkit browsers - overflow: hidden; - - 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/app/templates/components/components/footer/_footer.scss b/app/templates/components/components/footer/_footer.scss deleted file mode 100644 index 9ee8181b9..000000000 --- a/app/templates/components/components/footer/_footer.scss +++ /dev/null @@ -1,236 +0,0 @@ -@import "../../settings/all"; -@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-top: #a1acb2; - $govuk-footer-border: govuk-colour("grey-2"); - $govuk-footer-text: #454a4c; - $govuk-footer-link: $govuk-footer-text; - $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 { - @include govuk-focusable-fill; - - &:link, - &:visited { - color: $govuk-footer-link; - } - - &:hover, - &:active { - color: $govuk-footer-link-hover; - } - - // When focussed, the text colour needs to be darker to ensure that colour - // contrast is still acceptable - &:focus { - color: $govuk-focus-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. - @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: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; // Support: Flexbox - margin-right: -$govuk-gutter-half; - margin-left: -$govuk-gutter-half; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; // Support: Flexbox - -webkit-box-align: end; - -webkit-align-items: flex-end; - -ms-flex-align: end; - align-items: flex-end; // Support: Flexbox - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - 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 { - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; // Support: Flexbox - @include mq ($until: tablet) { - -webkit-flex-basis: 320px; - -ms-flex-preferred-size: 320px; - flex-basis: 320px; // Support: Flexbox - } - } - - .govuk-footer__licence-logo { - display: inline-block; - margin-right: govuk-spacing(2); - @include mq ($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 mq ($until: tablet) { - padding-bottom: govuk-spacing(2); - } - border-bottom: 1px solid $govuk-footer-border; - } - - .govuk-footer__navigation { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; // Support: Flexbox - margin-right: -$govuk-gutter-half; - margin-left: -$govuk-gutter-half; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - 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) - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; // Support: Flexbox - -webkit-flex-shrink: 1; - -ms-flex-negative: 1; - flex-shrink: 1; // Support: Flexbox - @include mq ($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. - -webkit-flex-basis: 200px; - -ms-flex-preferred-size: 200px; - flex-basis: 200px; // Support: Flexbox - } - } - - // Sections two-third:one-third on desktop - @include mq ($from: desktop) { - .govuk-footer__section:first-child { - -webkit-box-flex: 2; - -webkit-flex-grow: 2; - -ms-flex-positive: 2; - flex-grow: 2; // Support: Flexbox - } - } - - .govuk-footer__list { - margin: 0; - padding: 0; - list-style: none; - -webkit-column-gap: $govuk-gutter; - -moz-column-gap: $govuk-gutter; - column-gap: $govuk-gutter; // Support: Columns - } - - @include mq ($from: desktop) { - .govuk-footer__list--columns-2 { - -webkit-column-count: 2; - -moz-column-count: 2; - column-count: 2; // Support: Columns - } - - .govuk-footer__list--columns-3 { - -webkit-column-count: 3; - -moz-column-count: 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/app/templates/components/components/header/_header.scss b/app/templates/components/components/header/_header.scss deleted file mode 100644 index 20ffec2a5..000000000 --- a/app/templates/components/components/header/_header.scss +++ /dev/null @@ -1,297 +0,0 @@ -@import "../../settings/all"; -@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 { - margin-right: govuk-spacing(1); - } - - .govuk-header__logotype-fallback-image { - width: 36px; - height: 32px; - border: 0; - vertical-align: middle; - } - - .govuk-header__product-name { - @include govuk-font($size: 24); - display: inline-table; - padding-right: govuk-spacing(2); - } - - .govuk-header__link { - @include govuk-focusable-fill; - - text-decoration: none; - - &:link, - &:visited { - color: $govuk-header-link; - } - - &:hover { - text-decoration: underline; - } - - // When focussed, the text colour needs to be darker to ensure that colour - // contrast is still acceptable - &:focus { - color: $govuk-focus-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. - @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: 30px; - - &: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; - } - } - - .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 mq ($from: desktop) { - width: 33.33%; - padding-right: $govuk-gutter-half; - float: left; - vertical-align: top; - } - } - - .govuk-header__content { - @include mq ($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; - } - - &::after { - @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block); - content: ""; - margin-left: govuk-spacing(1); - } - - @include govuk-focusable; - - @include mq ($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 mq ($from: desktop) { - display: none; - } - } - - .govuk-header__navigation { - display: none; - @include mq ($from: desktop) { - display: block; - } - } - - .govuk-header__navigation--open { - display: block; - } - } - - - .govuk-header__navigation--end { - @include mq ($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 mq ($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 logo when printing in browsers that don't support SVG. - .govuk-header__logotype-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; - } - } - } - - // Begin adjustments for font baseline offset - // These should be removed when the font is updated with the correct baseline - .govuk-header__logotype { - position: relative; - top: -4px; - } - - .govuk-header { - $offset: 3px; - padding-top: $offset; - } - // End adjustments - -} diff --git a/app/templates/components/components/hint/_hint.scss b/app/templates/components/components/hint/_hint.scss deleted file mode 100644 index 7dab10c46..000000000 --- a/app/templates/components/components/hint/_hint.scss +++ /dev/null @@ -1,50 +0,0 @@ -@import "../../settings/all"; -@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)); - } -} diff --git a/app/templates/components/components/input/_input.scss b/app/templates/components/components/input/_input.scss deleted file mode 100644 index 1dc1f06d3..000000000 --- a/app/templates/components/components/input/_input.scss +++ /dev/null @@ -1,77 +0,0 @@ -@import "../../settings/all"; -@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); - @include govuk-focusable; - - box-sizing: border-box; - width: 100%; - height: 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 - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - } - - .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; - } - - // 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/app/templates/components/components/inset-text/_inset-text.scss b/app/templates/components/components/inset-text/_inset-text.scss deleted file mode 100644 index 524dc50c8..000000000 --- a/app/templates/components/components/inset-text/_inset-text.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import "../../settings/all"; -@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; - } - } -} diff --git a/app/templates/components/components/label/_label.scss b/app/templates/components/components/label/_label.scss deleted file mode 100644 index bfe400e57..000000000 --- a/app/templates/components/components/label/_label.scss +++ /dev/null @@ -1,45 +0,0 @@ -@import "../../settings/all"; -@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; - } -} diff --git a/app/templates/components/components/radio-label/_label.scss b/app/templates/components/components/radio-label/_label.scss deleted file mode 100644 index bfe400e57..000000000 --- a/app/templates/components/components/radio-label/_label.scss +++ /dev/null @@ -1,45 +0,0 @@ -@import "../../settings/all"; -@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; - } -} diff --git a/app/templates/components/components/radios/_radios.scss b/app/templates/components/components/radios/_radios.scss deleted file mode 100644 index 074bb53cc..000000000 --- a/app/templates/components/components/radios/_radios.scss +++ /dev/null @@ -1,348 +0,0 @@ -@import "../../settings/all"; -@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 - -ms-touch-action: manipulation; - 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 { - // Since box-shadows are removed when users customise their colours we set a - // transparent outline that is shown instead. - // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ - outline: $govuk-focus-width solid transparent; - outline-offset: $govuk-focus-width; - 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 mq ($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 - // ========================================================= - - $conditional-border-width: $govuk-border-width-mobile; - // 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: 14px; - left: 6px; - border-width: 6px; - } - - // 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/app/templates/components/components/skip-link/_skip-link.scss b/app/templates/components/components/skip-link/_skip-link.scss deleted file mode 100644 index ddccb1d2e..000000000 --- a/app/templates/components/components/skip-link/_skip-link.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "../../settings/all"; -@import "../../tools/all"; -@import "../../helpers/all"; - -@include govuk-exports("govuk/component/skip-link") { - .govuk-skip-link { - @include govuk-visually-hidden-focusable; - @include govuk-link-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})"); - } - } -} diff --git a/app/templates/components/components/textarea/_textarea.scss b/app/templates/components/components/textarea/_textarea.scss deleted file mode 100644 index d37145cc5..000000000 --- a/app/templates/components/components/textarea/_textarea.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import "../../settings/all"; -@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); - @include govuk-focusable; - - 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; - } - - .govuk-textarea--error { - border: $govuk-border-width-form-element-error solid $govuk-error-colour; - } -} diff --git a/tests/app/main/views/test_platform_admin.py b/tests/app/main/views/test_platform_admin.py index e85303058..f40c3c3d7 100644 --- a/tests/app/main/views/test_platform_admin.py +++ b/tests/app/main/views/test_platform_admin.py @@ -773,7 +773,7 @@ def test_clear_cache_shows_form( "service-????????-????-????-????-????????????-template-????????-????-????-????-????????????-version-*" # noqa ), call( - "service-????????-????-????-????-????????????-template-????????-????-????-????-????????????-versions" # noqa + "service-????????-????-????-????-????????????-template-????????-????-????-????-????????????-versions" # noqa ), ], "Removed 6 objects across 3 key formats for template",