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/components/pagination/_pagination.scss b/src/das/sass/components/pagination/_pagination.scss index 756a55b3a..62498bd73 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); @@ -52,58 +47,40 @@ } } -.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; - } +// Pagination simple - just previous and next links - span { - display: block; - @include govuk-font($size: 16);//1rem - } - span:first-child { - @include govuk-font($size: 19);//1rem - } - } +.das-pagination-simple { + @include govuk-font($size: 19); + margin: 20px 0; +} - &.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-simple__list { + list-style: none; + padding: 0; + margin: 0 -10px; + @include govuk-clearfix +} - } - &.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; +.das-pagination-simple__list-item { + float: left; + width: 50%; +} - float: left; - margin-right: govuk-spacing(4); - } - } -} \ No newline at end of file +.das-pagination-simple__list-item--next { + text-align: right; + float: 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 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 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;