diff --git a/Auth/LearningHub.Nhs.Auth/Styles/nhsuk/common.scss b/Auth/LearningHub.Nhs.Auth/Styles/nhsuk/common.scss
index ed13eb8..5b87bdf 100644
--- a/Auth/LearningHub.Nhs.Auth/Styles/nhsuk/common.scss
+++ b/Auth/LearningHub.Nhs.Auth/Styles/nhsuk/common.scss
@@ -1,80 +1,4 @@
@use "../abstracts/all" as *;
-@use "nhsuk" as *;
-
-.nhsuk-u-font-style-italic {
- font-style: italic;
-}
-
-.nhsuk-button--red {
- background-color: $nhsuk-red !important;
-
- &:hover {
- background-color: $nhsuk-red-hover !important;
- border-color: $nhsuk-red-hover !important;
- }
-}
-
-.nhsuk-button--beta-login {
- background-color: $nhsuk-blue;
- box-shadow: 0 4px 0 #002f5c;
-}
-
-.nhsuk-button--beta-login:hover {
- background-color: $nhsuk-btn-blue-hover;
-}
-
-// By default, the text on reverse (white) buttons turns white once clicked, rendering them invisible.
-.nhsuk-button--reverse:visited {
- color: $nhsuk-black
-}
-
-.nhsuk-back-link {
- padding: px2rem(20) 0;
- margin-bottom: 0;
-}
-
-.nhsuk-radios__divider {
- text-align: left;
- width: unset;
-}
-
-.nhsuk-radios__item label {
- font-family: $font-stack;
-}
-
-/* Conditional radio buttons - Note: The nhsuk-radios__conditional element needs to be a SIBLING of the radio button input element
- otherwise the CSS selector won't work. See Views/Bookmark/Move.cshtml for a usage example.
- The NHSUK component (nhsuk-radios__conditional) requires JavaScript to work. These tweaks allow it to work without.
-*/
-.nhsuk-radios__conditional {
- display: none;
- margin-left: -22px;
- margin-top: 8px;
-}
-
-.nhsuk-radios__input:checked ~ .nhsuk-radios__conditional {
- display: block !important;
-}
-
-/* jquery unbobtrusive validation style over */
-.nhsuk-error-summary__list li {
- color: $nhsuk-red;
-}
-
-.nhsuk-form-group.input-validation-error {
- @extend .nhsuk-form-group--error;
-}
-
-.nhsuk-input.input-validation-error {
- @extend .nhsuk-input--error
-}
-
-.nhsuk-input:focus {
- border: 2px solid #212b32;
- box-shadow: inset 0 0 0 2px;
- outline: 4px solid #ffeb3b; /* 1 */
- outline-offset: 0;
-}
.display--hide {
display: none !important;
@@ -119,81 +43,6 @@
display: block !important;
}
-
-.nhsuk-bg-light-blue {
- background-color: $nhsuk-light-blue-color;
-}
-
-.nhsuk-bg-pale-blue {
- background-color: $nhsuk-pale-blue-color;
-}
-
-.nhsuk-bg-white {
- background-color: $color_nhsuk-white;
-}
-
-.nhsuk-width-container.search-width-container {
- max-width: px2rem(752);
- margin: 0 auto;
- padding-left: px2rem(68);
- padding-right: px2rem(68);
-}
-
-/* One third column layout that switches to full width at the small desktop breakpoint (990px) instead of mobile. */
-.nhsuk-grid-column-one-third-small-desktop {
- @extend .nhsuk-grid-column-one-third;
- width: 33.3333333333% !important;
-
- @media (max-width: px2rem(990)) {
- width: 100% !important;
- }
-}
-
-
-/* Tweaks to styling for single card view. */
-@media(min-width: 768px) and (max-width: 990px) {
- .nhsuk-card-group .nhsuk-grid-column-one-third-small-desktop {
- max-width: 600px !important;
- }
-
- .nhsuk-card-group--centred {
- justify-content: center !important;
- }
-}
-
-.nhsuk-card-banner-container {
- padding-bottom: 42.86%;
- position: relative;
-}
-
-.nhsuk-card-banner {
- height: 100%;
- object-fit: cover;
- object-position: left;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-}
-
-.nhsuk-card-banner-empty {
- background-color: $nhsuk-pale-blue-color;
- border-bottom: 1px solid #d8dde0;
-}
-
-.nhsuk-error-message.error-message--margin-bottom-1 {
- margin-bottom: nhsuk-spacing(1);
-}
-
-.nhsuk-u-margin-bottom-2point5 {
- margin-bottom: 12px;
-
- @media(max-width: 641px) {
- margin-bottom: 10px;
- }
-}
-
.word-break__break-word {
word-break: break-word;
}
@@ -203,12 +52,6 @@
justify-content: space-between;
}
-.nhsuk-button--no-shrink {
- white-space: nowrap;
- margin-top: auto !important;
- margin-bottom: auto !important;
-}
-
.modal-footer--buttons {
justify-content: space-between !important;
padding-left: 16px !important;
@@ -217,10 +60,11 @@
margin-top: auto !important;
margin-bottom: auto !important;
}
+
.validation-summary-valid {
display: none;
}
.field-validation-valid {
display: none !important;
-}
\ No newline at end of file
+}
diff --git a/Auth/LearningHub.Nhs.Auth/Styles/nhsuk/layout.scss b/Auth/LearningHub.Nhs.Auth/Styles/nhsuk/nhsuk-overrides.scss
similarity index 66%
rename from Auth/LearningHub.Nhs.Auth/Styles/nhsuk/layout.scss
rename to Auth/LearningHub.Nhs.Auth/Styles/nhsuk/nhsuk-overrides.scss
index 50b3c2b..a048c03 100644
--- a/Auth/LearningHub.Nhs.Auth/Styles/nhsuk/layout.scss
+++ b/Auth/LearningHub.Nhs.Auth/Styles/nhsuk/nhsuk-overrides.scss
@@ -1,34 +1,175 @@
@use "../abstracts/all" as *;
@use "nhsuk" as *;
-.nhsuk-header {
- padding: 0 px2rem(32);
+// Overrides due to
+// - specific element updates (listed first)
+// - Highly customised header
+// - Beta banner
+// - Footer padding update
+//
+// Header customisation not needed with current frontend package
+//
+// - FGC 31/07/25
+
+.nhsuk-u-font-style-italic {
+ font-style: italic;
}
-.nhsuk-width-container.app-width-container {
- max-width: px2rem(1208);
- margin: 0 auto;
- padding-left: px2rem(32);
- padding-right: px2rem(32);
+.nhsuk-button--red {
+ background-color: $nhsuk-red !important;
+
+ &:hover {
+ background-color: $nhsuk-red-hover !important;
+ border-color: $nhsuk-red-hover !important;
+ }
}
-.nhsuk-header .nhsuk-width-container.app-width-container {
- max-width: px2rem(1144);
- margin: 0 auto;
+.nhsuk-button--beta-login {
+ background-color: $nhsuk-blue;
+ box-shadow: 0 4px 0 #002f5c;
}
-.nhsuk-width-container.app-width-container.beta-banner {
- padding: px2rem(8) px2rem(32);
- max-width: px2rem(1208);
+.nhsuk-button--beta-login:hover {
+ background-color: $nhsuk-btn-blue-hover;
+}
+
+// By default, the text on reverse (white) buttons turns white once clicked, rendering them invisible.
+.nhsuk-button--reverse:visited {
+ color: $nhsuk-black
+}
+
+.nhsuk-back-link {
+ padding: px2rem(20) 0;
+ margin-bottom: 0;
+}
+
+.nhsuk-radios__divider {
+ text-align: left;
+ width: unset;
+}
+
+.nhsuk-radios__item label {
+ font-family: $font-stack;
+}
+
+/* Conditional radio buttons - Note: The nhsuk-radios__conditional element needs to be a SIBLING of the radio button input element
+ otherwise the CSS selector won't work. See Views/Bookmark/Move.cshtml for a usage example.
+ The NHSUK component (nhsuk-radios__conditional) requires JavaScript to work. These tweaks allow it to work without.
+*/
+.nhsuk-radios__conditional {
+ display: none;
+ margin-left: -22px;
+ margin-top: 8px;
+}
+
+.nhsuk-radios__input:checked ~ .nhsuk-radios__conditional {
+ display: block !important;
+}
+
+/* jquery unbobtrusive validation style over */
+.nhsuk-error-summary__list li {
+ color: $nhsuk-red;
+}
+
+.nhsuk-form-group.input-validation-error {
+ @extend .nhsuk-form-group--error;
+}
+
+.nhsuk-input.input-validation-error {
+ @extend .nhsuk-input--error
+}
+
+.nhsuk-input:focus {
+ border: 2px solid #212b32;
+ box-shadow: inset 0 0 0 2px;
+ outline: 4px solid #ffeb3b; /* 1 */
+ outline-offset: 0;
+}
+
+.nhsuk-bg-light-blue {
+ background-color: $nhsuk-light-blue-color;
+}
+
+.nhsuk-bg-pale-blue {
+ background-color: $nhsuk-pale-blue-color;
+}
+
+.nhsuk-bg-white {
+ background-color: $color_nhsuk-white;
+}
+
+.nhsuk-width-container.search-width-container {
+ max-width: px2rem(752);
margin: 0 auto;
+ padding-left: px2rem(68);
+ padding-right: px2rem(68);
}
-.nhsuk-header .nhsuk-header__container::after {
- content: none;
+/* One third column layout that switches to full width at the small desktop breakpoint (990px) instead of mobile. */
+.nhsuk-grid-column-one-third-small-desktop {
+ @extend .nhsuk-grid-column-one-third;
+ width: 33.3333333333% !important;
+
+ @media (max-width: px2rem(990)) {
+ width: 100% !important;
+ }
}
-.nhsuk-header__navigation.app-width-container {
- max-width: px2rem(1144);
+/* Tweaks to styling for single card view. */
+@media(min-width: 768px) and (max-width: 990px) {
+ .nhsuk-card-group .nhsuk-grid-column-one-third-small-desktop {
+ max-width: 600px !important;
+ }
+
+ .nhsuk-card-group--centred {
+ justify-content: center !important;
+ }
+}
+
+.nhsuk-card-banner-container {
+ padding-bottom: 42.86%;
+ position: relative;
+}
+
+.nhsuk-card-banner {
+ height: 100%;
+ object-fit: cover;
+ object-position: left;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+.nhsuk-card-banner-empty {
+ background-color: $nhsuk-pale-blue-color;
+ border-bottom: 1px solid #d8dde0;
+}
+
+.nhsuk-error-message.error-message--margin-bottom-1 {
+ margin-bottom: nhsuk-spacing(1);
+}
+
+.nhsuk-u-margin-bottom-2point5 {
+ margin-bottom: 12px;
+
+ @media(max-width: 641px) {
+ margin-bottom: 10px;
+ }
+}
+
+.nhsuk-button--no-shrink {
+ white-space: nowrap;
+ margin-top: auto !important;
+ margin-bottom: auto !important;
+}
+
+.nhsuk-width-container.app-width-container {
+ max-width: px2rem(1208);
+ margin: 0 auto;
+ padding-left: px2rem(32);
+ padding-right: px2rem(32);
}
.app-width-container--full {
@@ -40,6 +181,27 @@
padding: 0
}
+//
+// Header updates start here
+//
+
+.nhsuk-header {
+ padding: 0 px2rem(32);
+}
+
+.nhsuk-header .nhsuk-width-container.app-width-container {
+ max-width: px2rem(1144);
+ margin: 0 auto;
+}
+
+.nhsuk-header .nhsuk-header__container::after {
+ content: none;
+}
+
+.nhsuk-header__navigation.app-width-container {
+ max-width: px2rem(1144);
+}
+
.nhsuk-header__container.app-width-container {
display: flex;
justify-content: space-between;
@@ -58,8 +220,8 @@
flex: 1 0 0;
}
-.nhsuk-header__logo .nhsuk-header__link--service {
- display:inline-flex;
+.nhsuk-header__logo .nhsuk-header__link--service {
+ display: inline-flex;
}
.nhsuk-header__service-name {
@@ -90,7 +252,7 @@
height: px2rem(18);
text-align: center;
border-radius: px2rem(9);
- padding:px2rem(1) px2rem(3) 0;
+ padding: px2rem(1) px2rem(3) 0;
}
.nhsuk-header__menu {
@@ -107,6 +269,47 @@
color: #fff;
}
+#header-dropdown-menu-control {
+ opacity: 0;
+ position: absolute;
+}
+
+#header-dropdown-menu-control:checked ~ .nhsuk-header__navigation:not(.js-show) {
+ display: block
+}
+
+#header-mobile-search-control {
+ display: none;
+}
+
+.nhsuk-header__break {
+ display: none;
+}
+
+.nhsuk-header__mobile-only-nav {
+ display: none;
+}
+
+.nhsuk-header__mobile-break {
+ display: none;
+}
+
+.nhsuk-header__navigation-item--current {
+ a {
+ font-weight: bold;
+ }
+}
+
+.nhsuk-width-container.app-width-container.beta-banner {
+ padding: px2rem(8) px2rem(32);
+ max-width: px2rem(1208);
+ margin: 0 auto;
+}
+
+//
+// Beta banner updates
+//
+
.beta-banner {
background-color: $color_nhsuk-grey-5;
color: $nhsuk-text-color;
@@ -118,7 +321,7 @@
}
.beta-banner + div {
- border-top:1px solid $color_nhsuk-grey-3;
+ border-top: 1px solid $color_nhsuk-grey-3;
}
.beta-banner__beta-box {
@@ -137,48 +340,28 @@
font-size: px2rem(16);
}
+//
+// Footer updates
+//
+
.nhsuk-footer {
padding: px2rem(48) 0;
}
-
-#header-dropdown-menu-control {
- opacity: 0;
- position: absolute;
-}
-
-#header-dropdown-menu-control:checked ~ .nhsuk-header__navigation:not(.js-show) {
- display: block
-}
-
-#header-mobile-search-control {
- display: none;
-}
-
-.nhsuk-header__break {
- display: none;
-}
-
-.nhsuk-header__mobile-only-nav {
- display: none;
-}
-
-.nhsuk-header__mobile-break {
- display: none;
-}
-
-.nhsuk-header__navigation-item--current {
- a {
- font-weight: bold;
- }
-}
.nhsuk-footer__copyright {
float: left;
text-align: left;
}
+
+//
+// Responsive updates
+//
+
/* large desktop */
@media (min-width: px2rem(990)) {
+ // entirely headers
+
.nhsuk-header__navigation-item--current a {
border-bottom: 4px solid $nhsuk-grey-lighter;
font-weight: normal;
@@ -196,6 +379,8 @@
/* small desktop */
@media (max-width: px2rem(989)) {
+ // entirely headers
+
.nhsuk-header__container {
flex-wrap: wrap;
}
@@ -261,7 +446,7 @@
text-align: center;
margin: 0;
right: 0;
- font-weight:600;
+ font-weight: 600;
}
.nhsuk-header__search-form {
@@ -286,7 +471,7 @@
background: $nhsuk-error-color;
color: $nhsuk-white;
min-width: px2rem(18);
- width:fit-content;
+ width: fit-content;
height: px2rem(18);
text-align: center;
border-radius: px2rem(9);
@@ -326,12 +511,14 @@
/* mobile */
@media (max-width: px2rem(640)) {
+ //entirely headers
+
.nhsuk-header__not-mobile {
display: none;
}
.nhsuk-header__logo {
- max-width:none;
+ max-width: none;
}
.nhsuk-header__mobile-only-nav {
@@ -391,7 +578,7 @@
}
.nhsuk-header__search .nhsuk-search__submit {
- padding-top:nhsuk-spacing(1);
+ padding-top: nhsuk-spacing(1);
}
.nhsuk-header__menu {
@@ -419,4 +606,4 @@
.nhsuk-width-container.nhsuk-header__container.app-width-container {
padding-bottom: 0;
}
-}
\ No newline at end of file
+}
diff --git a/Auth/LearningHub.Nhs.Auth/Views/Shared/LearningHub/_Layout.cshtml b/Auth/LearningHub.Nhs.Auth/Views/Shared/LearningHub/_Layout.cshtml
index 880d880..ce37bda 100644
--- a/Auth/LearningHub.Nhs.Auth/Views/Shared/LearningHub/_Layout.cshtml
+++ b/Auth/LearningHub.Nhs.Auth/Views/Shared/LearningHub/_Layout.cshtml
@@ -20,7 +20,7 @@
-
+
diff --git a/Auth/LearningHub.Nhs.Auth/Views/Shared/_SsoLayout.cshtml b/Auth/LearningHub.Nhs.Auth/Views/Shared/_SsoLayout.cshtml
index 513a6fd..559ee2a 100644
--- a/Auth/LearningHub.Nhs.Auth/Views/Shared/_SsoLayout.cshtml
+++ b/Auth/LearningHub.Nhs.Auth/Views/Shared/_SsoLayout.cshtml
@@ -14,7 +14,7 @@
@ViewData["Title"] - Learning Hub Authentication
-
+