darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-11 17:38:50 -04:00
Code Issues Packages Projects Releases Wiki Activity

removing unnecessary scss files

Browse Source
This commit is contained in:
Jonathan Bobel
2023-08-29 12:18:52 -04:00
parent 38c6ddf0bc
commit 32083dff99
17 changed files with 1 additions and 1979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app/templates/components/components/back-link/_back-link.scss
View File

@@ -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;
}
}

256
app/templates/components/components/button/_button.scss
View File

@@ -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 <input type="button"> 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
}
}

310
app/templates/components/components/checkboxes/_checkboxes.scss
View File

@@ -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;
}
}
}
}

89
app/templates/components/components/details/_details.scss
View File

@@ -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;
}
}

15
app/templates/components/components/error-message/_error-message.scss
View File

@@ -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;
}
}

70
app/templates/components/components/fieldset/_fieldset.scss
View File

@@ -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;
}
}

236
app/templates/components/components/footer/_footer.scss
View File

@@ -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 `<hr>` default margins
@include govuk-responsive-margin(8, "bottom");
border: 0; // Reset `<hr>` 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;
}
}

297
app/templates/components/components/header/_header.scss
View File

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

50
app/templates/components/components/hint/_hint.scss
View File

@@ -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 <h1>, 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 <h1>, 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));
}
}

77
app/templates/components/components/input/_input.scss
View File

@@ -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;
}
}

28
app/templates/components/components/inset-text/_inset-text.scss
View File

@@ -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;
}
}
}

45
app/templates/components/components/label/_label.scss
View File

@@ -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;
}
}

45
app/templates/components/components/radio-label/_label.scss
View File

@@ -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;
}
}

348
app/templates/components/components/radios/_radios.scss
View File

@@ -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;
}
}
}
}

26
app/templates/components/components/skip-link/_skip-link.scss
View File

@@ -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})");
}
}
}

32
app/templates/components/components/textarea/_textarea.scss
View File

@@ -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;
}
}

2
tests/app/main/views/test_platform_admin.py
View File

@@ -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",