Skip to content

Commit

Permalink
Combine service and transactionalService header options and remove he…
Browse files Browse the repository at this point in the history
…ader layout switches
  • Loading branch information
paulrobertlloyd committed Aug 23, 2024
1 parent 2e93f62 commit ce2ca3f
Show file tree
Hide file tree
Showing 12 changed files with 235 additions and 576 deletions.
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{% set html_style = 'background-color: #f0f4f5;' %}
{% set title = 'Header transactional with service name' %}
{% set title = 'Header transactional with a long service name' %}
{% from 'components/header/macro.njk' import header %}
{% extends 'layout.njk' %}

{% block body %}

{{ header({
"transactionalService": {
"name": "Find your NHS number"
"service": {
"name": "Find your really long service name in England"
},
"showNav": "false",
"showSearch": "false"
Expand Down
2 changes: 1 addition & 1 deletion app/components/header/header-service-name-with-nav.njk
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

{{ header({
"service": {
"name": "Digital service manual"
"name": "Find your really long service name in England"
},
"showNav": "true",
"showSearch": "true",
Expand Down
2 changes: 1 addition & 1 deletion app/pages/examples.njk
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,8 @@
<li><a href="../components/header/header-search.html">Header with search</a></li>
<li><a href="../components/header/header-logo.html">Header with logo only</a></li>
<li><a href="../components/header/header-service-name.html">Header with a service name</a></li>
<li><a href="../components/header/header-service-name-long.html">Header with a long service name</a></li>
<li><a href="../components/header/header-service-name-with-nav.html">Header with a service name, search and navigation</a></li>
<li><a href="../components/header/header-transactional-service-name.html">Header transactional with service name</a></li>
<li><a href="../components/header/header-org.html">Header organisational</a></li>
<li><a href="../components/header/header-org-white.html">Header organisational with white header</a></li>
<li><a href="../components/header/header-org-white-nav.html">Header organisational with white header and navigation</a></li>
Expand Down
189 changes: 89 additions & 100 deletions packages/components/header/README.md

Large diffs are not rendered by default.

44 changes: 6 additions & 38 deletions packages/components/header/_header-organisation.scss
Original file line number Diff line number Diff line change
@@ -1,45 +1,15 @@
/**
* These are the styles for the organisation header variants.
*/
* Organisation header variant.
*/

.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__link:hover {
box-shadow: none;
}

.nhsuk-header__logo .nhsuk-logo {
.nhsuk-logo {
@include nhsuk-logo-size-small;
display: inline-block;

@media (max-width: 450px) {
height: nhsuk-spacing(4);
Expand All @@ -58,7 +28,6 @@
}

.nhsuk-organisation-name {
color: $color_nhsuk-white;
display: block;
font-size: 22px;
font-weight: bold;
Expand Down Expand Up @@ -87,7 +56,6 @@
}

.nhsuk-organisation-descriptor {
color: $color_nhsuk-white;
display: block;
font-size: 15px;
font-weight: bold;
Expand Down
59 changes: 0 additions & 59 deletions packages/components/header/_header-service.scss

This file was deleted.

61 changes: 0 additions & 61 deletions packages/components/header/_header-transactional.scss

This file was deleted.

81 changes: 32 additions & 49 deletions packages/components/header/_header-white.scss
Original file line number Diff line number Diff line change
@@ -1,45 +1,49 @@
/**
* These are the styles for the white header variants.
*/
* White header variant.
*/

.nhsuk-header--white {
background-color: $color_nhsuk-white;

.nhsuk-header__search-wrap {
margin-bottom: nhsuk-spacing(3);
.nhsuk-header__link {
@include nhsuk-link-style-no-visited-state;

@include mq($until: tablet) {
&::after {
background: $color_nhsuk-white;
&:focus {
.nhsuk-logo,
.nhsuk-organisation-descriptor {
color: inherit;
}
}
}

.nhsuk-navigation-container {
background-color: $color_nhsuk-blue;
}
&:hover {
color: $nhsuk-text-color;

.nhsuk-logo {
.nhsuk-logo__background {
fill: $color_nhsuk-blue;
.nhsuk-organisation-descriptor {
color: $nhsuk-text-color;
}
}
}

.nhsuk-logo__text {
fill: $color_nhsuk-white;
}
.nhsuk-logo {
color: $color_nhsuk-blue;
}

.nhsuk-header__link {
&:hover {
color: $nhsuk-text-color;
text-decoration: underline;
.nhsuk-organisation-name {
color: $color_nhsuk-black;
}

.nhsuk-organisation-descriptor {
color: $nhsuk-text-color;
.nhsuk-header__search-wrap {
@include mq($until: tablet) {
&::after {
background-color: $color_nhsuk-white;
}
}
}

.nhsuk-navigation-container {
background-color: $color_nhsuk-blue;
}

.nhsuk-search__submit {
background-color: $color_nhsuk-blue;

Expand All @@ -62,49 +66,28 @@
}

.nhsuk-search__input {
border: 1px solid $color_nhsuk-grey-3;
border-color: $color_nhsuk-grey-3;

&:focus {
border: 2px solid $nhsuk-focus-text-color;
border-color: $nhsuk-focus-text-color;

@include mq($until: tablet) {
border: $nhsuk-focus-width solid $nhsuk-focus-text-color;
border-color: $nhsuk-focus-text-color;
}
}
}

.nhsuk-header__search-form {
@include mq($until: tablet) {
padding-top: 0;
}
}

.nhsuk-organisation-name {
color: shade($color_nhsuk-black, 100%);
}

.nhsuk-organisation-descriptor {
color: $color_nhsuk-blue;
}

.nhsuk-header__transactional-service-name--link {
color: $color_nhsuk-black;
}

.nhsuk-header__service-name {
color: $nhsuk-text-color;
}
}

.nhsuk-header--white-nav {
.nhsuk-navigation-container {
background-color: $color_nhsuk-white;
}

.nhsuk-navigation {
background-color: $color_nhsuk-white;

.nhsuk-header__navigation-list {
border-top: 1px solid $color_nhsuk-grey-5;
border-top-color: $color_nhsuk-grey-5;
}

.nhsuk-header__navigation-link {
Expand Down
Loading

0 comments on commit ce2ca3f

Please sign in to comment.