From 869f0d4198ef205e88a04b3a06b8759c2f7675b7 Mon Sep 17 00:00:00 2001 From: James King Date: Fri, 20 May 2022 08:33:05 +0100 Subject: [PATCH 1/5] Able to remove some legacy styles --- src/das/sass/legacy/_all.scss | 4 +--- src/das/sass/legacy/_form-panel.scss | 27 ---------------------- src/das/sass/legacy/_search.scss | 34 ---------------------------- 3 files changed, 1 insertion(+), 64 deletions(-) delete mode 100644 src/das/sass/legacy/_form-panel.scss delete mode 100644 src/das/sass/legacy/_search.scss diff --git a/src/das/sass/legacy/_all.scss b/src/das/sass/legacy/_all.scss index fc8217fcd..405760b56 100644 --- a/src/das/sass/legacy/_all.scss +++ b/src/das/sass/legacy/_all.scss @@ -1,3 +1 @@ -@import "form-panel"; -@import "pane"; -@import "search"; \ No newline at end of file +@import "pane"; \ No newline at end of file diff --git a/src/das/sass/legacy/_form-panel.scss b/src/das/sass/legacy/_form-panel.scss deleted file mode 100644 index 52aeff1f9..000000000 --- a/src/das/sass/legacy/_form-panel.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Description: Class to give a .govuk-form-group element (of a vertical -// list of radios/checkboxes) a border, and a bg colour to the legend heading - -.das-form-group--panel { - border: 1px solid govuk-colour('mid-grey'); - - .govuk-fieldset__legend { - background-color: govuk-colour('light-grey'); - width: 100%; - - .govuk-fieldset__heading { - padding: govuk-spacing(1) govuk-spacing(2); - } - } - - .form-group, - .govuk-radios, - .govuk-checkboxes { - padding-left: govuk-spacing(3); - padding-right: govuk-spacing(3); - padding-bottom: govuk-spacing(2); - } - - .form-group .govuk-button { - margin-bottom: govuk-spacing(2); - } -} diff --git a/src/das/sass/legacy/_search.scss b/src/das/sass/legacy/_search.scss deleted file mode 100644 index 47f908c76..000000000 --- a/src/das/sass/legacy/_search.scss +++ /dev/null @@ -1,34 +0,0 @@ - -.das-form-group-inline { - display: table; - width: 100%; - & > .govuk-input { - display: table-cell; - width: 100%; - } - - &.das-form-group-inline--sm { - .govuk-input { - padding: 0 govuk-spacing(1) 0 govuk-spacing(2); - border: 1px solid govuk-colour('mid-grey'); - @include govuk-font($size: 16);//1rem - } - .govuk-button { - width: 40px; - height: 40px; - } - .govuk-hint { - @include govuk-text-colour; - margin: govuk-spacing(2) 0; - } - } -} - -.das-form-group-inline__button-wrap { - display: table-cell; - vertical-align: top; - width: 1%; - & > .govuk-button { - margin: 0; - } -} \ No newline at end of file From 61924204873cb71b90dbc70579da4f6e766b51eb Mon Sep 17 00:00:00 2001 From: James King Date: Fri, 20 May 2022 08:33:44 +0100 Subject: [PATCH 2/5] Removed broken pagination styles --- .../components/pagination/_pagination.scss | 56 ------------------- 1 file changed, 56 deletions(-) diff --git a/src/das/sass/components/pagination/_pagination.scss b/src/das/sass/components/pagination/_pagination.scss index 756a55b3a..7600ec439 100644 --- a/src/das/sass/components/pagination/_pagination.scss +++ b/src/das/sass/components/pagination/_pagination.scss @@ -51,59 +51,3 @@ padding: 15px 0; } } - -.das-pagination-link { - width: 100%; - display: block; - text-align: right; - margin: govuk-spacing(3) 0 0 0; - ul { - padding: 0; - width: 100%; - } - .das-pagination-link__wrap { - font-size: inherit; - display: inline-block; - padding: 0 govuk-spacing(4); - width: auto; - .govuk-link { - text-decoration: none; - display: inline-block; - - &:hover { - text-decoration: underline; - } - &:focus {/* outline only as its a btn */ - outline: $govuk-focus-width solid $govuk-focus-colour; - outline-offset: 0; - } - - span { - display: block; - @include govuk-font($size: 16);//1rem - } - span:first-child { - @include govuk-font($size: 19);//1rem - } - } - - &.das-pagination-link--next { - padding-right: 40px; - @include arrow-right(str-replace('' + $govuk-link-colour, '#', '%23')); - background-position: right center; - background-repeat: no-repeat; - text-align: right; - - } - &.das-pagination-link--prev { - padding-left: 40px; - @include arrow-left(str-replace('' + $govuk-link-colour, '#', '%23')); - background-position: left center; - background-repeat: no-repeat; - text-align: left; - - float: left; - margin-right: govuk-spacing(4); - } - } -} \ No newline at end of file From b432f49a65d3d9f87933c60da38d162eaf76048f Mon Sep 17 00:00:00 2001 From: James King Date: Fri, 20 May 2022 08:34:30 +0100 Subject: [PATCH 3/5] Additional styles for filter header, if used on a legend element --- src/das/sass/components/filter/_filter.scss | 2 ++ src/das/sass/libs/_autocomplete.scss | 25 +++++++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/src/das/sass/components/filter/_filter.scss b/src/das/sass/components/filter/_filter.scss index 913888370..aab42b676 100644 --- a/src/das/sass/components/filter/_filter.scss +++ b/src/das/sass/components/filter/_filter.scss @@ -5,6 +5,8 @@ .das-filter__header { border: 1px solid $govuk-border-colour; padding: 10px 20px; + width: 100%; + box-sizing: border-box; } .das-filter__heading { diff --git a/src/das/sass/libs/_autocomplete.scss b/src/das/sass/libs/_autocomplete.scss index 3cae7501f..9b3521189 100644 --- a/src/das/sass/libs/_autocomplete.scss +++ b/src/das/sass/libs/_autocomplete.scss @@ -113,6 +113,31 @@ outline: none; } +@media (-ms-high-contrast: active), (forced-colors: active) { + .autocomplete__menu { + border-color: FieldText; + } + + .autocomplete__option { + background-color: Field; + color: FieldText; + } + + .autocomplete__option--focused, + .autocomplete__option:hover { + forced-color-adjust: none; /* prevent backplate from obscuring text */ + background-color: Highlight; + border-color: Highlight; + color: HighlightText; + + /* Prefer SelectedItem / SelectedItemText in browsers that support it */ + background-color: SelectedItem; + border-color: SelectedItem; + color: SelectedItemText; + outline-color: SelectedItemText; + } +} + .autocomplete__option--no-results { background-color: #FAFAFA; color: #646b6f; From 57fd7ea208e99fe1631de1386667ebe9ea81ddf6 Mon Sep 17 00:00:00 2001 From: James King Date: Fri, 20 May 2022 10:34:21 +0100 Subject: [PATCH 4/5] Additional pagination option - simple previous and next links --- .../components/pagination/_pagination.scss | 44 ++++++++++++++++--- .../template-pagination-simple.html | 18 ++++++++ .../pagination/template-pagination.html | 28 ++++++++++++ 3 files changed, 84 insertions(+), 6 deletions(-) create mode 100644 src/das/sass/components/pagination/template-pagination-simple.html create mode 100644 src/das/sass/components/pagination/template-pagination.html diff --git a/src/das/sass/components/pagination/_pagination.scss b/src/das/sass/components/pagination/_pagination.scss index 7600ec439..ff2c372e3 100644 --- a/src/das/sass/components/pagination/_pagination.scss +++ b/src/das/sass/components/pagination/_pagination.scss @@ -1,9 +1,4 @@ -@mixin arrow-right($color) { - background-image: url('data:image/svg+xml;utf8,'); -} -@mixin arrow-left($color) { - background-image: url('data:image/svg+xml;utf8,'); -} +// Pagination .das-pagination { @include govuk-font($size: 19); @@ -51,3 +46,40 @@ padding: 15px 0; } } + + +// Pagination simple - just previous and next links + +.das-pagination-simple { + @include govuk-font($size: 19); + margin: 20px 0; +} + +.das-pagination-simple__list { + list-style: none; + padding: 0; + margin: 0 -10px; + @include govuk-clearfix +} + +.das-pagination-simple__list-item { + float: left; + width: 50%; +} + +.das-pagination-simple__list-item--next { + text-align: right; +} + +.das-pagination-simple__link { + @include govuk-link-common; + @include govuk-link-style-no-visited-state; + display: block; + padding: 5px 10px; +} + +.das-pagination-simple__link-text { + display: block; + font-weight: 700; + margin-bottom: 3px; +} diff --git a/src/das/sass/components/pagination/template-pagination-simple.html b/src/das/sass/components/pagination/template-pagination-simple.html new file mode 100644 index 000000000..70cd44456 --- /dev/null +++ b/src/das/sass/components/pagination/template-pagination-simple.html @@ -0,0 +1,18 @@ + \ No newline at end of file diff --git a/src/das/sass/components/pagination/template-pagination.html b/src/das/sass/components/pagination/template-pagination.html new file mode 100644 index 000000000..617ac8377 --- /dev/null +++ b/src/das/sass/components/pagination/template-pagination.html @@ -0,0 +1,28 @@ + \ No newline at end of file From 4128aa9a4278f62df324384a6f8e90d63ddb13af Mon Sep 17 00:00:00 2001 From: James King Date: Fri, 10 Jun 2022 09:06:43 +0100 Subject: [PATCH 5/5] =?UTF-8?q?Align=20the=20=E2=80=98next=E2=80=99=20link?= =?UTF-8?q?=20to=20the=20right=20by=20default?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/das/sass/components/pagination/_pagination.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/das/sass/components/pagination/_pagination.scss b/src/das/sass/components/pagination/_pagination.scss index ff2c372e3..62498bd73 100644 --- a/src/das/sass/components/pagination/_pagination.scss +++ b/src/das/sass/components/pagination/_pagination.scss @@ -69,6 +69,7 @@ .das-pagination-simple__list-item--next { text-align: right; + float: right; } .das-pagination-simple__link {