diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss index c12340415..3a9d24513 100644 --- a/app/assets/sass/application.scss +++ b/app/assets/sass/application.scss @@ -1,15 +1,15 @@ -@import "govuk-frontend/dist/govuk/all"; -@import "govuk-country-and-territory-autocomplete/location-autocomplete"; +@use "govuk-frontend/dist/govuk" as *; +@use "govuk-country-and-territory-autocomplete/location-autocomplete"; -@import "modules/3ds"; -@import "modules/accepted-cards"; -@import "modules/accessible-autocomplete"; -@import "modules/cvc"; -@import "modules/expiry-date-separator"; -@import "modules/input-confirm"; -@import "modules/summary-panel"; -@import "modules/web-payments"; -@import "modules/text-align"; -@import "modules/borders"; -@import "modules/divider"; -@import "modules/test_payment_banner"; +@use "modules/3ds" as *; +@use "modules/accepted-cards"; +@use "modules/accessible-autocomplete"; +@use "modules/cvc"; +@use "modules/expiry-date-separator"; +@use "modules/input-confirm"; +@use "modules/summary-panel"; +@use "modules/web-payments"; +@use "modules/text-align"; +@use "modules/borders"; +@use "modules/divider"; +@use "modules/test_payment_banner"; diff --git a/app/assets/sass/base/_custom-branding.scss b/app/assets/sass/base/_custom-branding.scss index daf2e1ded..1928951dd 100644 --- a/app/assets/sass/base/_custom-branding.scss +++ b/app/assets/sass/base/_custom-branding.scss @@ -1,5 +1,5 @@ -@import "colours"; -@import "conditionals"; +@use "colours"; +@use "conditionals"; // CUSTOM BRANDING // Use the variables below to control the style diff --git a/app/assets/sass/modules/_accepted-cards.scss b/app/assets/sass/modules/_accepted-cards.scss index 0875a2ae6..a23174cda 100644 --- a/app/assets/sass/modules/_accepted-cards.scss +++ b/app/assets/sass/modules/_accepted-cards.scss @@ -1,3 +1,6 @@ +@use 'sass:list'; +@use "govuk-frontend/dist/govuk" as *; + .accepted-cards { display: block; width: 100%; @@ -22,21 +25,21 @@ } $cards: visa master-card american-express jcb diners-club discover maestro visa-electron unionpay; - @for $i from 1 through length($cards) { + @for $i from 1 through list.length($cards) { // sass-lint:disable space-around-operator $x-pos: 12.5 * ($i - 1); - .#{nth($cards, $i)} { + .#{list.nth($cards, $i)} { background-position: #{$x-pos + "%"} 100%; } - &.field-empty .#{nth($cards, $i)}, - .#{nth($cards, $i)}.selected { + &.field-empty .#{list.nth($cards, $i)}, + .#{list.nth($cards, $i)}.selected { background-position: #{$x-pos + "%"} 0%; } } &-hint { - color: $govuk-secondary-text-colour; + color: govuk-functional-colour(secondary-text); } } diff --git a/app/assets/sass/modules/_accessible-autocomplete.scss b/app/assets/sass/modules/_accessible-autocomplete.scss index b026a5d58..8a63ec3a1 100644 --- a/app/assets/sass/modules/_accessible-autocomplete.scss +++ b/app/assets/sass/modules/_accessible-autocomplete.scss @@ -1,3 +1,5 @@ +@use "govuk-frontend/dist/govuk" as *; + .autocomplete__input, .autocomplete__menu { @include govuk-font($size: 19); diff --git a/app/assets/sass/modules/_borders.scss b/app/assets/sass/modules/_borders.scss index 426c0c3f7..8f9f4fc9f 100644 --- a/app/assets/sass/modules/_borders.scss +++ b/app/assets/sass/modules/_borders.scss @@ -1,3 +1,5 @@ +@use "govuk-frontend/dist/govuk" as *; + .pay-\!-border-top { - border-top: 1px solid $govuk-border-colour; + border-top: 1px solid govuk-functional-colour(border); } diff --git a/app/assets/sass/modules/_cvc.scss b/app/assets/sass/modules/_cvc.scss index 5cdb70c42..4ed165e6f 100644 --- a/app/assets/sass/modules/_cvc.scss +++ b/app/assets/sass/modules/_cvc.scss @@ -1,3 +1,5 @@ +@use "govuk-frontend/dist/govuk" as *; + .hidden { display: none; } @@ -34,7 +36,7 @@ body:not(.js-enabled) { .either { @include govuk-font($size: 19); line-height: 37px!important; - color: $govuk-secondary-text-colour; + color: govuk-functional-colour(secondary-text); float: left; margin-right: govuk-spacing(3); } diff --git a/app/assets/sass/modules/_expiry-date-separator.scss b/app/assets/sass/modules/_expiry-date-separator.scss index 8aa532398..a24b57e82 100644 --- a/app/assets/sass/modules/_expiry-date-separator.scss +++ b/app/assets/sass/modules/_expiry-date-separator.scss @@ -1,3 +1,5 @@ +@use "govuk-frontend/dist/govuk" as *; + .govuk-date-input__item--with-separator { position: relative; margin-right: govuk-spacing(7); diff --git a/app/assets/sass/modules/_input-confirm.scss b/app/assets/sass/modules/_input-confirm.scss index 00ede1ac9..3610b9820 100644 --- a/app/assets/sass/modules/_input-confirm.scss +++ b/app/assets/sass/modules/_input-confirm.scss @@ -1,3 +1,5 @@ +@use "govuk-frontend/dist/govuk" as *; + .input-confirm { @include govuk-font($size: 19); margin-top: govuk-spacing(1) * -1; @@ -12,7 +14,7 @@ .input-confirmation { @include govuk-font($size: 24); - color: $govuk-text-colour; + color: govuk-functional-colour(text); .email-container & { word-break: break-all; diff --git a/app/assets/sass/modules/_summary-panel.scss b/app/assets/sass/modules/_summary-panel.scss index fc6ede29e..7e158a690 100644 --- a/app/assets/sass/modules/_summary-panel.scss +++ b/app/assets/sass/modules/_summary-panel.scss @@ -1,7 +1,9 @@ +@use "govuk-frontend/dist/govuk" as *; + .payment-summary { - border-top: 2px solid $govuk-brand-colour; + border-top: 2px solid govuk-functional-colour(brand); padding: govuk-spacing(3); - background-color: govuk-colour('light-grey'); + background-color: govuk-colour('black', $variant: 'tint-95'); .amount { display: block; diff --git a/app/assets/sass/modules/_test_payment_banner.scss b/app/assets/sass/modules/_test_payment_banner.scss index a2d3a2836..37e901b03 100644 --- a/app/assets/sass/modules/_test_payment_banner.scss +++ b/app/assets/sass/modules/_test_payment_banner.scss @@ -1,3 +1,5 @@ +@use "govuk-frontend/dist/govuk" as *; + .test-payment-banner { padding-top: govuk-spacing(2); @include govuk-media-query($until: tablet) { diff --git a/app/assets/sass/modules/_text-align.scss b/app/assets/sass/modules/_text-align.scss index 13b43cc5c..48c7032c6 100644 --- a/app/assets/sass/modules/_text-align.scss +++ b/app/assets/sass/modules/_text-align.scss @@ -1,3 +1,5 @@ +@use "govuk-frontend/dist/govuk" as *; + .govuk-text-align-center { text-align: center; } diff --git a/app/assets/sass/modules/_web-payments.scss b/app/assets/sass/modules/_web-payments.scss index 1fec1c904..29a83b151 100644 --- a/app/assets/sass/modules/_web-payments.scss +++ b/app/assets/sass/modules/_web-payments.scss @@ -1,3 +1,5 @@ +@use "govuk-frontend/dist/govuk" as *; + .apple-pay-container{ display: none; @@ -38,7 +40,7 @@ } &[disabled] { - background: $govuk-secondary-text-colour; + background: govuk-functional-colour(secondary-text); } //https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons diff --git a/app/assets/sass/modules/divider.scss b/app/assets/sass/modules/divider.scss index 2d9930de2..1682534a2 100644 --- a/app/assets/sass/modules/divider.scss +++ b/app/assets/sass/modules/divider.scss @@ -1,3 +1,5 @@ +@use "govuk-frontend/dist/govuk" as *; + .pay-divider { @include govuk-font($size: 19); @@ -13,7 +15,7 @@ top: 50%; width: 100%; display: block; - border-top: 1px solid $govuk-border-colour; + border-top: 1px solid govuk-functional-colour(border); } &--word { diff --git a/app/views/includes/custom.njk b/app/views/includes/custom.njk index 8c6296247..2430c88f4 100644 --- a/app/views/includes/custom.njk +++ b/app/views/includes/custom.njk @@ -1,16 +1,18 @@ -