design_system 0.11.0 → 0.12.0

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

@@ -1,495 +0,0 @@
-@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

@@ -1,126 +0,0 @@
-@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

@@ -1,60 +0,0 @@
-@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;
-  }
-}