design_system 0.7.0

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/header/_header-base.scss

@@ -0,0 +1,495 @@
+@use "sass:math";
+@use "../../core/objects" as *;
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+////
+/// Header component
+///
+/// The behaviour with regards to responsiveness is as follow:
+///
+/// - Mobile to tablet view
+///   Menu toggle button visible and navigation links hidden, search toggle
+///   button visible and search form hidden
+///
+/// - Tablet to desktop view
+///   Menu toggle button visible and navigation links hidden, search toggle
+///   button hidden and search form visible
+///
+/// - Desktop+ view
+///   Menu toggle button hidden and navigation links visible, search toggle
+///   button hidden and search form visible
+///
+/// @group components
+////
+
+.nhsuk-header {
+  background-color: $color_nhsuk-blue;
+}
+
+.nhsuk-header__container {
+  padding: 20px 0;
+  @include nhsuk-width-container;
+
+  @include nhsuk-media-query($from: tablet) {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.nhsuk-header__logo {
+  @include nhsuk-media-query($until: tablet) {
+    position: relative;
+    z-index: 1;
+  }
+
+  .nhsuk-logo__background {
+    fill: $color_nhsuk-white;
+
+    @include nhsuk-media-query($media-type: print) {
+      fill: $color_nhsuk-blue;
+    }
+  }
+
+  .nhsuk-logo__text {
+    fill: $color_nhsuk-blue;
+
+    @include nhsuk-media-query($media-type: print) {
+      fill: $color_nhsuk-white;
+    }
+  }
+
+  @include nhsuk-media-query($from: tablet) {
+    padding-left: 0;
+  }
+
+  .nhsuk-logo {
+    @include nhsuk-logo-size;
+    border: 0;
+  }
+
+  @include nhsuk-media-query($until: desktop) {
+    max-width: 60%;
+  }
+
+  @media (max-width: 450px) {
+    max-width: 50%;
+  }
+}
+
+.nhsuk-header__link {
+  display: block;
+  @include nhsuk-logo-size;
+  @include nhsuk-link-style-white;
+
+  &:hover {
+    .nhsuk-logo {
+      box-shadow: 0 0 0 $nhsuk-focus-width $color_shade_nhsuk-blue-35;
+    }
+  }
+
+  &:focus {
+    box-shadow: none;
+
+    .nhsuk-logo {
+      box-shadow:
+        0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
+        0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;
+    }
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: transparent;
+  }
+
+  @include nhsuk-media-query($media-type: print) {
+    &::after {
+      content: "";
+    }
+  }
+}
+
+.nhsuk-header__logo--only {
+  max-width: 100%;
+
+  @include nhsuk-media-query($from: tablet) {
+    .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);
+    }
+  }
+}
+
+.nhsuk-header__content {
+  position: relative;
+  @include nhsuk-print-hide;
+
+  &.js-show {
+    border-bottom: nhsuk-spacing(1) solid $color_nhsuk-grey-5;
+  }
+
+  @include nhsuk-media-query($from: tablet) {
+    &.js-show {
+      border-bottom: 0;
+    }
+  }
+}
+
+.nhsuk-header__search {
+  position: relative;
+  text-align: right;
+
+  @include nhsuk-media-query($from: tablet) {
+    margin-left: nhsuk-spacing(2);
+  }
+}
+
+.nhsuk-header__search-form {
+  display: flex;
+  height: 100%;
+  overflow: visible;
+
+  @include nhsuk-media-query($until: tablet) {
+    margin: nhsuk-spacing(3) 0 0;
+    position: relative;
+    width: 100%;
+  }
+}
+
+.nhsuk-header__search-wrap {
+  @include nhsuk-media-query($from: tablet) {
+    display: block;
+  }
+}
+
+.nhsuk-search__input {
+  -webkit-appearance: listbox;
+  border-bottom-left-radius: $nhsuk-border-radius;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: $nhsuk-border-radius;
+  border-top-right-radius: 0;
+  padding: 0 16px;
+
+  &:focus {
+    border: nhsuk-spacing(1) solid $nhsuk-focus-text-color;
+    box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-color;
+    outline: $nhsuk-focus-width solid transparent;
+    outline-offset: $nhsuk-focus-width;
+    padding: 0 13px;
+  }
+
+  &::placeholder {
+    color: $color_nhsuk-grey-1;
+    font-size: $nhsuk-base-font-size;
+    opacity: 1; // fixes low contrast of placeholder text in firefox
+  }
+
+  &:-ms-input-placeholder {
+    color: $color_nhsuk-grey-1;
+    font-size: $nhsuk-base-font-size;
+  }
+
+  &::-webkit-input-placeholder {
+    color: $color_nhsuk-grey-1;
+    font-size: $nhsuk-base-font-size;
+  }
+
+  // Hide search input clear button (IE)
+  &::-ms-clear {
+    display: none;
+  }
+
+  // Hide search input icon and cancel button (WebKit, Blink)
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  @include nhsuk-media-query($until: tablet) {
+    border: 1px solid $color_nhsuk-white;
+    border-bottom-right-radius: $nhsuk-border-radius;
+    border-top-right-radius: $nhsuk-border-radius;
+    flex-grow: 2;
+    -ms-flex-positive: 2;
+    font-size: inherit;
+    height: 40px;
+    margin: 0;
+    outline: none;
+    width: 100%;
+    z-index: 1;
+  }
+
+  @include nhsuk-media-query($from: tablet) {
+    border: 1px solid $color_nhsuk-white;
+    font-size: $nhsuk-base-font-size;
+    height: nhsuk-spacing(6);
+    width: 200px;
+
+    &:focus {
+      z-index: 10;
+    }
+  }
+
+  @include nhsuk-media-query($from: desktop) {
+    width: 235px;
+  }
+}
+
+.nhsuk-search__submit {
+  border: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: $nhsuk-border-radius;
+  border-top-left-radius: 0;
+  border-top-right-radius: $nhsuk-border-radius;
+  background-color: $color_nhsuk-grey-5;
+  width: 44px;
+  height: 40px;
+  font-size: inherit;
+  line-height: 1;
+  outline: none;
+  padding-top: 6px;
+  cursor: pointer;
+  z-index: 9;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &:hover,
+  &:active {
+    background-color: $color_shade_nhsuk-blue-35;
+    box-shadow: inset 0 0 0 1px $color_nhsuk-white;
+    color: $color_nhsuk-white;
+
+    .nhsuk-icon {
+      fill: $color_nhsuk-white;
+    }
+  }
+
+  &:active {
+    background-color: $color_shade_nhsuk-blue-50;
+  }
+
+  &:focus:not(:active) {
+    @include nhsuk-focused-button;
+  }
+
+  .nhsuk-icon__search {
+    fill: $color_nhsuk-blue;
+    height: 27px;
+    width: 27px;
+  }
+
+  @include nhsuk-media-query($until: tablet) {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+.nhsuk-header__navigation-link {
+  border-bottom: nhsuk-spacing(1) solid transparent;
+  border-top: nhsuk-spacing(1) solid transparent;
+  color: $color_nhsuk-white;
+  display: block;
+  padding: nhsuk-spacing(3) 2px;
+  text-decoration: underline;
+  white-space: nowrap;
+  @include nhsuk-font(16);
+  @include nhsuk-link-style-white;
+
+  @include nhsuk-media-query($until: tablet) {
+    font-size: inherit;
+  }
+
+  @include nhsuk-media-query($from: tablet) {
+    padding: 12px 2px;
+  }
+
+  .nhsuk-icon__chevron-right {
+    fill: $color_nhsuk-grey-3;
+    position: absolute;
+    right: nhsuk-spacing(1);
+    top: 11px;
+  }
+
+  &:focus,
+  &:focus:visited {
+    border-bottom: $nhsuk-focus-width solid $nhsuk-focus-text-color;
+    box-shadow: none;
+  }
+}
+
+// menu toggle button, only shows when screen can't fit all nav items
+.nhsuk-header__menu-toggle {
+  background: transparent;
+  border: 0;
+  border-bottom: nhsuk-spacing(1) solid transparent;
+  border-radius: 0;
+  border-top: nhsuk-spacing(1) solid transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+  margin: 0;
+  overflow: visible;
+  position: relative;
+  right: 0;
+  text-align: center;
+  text-decoration: underline;
+  vertical-align: top;
+  visibility: hidden;
+  width: auto;
+  z-index: 1;
+
+  &.nhsuk-header__navigation-link {
+    padding-right: 23px;
+  }
+
+  .nhsuk-icon__chevron-down {
+    right: -3px;
+  }
+}
+
+.nhsuk-header__menu-toggle--visible {
+  visibility: visible;
+  display: block;
+}
+
+.nhsuk-icon__chevron-down {
+  .nhsuk-header__menu-toggle[aria-expanded="true"] & {
+    transform: rotate(270deg);
+  }
+}
+
+.nhsuk-navigation {
+  @include nhsuk-width-container;
+
+  @include nhsuk-media-query($until: tablet) {
+    position: relative;
+    z-index: 10;
+  }
+
+  @include nhsuk-media-query($from: tablet) {
+    border-top: 1px solid $color_transparent_nhsuk-white-20;
+  }
+}
+
+%nhsuk-navigation-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+// ul of visible nav
+.nhsuk-header__navigation-list {
+  @extend %nhsuk-navigation-list;
+  display: flex;
+  flex-wrap: wrap;
+  width: calc(100% + $nhsuk-gutter-half);
+  margin: 0 math.div($nhsuk-gutter-half, 2) * -1;
+
+  @include nhsuk-media-query($from: tablet) {
+    width: calc(100% + $nhsuk-gutter);
+    margin: 0 math.div($nhsuk-gutter, 2) * -1;
+  }
+
+  @include nhsuk-media-query($from: desktop) {
+    justify-content: space-between;
+  }
+
+  .js-enabled & {
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
+}
+
+.nhsuk-header__navigation-list--left-aligned {
+  @include nhsuk-media-query($from: desktop) {
+    justify-content: initial;
+  }
+}
+
+.nhsuk-header__navigation-item {
+  margin-bottom: 0;
+  padding: 0 math.div($nhsuk-gutter-half, 2);
+
+  @include nhsuk-media-query($from: tablet) {
+    padding: 0 $nhsuk-gutter-half;
+  }
+}
+
+.nhsuk-navigation-container {
+  position: relative;
+  @include nhsuk-print-hide;
+
+  @include nhsuk-media-query($until: tablet) {
+    margin-top: -20px;
+  }
+}
+
+// ul of hidden nav
+.nhsuk-header__drop-down {
+  @extend %nhsuk-navigation-list;
+  background-color: $color_nhsuk-white;
+  border-bottom: nhsuk-spacing(1) solid $color_nhsuk-grey-5;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  left: 0;
+  @include nhsuk-print-hide;
+
+  @include nhsuk-media-query($until: tablet) {
+    margin: 0 $nhsuk-gutter-half * -1;
+  }
+
+  .nhsuk-header__navigation-link {
+    margin: 0;
+    padding: 12px 0;
+    @include nhsuk-width-container;
+    @include nhsuk-link-style-default;
+    @include nhsuk-link-style-no-visited-state;
+
+    &:focus,
+    &:focus:visited {
+      box-shadow: none;
+    }
+  }
+
+  .nhsuk-header__navigation-item {
+    padding: 0;
+    border-top: 1px solid $color_nhsuk-grey-5;
+  }
+}
+
+.nhsuk-header__drop-down--hidden {
+  display: none;
+}
+
+.nhsuk-mobile-menu-container {
+  align-self: center;
+  display: none;
+  padding: 0 math.div($nhsuk-gutter-half, 2);
+
+  @include nhsuk-media-query($from: desktop) {
+    padding: 0 $nhsuk-gutter-half;
+  }
+}
+
+.nhsuk-mobile-menu-container--visible {
+  display: block;
+}
+
+.nhsuk-header__navigation-item--home {
+  @include nhsuk-media-query($from: desktop) {
+    display: none;
+  }
+}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/header/_header-organisation.scss

@@ -0,0 +1,126 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+/// These are the styles for the organisation header variants.
+
+.nhsuk-header--organisation {
+  .nhsuk-header__link {
+    height: auto;
+    text-decoration: none;
+    width: auto;
+
+    &:hover {
+      color: $color_nhsuk-white;
+      text-decoration: underline;
+
+      .nhsuk-logo {
+        box-shadow: none;
+      }
+    }
+
+    &:focus {
+      background: $nhsuk-focus-color;
+      box-shadow:
+        0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
+        0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;
+
+      .nhsuk-organisation-name,
+      .nhsuk-organisation-descriptor {
+        color: $nhsuk-focus-text-color;
+      }
+
+      .nhsuk-logo {
+        box-shadow: none;
+      }
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .nhsuk-header__logo .nhsuk-logo {
+    @include nhsuk-logo-size-small;
+
+    @media (max-width: 450px) {
+      height: nhsuk-spacing(4);
+      width: 60px;
+    }
+
+    @media (max-width: 375px) {
+      height: 20px;
+      width: 50px;
+    }
+  }
+
+  .nhsuk-header__navigation {
+    max-width: 100%;
+  }
+}
+
+.nhsuk-organisation-name {
+  color: $color_nhsuk-white;
+  display: block;
+  font-size: 22px;
+  font-weight: $nhsuk-font-bold;
+  letter-spacing: 0.2px;
+  line-height: 23px;
+  margin-top: -2px;
+
+  @include nhsuk-media-query($media-type: print) {
+    color: $nhsuk-print-text-color;
+  }
+
+  @media (max-width: 450px) {
+    font-size: 17px;
+    letter-spacing: 0.1px;
+    line-height: 17px;
+  }
+
+  @media (max-width: 375px) {
+    font-size: 13px;
+    line-height: 13px;
+  }
+
+  .nhsuk-organisation-name-split {
+    display: block;
+  }
+}
+
+.nhsuk-organisation-descriptor {
+  color: $color_nhsuk-white;
+  display: block;
+  font-size: 15px;
+  font-weight: $nhsuk-font-bold;
+  line-height: 21px;
+
+  @include nhsuk-media-query($media-type: print) {
+    color: $color_nhsuk-blue;
+  }
+
+  @media (max-width: 450px) {
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  @media (max-width: 375px) {
+    font-size: 10px;
+    line-height: 13px;
+  }
+}
+
+.nhsuk-organisation-logo {
+  border: 0;
+  max-height: 100px;
+  max-width: 280px;
+
+  @media (max-width: 450px) {
+    max-width: 150px;
+  }
+}
+
+.nhsuk-organisation-logo[src$=".svg"] {
+  height: auto;
+  max-width: 220px;
+  width: 100%;
+}

data/app/assets/stylesheets/design_system/nhsuk-frontend-9.6.4/components/header/_header-service.scss

@@ -0,0 +1,60 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+
+/// These are the styles for the service header variants.
+
+.nhsuk-header__link--service {
+  height: auto;
+  margin-bottom: -(nhsuk-spacing(1));
+  text-decoration: none;
+  width: auto;
+
+  @include nhsuk-media-query($from: large-desktop) {
+    align-items: center;
+    display: flex;
+    -ms-flex-align: center;
+    margin-bottom: 0;
+    width: auto;
+  }
+
+  &:hover {
+    background: none;
+
+    .nhsuk-header__service-name {
+      text-decoration: underline;
+    }
+  }
+
+  &:focus {
+    background: $nhsuk-focus-color;
+    box-shadow:
+      0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
+      0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;
+
+    .nhsuk-header__service-name {
+      color: $nhsuk-focus-text-color;
+      text-decoration: none;
+    }
+
+    .nhsuk-logo {
+      box-shadow: none;
+    }
+  }
+}
+
+.nhsuk-header__service-name {
+  color: $color_nhsuk-white;
+  display: block;
+  padding-left: 0;
+  padding-right: 0;
+
+  @include nhsuk-font(19);
+
+  @include nhsuk-media-query($from: large-desktop) {
+    padding-left: nhsuk-spacing(3);
+  }
+
+  @include nhsuk-media-query($until: large-desktop) {
+    max-width: 220px;
+  }
+}