Now that we are making good use of the GOV.UK and CCS Helpers, I’ve c…

…leaned up our assets so that we really only have what we need.

Where possible, I’ve put the SCSS in components so things are grouped together and easier to manage.

I’ve also sorted out the imports of fonts/images as the path in the assets pipeline was not right.

app/assets/stylesheets/ccs/_ccs.scss

@@ -0,0 +1,59 @@
+.error-box {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.error-content {
+  flex: 1 0 auto;
+}
+
+.button_as_link {
+  font-size: 1em;
+  border: 0;
+  text-decoration: underline;
+  color: $govuk-link-colour;
+  background-color: inherit;
+  padding: 0;
+  margin: 0;
+
+  &:link {
+    color: $govuk-link-colour;
+  }
+
+  &:visited {
+    color: $govuk-link-visited-colour;
+  }
+
+  &:hover:not(:focus),
+  &:active:not(:focus) {
+    color: $govuk-link-hover-colour;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.supplier-rates-td {
+  border: none !important;
+}
+
+.govuk-brand-light-grey-benchmark {
+  color: #6f777b !important;
+}
+
+%govuk-section-break--s {
+  @include govuk-responsive-margin(2, "top");
+  @include govuk-responsive-margin(2, "bottom");
+}
+
+.govuk-section-break--s {
+  @extend %govuk-section-break--s;
+}
+
+.ccs-no-underline,
+.govuk-warning-text abbr,
+abbr {
+  text-decoration: none;
+}

app/assets/stylesheets/components/_all.scss

@@ -1,17 +1,17 @@
-/* Import from Govuk frontend, refer to govuk-frontend/govuk/components/_all.scss */
-@import "govuk-frontend/govuk/components/all";
-
-/* Override with my own components */
+// /* Override GOV.UK/add our CCS components */
+@import "basket/basket";
+@import "checkbox-accordion/checkbox-accordion";
+@import "dashboard-section/dashboard-section";
 @import "header/header";
 @import "footer/footer";
-@import "details/details";
-@import "documents/documents";
-@import "inset-text/inset-text";
-@import "label/label";
+@import "info-panel/info-panel";
 @import "logo/logo";
 @import "notification-banner/notification-banner";
+@import "panel/panel";
+@import "password-rules/password-rules";
+@import "progress-bar/progress-bar";
+@import "service-specification/service-specification";
+@import "step-by-step-nav/step-by-step-nav";
+@import "summary-box/summary-box";
+@import "supplier-lot-data/supplier-lot-data";
 @import "supplier-record/supplier-record";
-@import "typography/typography";
-/* CCS override and bespoke styles; re-used globally across all modules */
-@import "ccs-global/ccs-global";
-@import "step-by-step-nav/all";

app/assets/stylesheets/components/basket/_basket.scss

@@ -0,0 +1,83 @@
+#css-list-basket {
+  display: none;
+
+  .govuk-heading-m {
+    margin-left: govuk-spacing(2);
+    margin-bottom: 0;
+  }
+
+  #removeAll {
+    margin: govuk-spacing(2) 0 govuk-spacing(3) govuk-spacing(2);
+    display: inline-block;
+  }
+
+  & > .govuk-button {
+    width: 100%;
+  }
+
+  & > div {
+    background-color: ccs-colour("light-grey");
+    padding: govuk-spacing(3);
+  }
+
+  ul.govuk-list {
+    margin: 0;
+
+    li {
+      @include govuk-clearfix;
+
+      background-color: govuk-colour("white");
+      margin-bottom: 0;
+      padding: govuk-spacing(2) govuk-spacing(2);
+      border-top: 1px solid ccs-colour("mid-grey");
+
+      &:first-child {
+        border-top: none;
+      }
+
+      span {
+        text-align: left;
+        font-size: 1rem;
+        top: 0;
+        top: 0;
+        float: left;
+        padding-top: 2px;
+        width: 66%;
+      }
+
+      a {
+        width: 33%;
+        text-align: right;
+        font-size: 14px;
+        font-size: 0.9rem;
+        position: relative;
+        top: -2px;
+        display: inline-block;
+      }
+    }
+
+    li:first-child {
+      border-bottom: none;
+    }
+
+    @media (max-width: 768px) {
+      li {
+        span,
+        a {
+          width: 100% !important;
+          text-align: left !important;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 641px) {
+    & > .govuk-button {
+      display: inline-block;
+    }
+  }
+}
+
+body.js-enabled #css-list-basket {
+  display: block;
+}