diff --git a/docs/examples/timeline/index.njk b/docs/examples/timeline/index.njk index 13314a1b5..3c72669cd 100644 --- a/docs/examples/timeline/index.njk +++ b/docs/examples/timeline/index.njk @@ -19,25 +19,35 @@ arguments: timeline
- Ut quam nunc, vulputate ac metus pharetra, posuere maximus velit. Etiam nec interdum velit. Suspendisse molestie lectus in eros ornare + Ut quam nunc, vulputate ac metus pharetra, posuere maximus velit. Etiam nec interdum velit. Suspendisse molestie lectus in eros ornare
{% endset -%} {%- set listHtml %} {% endset -%} {%- set documentsHtml %} {% endset -%} diff --git a/src/moj/components/search-toggle/search-toggle.js b/src/moj/components/search-toggle/search-toggle.js index a0b077580..2f128359b 100644 --- a/src/moj/components/search-toggle/search-toggle.js +++ b/src/moj/components/search-toggle/search-toggle.js @@ -7,7 +7,9 @@ MOJFrontend.SearchToggle = function(options) { this.options.search.container.data('moj-search-toggle-initialised', true); - this.toggleButton = $(''); + const svg = ''; + + this.toggleButton = $(''); this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick')); this.options.toggleButton.container.append(this.toggleButton); }; diff --git a/src/moj/components/search-toggle/search-toggle.scss b/src/moj/components/search-toggle/search-toggle.scss index 7a6359372..c4f00ccc5 100644 --- a/src/moj/components/search-toggle/search-toggle.scss +++ b/src/moj/components/search-toggle/search-toggle.scss @@ -12,15 +12,17 @@ -webkit-font-smoothing: antialiased; -webkit-appearance: none; - &:after { - background-repeat: no-repeat; - background-image: url(#{$moj-images-path}icon-search-blue.svg); - content: ''; + &__icon { display: inline-block; height: 20px; margin-left: govuk-spacing(2); vertical-align: middle; width: 20px; + fill: currentColor; + + @media screen and (forced-colors: active) { + fill: windowText; + } } &:focus { @@ -30,43 +32,30 @@ outline: none; position: relative; z-index: 1; - - &:after { - background-image: url(#{$moj-images-path}icon-search-black.svg); - } } - } - .moj-search--toggle { - padding: govuk-spacing(3); @include govuk-media-query($until: desktop) { padding-left: 0 !important; padding-right: 0 !important; } - } - // JS enabled .js-enabled .moj-search--toggle { - @include govuk-media-query($until: desktop) { padding-top: 0 !important; } - } .js-enabled .moj-search-toggle { position: relative; } - .js-enabled .moj-search-toggle__search { - background-color: govuk-colour("light-grey"); @include govuk-media-query($from: desktop) { @@ -77,5 +66,4 @@ width: 450px; z-index: 10; } - } diff --git a/src/moj/components/timeline/_timeline.scss b/src/moj/components/timeline/_timeline.scss index 0073c75b6..bdb618a89 100755 --- a/src/moj/components/timeline/_timeline.scss +++ b/src/moj/components/timeline/_timeline.scss @@ -85,6 +85,17 @@ } +.moj-timeline__document-icon { + float: left; + margin-top: 4px; + margin-right: 4px; + fill: currentColor; + + @media screen and (forced-colors: active) { + fill: linkText; + } +} + .moj-timeline__document-link { background-image: url(#{$moj-images-path}icon-document.svg); background-repeat: no-repeat;