From 9afc77862c36fcdf081bcb0f86a0ee9ea42b4a86 Mon Sep 17 00:00:00 2001
From: Toby Retallick <toby.retallick@gmail.com>
Date: Mon, 7 Oct 2024 20:42:29 +0100
Subject: [PATCH] style: add X-Gov CSS for sub navigation

---
 app/assets/stylesheets/admin.scss       | 120 ++++++++++++++++++++++++
 app/assets/stylesheets/application.scss |   3 +
 2 files changed, 123 insertions(+)
 create mode 100644 app/assets/stylesheets/admin.scss

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
new file mode 100644
index 00000000..5277ecdb
--- /dev/null
+++ b/app/assets/stylesheets/admin.scss
@@ -0,0 +1,120 @@
+// primary navigation
+//
+// borrowed from x-govuk/govuk-prototype-components
+// https://github.com/x-govuk/govuk-prototype-components/blob/main/x-govuk/components/primary-navigation/_primary-navigation.scss
+.x-govuk-primary-navigation {
+  @include govuk-font(19, $weight: bold);
+  background-color: govuk-colour("light-grey");
+  border-bottom: 1px solid transparent;
+  margin-bottom: -1px;
+  padding-inline: .5em;
+}
+
+.x-govuk-primary-navigation__list {
+  @include govuk-clearfix;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  width: calc(100% + #{govuk-spacing(6)});
+}
+
+.x-govuk-primary-navigation__item {
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  height: 55px;
+  line-height: 55px;
+  margin-right: govuk-spacing(6);
+  position: relative;
+}
+
+.x-govuk-primary-navigation__item--current {
+  border-bottom: $govuk-border-width-narrow solid $govuk-brand-colour;
+}
+
+.x-govuk-primary-navigation__item--align-right {
+  @include govuk-media-query($from: tablet) {
+    float: right;
+  }
+}
+
+.x-govuk-primary-navigation__link {
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
+  @include govuk-link-style-no-underline;
+  @include govuk-typography-weight-bold;
+
+  // Extend the touch area of the link to the list
+  &::after {
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+// sub navigation
+//
+// borrowed from x-govuk/govuk-prototype-components
+// https://github.com/x-govuk/govuk-prototype-components/blob/main/x-govuk/components/sub-navigation/_sub-navigation.scss
+.x-govuk-sub-navigation {
+  @include govuk-font(16);
+}
+
+.x-govuk-sub-navigation__section {
+  list-style-type: none;
+  margin: 0 0 govuk-spacing(4);
+  padding: 0;
+}
+
+.x-govuk-sub-navigation__link {
+  @include govuk-link-common;
+  @include govuk-link-style-no-visited-state;
+  @include govuk-link-style-no-underline;
+  padding-bottom: govuk-spacing(1);
+  padding-top: govuk-spacing(1);
+
+  &:not(:focus):hover {
+    color: $govuk-link-colour;
+  }
+}
+
+.x-govuk-sub-navigation__section-item {
+  margin-bottom: govuk-spacing(1);
+  padding-bottom: govuk-spacing(1);
+  padding-top: govuk-spacing(1);
+}
+
+.x-govuk-sub-navigation__section-item--current {
+  $_current-indicator-width: 4px;
+  background-color: govuk-colour("white");
+  border-left: $_current-indicator-width solid $govuk-brand-colour;
+  margin-left: -(govuk-spacing(2) + $_current-indicator-width);
+  padding-left: govuk-spacing(2);
+}
+
+.x-govuk-sub-navigation__link[aria-current] {
+  font-weight: bold;
+}
+
+.x-govuk-sub-navigation__section--nested {
+  margin-bottom: 0;
+  margin-top: govuk-spacing(2);
+  padding-left: govuk-spacing(4);
+}
+
+.x-govuk-sub-navigation__section--nested .x-govuk-sub-navigation__section-item::before {
+  color: govuk-colour("dark-grey");
+  content: "—";
+  margin-left: -(govuk-spacing(4));
+}
+
+.x-govuk-sub-navigation__theme {
+  @include govuk-font(19);
+  color: govuk-colour("dark-grey");
+  margin: 0;
+  padding: govuk-spacing(2) govuk-spacing(3) govuk-spacing(2) 0;
+}
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 5370e878..a67aeb77 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -10,3 +10,6 @@ $govuk-assets-path: "/";
 
 // library styles
 @import "accessible-autocomplete/src/autocomplete";
+
+// X-Govuk Prototype
+@import "admin";