Merge pull request #3287 from TechnologyEnhancedLearning/Develop/Fixes/TD-4916-nhsuk-override-consolidation

TD-4916 nhsuk override consolidation

Author: frank-hee

.gitignore

@@ -512,3 +512,5 @@ DigitalLearningSolutions.Web/Views/Shared/Components/SelectList/Default.cshtml
 DigitalLearningSolutions.Web/Views/Shared/Components/SingleCheckbox/Default.cshtml
 DigitalLearningSolutions.Web/Views/Shared/Components/TextArea/Default.cshtml
 DigitalLearningSolutions.Web/Views/Shared/Components/TextInput/Default.cshtml
+/DigitalLearningSolutions.Web/appsettings.Test.json
+/DigitalLearningSolutions.Web/web.config

DigitalLearningSolutions.Web/Styles/index.scss

@@ -62,11 +62,7 @@ ul > li > ul > li {
   padding-top: 0;
 }
 
-.nhsuk-button {
-  @include mq($until: tablet) {
-    margin-top: nhsuk-spacing(3);
-  }
-}
+
 
 input:invalid {
   border: $nhsuk-border-width-form-element-error solid $nhsuk-error-color;
@@ -78,13 +74,7 @@ input[type=file] {
   }
 }
 
-input[type=file].nhsuk-input--error {
-  height: 44px;
 
-  @include govuk-media-query($until: tablet) {
-    height: 40px;
-  }
-}
 
 h1#page-heading {
   margin-bottom: 16px;
@@ -98,9 +88,6 @@ h1#page-heading {
   display: flex;
 }
 
-.nhsuk-main-wrapper {
-  flex: 1;
-}
 
 .responsive-iframe-wrapper {
   height: 100%;
@@ -121,10 +108,6 @@ h1#page-heading {
   padding-bottom: $iframe-padding-bottom * 1.5;
 }
 
-.nhsuk-heading-xl.heading-margin-2 {
-  margin-bottom: nhsuk-spacing(2);
-}
-
 .responsive-iframe {
   width: 100%;
   height: 100%;
@@ -147,25 +130,6 @@ h1#page-heading {
   margin-bottom: 0;
 }
 
-.basic-summary-list__row:last-child .nhsuk-summary-list__key {
-  border: none;
-}
-
-.basic-summary-list__row:last-child .nhsuk-summary-list__value {
-  border: none;
-  margin-bottom: 0;
-}
-
-.nhsuk-summary-list__value {
-  @include govuk-media-query($until: tablet) {
-    word-break: break-word;
-    @include word-break-ie-fix;
-  }
-}
-
-.nhsuk-tag {
-    text-align: center;
-}
 
 .right-align-tag-column {
   padding: 0;
@@ -211,10 +175,6 @@ ul.no-bullets {
   margin-bottom: 0;
 }
 
-.nhsuk-details__text > .nhsuk-button {
-  margin-bottom: 0;
-}
-
 @mixin hidden-submit-ie-fix {
   // IE11 hack
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@@ -335,10 +295,6 @@ ul.no-bullets {
   }
 }
 
-.nhsuk-error-message.error-message--margin-bottom-1 {
-  margin-bottom: nhsuk-spacing(1);
-}
-
 .display-none {
   display: none;
 }

DigitalLearningSolutions.Web/Styles/layout.scss

@@ -14,84 +14,14 @@ body {
 }
 
 #pagewrapper {
-  display: flex;
-  flex-direction: column;
   height: 100%;
   min-height: 100vh;
 }
 
-#maincontentwrapper {
-  flex: 1 0 auto;
-  align-self: center;
-  width: 100%;
-  margin: 0;
-}
-
 footer {
   flex-shrink: 0;
 }
 
-.nhsuk-header__navigation-item.selected {
-  a {
-    font-weight: bold;
-  }
-}
-
-.nhsuk-header__logo {
-  @include mq($until: large-desktop) {
-    max-width: unset;
-
-    .nhsuk-header__link--service {
-      align-items: center;
-      display: flex;
-      -ms-flex-align: center;
-      margin-bottom: 0;
-      width: auto;
-    }
-
-    .nhsuk-header__service-name {
-      padding-left: nhsuk-spacing(3);
-      max-width: unset;
-    }
-  }
-}
-.nhsuk-navigation-container {
-  @include mq($until: tablet) {
-    margin-top: unset;
-  }
-}
-
-body:not(.js-enabled) {
-  .nhsuk-header__menu {
-    display: none;
-  }
-
-  #close-menu {
-    display: none;
-  }
-
-  .nhsuk-header__navigation {
-    display: block;
-  }
-}
-
-:not(.nhsuk-header--transactional) div.nhsuk-header__container {
-  @media (max-width: 40.0525em) {
-    margin: 0;
-  }
-}
-
-.nhsuk-header--transactional {
-  .nhsuk-header__link--service {
-    width: auto;
-    height: auto;
-
-    @include mq($from: large-desktop) {
-      display: flex;
-    }
-  }
-}
-
 .centre-brand-logo {
   float: right;
   max-width: 280px;
@@ -102,14 +32,6 @@ body:not(.js-enabled) {
   }
 }
 
-nav .nhsuk-width-container {
-  margin: 0 auto;
-}
-
-nav, .nhsuk-header__navigation, #header-navigation {
-  border-bottom: 0;
-}
-
 .visual-separator {
   height: 8px;
   width: 100%;
@@ -307,19 +229,7 @@ nav, .nhsuk-header__navigation, #header-navigation {
   clip: auto;
 }
 
-.nhsuk-button--danger {
-  background-color: $color_nhsuk-red;
-  box-shadow: 0 4px 0 shade($color_nhsuk-red, 50%);
-  margin-bottom: 16px !important;
 
-  &:hover {
-    background-color: shade($color_nhsuk-red, 20%);
-  }
-
-  &:active {
-    background-color: shade($color_nhsuk-red, 50%);
-  }
-}
 
 .first-row td {
   border-top: 2px solid #d8dde0;
@@ -330,12 +240,6 @@ nav, .nhsuk-header__navigation, #header-navigation {
   white-space: nowrap;
 }
 
-.nhsuk-header__link--service {
-  @include mq($from: large-desktop) {
-    align-items: unset;
-  }
-}
-
 .header-beta {
   color: #c8e4ff;
   font-family: FrutigerLTW01-55Roman, Arial, sans-serif;
@@ -347,15 +251,8 @@ nav, .nhsuk-header__navigation, #header-navigation {
   }
 }
 
-.nhsuk-width-container, .nhsuk-header__navigation-list {
-  max-width: 1144px !important;
-  padding-left: $nhsuk-gutter !important;
-  padding-right: $nhsuk-gutter !important;
-}
 
-.nhsuk-width-container {
-  margin: auto !important;
-}
+
 
 @media only screen and (max-width: 767px) {
   .section-card-result {

DigitalLearningSolutions.Web/Styles/nhsuk.scss

@@ -7,3 +7,143 @@
 .nhsuk-hint {
   white-space: initial;
 }
+
+
+@mixin word-break-ie-fix {
+  // IE11 hack
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    word-break: break-all;
+  }
+}
+
+/* Items below moved from layout.scss or index.scss and deemed to be part of NHSE frontend */
+
+body:not(.js-enabled) {
+  .nhsuk-header__menu {
+    display: none;
+  }
+
+  #close-menu {
+    display: none;
+  }
+
+  .nhsuk-header__navigation {
+    display: block;
+  }
+}
+
+/* nhsuk-header__navigation-item paired with menu li items that become bold when you're on that page */
+/* <li class="nhsuk-header__navigation-item @Html.GetSelectedCssClassIfTabSelected(NavMenuTab.Dashboard)"> */
+.nhsuk-header__navigation-item.selected {
+  a {
+    font-weight: bold;
+  }
+}
+
+/* stops blue menu overlapping white header, noticable because it's white, not as noticable in blue headers */
+.nhsuk-header--white .nhsuk-navigation-container {
+  @include mq($until: tablet) {
+    margin-top: unset;
+  }
+}
+
+/* .nhsuk-header--transactional brought from live design-system, not in current implentation */
+.nhsuk-header--transactional {
+  .nhsuk-header__container {
+    justify-content: normal;
+  }
+
+  .nhsuk-header__link {
+    display: block;
+    height: 32px;
+    width: 80px
+  }
+
+  .nhsuk-logo {
+    height: 32px;
+    width: 80px
+  }
+}
+
+.nhsuk-main-wrapper {
+  flex: 1;
+}
+
+.feedback-bar .nhsuk-width-container {
+  margin-bottom: 0;
+}
+
+nav, .nhsuk-header__navigation, #header-navigation {
+  border-bottom: 0;
+}
+
+.nhsuk-heading-xl.heading-margin-2 {
+  margin-bottom: nhsuk-spacing(2);
+}
+
+.nhsuk-button {
+  @include mq($until: tablet) {
+    margin-top: nhsuk-spacing(3);
+  }
+}
+
+.nhsuk-button--danger {
+  background-color: $color_nhsuk-red;
+  box-shadow: 0 4px 0 shade($color_nhsuk-red, 50%);
+  margin-bottom: 16px !important;
+
+  &:hover {
+    background-color: shade($color_nhsuk-red, 20%);
+  }
+
+  &:active {
+    background-color: shade($color_nhsuk-red, 50%);
+  }
+}
+
+.nhsuk-details__text > .nhsuk-button {
+  margin-bottom: 0;
+}
+
+input[type=file].nhsuk-input--error {
+  height: 44px;
+
+  @include govuk-media-query($until: tablet) {
+    height: 40px;
+  }
+}
+
+.nhsuk-error-message.error-message--margin-bottom-1 {
+  margin-bottom: nhsuk-spacing(1);
+}
+
+.basic-summary-list__row:last-child .nhsuk-summary-list__key {
+  border: none;
+}
+
+.basic-summary-list__row:last-child .nhsuk-summary-list__value {
+  border: none;
+  margin-bottom: 0;
+}
+
+.nhsuk-summary-list__value {
+  @include govuk-media-query($until: tablet) {
+    word-break: break-word;
+    @include word-break-ie-fix;
+  }
+}
+
+.nhsuk-tag {
+  text-align: center;
+}
+
+
+
+/*
+    styles/index.scss has the following nhsuk dependancies - FGC 2/6/25
+    .nhsuk-u-font-weight-normal;
+    .nhsuk-u-font-weight-bold;
+    .nhsuk-u-font-size-16;
+    .nhsuk-u-font-size-19;
+*/
+