From 5c8cf324b29368edfad2427bde5999e19621144b Mon Sep 17 00:00:00 2001 From: ulysses Date: Tue, 20 Feb 2024 12:55:05 +0000 Subject: [PATCH 1/3] partials relative path not working. --- .../assets/stylesheets/application.scss | 21 +- src/client/assets/stylesheets/daqi/_all.scss | 539 ++++++++++++++++++ .../assets/stylesheets/sass/application.scss | 21 + .../sass/components/_aq-levels-table.scss | 115 ++++ .../sass/components/_daqitable.scss | 133 +++++ .../stylesheets/sass/components/_daqitag.scss | 79 +++ .../sass/components/_toggletips.scss | 166 ++++++ .../stylesheets/sass/elements/_colour.scss | 14 + .../stylesheets/sass/elements/_layout.scss | 6 + .../sass/elements/_typography.scss | 5 + .../stylesheets/sass/tools/_mixins.scss | 14 + .../components/aq-levels-table/macro.njk | 3 + .../components/aq-levels-table/template.njk | 41 ++ .../common/components/pollutant/macro.njk | 4 + .../common/components/pollutant/template.njk | 18 + .../common/components/toggletip/macro.njk | 3 + .../common/components/toggletip/template.njk | 15 + src/server/common/templates/layouts/page.njk | 6 + .../partials}/daqi-index.njk | 0 .../includes => templates/partials}/daqi.njk | 0 .../partials}/monitoring-sites.njk | 0 .../partials}/pollutants.njk | 0 src/server/locations/location.njk | 10 +- 23 files changed, 1198 insertions(+), 15 deletions(-) create mode 100644 src/client/assets/stylesheets/daqi/_all.scss create mode 100644 src/client/assets/stylesheets/sass/application.scss create mode 100644 src/client/assets/stylesheets/sass/components/_aq-levels-table.scss create mode 100644 src/client/assets/stylesheets/sass/components/_daqitable.scss create mode 100644 src/client/assets/stylesheets/sass/components/_daqitag.scss create mode 100644 src/client/assets/stylesheets/sass/components/_toggletips.scss create mode 100644 src/client/assets/stylesheets/sass/elements/_colour.scss create mode 100644 src/client/assets/stylesheets/sass/elements/_layout.scss create mode 100644 src/client/assets/stylesheets/sass/elements/_typography.scss create mode 100644 src/client/assets/stylesheets/sass/tools/_mixins.scss create mode 100644 src/server/common/components/aq-levels-table/macro.njk create mode 100644 src/server/common/components/aq-levels-table/template.njk create mode 100644 src/server/common/components/pollutant/macro.njk create mode 100644 src/server/common/components/pollutant/template.njk create mode 100644 src/server/common/components/toggletip/macro.njk create mode 100644 src/server/common/components/toggletip/template.njk rename src/server/common/{components/includes => templates/partials}/daqi-index.njk (100%) rename src/server/common/{components/includes => templates/partials}/daqi.njk (100%) rename src/server/common/{components/includes => templates/partials}/monitoring-sites.njk (100%) rename src/server/common/{components/includes => templates/partials}/pollutants.njk (100%) diff --git a/src/client/assets/stylesheets/application.scss b/src/client/assets/stylesheets/application.scss index 06639a55..4a2682a2 100644 --- a/src/client/assets/stylesheets/application.scss +++ b/src/client/assets/stylesheets/application.scss @@ -1,10 +1,11 @@ -$govuk-assets-path: "~govuk-frontend/dist/govuk/assets/"; -$govuk-global-styles: true; - -@import "~govuk-frontend/dist/govuk/all"; - -@import "variables/all"; -@import "helpers/all"; -@import "core/all"; -@import "components/all"; -@import "partials/all"; +$govuk-assets-path: "~govuk-frontend/dist/govuk/assets/"; +$govuk-global-styles: true; + +@import "~govuk-frontend/dist/govuk/all"; + +@import "variables/all"; +@import "helpers/all"; +@import "core/all"; +@import "components/all"; +@import "partials/all"; +@import "daqi/all"; diff --git a/src/client/assets/stylesheets/daqi/_all.scss b/src/client/assets/stylesheets/daqi/_all.scss new file mode 100644 index 00000000..0a0909f6 --- /dev/null +++ b/src/client/assets/stylesheets/daqi/_all.scss @@ -0,0 +1,539 @@ +// +// For guidance on how to add CSS and SCSS see: +// https://prototype-kit.service.gov.uk/docs/adding-css-javascript-and-images +// + +// Add extra styles here + + +// Table +.app-table--daqi { + border-collapse: separate; + border: 0; +} + +.daqi-table__header { + @include govuk-font($size: 16, $weight: regular); + border: 0; + padding: govuk-spacing(2); + vertical-align: bottom; + text-align: center; + width: 10%; + border-right: 3px solid #ffffff; /* Add a 3px white vertical border to header cells */ +} + +.daqi-table__header:last-child { + padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 9px; +} + +.daqi-table__cell { + @include govuk-font($size: 16, $weight: regular); + padding: govuk-spacing(2); + border: 0; + width: 10%; + background-color: govuk-colour("light-grey"); + border-right: 2px solid #ffffff; /* Add a 3px white vertical border to data cells */ +} + +.daqi-table__cell:last-child { + padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 9px; +} + +.daqi-table__caption { + font-weight: 700; + text-align: left; + +} + +.daqi-band { + @include govuk-font($size: 14, $weight: regular); + border: 0; + vertical-align: top; + text-align: left; + width: 10%; + border-right: 3px solid #ffffff; /* Add a 3px white vertical border to cells in .daqi-band */ +} + +.daqi-band:last-child { + text-align: right; +} + + +// DAQI colours + +$daqi-colour-0: govuk-colour("light-grey"); +$daqi-colour-1: govuk-colour("green"); +$daqi-colour-2: govuk-colour("green"); +$daqi-colour-3: govuk-colour("green"); +$daqi-colour-4: govuk-colour("yellow"); +$daqi-colour-5: govuk-colour("yellow"); +$daqi-colour-6: govuk-colour("yellow"); +$daqi-colour-7: govuk-colour("red"); +$daqi-colour-8: govuk-colour("red"); +$daqi-colour-9: govuk-colour("red"); +$daqi-colour-10: govuk-colour("purple"); + + + // DAQI table + + .daqi-selected { + font-weight: bold; + } + + .daqi-0 { + background-color: $daqi-colour-0; + color: govuk-colour("black"); + } + + .daqi-1 { + background-color: $daqi-colour-1; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-2 { + background-color: $daqi-colour-2; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-3 { + background-color: $daqi-colour-3; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-4 { + background-color: $daqi-colour-4; + color: govuk-colour("black"); + font-weight: bold; + } + + .daqi-5 { + background-color: $daqi-colour-5; + color: govuk-colour("black"); + font-weight: bold; + } + + .daqi-6 { + background-color: $daqi-colour-6; + color: govuk-colour("black"); + font-weight: bold; + } + + .daqi-7 { + background-color: $daqi-colour-7; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-8 { + background-color: $daqi-colour-8; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-9 { + background-color: $daqi-colour-9; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-10 { + background-color: $daqi-colour-10; + color: govuk-colour("white"); + font-weight: bold; +} + + +@for $i from 0 through 10 { + .daqi-#{$i} { + text-align: center; + } +} + + + + +// DAQI Tag + +.daqi-tag { + + display: inline-block; + + // When a user customises their colours often the background is removed, + // by adding a outline we ensure that the tag component still keeps it's meaning. + // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ + outline: 2px solid transparent; + outline-offset: -2px; + + color: govuk-colour("white"); + background-color: govuk-colour("blue"); + letter-spacing: 1px; + + text-decoration: none; +} + +.daqi-tag--round { + border-radius: 50%; +} + +mark { + background-color: transparent; + font-weight: bold; + color: inherit; +} + +.daqi-tag--1 { + color: govuk-colour("white"); + background: $daqi-colour-1; +} + +.daqi-tag--2 { + color: govuk-colour("white"); + background: $daqi-colour-2; +} + +.daqi-tag--3 { + color: govuk-colour("white"); + background: $daqi-colour-3; +} + +.daqi-tag--4 { + color: govuk-colour("black"); + background: $daqi-colour-4; +} + +.daqi-tag--5 { + color: govuk-colour("black"); + background: $daqi-colour-5; +} + +.daqi-tag--6 { + color: govuk-colour("black"); + background: $daqi-colour-6; +} + +.daqi-tag--7 { + color: govuk-colour("white"); + background: $daqi-colour-7; +} + +.daqi-tag--8 { + color: govuk-colour("white"); + background: $daqi-colour-8; +} + +.daqi-tag--9 { + color: govuk-colour("white"); + background: $daqi-colour-9; +} + +.daqi-tag--10 { + color: govuk-colour("white"); + background: $daqi-colour-10; +} + + +// Pollutants + +.pollutant-value { + margin-bottom: govuk-spacing(0); + } + +// Section + +.app-section__heading { + border-top: 2px solid govuk-colour("black"); + margin: 0 0 govuk-spacing(6); + padding: govuk-spacing(6) 0 0; +} + + +// Forecast Panel + +@for $i from 1 through 3 { + .daqi-panel--#{$i} { + border-left: 10px solid $daqi-colour-1; + background-color: #fdedee; + } +} + +@for $i from 4 through 6 { + .daqi-panel--#{$i} { + border-left: 10px solid $daqi-colour-4; + background-color: #fdedee; + } +} + +@for $i from 7 through 9 { + .daqi-panel--#{$i} { + border-left: 10px solid $daqi-colour-7; + } +} + +.daqi-panel { + border-left: 10px solid $daqi-colour-10; + background-color: #fdedee; +} + +// Pollutant Card + +.air-quality-statistics { + &__list { + margin:0; + } + + &__list::after { + content:''; + display:block; + clear:both; + } + + &__item { + float: left; + box-sizing: border-box; + padding-right: 10px; + min-width: 6em; + + @include mq($from: desktop) { + width: 33.33%; /* All items take 33.33% width on desktop */ + } + } + + &__item:first-child { + width: 33.33%; /* First item takes 50% width */ + } + + &__item:nth-child(2), &__item:nth-child(3) { + width: 33.33%; /* Second and third items take 25% width */ + } + + &__key { + @include govuk-font($size: 19); + color: $govuk-secondary-text-colour; + } + + &__value { + @include govuk-font($size: 27); + margin:0; + display: block; + box-sizing: border-box; + } + + &__value::first-letter { + margin-left: -0.075em; + } + + &__data-tip:focus { + border-bottom: 0; + margin-bottom: 0; + } + + &--border { + border-top: 1px solid $govuk-border-colour; + border-bottom: 1px solid $govuk-border-colour; + padding-bottom: 15px; + @include mq ($from: tablet) { + padding-bottom: 20px; + } + } + + &--border &__key { + padding-top: 15px; + } +} + + +@mixin defra-visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: 0; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + border: 0; + white-space: nowrap; +} + +.defra-toggletip { + // height: 1rem; + &:first-child { + display: inline-block; + } + + display: inline-block; + position: relative; + + &:not(.defra-toggletip-target) { + padding-right: 26px; + } + + &--open { + z-index: 99; + } + + &__container { + position: absolute; + top: -3px; + @include mq ($from: tablet) { + top: -1px; + } + right: 0; + width: 26px; + height: 26px; + } + + &__button { + position: absolute; + top: 0; + left: 0; + width: 26px; + height: 26px; + background-color: #ffffff; + border: 0; + padding: 0; + text-align: center; + color: $govuk-text-colour; + cursor: help; + + &-icon { + pointer-events: none; + position: absolute; + overflow: visible; + top: 5px; + left: 5px; + width: 16px; + height: 16px; + border-radius: 100%; + } + + &-text { + @include defra-visually-hidden; + } + + svg { + position: relative; + margin: -1px 0 0 -1px; + } + + &:hover, &:focus { + color: govuk-colour('black'); + } + + &:hover span { + box-shadow: 0 0 0 5px govuk-colour('light-grey'); + } + + &:focus { + outline: 3px solid transparent; + + span { + box-shadow: 0 0 0 1px govuk-colour('black'), 0 0 0 5px $govuk-focus-colour; + } + } + } + + &__info { + @include govuk-font($size: 16); + cursor: auto; + position:absolute; + width:0; + overflow: hidden; + box-sizing: border-box; + visibility: hidden; + top: auto; + bottom: 100%; + left: 0; + padding-bottom: 10px; + text-align: left; + } + + &__text { + position: relative; + display:block; + box-sizing: border-box; + padding: 7.5px 10px; + color: govuk-colour('black'); + background: currentcolor; + border: 2px solid currentcolor; + z-index: 2; + + span { + color: #ffffff; + } + } + + &__arrow { + position: absolute; + box-sizing: border-box; + z-index: 1; + width: 10px; + height: 10px; + left: 50%; + bottom: auto; + top: 100%; + margin: -15px 0 0 -5px; + color: govuk-colour('black'); + border: 5px solid currentcolor; + -webkit-transform: rotate(135deg); + -moz-transform: rotate(135deg); + -o-transform: rotate(135deg); + transform: rotate(135deg); + } + + &--bottom &__info { + bottom: auto; + top: 100%; + padding-top: 10px; + padding-bottom: 0; + } + + &--bottom &__arrow { + bottom: 100%; + top: auto; + margin: 0 0 -15px -5px; + } + + &--open &__info { + visibility: visible; + width:200px; + overflow: visible; + } + + &.defra-toggletip-target { + cursor: help; + border-bottom: 1px dashed govuk-colour('black'); + padding-bottom: 1px; + outline: 3px solid transparent; + + &:focus, &:hover:focus-visible { + border-bottom: 1px solid govuk-colour('black'); + box-shadow: 0 2px 0 govuk-colour('black'), 0 6px 0 govuk-colour('yellow'); + } + + &:focus:not(:focus-visible):not(:hover) { + border-bottom: 1px dashed govuk-colour('black'); + box-shadow: none; + } + + &:hover { + border-bottom: 1px solid govuk-colour('black'); + box-shadow: 0 2px 0 govuk-colour('black'); + } + } +} + +// Utility classes + +.align-middle { + vertical-align: middle; +} + +.govuk-caption-s { + @extend %govuk-caption-m !optional; + @include govuk-font($size: 16); +} \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/application.scss b/src/client/assets/stylesheets/sass/application.scss new file mode 100644 index 00000000..c93b83cb --- /dev/null +++ b/src/client/assets/stylesheets/sass/application.scss @@ -0,0 +1,21 @@ + +// Tools +@import "tools/mixins"; + +// Elements +@import "elements/colour"; +@import "elements/layout"; +@import "elements/typography"; + +// Components +@import "components/daqitag"; +@import "components/daqitable"; +@import "components/toggletips"; +@import "components/aq-levels-table"; + + + + + + + diff --git a/src/client/assets/stylesheets/sass/components/_aq-levels-table.scss b/src/client/assets/stylesheets/sass/components/_aq-levels-table.scss new file mode 100644 index 00000000..5b08060e --- /dev/null +++ b/src/client/assets/stylesheets/sass/components/_aq-levels-table.scss @@ -0,0 +1,115 @@ +.defra-aq-levels-table { + @extend %govuk-table; + position: relative; + margin-top: -1px; + margin-bottom: 0; + + @include mq ($until: tablet) { + display: block; + } + + &__head { + @include mq ($until: tablet) { + display: block; + } + } + + &__head tr { + @include mq ($until: tablet) { + display: flex; + flex-wrap: wrap; + } + } + + &__head &__cell { + text-align: left; + padding-top: 20px; + padding-bottom: 20px; + + &--pollutant { + @include mq ($until: tablet) { + @include defra-visually-hidden; + } + } + } + + &__body { + @include mq ($until: tablet) { + display: block; + } + } + + &__row { + border-top: 1px solid govuk-tint($govuk-border-colour, 0); + border-bottom: 1px solid govuk-tint($govuk-border-colour, 0); + + @include mq ($until: tablet) { + position: relative; + display: flex; + flex-wrap: wrap; + margin-bottom: -1px; + } + } + + &__cell { + @extend %govuk-table__cell; + border-bottom: 0; + vertical-align: middle; + text-align: left; + padding-left: 0; + padding-right: 0; + + @include mq ($until: tablet) { + display: inline-block; + padding-top:0; + padding-bottom: 10px; + } + + a { + display: inline-block; + } + + a:not(:hover) { + text-decoration: none; + } + } + + &__cell--pollutant { + @include govuk-font($size: 19, $weight: bold); + width: 40%; + padding-right:20px; + + @include mq ($until: tablet) { + padding-top:10px; + padding-bottom:5px; + padding-right: 0; + width: 100%; + } + } + + &__cell--reading { + @include govuk-font($size: 19, $weight: bold); + width: 20%; + + @include mq ($until: tablet) { + width: 35%; + } + } + + &__cell--trend { + width: 20%; + + @include mq ($until: tablet) { + width: 30%; + } + } + + &__cell--level { + width: 20%; + + @include mq ($until: tablet) { + width: 35%; + } + } + } + \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/components/_daqitable.scss b/src/client/assets/stylesheets/sass/components/_daqitable.scss new file mode 100644 index 00000000..95155848 --- /dev/null +++ b/src/client/assets/stylesheets/sass/components/_daqitable.scss @@ -0,0 +1,133 @@ +// Daqi table +.app-table--daqi { + border-collapse: separate; + border: 0; + } + + .daqi-table__header { + @include govuk-font($size: 16, $weight: regular); + border: 0; + padding: govuk-spacing(2); + vertical-align: bottom; + text-align: center; + width: 10%; + border-right: 3px solid #ffffff; /* Add a 3px white vertical border to header cells */ + } + + .daqi-table__header:last-child { + padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 9px; + } + + .daqi-table__cell { + @include govuk-font($size: 16, $weight: regular); + padding-top: govuk-spacing(2); + padding-bottom: govuk-spacing(2); + padding-left: 0; + padding-right: 0; + text-align: center; + border: 0; + width: 10%; + background-color: govuk-colour("light-grey"); + border-right: 2px solid #ffffff; /* Add a 3px white vertical border to data cells */ + } + + // .daqi-table__cell:last-child { + // padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 9px; + // } + + .daqi-table__caption { + font-weight: 700; + text-align: left; + + } + + .daqi-band { + @include govuk-font($size: 14, $weight: regular); + border: 0; + vertical-align: top; + text-align: left; + width: 10%; + border-right: 3px solid #ffffff; /* Add a 3px white vertical border to cells in .daqi-band */ + } + + .daqi-band:last-child { + text-align: right; + } + + + .daqi-selected { + font-weight: bold; + } + + .daqi-0 { + background-color: $daqi-colour-0; + color: govuk-colour("black"); + } + + .daqi-1 { + background-color: $daqi-colour-1; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-2 { + background-color: $daqi-colour-2; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-3 { + background-color: $daqi-colour-3; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-4 { + background-color: $daqi-colour-4; + color: govuk-colour("black"); + font-weight: bold; + } + + .daqi-5 { + background-color: $daqi-colour-5; + color: govuk-colour("black"); + font-weight: bold; + } + + .daqi-6 { + background-color: $daqi-colour-6; + color: govuk-colour("black"); + font-weight: bold; + } + + .daqi-7 { + background-color: $daqi-colour-7; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-8 { + background-color: $daqi-colour-8; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-9 { + background-color: $daqi-colour-9; + color: govuk-colour("white"); + font-weight: bold; + } + + .daqi-10 { + background-color: $daqi-colour-10; + color: govuk-colour("white"); + font-weight: bold; + } + + + @for $i from 0 through 10 { + .daqi-#{$i} { + text-align: center; + } + } + \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/components/_daqitag.scss b/src/client/assets/stylesheets/sass/components/_daqitag.scss new file mode 100644 index 00000000..b9024cb3 --- /dev/null +++ b/src/client/assets/stylesheets/sass/components/_daqitag.scss @@ -0,0 +1,79 @@ + +// DAQI Tag + +.daqi-tag { + + display: inline-block; + + // When a user customises their colours often the background is removed, + // by adding a outline we ensure that the tag component still keeps it's meaning. + // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ + outline: 2px solid transparent; + outline-offset: -2px; + + color: govuk-colour("white"); + background-color: govuk-colour("blue"); + letter-spacing: 1px; + + text-decoration: none; +} + +.daqi-tag--round { + border-radius: 50%; +} + +mark { + background-color: transparent; + font-weight: bold; + color: inherit; +} + +.daqi-tag--1 { + color: govuk-colour("white"); + background: $daqi-colour-1; +} + +.daqi-tag--2 { + color: govuk-colour("white"); + background: $daqi-colour-2; +} + +.daqi-tag--3 { + color: govuk-colour("white"); + background: $daqi-colour-3; +} + +.daqi-tag--4 { + color: govuk-colour("black"); + background: $daqi-colour-4; +} + +.daqi-tag--5 { + color: govuk-colour("black"); + background: $daqi-colour-5; +} + +.daqi-tag--6 { + color: govuk-colour("black"); + background: $daqi-colour-6; +} + +.daqi-tag--7 { + color: govuk-colour("white"); + background: $daqi-colour-7; +} + +.daqi-tag--8 { + color: govuk-colour("white"); + background: $daqi-colour-8; +} + +.daqi-tag--9 { + color: govuk-colour("white"); + background: $daqi-colour-9; +} + +.daqi-tag--10 { + color: govuk-colour("white"); + background: $daqi-colour-10; +} diff --git a/src/client/assets/stylesheets/sass/components/_toggletips.scss b/src/client/assets/stylesheets/sass/components/_toggletips.scss new file mode 100644 index 00000000..92c661b3 --- /dev/null +++ b/src/client/assets/stylesheets/sass/components/_toggletips.scss @@ -0,0 +1,166 @@ +.defra-toggletip { + // height: 1rem; + &:first-child { + display: inline-block; + } + display: inline-block; + position: relative; + + &:not(.defra-toggletip-target) { + padding-right: 26px; + } + + &--open { + z-index: 99; + } + + &__container { + position: absolute; + top: -3px; + @include mq ($from: tablet) { + top: -1px; + } + right: 0; + width: 26px; + height: 26px; + } + + &__button { + position: absolute; + top: 0; + left: 0; + width: 26px; + height: 26px; + background-color: #ffffff; + border: 0; + padding: 0; + text-align: center; + color: $govuk-text-colour; + cursor: help; + + &-icon { + pointer-events: none; + position: absolute; + overflow: visible; + top: 5px; + left: 5px; + width: 16px; + height: 16px; + border-radius: 100%; + } + + &-text { + @include defra-visually-hidden; + } + + svg { + position: relative; + margin: -1px 0 0 -1px; + } + + &:hover, &:focus { + color: govuk-colour('black'); + } + + &:hover span { + box-shadow: 0 0 0 5px govuk-colour('light-grey'); + } + + &:focus { + outline: 3px solid transparent; + + span { + box-shadow: 0 0 0 1px govuk-colour('black'), 0 0 0 5px $govuk-focus-colour; + } + } + } + + &__info { + @include govuk-font($size: 16); + cursor: auto; + position:absolute; + width:0; + overflow: hidden; + box-sizing: border-box; + visibility: hidden; + top: auto; + bottom: 100%; + left: 0; + padding-bottom: 10px; + text-align: left; + } + + &__text { + position: relative; + display:block; + box-sizing: border-box; + padding: 7.5px 10px; + color: govuk-colour('black'); + background: currentcolor; + border: 2px solid currentcolor; + z-index: 2; + + span { + color: #ffffff; + } + } + + &__arrow { + position: absolute; + box-sizing: border-box; + z-index: 1; + width: 10px; + height: 10px; + left: 50%; + bottom: auto; + top: 100%; + margin: -15px 0 0 -5px; + color: govuk-colour('black'); + border: 5px solid currentcolor; + -webkit-transform: rotate(135deg); + -moz-transform: rotate(135deg); + -o-transform: rotate(135deg); + transform: rotate(135deg); + } + + &--bottom &__info { + bottom: auto; + top: 100%; + padding-top: 10px; + padding-bottom: 0; + } + + &--bottom &__arrow { + bottom: 100%; + top: auto; + margin: 0 0 -15px -5px; + } + + &--open &__info { + visibility: visible; + width:200px; + overflow: visible; + } + + &.defra-toggletip-target { + cursor: help; + border-bottom: 1px dashed govuk-colour('black'); + padding-bottom: 1px; + outline: 3px solid transparent; + + &:focus, &:hover:focus-visible { + border-bottom: 1px solid govuk-colour('black'); + box-shadow: 0 2px 0 govuk-colour('black'), 0 6px 0 govuk-colour('yellow'); + } + + &:focus:not(:focus-visible):not(:hover) { + border-bottom: 1px dashed govuk-colour('black'); + box-shadow: none; + } + + &:hover { + border-bottom: 1px solid govuk-colour('black'); + box-shadow: 0 2px 0 govuk-colour('black'); + } + } +} diff --git a/src/client/assets/stylesheets/sass/elements/_colour.scss b/src/client/assets/stylesheets/sass/elements/_colour.scss new file mode 100644 index 00000000..4033d85f --- /dev/null +++ b/src/client/assets/stylesheets/sass/elements/_colour.scss @@ -0,0 +1,14 @@ + +// DAQI Colours + +$daqi-colour-0: govuk-colour("light-grey"); +$daqi-colour-1: govuk-colour("green"); +$daqi-colour-2: govuk-colour("green"); +$daqi-colour-3: govuk-colour("green"); +$daqi-colour-4: govuk-colour("yellow"); +$daqi-colour-5: govuk-colour("yellow"); +$daqi-colour-6: govuk-colour("yellow"); +$daqi-colour-7: govuk-colour("red"); +$daqi-colour-8: govuk-colour("red"); +$daqi-colour-9: govuk-colour("red"); +$daqi-colour-10: govuk-colour("purple"); \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/elements/_layout.scss b/src/client/assets/stylesheets/sass/elements/_layout.scss new file mode 100644 index 00000000..8e3bb18d --- /dev/null +++ b/src/client/assets/stylesheets/sass/elements/_layout.scss @@ -0,0 +1,6 @@ + +// Vertical align middle + +.align-middle { + vertical-align: middle; + } \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/elements/_typography.scss b/src/client/assets/stylesheets/sass/elements/_typography.scss new file mode 100644 index 00000000..fc710949 --- /dev/null +++ b/src/client/assets/stylesheets/sass/elements/_typography.scss @@ -0,0 +1,5 @@ +.govuk-caption-s { + @extend %govuk-caption-m !optional; + @include govuk-font($size: 16); + } + \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/tools/_mixins.scss b/src/client/assets/stylesheets/sass/tools/_mixins.scss new file mode 100644 index 00000000..c87f3a38 --- /dev/null +++ b/src/client/assets/stylesheets/sass/tools/_mixins.scss @@ -0,0 +1,14 @@ +@mixin defra-visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: 0; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + border: 0; + white-space: nowrap; + } + \ No newline at end of file diff --git a/src/server/common/components/aq-levels-table/macro.njk b/src/server/common/components/aq-levels-table/macro.njk new file mode 100644 index 00000000..c8ed1c66 --- /dev/null +++ b/src/server/common/components/aq-levels-table/macro.njk @@ -0,0 +1,3 @@ +{% macro aqLevelsTable (params) %} + {%- include "./template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/src/server/common/components/aq-levels-table/template.njk b/src/server/common/components/aq-levels-table/template.njk new file mode 100644 index 00000000..0031b742 --- /dev/null +++ b/src/server/common/components/aq-levels-table/template.njk @@ -0,0 +1,41 @@ + + {% if params.caption %} + + {% endif %} + {% if params.head %} + + + {% for item in params.head %} + + {% endfor %} + + + {% endif %} + + {% for row in params.rows %} + {% if row %} + + {% for cell in row %} + {% set commonAttributes %} + {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %} + {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %} + {% endset %} + {% if loop.first and params.firstCellIsHeader %} + + {% else %} + + {% endif %} + {% endfor %} + + {% endif %} + {% endfor %} + +
{{ params.caption }}
{{ item.html |safe if item.html else item.text }}
{{ cell.html | safe if cell.html else cell.text }}{{ cell.html | safe if cell.html else cell.text }}
\ No newline at end of file diff --git a/src/server/common/components/pollutant/macro.njk b/src/server/common/components/pollutant/macro.njk new file mode 100644 index 00000000..94e18cb8 --- /dev/null +++ b/src/server/common/components/pollutant/macro.njk @@ -0,0 +1,4 @@ +{% macro appPollutant(params) %} + {%- include "./template.njk" -%} + {{ params.html | safe }} {# Render the HTML string safely #} +{% endmacro %} \ No newline at end of file diff --git a/src/server/common/components/pollutant/template.njk b/src/server/common/components/pollutant/template.njk new file mode 100644 index 00000000..2dad2f41 --- /dev/null +++ b/src/server/common/components/pollutant/template.njk @@ -0,0 +1,18 @@ +{% from "components/daqitag/macro.njk" import appDaqitag %} + +
+

+ {{ params.type | safe }} +

+
+ {{ params.value }} +
+

+ {{ params.unit | safe }} +

+ {{ appDaqitag({ + classes: params.tagClass, + text: params.tagText | capitalize + }) }} + {# {{ params.limit | safe }} #} +
\ No newline at end of file diff --git a/src/server/common/components/toggletip/macro.njk b/src/server/common/components/toggletip/macro.njk new file mode 100644 index 00000000..1f0835ed --- /dev/null +++ b/src/server/common/components/toggletip/macro.njk @@ -0,0 +1,3 @@ +{% macro toggletip(class, label, tooltiptext, text) %} + {%- include "./template.njk" -%} +{% endmacro %} diff --git a/src/server/common/components/toggletip/template.njk b/src/server/common/components/toggletip/template.njk new file mode 100644 index 00000000..9cc7ddee --- /dev/null +++ b/src/server/common/components/toggletip/template.njk @@ -0,0 +1,15 @@ +
+ {{text}} + + + + {{tooltiptext}} + + + +
diff --git a/src/server/common/templates/layouts/page.njk b/src/server/common/templates/layouts/page.njk index 21eb1be1..7563e178 100644 --- a/src/server/common/templates/layouts/page.njk +++ b/src/server/common/templates/layouts/page.njk @@ -8,6 +8,12 @@ {% from "search/macro.njk" import appSearch -%} {% from "error-summary/macro.njk" import govukErrorSummary %} {% from "button/macro.njk" import govukButton -%} +{% from "table/macro.njk" import govukTable -%} +{% from "inset-text/macro.njk" import govukInsetText -%} +{% from "details/macro.njk" import govukDetails -%} +{% from "pollutant/macro.njk" import appPollutant %} +{% from "toggletip/macro.njk" import toggletip %} +{% from "aq-levels-table/macro.njk" import aqLevelsTable %} {% set mainClasses = "app-main-wrapper" %} diff --git a/src/server/common/components/includes/daqi-index.njk b/src/server/common/templates/partials/daqi-index.njk similarity index 100% rename from src/server/common/components/includes/daqi-index.njk rename to src/server/common/templates/partials/daqi-index.njk diff --git a/src/server/common/components/includes/daqi.njk b/src/server/common/templates/partials/daqi.njk similarity index 100% rename from src/server/common/components/includes/daqi.njk rename to src/server/common/templates/partials/daqi.njk diff --git a/src/server/common/components/includes/monitoring-sites.njk b/src/server/common/templates/partials/monitoring-sites.njk similarity index 100% rename from src/server/common/components/includes/monitoring-sites.njk rename to src/server/common/templates/partials/monitoring-sites.njk diff --git a/src/server/common/components/includes/pollutants.njk b/src/server/common/templates/partials/pollutants.njk similarity index 100% rename from src/server/common/components/includes/pollutants.njk rename to src/server/common/templates/partials/pollutants.njk diff --git a/src/server/locations/location.njk b/src/server/locations/location.njk index 1eaac9d4..615e4621 100644 --- a/src/server/locations/location.njk +++ b/src/server/locations/location.njk @@ -19,7 +19,7 @@
- {# {% include "includes/daqi.njk" %} + {% include "partials/daqi.njk" %} {% if airQuality.value >= 1 and airQuality.value <= 3 %}

Advice for {{ airQuality.readableBand }} levels of air pollution

{{ airQuality.advice }}

@@ -42,7 +42,7 @@ }) }}

{{ airQuality.advice }}

{% endif %} - {% include "includes/daqi-index.njk" %} + {% include "partials/daqi-index.njk" %}

UK air pollution summary

{{ airQuality.outlook }} @@ -50,10 +50,10 @@

Latest at 05:00am {{ "today" | govukDate }}

How air pollutants can affect your health

- {% include "includes/pollutants.njk" %} + {% include "partials/pollutants.njk" %}
-

Air pollutants monitored near by

#} - {% include "includes/pollutants.njk" %} +

Air pollutants monitored near by

+ {% include "partials/pollutants.njk" %}
{% endblock %} From fc9580fbb44a7c9521c414dec43a5453eca59c91 Mon Sep 17 00:00:00 2001 From: ulysses Date: Tue, 20 Feb 2024 13:06:15 +0000 Subject: [PATCH 2/3] fixingn partial duplication. --- src/server/locations/location.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/server/locations/location.njk b/src/server/locations/location.njk index 615e4621..34896ef4 100644 --- a/src/server/locations/location.njk +++ b/src/server/locations/location.njk @@ -53,7 +53,7 @@ {% include "partials/pollutants.njk" %}

Air pollutants monitored near by

- {% include "partials/pollutants.njk" %} + {% include "partials/monitoring-sites.njk" %} {% endblock %} From 524b5d4f4878473f4646b7fb7b6e9de325486850 Mon Sep 17 00:00:00 2001 From: ulysses Date: Tue, 20 Feb 2024 22:07:48 +0000 Subject: [PATCH 3/3] updates for pollutant location page. --- .../assets/stylesheets/components/_all.scss | 4 +- src/client/assets/stylesheets/daqi/_all.scss | 9 +- .../assets/stylesheets/sass/application.scss | 21 --- .../sass/components/_aq-levels-table.scss | 115 ------------ .../sass/components/_daqitable.scss | 133 -------------- .../stylesheets/sass/components/_daqitag.scss | 79 --------- .../sass/components/_toggletips.scss | 166 ------------------ .../stylesheets/sass/elements/_colour.scss | 14 -- .../stylesheets/sass/elements/_layout.scss | 6 - .../sass/elements/_typography.scss | 5 - .../stylesheets/sass/tools/_mixins.scss | 14 -- 11 files changed, 7 insertions(+), 559 deletions(-) delete mode 100644 src/client/assets/stylesheets/sass/application.scss delete mode 100644 src/client/assets/stylesheets/sass/components/_aq-levels-table.scss delete mode 100644 src/client/assets/stylesheets/sass/components/_daqitable.scss delete mode 100644 src/client/assets/stylesheets/sass/components/_daqitag.scss delete mode 100644 src/client/assets/stylesheets/sass/components/_toggletips.scss delete mode 100644 src/client/assets/stylesheets/sass/elements/_colour.scss delete mode 100644 src/client/assets/stylesheets/sass/elements/_layout.scss delete mode 100644 src/client/assets/stylesheets/sass/elements/_typography.scss delete mode 100644 src/client/assets/stylesheets/sass/tools/_mixins.scss diff --git a/src/client/assets/stylesheets/components/_all.scss b/src/client/assets/stylesheets/components/_all.scss index e182d231..b12a95ca 100644 --- a/src/client/assets/stylesheets/components/_all.scss +++ b/src/client/assets/stylesheets/components/_all.scss @@ -1,2 +1,2 @@ -@import "breadcrumbs/breadcrumbs"; -@import "heading/heading"; +@import "breadcrumbs/breadcrumbs"; +@import "heading/heading"; diff --git a/src/client/assets/stylesheets/daqi/_all.scss b/src/client/assets/stylesheets/daqi/_all.scss index 0a0909f6..533a8198 100644 --- a/src/client/assets/stylesheets/daqi/_all.scss +++ b/src/client/assets/stylesheets/daqi/_all.scss @@ -457,9 +457,9 @@ mark { display:block; box-sizing: border-box; padding: 7.5px 10px; - color: govuk-colour('black'); - background: currentcolor; - border: 2px solid currentcolor; + color: #ffffff; + background: #000000; + border: 0 solid currentcolor; z-index: 2; span { @@ -536,4 +536,5 @@ mark { .govuk-caption-s { @extend %govuk-caption-m !optional; @include govuk-font($size: 16); -} \ No newline at end of file +} + diff --git a/src/client/assets/stylesheets/sass/application.scss b/src/client/assets/stylesheets/sass/application.scss deleted file mode 100644 index c93b83cb..00000000 --- a/src/client/assets/stylesheets/sass/application.scss +++ /dev/null @@ -1,21 +0,0 @@ - -// Tools -@import "tools/mixins"; - -// Elements -@import "elements/colour"; -@import "elements/layout"; -@import "elements/typography"; - -// Components -@import "components/daqitag"; -@import "components/daqitable"; -@import "components/toggletips"; -@import "components/aq-levels-table"; - - - - - - - diff --git a/src/client/assets/stylesheets/sass/components/_aq-levels-table.scss b/src/client/assets/stylesheets/sass/components/_aq-levels-table.scss deleted file mode 100644 index 5b08060e..00000000 --- a/src/client/assets/stylesheets/sass/components/_aq-levels-table.scss +++ /dev/null @@ -1,115 +0,0 @@ -.defra-aq-levels-table { - @extend %govuk-table; - position: relative; - margin-top: -1px; - margin-bottom: 0; - - @include mq ($until: tablet) { - display: block; - } - - &__head { - @include mq ($until: tablet) { - display: block; - } - } - - &__head tr { - @include mq ($until: tablet) { - display: flex; - flex-wrap: wrap; - } - } - - &__head &__cell { - text-align: left; - padding-top: 20px; - padding-bottom: 20px; - - &--pollutant { - @include mq ($until: tablet) { - @include defra-visually-hidden; - } - } - } - - &__body { - @include mq ($until: tablet) { - display: block; - } - } - - &__row { - border-top: 1px solid govuk-tint($govuk-border-colour, 0); - border-bottom: 1px solid govuk-tint($govuk-border-colour, 0); - - @include mq ($until: tablet) { - position: relative; - display: flex; - flex-wrap: wrap; - margin-bottom: -1px; - } - } - - &__cell { - @extend %govuk-table__cell; - border-bottom: 0; - vertical-align: middle; - text-align: left; - padding-left: 0; - padding-right: 0; - - @include mq ($until: tablet) { - display: inline-block; - padding-top:0; - padding-bottom: 10px; - } - - a { - display: inline-block; - } - - a:not(:hover) { - text-decoration: none; - } - } - - &__cell--pollutant { - @include govuk-font($size: 19, $weight: bold); - width: 40%; - padding-right:20px; - - @include mq ($until: tablet) { - padding-top:10px; - padding-bottom:5px; - padding-right: 0; - width: 100%; - } - } - - &__cell--reading { - @include govuk-font($size: 19, $weight: bold); - width: 20%; - - @include mq ($until: tablet) { - width: 35%; - } - } - - &__cell--trend { - width: 20%; - - @include mq ($until: tablet) { - width: 30%; - } - } - - &__cell--level { - width: 20%; - - @include mq ($until: tablet) { - width: 35%; - } - } - } - \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/components/_daqitable.scss b/src/client/assets/stylesheets/sass/components/_daqitable.scss deleted file mode 100644 index 95155848..00000000 --- a/src/client/assets/stylesheets/sass/components/_daqitable.scss +++ /dev/null @@ -1,133 +0,0 @@ -// Daqi table -.app-table--daqi { - border-collapse: separate; - border: 0; - } - - .daqi-table__header { - @include govuk-font($size: 16, $weight: regular); - border: 0; - padding: govuk-spacing(2); - vertical-align: bottom; - text-align: center; - width: 10%; - border-right: 3px solid #ffffff; /* Add a 3px white vertical border to header cells */ - } - - .daqi-table__header:last-child { - padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 9px; - } - - .daqi-table__cell { - @include govuk-font($size: 16, $weight: regular); - padding-top: govuk-spacing(2); - padding-bottom: govuk-spacing(2); - padding-left: 0; - padding-right: 0; - text-align: center; - border: 0; - width: 10%; - background-color: govuk-colour("light-grey"); - border-right: 2px solid #ffffff; /* Add a 3px white vertical border to data cells */ - } - - // .daqi-table__cell:last-child { - // padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 9px; - // } - - .daqi-table__caption { - font-weight: 700; - text-align: left; - - } - - .daqi-band { - @include govuk-font($size: 14, $weight: regular); - border: 0; - vertical-align: top; - text-align: left; - width: 10%; - border-right: 3px solid #ffffff; /* Add a 3px white vertical border to cells in .daqi-band */ - } - - .daqi-band:last-child { - text-align: right; - } - - - .daqi-selected { - font-weight: bold; - } - - .daqi-0 { - background-color: $daqi-colour-0; - color: govuk-colour("black"); - } - - .daqi-1 { - background-color: $daqi-colour-1; - color: govuk-colour("white"); - font-weight: bold; - } - - .daqi-2 { - background-color: $daqi-colour-2; - color: govuk-colour("white"); - font-weight: bold; - } - - .daqi-3 { - background-color: $daqi-colour-3; - color: govuk-colour("white"); - font-weight: bold; - } - - .daqi-4 { - background-color: $daqi-colour-4; - color: govuk-colour("black"); - font-weight: bold; - } - - .daqi-5 { - background-color: $daqi-colour-5; - color: govuk-colour("black"); - font-weight: bold; - } - - .daqi-6 { - background-color: $daqi-colour-6; - color: govuk-colour("black"); - font-weight: bold; - } - - .daqi-7 { - background-color: $daqi-colour-7; - color: govuk-colour("white"); - font-weight: bold; - } - - .daqi-8 { - background-color: $daqi-colour-8; - color: govuk-colour("white"); - font-weight: bold; - } - - .daqi-9 { - background-color: $daqi-colour-9; - color: govuk-colour("white"); - font-weight: bold; - } - - .daqi-10 { - background-color: $daqi-colour-10; - color: govuk-colour("white"); - font-weight: bold; - } - - - @for $i from 0 through 10 { - .daqi-#{$i} { - text-align: center; - } - } - \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/components/_daqitag.scss b/src/client/assets/stylesheets/sass/components/_daqitag.scss deleted file mode 100644 index b9024cb3..00000000 --- a/src/client/assets/stylesheets/sass/components/_daqitag.scss +++ /dev/null @@ -1,79 +0,0 @@ - -// DAQI Tag - -.daqi-tag { - - display: inline-block; - - // When a user customises their colours often the background is removed, - // by adding a outline we ensure that the tag component still keeps it's meaning. - // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ - outline: 2px solid transparent; - outline-offset: -2px; - - color: govuk-colour("white"); - background-color: govuk-colour("blue"); - letter-spacing: 1px; - - text-decoration: none; -} - -.daqi-tag--round { - border-radius: 50%; -} - -mark { - background-color: transparent; - font-weight: bold; - color: inherit; -} - -.daqi-tag--1 { - color: govuk-colour("white"); - background: $daqi-colour-1; -} - -.daqi-tag--2 { - color: govuk-colour("white"); - background: $daqi-colour-2; -} - -.daqi-tag--3 { - color: govuk-colour("white"); - background: $daqi-colour-3; -} - -.daqi-tag--4 { - color: govuk-colour("black"); - background: $daqi-colour-4; -} - -.daqi-tag--5 { - color: govuk-colour("black"); - background: $daqi-colour-5; -} - -.daqi-tag--6 { - color: govuk-colour("black"); - background: $daqi-colour-6; -} - -.daqi-tag--7 { - color: govuk-colour("white"); - background: $daqi-colour-7; -} - -.daqi-tag--8 { - color: govuk-colour("white"); - background: $daqi-colour-8; -} - -.daqi-tag--9 { - color: govuk-colour("white"); - background: $daqi-colour-9; -} - -.daqi-tag--10 { - color: govuk-colour("white"); - background: $daqi-colour-10; -} diff --git a/src/client/assets/stylesheets/sass/components/_toggletips.scss b/src/client/assets/stylesheets/sass/components/_toggletips.scss deleted file mode 100644 index 92c661b3..00000000 --- a/src/client/assets/stylesheets/sass/components/_toggletips.scss +++ /dev/null @@ -1,166 +0,0 @@ -.defra-toggletip { - // height: 1rem; - &:first-child { - display: inline-block; - } - display: inline-block; - position: relative; - - &:not(.defra-toggletip-target) { - padding-right: 26px; - } - - &--open { - z-index: 99; - } - - &__container { - position: absolute; - top: -3px; - @include mq ($from: tablet) { - top: -1px; - } - right: 0; - width: 26px; - height: 26px; - } - - &__button { - position: absolute; - top: 0; - left: 0; - width: 26px; - height: 26px; - background-color: #ffffff; - border: 0; - padding: 0; - text-align: center; - color: $govuk-text-colour; - cursor: help; - - &-icon { - pointer-events: none; - position: absolute; - overflow: visible; - top: 5px; - left: 5px; - width: 16px; - height: 16px; - border-radius: 100%; - } - - &-text { - @include defra-visually-hidden; - } - - svg { - position: relative; - margin: -1px 0 0 -1px; - } - - &:hover, &:focus { - color: govuk-colour('black'); - } - - &:hover span { - box-shadow: 0 0 0 5px govuk-colour('light-grey'); - } - - &:focus { - outline: 3px solid transparent; - - span { - box-shadow: 0 0 0 1px govuk-colour('black'), 0 0 0 5px $govuk-focus-colour; - } - } - } - - &__info { - @include govuk-font($size: 16); - cursor: auto; - position:absolute; - width:0; - overflow: hidden; - box-sizing: border-box; - visibility: hidden; - top: auto; - bottom: 100%; - left: 0; - padding-bottom: 10px; - text-align: left; - } - - &__text { - position: relative; - display:block; - box-sizing: border-box; - padding: 7.5px 10px; - color: govuk-colour('black'); - background: currentcolor; - border: 2px solid currentcolor; - z-index: 2; - - span { - color: #ffffff; - } - } - - &__arrow { - position: absolute; - box-sizing: border-box; - z-index: 1; - width: 10px; - height: 10px; - left: 50%; - bottom: auto; - top: 100%; - margin: -15px 0 0 -5px; - color: govuk-colour('black'); - border: 5px solid currentcolor; - -webkit-transform: rotate(135deg); - -moz-transform: rotate(135deg); - -o-transform: rotate(135deg); - transform: rotate(135deg); - } - - &--bottom &__info { - bottom: auto; - top: 100%; - padding-top: 10px; - padding-bottom: 0; - } - - &--bottom &__arrow { - bottom: 100%; - top: auto; - margin: 0 0 -15px -5px; - } - - &--open &__info { - visibility: visible; - width:200px; - overflow: visible; - } - - &.defra-toggletip-target { - cursor: help; - border-bottom: 1px dashed govuk-colour('black'); - padding-bottom: 1px; - outline: 3px solid transparent; - - &:focus, &:hover:focus-visible { - border-bottom: 1px solid govuk-colour('black'); - box-shadow: 0 2px 0 govuk-colour('black'), 0 6px 0 govuk-colour('yellow'); - } - - &:focus:not(:focus-visible):not(:hover) { - border-bottom: 1px dashed govuk-colour('black'); - box-shadow: none; - } - - &:hover { - border-bottom: 1px solid govuk-colour('black'); - box-shadow: 0 2px 0 govuk-colour('black'); - } - } -} diff --git a/src/client/assets/stylesheets/sass/elements/_colour.scss b/src/client/assets/stylesheets/sass/elements/_colour.scss deleted file mode 100644 index 4033d85f..00000000 --- a/src/client/assets/stylesheets/sass/elements/_colour.scss +++ /dev/null @@ -1,14 +0,0 @@ - -// DAQI Colours - -$daqi-colour-0: govuk-colour("light-grey"); -$daqi-colour-1: govuk-colour("green"); -$daqi-colour-2: govuk-colour("green"); -$daqi-colour-3: govuk-colour("green"); -$daqi-colour-4: govuk-colour("yellow"); -$daqi-colour-5: govuk-colour("yellow"); -$daqi-colour-6: govuk-colour("yellow"); -$daqi-colour-7: govuk-colour("red"); -$daqi-colour-8: govuk-colour("red"); -$daqi-colour-9: govuk-colour("red"); -$daqi-colour-10: govuk-colour("purple"); \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/elements/_layout.scss b/src/client/assets/stylesheets/sass/elements/_layout.scss deleted file mode 100644 index 8e3bb18d..00000000 --- a/src/client/assets/stylesheets/sass/elements/_layout.scss +++ /dev/null @@ -1,6 +0,0 @@ - -// Vertical align middle - -.align-middle { - vertical-align: middle; - } \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/elements/_typography.scss b/src/client/assets/stylesheets/sass/elements/_typography.scss deleted file mode 100644 index fc710949..00000000 --- a/src/client/assets/stylesheets/sass/elements/_typography.scss +++ /dev/null @@ -1,5 +0,0 @@ -.govuk-caption-s { - @extend %govuk-caption-m !optional; - @include govuk-font($size: 16); - } - \ No newline at end of file diff --git a/src/client/assets/stylesheets/sass/tools/_mixins.scss b/src/client/assets/stylesheets/sass/tools/_mixins.scss deleted file mode 100644 index c87f3a38..00000000 --- a/src/client/assets/stylesheets/sass/tools/_mixins.scss +++ /dev/null @@ -1,14 +0,0 @@ -@mixin defra-visually-hidden { - position: absolute; - width: 1px; - height: 1px; - margin: 0; - padding: 0; - overflow: hidden; - clip: rect(0 0 0 0); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - border: 0; - white-space: nowrap; - } - \ No newline at end of file