@ministryofjustice/frontend 8.0.0 → 9.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/moj/all.bundle.js +1 -1
  2. package/moj/all.bundle.mjs +1 -1
  3. package/moj/all.bundle.mjs.map +1 -1
  4. package/moj/common/moj-frontend-version.mjs +1 -1
  5. package/moj/components/action-bar/_action-bar.scss +1 -1
  6. package/moj/components/action-bar/_action-bar.scss.map +1 -1
  7. package/moj/components/add-another/_add-another.scss +4 -4
  8. package/moj/components/add-another/_add-another.scss.map +1 -1
  9. package/moj/components/alert/_alert.scss +2 -2
  10. package/moj/components/alert/_alert.scss.map +1 -1
  11. package/moj/components/badge/_badge.scss +17 -7
  12. package/moj/components/badge/_badge.scss.map +1 -1
  13. package/moj/components/banner/_banner.scss +2 -2
  14. package/moj/components/banner/_banner.scss.map +1 -1
  15. package/moj/components/button-menu/_button-menu.scss +1 -1
  16. package/moj/components/button-menu/_button-menu.scss.map +1 -1
  17. package/moj/components/currency-input/_currency-input.scss +1 -1
  18. package/moj/components/currency-input/_currency-input.scss.map +1 -1
  19. package/moj/components/date-picker/_date-picker.scss +2 -1
  20. package/moj/components/date-picker/_date-picker.scss.map +1 -1
  21. package/moj/components/domain-specific/probation/footer/_footer.scss +2 -2
  22. package/moj/components/domain-specific/probation/footer/_footer.scss.map +1 -1
  23. package/moj/components/domain-specific/probation/header/_header.scss +11 -10
  24. package/moj/components/domain-specific/probation/header/_header.scss.map +1 -1
  25. package/moj/components/filter/_filter.scss +11 -11
  26. package/moj/components/filter/_filter.scss.map +1 -1
  27. package/moj/components/identity-bar/_identity-bar.scss +18 -6
  28. package/moj/components/identity-bar/_identity-bar.scss.map +1 -1
  29. package/moj/components/messages/_messages.scss +3 -3
  30. package/moj/components/messages/_messages.scss.map +1 -1
  31. package/moj/components/primary-navigation/_primary-navigation.scss +8 -7
  32. package/moj/components/primary-navigation/_primary-navigation.scss.map +1 -1
  33. package/moj/components/search-toggle/_search-toggle.scss +6 -6
  34. package/moj/components/search-toggle/_search-toggle.scss.map +1 -1
  35. package/moj/components/side-navigation/_side-navigation.scss +16 -16
  36. package/moj/components/side-navigation/_side-navigation.scss.map +1 -1
  37. package/moj/components/sortable-table/_sortable-table.scss +4 -4
  38. package/moj/components/sortable-table/_sortable-table.scss.map +1 -1
  39. package/moj/components/sub-navigation/_sub-navigation.scss +5 -5
  40. package/moj/components/sub-navigation/_sub-navigation.scss.map +1 -1
  41. package/moj/components/tag/_tag.scss +6 -6
  42. package/moj/components/tag/_tag.scss.map +1 -1
  43. package/moj/components/ticket-panel/_ticket-panel.scss +2 -2
  44. package/moj/components/ticket-panel/_ticket-panel.scss.map +1 -1
  45. package/moj/components/timeline/_timeline.scss +3 -3
  46. package/moj/components/timeline/_timeline.scss.map +1 -1
  47. package/moj/core/_moj-frontend-properties.scss +1 -1
  48. package/moj/core/_moj-frontend-properties.scss.map +1 -1
  49. package/moj/helpers/_links.scss +1 -1
  50. package/moj/helpers/_links.scss.map +1 -1
  51. package/moj/moj-frontend.min.css +1 -1
  52. package/moj/moj-frontend.min.css.map +1 -1
  53. package/moj/moj-frontend.min.js +1 -1
  54. package/moj/moj-frontend.min.js.map +1 -1
  55. package/moj/objects/_filter-layout.scss +1 -1
  56. package/moj/objects/_filter-layout.scss.map +1 -1
  57. package/moj/objects/_scrollable-pane.scss +4 -0
  58. package/moj/objects/_scrollable-pane.scss.map +1 -1
  59. package/moj/vendor/govuk-frontend/_base.scss +1 -5
  60. package/moj/vendor/govuk-frontend/_base.scss.map +1 -1
  61. package/package.json +2 -2
@@ -8,7 +8,7 @@
8
8
  *
9
9
  * {@link https://github.com/ministryofjustice/moj-frontend/releases}
10
10
  */
11
- const version = '8.0.0';
11
+ const version = '9.0.0-beta.1';
12
12
 
13
13
  export { version };
14
14
  //# sourceMappingURL=moj-frontend-version.mjs.map
@@ -23,7 +23,7 @@
23
23
  right: 0;
24
24
  width: 2px;
25
25
  height: 40px;
26
- background-color: govuk-colour("light-grey");
26
+ background-color: govuk-colour("black", $variant: "tint-95");
27
27
  }
28
28
  }
29
29
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/moj/components/action-bar/_action-bar.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;EACE,YAAY,EAAE,qBAAqB;AACrC;;AAEA;EACE,qBAAqB;EACrB,kBAAkB;;EAElB;IACE,YAAY;EACd;;EAEA;IACE,8BAA8B;IAC9B,qCAAqC,EAAE,kCAAkC;;IAEzE;MACE,WAAW;MACX,kBAAkB;MAClB,MAAM;MACN,QAAQ;MACR,UAAU;MACV,YAAY;MACZ,4CAA4C;IAC9C;EACF;;EAEA;IACE,wBAAwB;EAC1B;AACF","file":"_action-bar.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-action-bar {\n font-size: 0; // Removes white space\n}\n\n.moj-action-bar__filter {\n display: inline-block;\n position: relative;\n\n @include govuk-media-query($until: desktop) {\n float: right;\n }\n\n @include govuk-media-query($from: desktop) {\n margin-right: govuk-spacing(2);\n padding-right: govuk-spacing(2) + 2px; // Takes into account divider width\n\n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n width: 2px;\n height: 40px;\n background-color: govuk-colour(\"light-grey\");\n }\n }\n\n > .govuk-button {\n vertical-align: baseline;\n }\n}\n"]}
1
+ {"version":3,"sources":["../../../../src/moj/components/action-bar/_action-bar.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;EACE,YAAY,EAAE,qBAAqB;AACrC;;AAEA;EACE,qBAAqB;EACrB,kBAAkB;;EAElB;IACE,YAAY;EACd;;EAEA;IACE,8BAA8B;IAC9B,qCAAqC,EAAE,kCAAkC;;IAEzE;MACE,WAAW;MACX,kBAAkB;MAClB,MAAM;MACN,QAAQ;MACR,UAAU;MACV,YAAY;MACZ,4DAA4D;IAC9D;EACF;;EAEA;IACE,wBAAwB;EAC1B;AACF","file":"_action-bar.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-action-bar {\n font-size: 0; // Removes white space\n}\n\n.moj-action-bar__filter {\n display: inline-block;\n position: relative;\n\n @include govuk-media-query($until: desktop) {\n float: right;\n }\n\n @include govuk-media-query($from: desktop) {\n margin-right: govuk-spacing(2);\n padding-right: govuk-spacing(2) + 2px; // Takes into account divider width\n\n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n width: 2px;\n height: 40px;\n background-color: govuk-colour(\"black\", $variant: \"tint-95\");\n }\n }\n\n > .govuk-button {\n vertical-align: baseline;\n }\n}\n"]}
@@ -40,11 +40,11 @@
40
40
 
41
41
  .moj-add-another__heading:focus {
42
42
  outline: none;
43
- color: $govuk-focus-text-colour;
44
- background-color: $govuk-focus-colour;
43
+ color: govuk-functional-colour(focus-text);
44
+ background-color: govuk-functional-colour(focus);
45
45
  box-shadow:
46
- 0 -2px $govuk-focus-colour,
47
- 0 4px $govuk-focus-text-colour;
46
+ 0 -2px govuk-functional-colour(focus),
47
+ 0 4px govuk-functional-colour(focus-text);
48
48
  }
49
49
 
50
50
  /*# sourceMappingURL=_add-another.scss.map */
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/moj/components/add-another/_add-another.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE;IACE,kBAAkB;IAClB,SAAS;IACT,4BAA4B;IAC5B,UAAU;;IAEV;MACE,aAAa;IACf;EACF;;EAEA;IACE,WAAW;IACX,wBAAwB;IACxB,WAAW;;IAEX;MACE,WAAW;IACb;EACF;;EAEA;IACE,kBAAkB;IAClB,MAAM;IACN,QAAQ;IACR,WAAW;EACb;;EAEA;IACE,cAAc;EAChB;AACF;;AAEA;EACE,aAAa;EACb,+BAA+B;EAC/B,qCAAqC;EACrC;;kCAEgC;AAClC","file":"_add-another.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #ADD ANOTHER\n ========================================================================== */\n\n.moj-add-another {\n &__item {\n position: relative;\n margin: 0;\n margin-top: govuk-spacing(6);\n padding: 0;\n\n &:first-of-type {\n margin-top: 0;\n }\n }\n\n &__title {\n width: 100%;\n padding: 4px 100px 4px 0;\n float: left;\n\n & + .govuk-form-group {\n clear: left;\n }\n }\n\n &__remove-button {\n position: absolute;\n top: 0;\n right: 0;\n width: auto;\n }\n\n &__add-button {\n display: block;\n }\n}\n\n.moj-add-another__heading:focus {\n outline: none;\n color: $govuk-focus-text-colour;\n background-color: $govuk-focus-colour;\n box-shadow:\n 0 -2px $govuk-focus-colour,\n 0 4px $govuk-focus-text-colour;\n}\n"]}
1
+ {"version":3,"sources":["../../../../src/moj/components/add-another/_add-another.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE;IACE,kBAAkB;IAClB,SAAS;IACT,4BAA4B;IAC5B,UAAU;;IAEV;MACE,aAAa;IACf;EACF;;EAEA;IACE,WAAW;IACX,wBAAwB;IACxB,WAAW;;IAEX;MACE,WAAW;IACb;EACF;;EAEA;IACE,kBAAkB;IAClB,MAAM;IACN,QAAQ;IACR,WAAW;EACb;;EAEA;IACE,cAAc;EAChB;AACF;;AAEA;EACE,aAAa;EACb,0CAA0C;EAC1C,gDAAgD;EAChD;;6CAE2C;AAC7C","file":"_add-another.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #ADD ANOTHER\n ========================================================================== */\n\n.moj-add-another {\n &__item {\n position: relative;\n margin: 0;\n margin-top: govuk-spacing(6);\n padding: 0;\n\n &:first-of-type {\n margin-top: 0;\n }\n }\n\n &__title {\n width: 100%;\n padding: 4px 100px 4px 0;\n float: left;\n\n & + .govuk-form-group {\n clear: left;\n }\n }\n\n &__remove-button {\n position: absolute;\n top: 0;\n right: 0;\n width: auto;\n }\n\n &__add-button {\n display: block;\n }\n}\n\n.moj-add-another__heading:focus {\n outline: none;\n color: govuk-functional-colour(focus-text);\n background-color: govuk-functional-colour(focus);\n box-shadow:\n 0 -2px govuk-functional-colour(focus),\n 0 4px govuk-functional-colour(focus-text);\n}\n"]}
@@ -96,8 +96,8 @@
96
96
  /* Style variants
97
97
  ========================================================================== */
98
98
  .moj-alert--information {
99
- border-color: $govuk-brand-colour;
100
- color: $govuk-brand-colour;
99
+ border-color: govuk-functional-colour(brand);
100
+ color: govuk-functional-colour(brand);
101
101
 
102
102
  .moj-alert__dismiss,
103
103
  .moj-alert__content a {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/moj/components/alert/_alert.scss"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,yCAAyC;AACzC,kCAAkC;AAClC,uCAAuC;;AAEvC;EACE,iBAAiB;EACjB,aAAa;EACb,+BAA+B;EAC/B,yBAAyB;EACzB,6BAA6B;EAC7B,iCAAiC;EACjC,gDAAgD;EAChD,6DAAqD;EAArD,qDAAqD;EACrD,qBAAqB;EACrB,iCAAiC;;EAEjC;IACE,qDAAqD;EACvD;AACF;;AAEA;EACE;IACE,kEAA0D;IAA1D,0DAA0D;EAC5D;AACF;;AAEA;EACE,cAAc;EACd,4BAA4B;EAC5B,6BAA6B;EAC7B,kBAAkB;AACpB;;AAEA;EACE,cAAc;EACd,iCAAiC;EACjC,iCAAiC;EACjC,gBAAgB;EAChB,4BAA4B;EAC5B,mCAAmC;;EAEnC;IACE,iCAAiC;EACnC;AACF;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;;EAEnB;IACE,oBAAoB;IACpB,mBAAmB;EACrB;AACF;;AAEA;EACE,8BAA8B;EAC9B,gBAAgB;EAChB,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,6BAA6B;EAC7B,wBAAwB;EACxB,eAAe;EACf,gBAAgB;EAChB,mCAAmC;EACnC,0BAA0B;EAC1B,iCAAiC;EACjC,kCAAkC;AACpC;;AAEA;EACE,cAAc;EACd,aAAa;EACb,mCAAmC;EACnC,0BAA0B;EAC1B,mCAAmC;EACnC,qCAAqC;;EAErC;IACE,mCAAmC;EACrC;AACF;;AAEA;;;EAGE,gBAAgB;AAClB;;AAEA;+EAC+E;AAC/E;EACE,iCAAiC;EACjC,0BAA0B;;EAE1B;;IAEE,0BAA0B;IAC1B,iCAAiC;EACnC;AACF;;AAEA;EACE,mCAAmC;EACnC,4BAA4B;;EAE5B;;;IAGE,0BAA0B;IAC1B,iCAAiC;EACnC;AACF;;AAEA;EACE,iCAAiC;EACjC,0BAA0B;;EAE1B;IACE,+BAA+B;EACjC;;EAEA;;;IAGE,0BAA0B;IAC1B,+BAA+B;EACjC;AACF;;AAEA;EACE,iCAAiC;EACjC,0BAA0B;;EAE1B;;;IAGE,0BAA0B;IAC1B,+BAA+B;EACjC;AACF","file":"_alert.scss","sourcesContent":["@use \"../../helpers/links\" as *;\n@use \"../../objects/width-container\" as *;\n@use \"../../settings/colours\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-alert {\n display: -ms-grid;\n display: grid;\n margin-bottom: govuk-spacing(6);\n padding: govuk-spacing(2);\n border: 5px solid transparent;\n background: govuk-colour(\"white\");\n -ms-grid-columns: min-content fit-content(960px);\n grid-template-columns: min-content fit-content(960px);\n gap: govuk-spacing(2);\n @include govuk-font($size: false);\n\n &:focus {\n outline: $govuk-focus-width solid $govuk-focus-colour;\n }\n}\n\n.moj-alert[data-dismissible] {\n @include govuk-media-query($from: tablet) {\n grid-template-columns: min-content fit-content(920px) auto;\n }\n}\n\n.moj-alert__icon {\n display: block;\n width: govuk-px-to-rem(30px);\n height: govuk-px-to-rem(30px);\n fill: currentcolor;\n}\n\n.moj-alert__content {\n display: block;\n // Padding to align text with icon\n padding-top: govuk-px-to-rem(5px);\n overflow: hidden;\n color: govuk-colour(\"black\");\n @include govuk-font-size($size: 19);\n\n @include govuk-media-query($from: tablet) {\n padding-top: govuk-px-to-rem(2px);\n }\n}\n\n.moj-alert__action {\n grid-column-start: 2;\n grid-column-end: -1;\n\n @include govuk-media-query($from: tablet) {\n grid-column-start: 3;\n justify-self: right;\n }\n}\n\n.moj-alert__dismiss {\n // Give the button link styling\n margin-bottom: 0;\n padding: 0;\n border: none;\n color: unset;\n background-color: transparent;\n -webkit-appearance: none;\n cursor: pointer;\n appearance: none;\n @include govuk-font-size($size: 19);\n @include govuk-link-common;\n @include govuk-link-style-default;\n @include govuk-link-print-friendly;\n}\n\n.moj-alert__heading {\n display: block;\n margin-top: 0;\n margin-bottom: govuk-px-to-rem(5px);\n @include govuk-text-colour;\n @include govuk-font-size($size: 24);\n @include govuk-typography-weight-bold;\n\n @include govuk-media-query($from: tablet) {\n margin-bottom: govuk-px-to-rem(3px);\n }\n}\n\n.moj-alert__content p:last-child,\n.moj-alert__content a:last-child,\n.moj-alert__content ul:last-child {\n margin-bottom: 0;\n}\n\n/* Style variants\n ========================================================================== */\n.moj-alert--information {\n border-color: $govuk-brand-colour;\n color: $govuk-brand-colour;\n\n .moj-alert__dismiss,\n .moj-alert__content a {\n @include govuk-link-common;\n @include govuk-link-style-default;\n }\n}\n\n.moj-alert--success {\n border-color: govuk-colour(\"green\");\n color: govuk-colour(\"green\");\n\n .moj-alert__dismiss,\n .moj-alert__content a,\n .moj-alert__content .govuk-link {\n @include govuk-link-common;\n @include govuk-link-style-success;\n }\n}\n\n.moj-alert--warning {\n border-color: $moj-warning-colour;\n color: $moj-warning-colour;\n\n .moj-alert__dismiss {\n color: $moj-warning-link-colour;\n }\n\n .moj-alert__dismiss,\n .moj-alert__content a,\n .moj-alert__content .govuk-link {\n @include govuk-link-common;\n @include moj-link-style-warning;\n }\n}\n\n.moj-alert--error {\n border-color: govuk-colour(\"red\");\n color: govuk-colour(\"red\");\n\n .moj-alert__dismiss,\n .moj-alert__content a,\n .moj-alert__content .govuk-link {\n @include govuk-link-common;\n @include govuk-link-style-error;\n }\n}\n"]}
1
+ {"version":3,"sources":["../../../../src/moj/components/alert/_alert.scss"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,yCAAyC;AACzC,kCAAkC;AAClC,uCAAuC;;AAEvC;EACE,iBAAiB;EACjB,aAAa;EACb,+BAA+B;EAC/B,yBAAyB;EACzB,6BAA6B;EAC7B,iCAAiC;EACjC,gDAAgD;EAChD,6DAAqD;EAArD,qDAAqD;EACrD,qBAAqB;EACrB,iCAAiC;;EAEjC;IACE,qDAAqD;EACvD;AACF;;AAEA;EACE;IACE,kEAA0D;IAA1D,0DAA0D;EAC5D;AACF;;AAEA;EACE,cAAc;EACd,4BAA4B;EAC5B,6BAA6B;EAC7B,kBAAkB;AACpB;;AAEA;EACE,cAAc;EACd,iCAAiC;EACjC,iCAAiC;EACjC,gBAAgB;EAChB,4BAA4B;EAC5B,mCAAmC;;EAEnC;IACE,iCAAiC;EACnC;AACF;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;;EAEnB;IACE,oBAAoB;IACpB,mBAAmB;EACrB;AACF;;AAEA;EACE,8BAA8B;EAC9B,gBAAgB;EAChB,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,6BAA6B;EAC7B,wBAAwB;EACxB,eAAe;EACf,gBAAgB;EAChB,mCAAmC;EACnC,0BAA0B;EAC1B,iCAAiC;EACjC,kCAAkC;AACpC;;AAEA;EACE,cAAc;EACd,aAAa;EACb,mCAAmC;EACnC,0BAA0B;EAC1B,mCAAmC;EACnC,qCAAqC;;EAErC;IACE,mCAAmC;EACrC;AACF;;AAEA;;;EAGE,gBAAgB;AAClB;;AAEA;+EAC+E;AAC/E;EACE,4CAA4C;EAC5C,qCAAqC;;EAErC;;IAEE,0BAA0B;IAC1B,iCAAiC;EACnC;AACF;;AAEA;EACE,mCAAmC;EACnC,4BAA4B;;EAE5B;;;IAGE,0BAA0B;IAC1B,iCAAiC;EACnC;AACF;;AAEA;EACE,iCAAiC;EACjC,0BAA0B;;EAE1B;IACE,+BAA+B;EACjC;;EAEA;;;IAGE,0BAA0B;IAC1B,+BAA+B;EACjC;AACF;;AAEA;EACE,iCAAiC;EACjC,0BAA0B;;EAE1B;;;IAGE,0BAA0B;IAC1B,+BAA+B;EACjC;AACF","file":"_alert.scss","sourcesContent":["@use \"../../helpers/links\" as *;\n@use \"../../objects/width-container\" as *;\n@use \"../../settings/colours\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-alert {\n display: -ms-grid;\n display: grid;\n margin-bottom: govuk-spacing(6);\n padding: govuk-spacing(2);\n border: 5px solid transparent;\n background: govuk-colour(\"white\");\n -ms-grid-columns: min-content fit-content(960px);\n grid-template-columns: min-content fit-content(960px);\n gap: govuk-spacing(2);\n @include govuk-font($size: false);\n\n &:focus {\n outline: $govuk-focus-width solid $govuk-focus-colour;\n }\n}\n\n.moj-alert[data-dismissible] {\n @include govuk-media-query($from: tablet) {\n grid-template-columns: min-content fit-content(920px) auto;\n }\n}\n\n.moj-alert__icon {\n display: block;\n width: govuk-px-to-rem(30px);\n height: govuk-px-to-rem(30px);\n fill: currentcolor;\n}\n\n.moj-alert__content {\n display: block;\n // Padding to align text with icon\n padding-top: govuk-px-to-rem(5px);\n overflow: hidden;\n color: govuk-colour(\"black\");\n @include govuk-font-size($size: 19);\n\n @include govuk-media-query($from: tablet) {\n padding-top: govuk-px-to-rem(2px);\n }\n}\n\n.moj-alert__action {\n grid-column-start: 2;\n grid-column-end: -1;\n\n @include govuk-media-query($from: tablet) {\n grid-column-start: 3;\n justify-self: right;\n }\n}\n\n.moj-alert__dismiss {\n // Give the button link styling\n margin-bottom: 0;\n padding: 0;\n border: none;\n color: unset;\n background-color: transparent;\n -webkit-appearance: none;\n cursor: pointer;\n appearance: none;\n @include govuk-font-size($size: 19);\n @include govuk-link-common;\n @include govuk-link-style-default;\n @include govuk-link-print-friendly;\n}\n\n.moj-alert__heading {\n display: block;\n margin-top: 0;\n margin-bottom: govuk-px-to-rem(5px);\n @include govuk-text-colour;\n @include govuk-font-size($size: 24);\n @include govuk-typography-weight-bold;\n\n @include govuk-media-query($from: tablet) {\n margin-bottom: govuk-px-to-rem(3px);\n }\n}\n\n.moj-alert__content p:last-child,\n.moj-alert__content a:last-child,\n.moj-alert__content ul:last-child {\n margin-bottom: 0;\n}\n\n/* Style variants\n ========================================================================== */\n.moj-alert--information {\n border-color: govuk-functional-colour(brand);\n color: govuk-functional-colour(brand);\n\n .moj-alert__dismiss,\n .moj-alert__content a {\n @include govuk-link-common;\n @include govuk-link-style-default;\n }\n}\n\n.moj-alert--success {\n border-color: govuk-colour(\"green\");\n color: govuk-colour(\"green\");\n\n .moj-alert__dismiss,\n .moj-alert__content a,\n .moj-alert__content .govuk-link {\n @include govuk-link-common;\n @include govuk-link-style-success;\n }\n}\n\n.moj-alert--warning {\n border-color: $moj-warning-colour;\n color: $moj-warning-colour;\n\n .moj-alert__dismiss {\n color: $moj-warning-link-colour;\n }\n\n .moj-alert__dismiss,\n .moj-alert__content a,\n .moj-alert__content .govuk-link {\n @include govuk-link-common;\n @include moj-link-style-warning;\n }\n}\n\n.moj-alert--error {\n border-color: govuk-colour(\"red\");\n color: govuk-colour(\"red\");\n\n .moj-alert__dismiss,\n .moj-alert__content a,\n .moj-alert__content .govuk-link {\n @include govuk-link-common;\n @include govuk-link-style-error;\n }\n}\n"]}
@@ -7,13 +7,23 @@
7
7
  .moj-badge {
8
8
  display: inline-block;
9
9
  padding: 0 govuk-spacing(1);
10
- border: 2px solid $govuk-brand-colour;
10
+ border: 2px solid govuk-functional-colour(brand);
11
11
  outline: 2px solid transparent;
12
12
  outline-offset: -2px;
13
- color: $govuk-brand-colour;
13
+ color: govuk-functional-colour(brand);
14
+ font-size: 12px;
15
+ line-height: 15px;
14
16
  text-transform: uppercase;
15
17
  vertical-align: middle;
16
- @include govuk-font($size: 14, $weight: "bold");
18
+
19
+ /* no size argument as we are manually using step 14 from the legacy type
20
+ * scale */
21
+ @include govuk-font($size: false, $weight: "bold");
22
+
23
+ @include govuk-media-query(tablet) {
24
+ font-size: 14px;
25
+ line-height: 20px;
26
+ }
17
27
 
18
28
  &--purple {
19
29
  border-color: govuk-colour("purple");
@@ -21,8 +31,8 @@
21
31
  }
22
32
 
23
33
  &--bright-purple {
24
- border-color: govuk-colour("bright-purple");
25
- color: govuk-colour("bright-purple");
34
+ border-color: govuk-colour("magenta", $variant: "shade-25");
35
+ color: govuk-colour("magenta", $variant: "shade-25");
26
36
  }
27
37
 
28
38
  &--red {
@@ -46,8 +56,8 @@
46
56
  }
47
57
 
48
58
  &--grey {
49
- border-color: govuk-colour("dark-grey");
50
- color: govuk-colour("dark-grey");
59
+ border-color: govuk-colour("black", $variant: "tint-25");
60
+ color: govuk-colour("black", $variant: "tint-25");
51
61
  }
52
62
 
53
63
  &--large {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/moj/components/badge/_badge.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,qBAAqB;EACrB,2BAA2B;EAC3B,qCAAqC;EACrC,8BAA8B;EAC9B,oBAAoB;EACpB,0BAA0B;EAC1B,yBAAyB;EACzB,sBAAsB;EACtB,+CAA+C;;EAE/C;IACE,oCAAoC;IACpC,6BAA6B;EAC/B;;EAEA;IACE,2CAA2C;IAC3C,oCAAoC;EACtC;;EAEA;IACE,iCAAiC;IACjC,0BAA0B;EAC5B;;EAEA;IACE,mCAAmC;IACnC,4BAA4B;EAC9B;;EAEA;IACE,kCAAkC;IAClC,2BAA2B;EAC7B;;EAEA;IACE,mCAAmC;IACnC,4BAA4B;EAC9B;;EAEA;IACE,uCAAuC;IACvC,gCAAgC;EAClC;;EAEA;IACE,+CAA+C;EACjD;AACF","file":"_badge.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #BADGE\n ========================================================================== */\n\n.moj-badge {\n display: inline-block;\n padding: 0 govuk-spacing(1);\n border: 2px solid $govuk-brand-colour;\n outline: 2px solid transparent;\n outline-offset: -2px;\n color: $govuk-brand-colour;\n text-transform: uppercase;\n vertical-align: middle;\n @include govuk-font($size: 14, $weight: \"bold\");\n\n &--purple {\n border-color: govuk-colour(\"purple\");\n color: govuk-colour(\"purple\");\n }\n\n &--bright-purple {\n border-color: govuk-colour(\"bright-purple\");\n color: govuk-colour(\"bright-purple\");\n }\n\n &--red {\n border-color: govuk-colour(\"red\");\n color: govuk-colour(\"red\");\n }\n\n &--green {\n border-color: govuk-colour(\"green\");\n color: govuk-colour(\"green\");\n }\n\n &--blue {\n border-color: govuk-colour(\"blue\");\n color: govuk-colour(\"blue\");\n }\n\n &--black {\n border-color: govuk-colour(\"black\");\n color: govuk-colour(\"black\");\n }\n\n &--grey {\n border-color: govuk-colour(\"dark-grey\");\n color: govuk-colour(\"dark-grey\");\n }\n\n &--large {\n @include govuk-font($size: 16, $weight: \"bold\");\n }\n}\n"]}
1
+ {"version":3,"sources":["../../../../src/moj/components/badge/_badge.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,qBAAqB;EACrB,2BAA2B;EAC3B,gDAAgD;EAChD,8BAA8B;EAC9B,oBAAoB;EACpB,qCAAqC;EACrC,eAAe;EACf,iBAAiB;EACjB,yBAAyB;EACzB,sBAAsB;;EAEtB;WACS;EACT,kDAAkD;;EAElD;IACE,eAAe;IACf,iBAAiB;EACnB;;EAEA;IACE,oCAAoC;IACpC,6BAA6B;EAC/B;;EAEA;IACE,2DAA2D;IAC3D,oDAAoD;EACtD;;EAEA;IACE,iCAAiC;IACjC,0BAA0B;EAC5B;;EAEA;IACE,mCAAmC;IACnC,4BAA4B;EAC9B;;EAEA;IACE,kCAAkC;IAClC,2BAA2B;EAC7B;;EAEA;IACE,mCAAmC;IACnC,4BAA4B;EAC9B;;EAEA;IACE,wDAAwD;IACxD,iDAAiD;EACnD;;EAEA;IACE,+CAA+C;EACjD;AACF","file":"_badge.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #BADGE\n ========================================================================== */\n\n.moj-badge {\n display: inline-block;\n padding: 0 govuk-spacing(1);\n border: 2px solid govuk-functional-colour(brand);\n outline: 2px solid transparent;\n outline-offset: -2px;\n color: govuk-functional-colour(brand);\n font-size: 12px;\n line-height: 15px;\n text-transform: uppercase;\n vertical-align: middle;\n\n /* no size argument as we are manually using step 14 from the legacy type\n * scale */\n @include govuk-font($size: false, $weight: \"bold\");\n\n @include govuk-media-query(tablet) {\n font-size: 14px;\n line-height: 20px;\n }\n\n &--purple {\n border-color: govuk-colour(\"purple\");\n color: govuk-colour(\"purple\");\n }\n\n &--bright-purple {\n border-color: govuk-colour(\"magenta\", $variant: \"shade-25\");\n color: govuk-colour(\"magenta\", $variant: \"shade-25\");\n }\n\n &--red {\n border-color: govuk-colour(\"red\");\n color: govuk-colour(\"red\");\n }\n\n &--green {\n border-color: govuk-colour(\"green\");\n color: govuk-colour(\"green\");\n }\n\n &--blue {\n border-color: govuk-colour(\"blue\");\n color: govuk-colour(\"blue\");\n }\n\n &--black {\n border-color: govuk-colour(\"black\");\n color: govuk-colour(\"black\");\n }\n\n &--grey {\n border-color: govuk-colour(\"black\", $variant: \"tint-25\");\n color: govuk-colour(\"black\", $variant: \"tint-25\");\n }\n\n &--large {\n @include govuk-font($size: 16, $weight: \"bold\");\n }\n}\n"]}
@@ -7,8 +7,8 @@
7
7
  .moj-banner {
8
8
  margin-bottom: govuk-spacing(6);
9
9
  padding: govuk-spacing(2);
10
- border: 5px solid $govuk-brand-colour;
11
- color: $govuk-brand-colour;
10
+ border: 5px solid govuk-functional-colour(brand);
11
+ color: govuk-functional-colour(brand);
12
12
  font-size: 0; // Removes white space when using inline-block on child element.
13
13
  }
14
14
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/moj/components/banner/_banner.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,+BAA+B;EAC/B,yBAAyB;EACzB,qCAAqC;EACrC,0BAA0B;EAC1B,YAAY,EAAE,+DAA+D;AAC/E;;AAEA;EACE,8BAA8B;EAC9B,WAAW;EACX,kBAAkB;AACpB;;AAEA;EACE,cAAc;EACd,gBAAgB;EAChB,4BAA4B;EAC5B,8BAA8B;AAChC;;AAEA;EACE,+BAA+B;AACjC;;AAEA;;EAEE,gBAAgB;AAClB;;AAEA;EACE,8BAA8B;AAChC;;AAEA;+EAC+E;;AAE/E;EACE,mCAAmC;EACnC,4BAA4B;AAC9B;;AAEA;EACE,iCAAiC;EACjC,0BAA0B;AAC5B","file":"_banner.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #BANNER\n ========================================================================== */\n\n.moj-banner {\n margin-bottom: govuk-spacing(6);\n padding: govuk-spacing(2);\n border: 5px solid $govuk-brand-colour;\n color: $govuk-brand-colour;\n font-size: 0; // Removes white space when using inline-block on child element.\n}\n\n.moj-banner__icon {\n margin-right: govuk-spacing(2);\n float: left;\n fill: currentcolor;\n}\n\n.moj-banner__message {\n display: block;\n overflow: hidden;\n color: govuk-colour(\"black\");\n @include govuk-font($size: 19);\n}\n\n.moj-banner__message h2 {\n margin-bottom: govuk-spacing(2);\n}\n\n.moj-banner__message h2:last-child,\n.moj-banner__message p:last-child {\n margin-bottom: 0;\n}\n\n.moj-banner__assistive {\n @include govuk-visually-hidden;\n}\n\n/* Style variants\n ========================================================================== */\n\n.moj-banner--success {\n border-color: govuk-colour(\"green\");\n color: govuk-colour(\"green\");\n}\n\n.moj-banner--warning {\n border-color: govuk-colour(\"red\");\n color: govuk-colour(\"red\");\n}\n"]}
1
+ {"version":3,"sources":["../../../../src/moj/components/banner/_banner.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,+BAA+B;EAC/B,yBAAyB;EACzB,gDAAgD;EAChD,qCAAqC;EACrC,YAAY,EAAE,+DAA+D;AAC/E;;AAEA;EACE,8BAA8B;EAC9B,WAAW;EACX,kBAAkB;AACpB;;AAEA;EACE,cAAc;EACd,gBAAgB;EAChB,4BAA4B;EAC5B,8BAA8B;AAChC;;AAEA;EACE,+BAA+B;AACjC;;AAEA;;EAEE,gBAAgB;AAClB;;AAEA;EACE,8BAA8B;AAChC;;AAEA;+EAC+E;;AAE/E;EACE,mCAAmC;EACnC,4BAA4B;AAC9B;;AAEA;EACE,iCAAiC;EACjC,0BAA0B;AAC5B","file":"_banner.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #BANNER\n ========================================================================== */\n\n.moj-banner {\n margin-bottom: govuk-spacing(6);\n padding: govuk-spacing(2);\n border: 5px solid govuk-functional-colour(brand);\n color: govuk-functional-colour(brand);\n font-size: 0; // Removes white space when using inline-block on child element.\n}\n\n.moj-banner__icon {\n margin-right: govuk-spacing(2);\n float: left;\n fill: currentcolor;\n}\n\n.moj-banner__message {\n display: block;\n overflow: hidden;\n color: govuk-colour(\"black\");\n @include govuk-font($size: 19);\n}\n\n.moj-banner__message h2 {\n margin-bottom: govuk-spacing(2);\n}\n\n.moj-banner__message h2:last-child,\n.moj-banner__message p:last-child {\n margin-bottom: 0;\n}\n\n.moj-banner__assistive {\n @include govuk-visually-hidden;\n}\n\n/* Style variants\n ========================================================================== */\n\n.moj-banner--success {\n border-color: govuk-colour(\"green\");\n color: govuk-colour(\"green\");\n}\n\n.moj-banner--warning {\n border-color: govuk-colour(\"red\");\n color: govuk-colour(\"red\");\n}\n"]}
@@ -72,7 +72,7 @@
72
72
  border-bottom: 1px solid $moj-button-menu-color;
73
73
  border-radius: 0;
74
74
  color: $govuk-text-colour;
75
- background-color: govuk-colour("light-grey");
75
+ background-color: govuk-colour("black", $variant: "tint-95");
76
76
  text-align: left;
77
77
  vertical-align: top;
78
78
  cursor: pointer;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/moj/components/button-menu/_button-menu.scss"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,uCAAuC;;AAEvC;EACE,qBAAqB;EACrB,kBAAkB;AACpB;;AAEA;;EAEE,gBAAgB;EAChB,wBAAwB;AAC1B;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;EACnB,QAAQ;AACV;;AAEA;EACE,eAAe;EACf,yBAAyB;AAC3B;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,WAAW;EACX,eAAe,EAAE,qBAAqB;EACtC,UAAU;EACV,gBAAgB;;EAEhB;;IAEE,kBAAkB;IAClB,YAAY;EACd;;EAEA;IACE,QAAQ;EACV;AACF;;AAEA,0BAA0B;AAC1B;EACE,qBAAqB;EACrB,WAAW,EAAE,2BAA2B;EACxC,8BAA8B;EAC9B,+BAA+B;EAC/B,wBAAwB;;EAExB;IACE,eAAe;EACjB;AACF;;AAEA,uBAAuB;AACvB;EACE,sBAAsB;EACtB,qBAAqB;EACrB,kBAAkB;EAClB,WAAW;EACX,aAAa;EACb,eAAe;EACf,gBAAgB;EAChB,cAAc;EACd,yBAAyB;EACzB,0DAA0D;EAC1D,+CAA+C;EAC/C,gBAAgB;EAChB,yBAAyB;EACzB,4CAA4C;EAC5C,gBAAgB;EAChB,mBAAmB;EACnB,eAAe;EACf,wBAAwB;EACxB,gBAAgB;EAChB,kDAAkD;;EAElD;;;;IAIE,yBAAyB;IACzB,qBAAqB;EACvB;;EAEA;;IAEE,4BAA4B;EAC9B;;EAEA,wCAAwC;EACxC;IACE,UAAU;IACV,SAAS;EACX;;EAEA;IACE,8CAA8C;EAChD;;EAEA;IACE,WAAW;IACX,iCAAiC;IACjC,6CAA6C;IAC7C,+CAA+C;EACjD;;EAEA;IACE,iCAAiC;IACjC,+BAA+B;IAC/B,qCAAqC;IACrC,4CAA4C;EAC9C;AACF","file":"_button-menu.scss","sourcesContent":["@use \"../../settings/colours\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-button-menu {\n display: inline-block;\n position: relative;\n}\n\n.moj-button-menu__toggle-button,\n.moj-button-menu__single-button {\n margin-bottom: 0;\n vertical-align: baseline;\n}\n\n.moj-button-menu__toggle-button span {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n\n.moj-button-menu__toggle-button svg {\n margin-top: 2px;\n transform: rotate(180deg);\n}\n\n.moj-button-menu__toggle-button[aria-expanded=\"true\"] svg {\n transform: rotate(0deg);\n}\n\n.moj-button-menu__wrapper {\n z-index: 10;\n margin: 5px 0 0; // 2px shadow, 3px gap\n padding: 0;\n list-style: none;\n\n &,\n .moj-button-group--inline {\n position: absolute;\n width: 200px;\n }\n\n &--right {\n right: 0;\n }\n}\n\n/* Menu items with no JS */\n.moj-button-menu__item {\n display: inline-block;\n width: auto; // Override GDS’s 100% width\n margin-right: govuk-spacing(2);\n margin-bottom: govuk-spacing(2);\n vertical-align: baseline;\n\n &:last-child {\n margin-right: 0;\n }\n}\n\n/* Menu items with JS */\n.moj-button-menu li > .moj-button-menu__item {\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n width: 100%;\n margin-top: 0;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: govuk-spacing(2);\n border: $govuk-border-width-form-element solid transparent;\n border-bottom: 1px solid $moj-button-menu-color;\n border-radius: 0;\n color: $govuk-text-colour;\n background-color: govuk-colour(\"light-grey\");\n text-align: left;\n vertical-align: top;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n @include govuk-font($size: 19, $line-height: 19px);\n\n &:link,\n &:visited,\n &:active,\n &:hover {\n color: $govuk-text-colour;\n text-decoration: none;\n }\n\n &:active,\n &:hover {\n color: govuk-colour(\"white\");\n }\n\n // Fix unwanted button padding in Firefox\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n\n &:hover {\n background-color: $moj-button-menu-hover-color;\n }\n\n &:focus {\n z-index: 10;\n border-color: $govuk-focus-colour;\n outline: $govuk-focus-width solid transparent;\n box-shadow: inset 0 0 0 1px $govuk-focus-colour;\n }\n\n &:focus:not(:active):not(:hover) {\n border-color: $govuk-focus-colour;\n color: $govuk-focus-text-colour;\n background-color: $govuk-focus-colour;\n box-shadow: 0 2px 0 $govuk-focus-text-colour;\n }\n}\n"]}
1
+ {"version":3,"sources":["../../../../src/moj/components/button-menu/_button-menu.scss"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,uCAAuC;;AAEvC;EACE,qBAAqB;EACrB,kBAAkB;AACpB;;AAEA;;EAEE,gBAAgB;EAChB,wBAAwB;AAC1B;;AAEA;EACE,oBAAoB;EACpB,mBAAmB;EACnB,QAAQ;AACV;;AAEA;EACE,eAAe;EACf,yBAAyB;AAC3B;;AAEA;EACE,uBAAuB;AACzB;;AAEA;EACE,WAAW;EACX,eAAe,EAAE,qBAAqB;EACtC,UAAU;EACV,gBAAgB;;EAEhB;;IAEE,kBAAkB;IAClB,YAAY;EACd;;EAEA;IACE,QAAQ;EACV;AACF;;AAEA,0BAA0B;AAC1B;EACE,qBAAqB;EACrB,WAAW,EAAE,2BAA2B;EACxC,8BAA8B;EAC9B,+BAA+B;EAC/B,wBAAwB;;EAExB;IACE,eAAe;EACjB;AACF;;AAEA,uBAAuB;AACvB;EACE,sBAAsB;EACtB,qBAAqB;EACrB,kBAAkB;EAClB,WAAW;EACX,aAAa;EACb,eAAe;EACf,gBAAgB;EAChB,cAAc;EACd,yBAAyB;EACzB,0DAA0D;EAC1D,+CAA+C;EAC/C,gBAAgB;EAChB,yBAAyB;EACzB,4DAA4D;EAC5D,gBAAgB;EAChB,mBAAmB;EACnB,eAAe;EACf,wBAAwB;EACxB,gBAAgB;EAChB,kDAAkD;;EAElD;;;;IAIE,yBAAyB;IACzB,qBAAqB;EACvB;;EAEA;;IAEE,4BAA4B;EAC9B;;EAEA,wCAAwC;EACxC;IACE,UAAU;IACV,SAAS;EACX;;EAEA;IACE,8CAA8C;EAChD;;EAEA;IACE,WAAW;IACX,iCAAiC;IACjC,6CAA6C;IAC7C,+CAA+C;EACjD;;EAEA;IACE,iCAAiC;IACjC,+BAA+B;IAC/B,qCAAqC;IACrC,4CAA4C;EAC9C;AACF","file":"_button-menu.scss","sourcesContent":["@use \"../../settings/colours\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-button-menu {\n display: inline-block;\n position: relative;\n}\n\n.moj-button-menu__toggle-button,\n.moj-button-menu__single-button {\n margin-bottom: 0;\n vertical-align: baseline;\n}\n\n.moj-button-menu__toggle-button span {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n\n.moj-button-menu__toggle-button svg {\n margin-top: 2px;\n transform: rotate(180deg);\n}\n\n.moj-button-menu__toggle-button[aria-expanded=\"true\"] svg {\n transform: rotate(0deg);\n}\n\n.moj-button-menu__wrapper {\n z-index: 10;\n margin: 5px 0 0; // 2px shadow, 3px gap\n padding: 0;\n list-style: none;\n\n &,\n .moj-button-group--inline {\n position: absolute;\n width: 200px;\n }\n\n &--right {\n right: 0;\n }\n}\n\n/* Menu items with no JS */\n.moj-button-menu__item {\n display: inline-block;\n width: auto; // Override GDS’s 100% width\n margin-right: govuk-spacing(2);\n margin-bottom: govuk-spacing(2);\n vertical-align: baseline;\n\n &:last-child {\n margin-right: 0;\n }\n}\n\n/* Menu items with JS */\n.moj-button-menu li > .moj-button-menu__item {\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n width: 100%;\n margin-top: 0;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: govuk-spacing(2);\n border: $govuk-border-width-form-element solid transparent;\n border-bottom: 1px solid $moj-button-menu-color;\n border-radius: 0;\n color: $govuk-text-colour;\n background-color: govuk-colour(\"black\", $variant: \"tint-95\");\n text-align: left;\n vertical-align: top;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n @include govuk-font($size: 19, $line-height: 19px);\n\n &:link,\n &:visited,\n &:active,\n &:hover {\n color: $govuk-text-colour;\n text-decoration: none;\n }\n\n &:active,\n &:hover {\n color: govuk-colour(\"white\");\n }\n\n // Fix unwanted button padding in Firefox\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n\n &:hover {\n background-color: $moj-button-menu-hover-color;\n }\n\n &:focus {\n z-index: 10;\n border-color: $govuk-focus-colour;\n outline: $govuk-focus-width solid transparent;\n box-shadow: inset 0 0 0 1px $govuk-focus-colour;\n }\n\n &:focus:not(:active):not(:hover) {\n border-color: $govuk-focus-colour;\n color: $govuk-focus-text-colour;\n background-color: $govuk-focus-colour;\n box-shadow: 0 2px 0 $govuk-focus-text-colour;\n }\n}\n"]}
@@ -10,7 +10,7 @@
10
10
  margin: 2px 0 0 2px !important;
11
11
  padding: 5.5px 12px;
12
12
  border-right: 2px solid govuk-colour("black");
13
- background-color: govuk-colour("light-grey");
13
+ background-color: govuk-colour("black", $variant: "tint-95");
14
14
  @include govuk-font(19);
15
15
 
16
16
  &--error {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/moj/components/currency-input/_currency-input.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,kBAAkB;EAClB,sDAAsD;EACtD,8BAA8B;EAC9B,mBAAmB;EACnB,6CAA6C;EAC7C,4CAA4C;EAC5C,uBAAuB;;EAEvB;IACE,2CAA2C;IAC3C,4BAA4B;IAC5B,qCAAqC;EACvC;;EAEA;IACE,iBAAiB;EACnB;AACF;;AAEA;EACE,SAAS;EACT,kBAAkB;AACpB","file":"_currency-input.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #DENOTE\n ========================================================================== */\n\n.moj-label__currency {\n position: absolute;\n // stylelint-disable-next-line declaration-no-important\n margin: 2px 0 0 2px !important;\n padding: 5.5px 12px;\n border-right: 2px solid govuk-colour(\"black\");\n background-color: govuk-colour(\"light-grey\");\n @include govuk-font(19);\n\n &--error {\n border-right: 2px solid $govuk-error-colour;\n color: govuk-colour(\"white\");\n background-color: $govuk-error-colour;\n }\n\n @include govuk-media-query($until: tablet) {\n padding: 8px 12px;\n }\n}\n\n.moj-input__currency {\n margin: 0;\n padding-left: 40px;\n}\n"]}
1
+ {"version":3,"sources":["../../../../src/moj/components/currency-input/_currency-input.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,kBAAkB;EAClB,sDAAsD;EACtD,8BAA8B;EAC9B,mBAAmB;EACnB,6CAA6C;EAC7C,4DAA4D;EAC5D,uBAAuB;;EAEvB;IACE,2CAA2C;IAC3C,4BAA4B;IAC5B,qCAAqC;EACvC;;EAEA;IACE,iBAAiB;EACnB;AACF;;AAEA;EACE,SAAS;EACT,kBAAkB;AACpB","file":"_currency-input.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #DENOTE\n ========================================================================== */\n\n.moj-label__currency {\n position: absolute;\n // stylelint-disable-next-line declaration-no-important\n margin: 2px 0 0 2px !important;\n padding: 5.5px 12px;\n border-right: 2px solid govuk-colour(\"black\");\n background-color: govuk-colour(\"black\", $variant: \"tint-95\");\n @include govuk-font(19);\n\n &--error {\n border-right: 2px solid $govuk-error-colour;\n color: govuk-colour(\"white\");\n background-color: $govuk-error-colour;\n }\n\n @include govuk-media-query($until: tablet) {\n padding: 8px 12px;\n }\n}\n\n.moj-input__currency {\n margin: 0;\n padding-left: 40px;\n}\n"]}
@@ -108,7 +108,7 @@
108
108
  &[aria-disabled="true"],
109
109
  &[aria-disabled="true"]:hover {
110
110
  color: $govuk-text-colour;
111
- background-color: govuk-colour("light-grey");
111
+ background-color: govuk-colour("black", $variant: "tint-95");
112
112
  text-decoration: line-through;
113
113
  cursor: not-allowed;
114
114
  }
@@ -265,6 +265,7 @@
265
265
  }
266
266
  }
267
267
  }
268
+
268
269
  // stylelint-enable selector-no-qualifying-type
269
270
 
270
271
  .moj-datepicker__wrapper {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/moj/components/date-picker/_date-picker.scss"],"names":[],"mappings":"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","file":"_date-picker.scss","sourcesContent":["@use \"../../settings/colours\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-datepicker {\n position: relative;\n @include govuk-font(16);\n}\n\n.moj-datepicker__dialog {\n display: none;\n position: absolute;\n z-index: 2;\n top: 0;\n min-width: 280px;\n padding: govuk-spacing(4);\n transition:\n background-color 0.2s,\n outline-color 0.2s;\n outline: 2px solid $govuk-text-colour;\n outline-offset: -2px;\n background-color: govuk-colour(\"white\");\n}\n\n.moj-datepicker__dialog--open {\n display: block;\n}\n\n.moj-datepicker__dialog-header {\n display: flex;\n position: relative;\n margin-bottom: govuk-spacing(2);\n align-items: center;\n justify-content: space-between;\n}\n\n.moj-datepicker__dialog-title {\n margin-top: 0;\n margin-bottom: 0;\n font-weight: bold;\n @include govuk-font(16);\n}\n\n.moj-datepicker__dialog-navbuttons {\n display: flex;\n align-items: center;\n}\n\n.moj-datepicker__calendar {\n margin-bottom: govuk-spacing(4);\n border-collapse: collapse;\n\n tbody:focus-within {\n outline: 2px solid $govuk-focus-colour;\n }\n\n td {\n margin: 0;\n padding: 0;\n border: 0;\n outline: 0;\n }\n\n th {\n color: $govuk-text-colour;\n font-weight: bold;\n @include govuk-font(16);\n }\n}\n\n.moj-datepicker__dialog > .govuk-button-group {\n margin-bottom: 0;\n\n > * {\n margin-bottom: 0;\n }\n}\n\n.moj-datepicker__button {\n position: relative;\n width: 44px;\n height: 40px;\n margin: 0;\n padding: 0;\n border-width: 0;\n outline: 2px solid rgba(0, 0, 0, 0);\n outline-offset: -2px;\n color: $govuk-text-colour;\n background-color: transparent;\n @include govuk-font(16);\n\n @media (forced-colors: active) {\n // Don't show the bottom bar in forced-color modes as it blocks the outline\n &::after {\n display: none;\n }\n }\n\n &::after {\n content: \"\";\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: 4px;\n background-color: transparent;\n }\n\n &[aria-disabled=\"true\"],\n &[aria-disabled=\"true\"]:hover {\n color: $govuk-text-colour;\n background-color: govuk-colour(\"light-grey\");\n text-decoration: line-through;\n cursor: not-allowed;\n }\n\n &:hover {\n color: $govuk-text-colour;\n background-color: $moj-button-menu-color;\n text-decoration: none;\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n cursor: pointer;\n }\n\n &:focus {\n outline-color: transparent;\n color: $govuk-text-colour;\n background-color: $govuk-focus-colour;\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n\n &::after {\n background-color: $govuk-text-colour;\n }\n }\n\n &:focus:hover {\n outline-color: $govuk-focus-colour;\n background-color: $moj-button-menu-color;\n\n &::after {\n background-color: transparent;\n }\n }\n\n &--current:not(:focus) {\n outline-color: $govuk-link-colour;\n color: govuk-colour(\"white\");\n background-color: $govuk-link-colour;\n\n &::after {\n background-color: $govuk-link-colour;\n }\n }\n\n &--current[tabindex=\"-1\"] {\n outline-color: transparent;\n color: currentcolor;\n background: transparent;\n\n &::after {\n background-color: transparent;\n }\n }\n\n &--today {\n border: 2px solid $govuk-text-colour;\n }\n\n &--selected:not(:focus) {\n color: govuk-colour(\"white\");\n background-color: $govuk-link-colour;\n\n &::after {\n background-color: $govuk-link-colour;\n }\n\n &:hover {\n outline-color: $govuk-link-colour;\n color: $govuk-text-colour;\n background-color: $moj-button-menu-color;\n\n &::after {\n background-color: transparent;\n }\n }\n }\n}\n\n/*\n Default input with to .govuk-input--width-10 (10 chars)\n Allow that to be overriden by the input width modifiers or global width overrides.\n Width classes less than 10ch not included as that is narrower than a date.\n*/\n// stylelint-disable selector-no-qualifying-type\n.moj-datepicker input {\n max-width: 11.5em; // govuk-input--width-10\n\n &.govuk-input--width-30 {\n max-width: 29.5em;\n }\n\n &.govuk-input--width-20 {\n max-width: 20.5em;\n }\n\n &.govuk-\\!-width-full {\n // stylelint-disable-next-line declaration-no-important\n width: 100% !important;\n max-width: none;\n }\n\n &.govuk-\\!-width-three-quarters {\n // stylelint-disable-next-line declaration-no-important\n width: 100% !important;\n max-width: none;\n\n @include govuk-media-query($from: tablet) {\n // stylelint-disable-next-line declaration-no-important\n width: 75% !important;\n }\n }\n\n &.govuk-\\!-width-two-thirds {\n // stylelint-disable-next-line declaration-no-important\n width: 100% !important;\n max-width: none;\n\n @include govuk-media-query($from: tablet) {\n // stylelint-disable-next-line declaration-no-important\n width: 66.66% !important;\n }\n }\n\n &.govuk-\\!-width-one-half {\n // stylelint-disable-next-line declaration-no-important\n width: 100% !important;\n max-width: none;\n\n @include govuk-media-query($from: tablet) {\n // stylelint-disable-next-line declaration-no-important\n width: 50% !important;\n }\n }\n\n &.govuk-\\!-width-one-third {\n // stylelint-disable-next-line declaration-no-important\n width: 100% !important;\n max-width: none;\n\n @include govuk-media-query($from: tablet) {\n // stylelint-disable-next-line declaration-no-important\n width: 33.33% !important;\n }\n }\n\n &.govuk-\\!-width-one-quarter {\n // stylelint-disable-next-line declaration-no-important\n width: 100% !important;\n max-width: none;\n\n @include govuk-media-query($from: tablet) {\n // stylelint-disable-next-line declaration-no-important\n width: 25% !important;\n }\n }\n}\n// stylelint-enable selector-no-qualifying-type\n\n.moj-datepicker__wrapper {\n position: relative;\n}\n\n@media (min-width: 768px) {\n .moj-datepicker__dialog {\n width: auto;\n }\n}\n\n.moj-datepicker__toggle {\n height: 40px;\n padding-top: 6px;\n border: none;\n border-bottom: 4px solid rgba(0, 0, 0, 0);\n outline: 3px solid rgba(0, 0, 0, 0);\n outline-offset: -3px;\n color: govuk-colour(\"white\");\n background-color: $govuk-text-colour;\n cursor: pointer;\n\n &:focus {\n border-bottom: 4px solid $govuk-text-colour;\n color: $govuk-text-colour;\n background-color: $govuk-focus-colour;\n }\n\n &:hover {\n border-bottom: 4px solid $moj-button-menu-color;\n color: $govuk-text-colour;\n background-color: $moj-button-menu-color;\n }\n\n &:focus:hover {\n border-bottom: 4px solid $govuk-text-colour;\n color: $govuk-text-colour;\n background-color: $moj-button-menu-color;\n }\n}\n"]}
1
+ {"version":3,"sources":["../../../../src/moj/components/date-picker/_date-picker.scss"],"names":[],"mappings":"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","file":"_date-picker.scss","sourcesContent":["@use \"../../settings/colours\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-datepicker {\n position: relative;\n @include govuk-font(16);\n}\n\n.moj-datepicker__dialog {\n display: none;\n position: absolute;\n z-index: 2;\n top: 0;\n min-width: 280px;\n padding: govuk-spacing(4);\n transition:\n background-color 0.2s,\n outline-color 0.2s;\n outline: 2px solid $govuk-text-colour;\n outline-offset: -2px;\n background-color: govuk-colour(\"white\");\n}\n\n.moj-datepicker__dialog--open {\n display: block;\n}\n\n.moj-datepicker__dialog-header {\n display: flex;\n position: relative;\n margin-bottom: govuk-spacing(2);\n align-items: center;\n justify-content: space-between;\n}\n\n.moj-datepicker__dialog-title {\n margin-top: 0;\n margin-bottom: 0;\n font-weight: bold;\n @include govuk-font(16);\n}\n\n.moj-datepicker__dialog-navbuttons {\n display: flex;\n align-items: center;\n}\n\n.moj-datepicker__calendar {\n margin-bottom: govuk-spacing(4);\n border-collapse: collapse;\n\n tbody:focus-within {\n outline: 2px solid $govuk-focus-colour;\n }\n\n td {\n margin: 0;\n padding: 0;\n border: 0;\n outline: 0;\n }\n\n th {\n color: $govuk-text-colour;\n font-weight: bold;\n @include govuk-font(16);\n }\n}\n\n.moj-datepicker__dialog > .govuk-button-group {\n margin-bottom: 0;\n\n > * {\n margin-bottom: 0;\n }\n}\n\n.moj-datepicker__button {\n position: relative;\n width: 44px;\n height: 40px;\n margin: 0;\n padding: 0;\n border-width: 0;\n outline: 2px solid rgba(0, 0, 0, 0);\n outline-offset: -2px;\n color: $govuk-text-colour;\n background-color: transparent;\n @include govuk-font(16);\n\n @media (forced-colors: active) {\n // Don't show the bottom bar in forced-color modes as it blocks the outline\n &::after {\n display: none;\n }\n }\n\n &::after {\n content: \"\";\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: 4px;\n background-color: transparent;\n }\n\n &[aria-disabled=\"true\"],\n &[aria-disabled=\"true\"]:hover {\n color: $govuk-text-colour;\n background-color: govuk-colour(\"black\", $variant: \"tint-95\");\n text-decoration: line-through;\n cursor: not-allowed;\n }\n\n &:hover {\n color: $govuk-text-colour;\n background-color: $moj-button-menu-color;\n text-decoration: none;\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n cursor: pointer;\n }\n\n &:focus {\n outline-color: transparent;\n color: $govuk-text-colour;\n background-color: $govuk-focus-colour;\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n\n &::after {\n background-color: $govuk-text-colour;\n }\n }\n\n &:focus:hover {\n outline-color: $govuk-focus-colour;\n background-color: $moj-button-menu-color;\n\n &::after {\n background-color: transparent;\n }\n }\n\n &--current:not(:focus) {\n outline-color: $govuk-link-colour;\n color: govuk-colour(\"white\");\n background-color: $govuk-link-colour;\n\n &::after {\n background-color: $govuk-link-colour;\n }\n }\n\n &--current[tabindex=\"-1\"] {\n outline-color: transparent;\n color: currentcolor;\n background: transparent;\n\n &::after {\n background-color: transparent;\n }\n }\n\n &--today {\n border: 2px solid $govuk-text-colour;\n }\n\n &--selected:not(:focus) {\n color: govuk-colour(\"white\");\n background-color: $govuk-link-colour;\n\n &::after {\n background-color: $govuk-link-colour;\n }\n\n &:hover {\n outline-color: $govuk-link-colour;\n color: $govuk-text-colour;\n background-color: $moj-button-menu-color;\n\n &::after {\n background-color: transparent;\n }\n }\n }\n}\n\n/*\n Default input with to .govuk-input--width-10 (10 chars)\n Allow that to be overriden by the input width modifiers or global width overrides.\n Width classes less than 10ch not included as that is narrower than a date.\n*/\n// stylelint-disable selector-no-qualifying-type\n.moj-datepicker input {\n max-width: 11.5em; // govuk-input--width-10\n\n &.govuk-input--width-30 {\n max-width: 29.5em;\n }\n\n &.govuk-input--width-20 {\n max-width: 20.5em;\n }\n\n &.govuk-\\!-width-full {\n // stylelint-disable-next-line declaration-no-important\n width: 100% !important;\n max-width: none;\n }\n\n &.govuk-\\!-width-three-quarters {\n // stylelint-disable-next-line declaration-no-important\n width: 100% !important;\n max-width: none;\n\n @include govuk-media-query($from: tablet) {\n // stylelint-disable-next-line declaration-no-important\n width: 75% !important;\n }\n }\n\n &.govuk-\\!-width-two-thirds {\n // stylelint-disable-next-line declaration-no-important\n width: 100% !important;\n max-width: none;\n\n @include govuk-media-query($from: tablet) {\n // stylelint-disable-next-line declaration-no-important\n width: 66.66% !important;\n }\n }\n\n &.govuk-\\!-width-one-half {\n // stylelint-disable-next-line declaration-no-important\n width: 100% !important;\n max-width: none;\n\n @include govuk-media-query($from: tablet) {\n // stylelint-disable-next-line declaration-no-important\n width: 50% !important;\n }\n }\n\n &.govuk-\\!-width-one-third {\n // stylelint-disable-next-line declaration-no-important\n width: 100% !important;\n max-width: none;\n\n @include govuk-media-query($from: tablet) {\n // stylelint-disable-next-line declaration-no-important\n width: 33.33% !important;\n }\n }\n\n &.govuk-\\!-width-one-quarter {\n // stylelint-disable-next-line declaration-no-important\n width: 100% !important;\n max-width: none;\n\n @include govuk-media-query($from: tablet) {\n // stylelint-disable-next-line declaration-no-important\n width: 25% !important;\n }\n }\n}\n\n// stylelint-enable selector-no-qualifying-type\n\n.moj-datepicker__wrapper {\n position: relative;\n}\n\n@media (min-width: 768px) {\n .moj-datepicker__dialog {\n width: auto;\n }\n}\n\n.moj-datepicker__toggle {\n height: 40px;\n padding-top: 6px;\n border: none;\n border-bottom: 4px solid rgba(0, 0, 0, 0);\n outline: 3px solid rgba(0, 0, 0, 0);\n outline-offset: -3px;\n color: govuk-colour(\"white\");\n background-color: $govuk-text-colour;\n cursor: pointer;\n\n &:focus {\n border-bottom: 4px solid $govuk-text-colour;\n color: $govuk-text-colour;\n background-color: $govuk-focus-colour;\n }\n\n &:hover {\n border-bottom: 4px solid $moj-button-menu-color;\n color: $govuk-text-colour;\n background-color: $moj-button-menu-color;\n }\n\n &:focus:hover {\n border-bottom: 4px solid $govuk-text-colour;\n color: $govuk-text-colour;\n background-color: $moj-button-menu-color;\n }\n}\n"]}
@@ -10,7 +10,7 @@
10
10
  padding: 30px 0;
11
11
  border-top: 1px solid $govuk-border-colour;
12
12
  color: $govuk-text-colour;
13
- background: $govuk-canvas-background-colour;
13
+ background: govuk-colour("black", $variant: "tint-95");
14
14
 
15
15
  a {
16
16
  text-underline-offset: 0.23em;
@@ -23,7 +23,7 @@
23
23
  h2 {
24
24
  margin-top: 0;
25
25
  padding-bottom: 25px;
26
- border-bottom: 1px solid govuk-colour("dark-grey");
26
+ border-bottom: 1px solid govuk-colour("black", $variant: "tint-25");
27
27
  font-size: 24px;
28
28
  }
29
29
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../src/moj/components/domain-specific/probation/footer/_footer.scss"],"names":[],"mappings":"AAAA,6CAA6C;;AAE7C;;+EAE+E;;AAE/E;EACE,8BAA8B;;EAE9B,eAAe;EACf,0CAA0C;EAC1C,yBAAyB;EACzB,2CAA2C;;EAE3C;IACE,6BAA6B;EAC/B;;EAEA;IACE,aAAa;EACf;;EAEA;IACE,aAAa;IACb,oBAAoB;IACpB,kDAAkD;IAClD,eAAe;EACjB;;EAEA;IACE,eAAe;EACjB;;EAEA;IACE,aAAa;IACb,+BAA+B;IAC/B,UAAU;EACZ;;EAEA;IACE,qBAAqB;IACrB,8BAA8B;IAC9B,+BAA+B;EACjC;;EAEA;IACE,0BAA0B;IAC1B,8BAA8B;EAChC;AACF","file":"_footer.scss","sourcesContent":["@use \"../../../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n PROBATION#FOOTER\n ========================================================================== */\n\n.probation-common-footer {\n @include govuk-font($size: 16);\n\n padding: 30px 0;\n border-top: 1px solid $govuk-border-colour;\n color: $govuk-text-colour;\n background: $govuk-canvas-background-colour;\n\n a {\n text-underline-offset: 0.23em;\n }\n\n &__info {\n display: flex;\n }\n\n h2 {\n margin-top: 0;\n padding-bottom: 25px;\n border-bottom: 1px solid govuk-colour(\"dark-grey\");\n font-size: 24px;\n }\n\n &__help {\n flex-basis: 50%;\n }\n\n &__inline-list {\n margin-top: 0;\n margin-bottom: govuk-spacing(3);\n padding: 0;\n }\n\n &__inline-list-item {\n display: inline-block;\n margin-right: govuk-spacing(3);\n margin-bottom: govuk-spacing(1);\n }\n\n &__link {\n @include govuk-link-common;\n @include govuk-link-style-text;\n }\n}\n"]}
1
+ {"version":3,"sources":["../../../../../../src/moj/components/domain-specific/probation/footer/_footer.scss"],"names":[],"mappings":"AAAA,6CAA6C;;AAE7C;;+EAE+E;;AAE/E;EACE,8BAA8B;;EAE9B,eAAe;EACf,0CAA0C;EAC1C,yBAAyB;EACzB,sDAAsD;;EAEtD;IACE,6BAA6B;EAC/B;;EAEA;IACE,aAAa;EACf;;EAEA;IACE,aAAa;IACb,oBAAoB;IACpB,mEAAmE;IACnE,eAAe;EACjB;;EAEA;IACE,eAAe;EACjB;;EAEA;IACE,aAAa;IACb,+BAA+B;IAC/B,UAAU;EACZ;;EAEA;IACE,qBAAqB;IACrB,8BAA8B;IAC9B,+BAA+B;EACjC;;EAEA;IACE,0BAA0B;IAC1B,8BAA8B;EAChC;AACF","file":"_footer.scss","sourcesContent":["@use \"../../../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n PROBATION#FOOTER\n ========================================================================== */\n\n.probation-common-footer {\n @include govuk-font($size: 16);\n\n padding: 30px 0;\n border-top: 1px solid $govuk-border-colour;\n color: $govuk-text-colour;\n background: govuk-colour(\"black\", $variant: \"tint-95\");\n\n a {\n text-underline-offset: 0.23em;\n }\n\n &__info {\n display: flex;\n }\n\n h2 {\n margin-top: 0;\n padding-bottom: 25px;\n border-bottom: 1px solid govuk-colour(\"black\", $variant: \"tint-25\");\n font-size: 24px;\n }\n\n &__help {\n flex-basis: 50%;\n }\n\n &__inline-list {\n margin-top: 0;\n margin-bottom: govuk-spacing(3);\n padding: 0;\n }\n\n &__inline-list-item {\n display: inline-block;\n margin-right: govuk-spacing(3);\n margin-bottom: govuk-spacing(1);\n }\n\n &__link {\n @include govuk-link-common;\n @include govuk-link-style-text;\n }\n}\n"]}
@@ -9,6 +9,7 @@
9
9
  [hidden] {
10
10
  display: none;
11
11
  }
12
+
12
13
  color: govuk-colour("white");
13
14
 
14
15
  background-color: govuk-colour("black");
@@ -123,7 +124,7 @@
123
124
  @include govuk-font(16);
124
125
 
125
126
  &:hover {
126
- color: govuk-colour("mid-grey");
127
+ color: govuk-colour("black", $variant: "tint-80");
127
128
 
128
129
  &::after {
129
130
  content: "";
@@ -133,7 +134,7 @@
133
134
  bottom: 0;
134
135
  left: 15px;
135
136
  height: 3px;
136
- background: govuk-colour("mid-grey");
137
+ background: govuk-colour("black", $variant: "tint-80");
137
138
  }
138
139
  }
139
140
 
@@ -167,8 +168,8 @@
167
168
  &:hover {
168
169
  > span {
169
170
  &::before {
170
- border-right: 2px solid govuk-colour("mid-grey");
171
- border-bottom: 2px solid govuk-colour("mid-grey");
171
+ border-right: 2px solid govuk-colour("black", $variant: "tint-80");
172
+ border-bottom: 2px solid govuk-colour("black", $variant: "tint-80");
172
173
  }
173
174
  }
174
175
  }
@@ -176,7 +177,7 @@
176
177
 
177
178
  &.probation-common-header__toggle-open {
178
179
  color: govuk-colour("blue");
179
- background: govuk-colour("light-grey");
180
+ background: govuk-colour("black", $variant: "tint-95");
180
181
 
181
182
  > span {
182
183
  &::before {
@@ -198,7 +199,7 @@
198
199
  }
199
200
 
200
201
  &:hover {
201
- color: govuk-colour("dark-grey");
202
+ color: govuk-colour("black", $variant: "tint-25");
202
203
  }
203
204
  }
204
205
 
@@ -246,7 +247,7 @@
246
247
  position: relative;
247
248
  z-index: 10000000;
248
249
  padding: 15px;
249
- background: govuk-colour("light-grey");
250
+ background: govuk-colour("black", $variant: "tint-95");
250
251
 
251
252
  a {
252
253
  display: block;
@@ -257,7 +258,7 @@
257
258
 
258
259
  &__pushdown-menu {
259
260
  padding: 30px 0 60px;
260
- background: govuk-colour("light-grey");
261
+ background: govuk-colour("black", $variant: "tint-95");
261
262
  }
262
263
 
263
264
  &__icon-link-wrapper {
@@ -286,7 +287,7 @@
286
287
  }
287
288
 
288
289
  &:hover {
289
- color: govuk-colour("mid-grey");
290
+ color: govuk-colour("black", $variant: "tint-80");
290
291
  text-decoration: none;
291
292
 
292
293
  &::after {
@@ -297,7 +298,7 @@
297
298
  bottom: 0;
298
299
  left: 15px;
299
300
  height: 3px;
300
- background: govuk-colour("mid-grey");
301
+ background: govuk-colour("black", $variant: "tint-80");
301
302
  }
302
303
  }
303
304
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../src/moj/components/domain-specific/probation/header/_header.scss"],"names":[],"mappings":"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","file":"_header.scss","sourcesContent":["/* stylelint-disable max-nesting-depth, selector-no-qualifying-type */\n@use \"../../../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n PROBATION#HEADER\n ========================================================================== */\n\n.probation-common-header {\n [hidden] {\n display: none;\n }\n color: govuk-colour(\"white\");\n\n background-color: govuk-colour(\"black\");\n\n &__logo {\n @include govuk-responsive-margin(3, \"right\");\n position: relative;\n top: -2px;\n padding: 15px 0;\n fill: govuk-colour(\"white\");\n }\n\n &__title {\n display: flex;\n\n &__organisation-name {\n @include govuk-responsive-margin(2, \"right\");\n @include govuk-font($size: 24, $weight: \"bold\");\n display: flex;\n align-items: center;\n }\n\n .govuk-tag {\n margin: auto 0;\n\n @include govuk-media-query($until: 985px) {\n display: none;\n }\n }\n }\n\n &__submenu-link {\n @include govuk-link-common;\n @include govuk-link-style-no-visited-state;\n }\n\n &__link {\n @include govuk-link-common;\n @include govuk-link-style-default;\n\n &:link,\n &:visited,\n &:active {\n color: govuk-colour(\"white\");\n font-weight: normal;\n text-decoration: none;\n }\n\n &:focus {\n color: govuk-colour(\"black\");\n box-shadow: none;\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"black\");\n }\n\n svg {\n fill: govuk-colour(\"black\");\n }\n }\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n &__button-width-container {\n position: relative;\n }\n\n &__button-container {\n @include govuk-media-query(925px) {\n position: absolute;\n top: -70px;\n right: 0;\n background-color: govuk-colour(\"black\");\n }\n }\n\n &__navigation {\n display: flex;\n height: 70px;\n margin: 0;\n padding: 0;\n list-style: none;\n flex-direction: row;\n align-items: center;\n\n &__item {\n position: relative;\n height: 100%;\n\n > button,\n > a {\n display: flex;\n height: 100%;\n padding: 0;\n overflow: hidden;\n border: none;\n color: govuk-colour(\"white\");\n background: govuk-colour(\"black\");\n cursor: pointer;\n align-items: center;\n justify-content: center;\n @include govuk-font(16);\n\n &:hover {\n color: govuk-colour(\"mid-grey\");\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"mid-grey\");\n }\n }\n\n &.probation-common-header__menu-toggle {\n padding: 10px 0;\n\n > span {\n display: flex;\n height: 100%;\n padding: 0 15px;\n border-left: 1px solid govuk-colour(\"white\");\n align-items: center;\n\n &::before {\n content: \"\";\n display: inline-block;\n width: 8px;\n height: 8px;\n margin: 3px 15px 0 3px;\n -ms-transform: translateY(-35%) rotate(45deg) scale(1);\n -webkit-transform: translateY(-35%) rotate(45deg) scale(1);\n transform: translateY(-35%) rotate(45deg) scale(1);\n border-right: 2px solid govuk-colour(\"white\");\n border-bottom: 2px solid govuk-colour(\"white\");\n vertical-align: middle;\n }\n }\n\n svg {\n margin: 0 15px 0 0;\n }\n\n &:hover {\n > span {\n &::before {\n border-right: 2px solid govuk-colour(\"mid-grey\");\n border-bottom: 2px solid govuk-colour(\"mid-grey\");\n }\n }\n }\n }\n\n &.probation-common-header__toggle-open {\n color: govuk-colour(\"blue\");\n background: govuk-colour(\"light-grey\");\n\n > span {\n &::before {\n -ms-transform: translateY(-0%) rotate(225deg) scale(1);\n -webkit-transform: translateY(-0%) rotate(225deg) scale(1);\n transform: translateY(-0%) rotate(225deg) scale(1);\n border-right: 2px solid govuk-colour(\"blue\");\n border-bottom: 2px solid govuk-colour(\"blue\");\n }\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"blue\");\n }\n }\n\n &:hover {\n color: govuk-colour(\"dark-grey\");\n }\n }\n\n &:focus-visible {\n outline: 3px solid transparent;\n color: govuk-colour(\"black\");\n background-color: govuk-colour(\"yellow\");\n box-shadow: none;\n text-decoration: none;\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"black\");\n }\n\n > span {\n &::before {\n border-right: 2px solid govuk-colour(\"black\");\n border-bottom: 2px solid govuk-colour(\"black\");\n }\n }\n }\n }\n\n &.item-open {\n + div {\n > button,\n > a {\n > span {\n border-left: 1px solid transparent;\n }\n }\n }\n }\n }\n }\n\n .probation-common-header__user-menu {\n position: relative;\n z-index: 10000000;\n padding: 15px;\n background: govuk-colour(\"light-grey\");\n\n a {\n display: block;\n margin-bottom: 15px;\n font-weight: 700;\n }\n }\n\n &__pushdown-menu {\n padding: 30px 0 60px;\n background: govuk-colour(\"light-grey\");\n }\n\n &__icon-link-wrapper {\n display: flex;\n position: relative;\n height: 100%;\n\n img,\n svg {\n margin: 0 15px 0 0;\n }\n\n a {\n box-sizing: border-box;\n display: block;\n width: 100%;\n padding: 10px 0;\n\n > span {\n display: flex;\n height: 100%;\n padding: 0 15px;\n border-left: 1px solid govuk-colour(\"white\");\n align-items: center;\n justify-content: center;\n }\n\n &:hover {\n color: govuk-colour(\"mid-grey\");\n text-decoration: none;\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"mid-grey\");\n }\n }\n }\n }\n\n &__services-menu {\n ul {\n display: grid;\n width: 100%;\n margin-bottom: 0;\n font-weight: bold;\n grid-template-rows: 1fr 1fr 1fr 1fr;\n grid-auto-flow: column;\n gap: 15px;\n justify-items: start;\n }\n }\n\n &__user-menu-link {\n width: 181px;\n }\n\n &__services-menu-link {\n width: 107px;\n }\n\n &__menu-toggle-label {\n display: block;\n text-align: left;\n }\n\n @media print {\n display: none;\n }\n}\n"]}
1
+ {"version":3,"sources":["../../../../../../src/moj/components/domain-specific/probation/header/_header.scss"],"names":[],"mappings":"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","file":"_header.scss","sourcesContent":["/* stylelint-disable max-nesting-depth, selector-no-qualifying-type */\n@use \"../../../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n PROBATION#HEADER\n ========================================================================== */\n\n.probation-common-header {\n [hidden] {\n display: none;\n }\n\n color: govuk-colour(\"white\");\n\n background-color: govuk-colour(\"black\");\n\n &__logo {\n @include govuk-responsive-margin(3, \"right\");\n position: relative;\n top: -2px;\n padding: 15px 0;\n fill: govuk-colour(\"white\");\n }\n\n &__title {\n display: flex;\n\n &__organisation-name {\n @include govuk-responsive-margin(2, \"right\");\n @include govuk-font($size: 24, $weight: \"bold\");\n display: flex;\n align-items: center;\n }\n\n .govuk-tag {\n margin: auto 0;\n\n @include govuk-media-query($until: 985px) {\n display: none;\n }\n }\n }\n\n &__submenu-link {\n @include govuk-link-common;\n @include govuk-link-style-no-visited-state;\n }\n\n &__link {\n @include govuk-link-common;\n @include govuk-link-style-default;\n\n &:link,\n &:visited,\n &:active {\n color: govuk-colour(\"white\");\n font-weight: normal;\n text-decoration: none;\n }\n\n &:focus {\n color: govuk-colour(\"black\");\n box-shadow: none;\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"black\");\n }\n\n svg {\n fill: govuk-colour(\"black\");\n }\n }\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n &__button-width-container {\n position: relative;\n }\n\n &__button-container {\n @include govuk-media-query(925px) {\n position: absolute;\n top: -70px;\n right: 0;\n background-color: govuk-colour(\"black\");\n }\n }\n\n &__navigation {\n display: flex;\n height: 70px;\n margin: 0;\n padding: 0;\n list-style: none;\n flex-direction: row;\n align-items: center;\n\n &__item {\n position: relative;\n height: 100%;\n\n > button,\n > a {\n display: flex;\n height: 100%;\n padding: 0;\n overflow: hidden;\n border: none;\n color: govuk-colour(\"white\");\n background: govuk-colour(\"black\");\n cursor: pointer;\n align-items: center;\n justify-content: center;\n @include govuk-font(16);\n\n &:hover {\n color: govuk-colour(\"black\", $variant: \"tint-80\");\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"black\", $variant: \"tint-80\");\n }\n }\n\n &.probation-common-header__menu-toggle {\n padding: 10px 0;\n\n > span {\n display: flex;\n height: 100%;\n padding: 0 15px;\n border-left: 1px solid govuk-colour(\"white\");\n align-items: center;\n\n &::before {\n content: \"\";\n display: inline-block;\n width: 8px;\n height: 8px;\n margin: 3px 15px 0 3px;\n -ms-transform: translateY(-35%) rotate(45deg) scale(1);\n -webkit-transform: translateY(-35%) rotate(45deg) scale(1);\n transform: translateY(-35%) rotate(45deg) scale(1);\n border-right: 2px solid govuk-colour(\"white\");\n border-bottom: 2px solid govuk-colour(\"white\");\n vertical-align: middle;\n }\n }\n\n svg {\n margin: 0 15px 0 0;\n }\n\n &:hover {\n > span {\n &::before {\n border-right: 2px solid govuk-colour(\"black\", $variant: \"tint-80\");\n border-bottom: 2px solid govuk-colour(\"black\", $variant: \"tint-80\");\n }\n }\n }\n }\n\n &.probation-common-header__toggle-open {\n color: govuk-colour(\"blue\");\n background: govuk-colour(\"black\", $variant: \"tint-95\");\n\n > span {\n &::before {\n -ms-transform: translateY(-0%) rotate(225deg) scale(1);\n -webkit-transform: translateY(-0%) rotate(225deg) scale(1);\n transform: translateY(-0%) rotate(225deg) scale(1);\n border-right: 2px solid govuk-colour(\"blue\");\n border-bottom: 2px solid govuk-colour(\"blue\");\n }\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"blue\");\n }\n }\n\n &:hover {\n color: govuk-colour(\"black\", $variant: \"tint-25\");\n }\n }\n\n &:focus-visible {\n outline: 3px solid transparent;\n color: govuk-colour(\"black\");\n background-color: govuk-colour(\"yellow\");\n box-shadow: none;\n text-decoration: none;\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"black\");\n }\n\n > span {\n &::before {\n border-right: 2px solid govuk-colour(\"black\");\n border-bottom: 2px solid govuk-colour(\"black\");\n }\n }\n }\n }\n\n &.item-open {\n + div {\n > button,\n > a {\n > span {\n border-left: 1px solid transparent;\n }\n }\n }\n }\n }\n }\n\n .probation-common-header__user-menu {\n position: relative;\n z-index: 10000000;\n padding: 15px;\n background: govuk-colour(\"black\", $variant: \"tint-95\");\n\n a {\n display: block;\n margin-bottom: 15px;\n font-weight: 700;\n }\n }\n\n &__pushdown-menu {\n padding: 30px 0 60px;\n background: govuk-colour(\"black\", $variant: \"tint-95\");\n }\n\n &__icon-link-wrapper {\n display: flex;\n position: relative;\n height: 100%;\n\n img,\n svg {\n margin: 0 15px 0 0;\n }\n\n a {\n box-sizing: border-box;\n display: block;\n width: 100%;\n padding: 10px 0;\n\n > span {\n display: flex;\n height: 100%;\n padding: 0 15px;\n border-left: 1px solid govuk-colour(\"white\");\n align-items: center;\n justify-content: center;\n }\n\n &:hover {\n color: govuk-colour(\"black\", $variant: \"tint-80\");\n text-decoration: none;\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"black\", $variant: \"tint-80\");\n }\n }\n }\n }\n\n &__services-menu {\n ul {\n display: grid;\n width: 100%;\n margin-bottom: 0;\n font-weight: bold;\n grid-template-rows: 1fr 1fr 1fr 1fr;\n grid-auto-flow: column;\n gap: 15px;\n justify-items: start;\n }\n }\n\n &__user-menu-link {\n width: 181px;\n }\n\n &__services-menu-link {\n width: 107px;\n }\n\n &__menu-toggle-label {\n display: block;\n text-align: left;\n }\n\n @media print {\n display: none;\n }\n}\n"]}
@@ -7,7 +7,7 @@
7
7
 
8
8
  .moj-filter {
9
9
  background-color: govuk-colour("white");
10
- box-shadow: inset 0 0 0 1px govuk-colour("mid-grey");
10
+ box-shadow: inset 0 0 0 1px govuk-colour("black", $variant: "tint-80");
11
11
 
12
12
  &:focus {
13
13
  box-shadow:
@@ -18,7 +18,7 @@
18
18
 
19
19
  .moj-filter__header {
20
20
  padding: govuk-spacing(2) govuk-spacing(4);
21
- background-color: govuk-colour("mid-grey");
21
+ background-color: govuk-colour("black", $variant: "tint-80");
22
22
  font-size: 0; // Hide whitespace between elements
23
23
  text-align: justify; // Trick to remove the need for floats
24
24
 
@@ -101,11 +101,11 @@
101
101
 
102
102
  &:focus {
103
103
  outline: none;
104
- color: $govuk-focus-text-colour;
105
- background-color: $govuk-focus-colour;
104
+ color: govuk-functional-colour(focus-text);
105
+ background-color: govuk-functional-colour(focus);
106
106
  box-shadow:
107
- 0 -2px $govuk-focus-colour,
108
- 0 4px $govuk-focus-text-colour;
107
+ 0 -2px govuk-functional-colour(focus),
108
+ 0 4px govuk-functional-colour(focus-text);
109
109
  }
110
110
 
111
111
  // Fix unwanted button padding in Firefox
@@ -129,8 +129,8 @@
129
129
 
130
130
  .moj-filter__selected {
131
131
  padding: govuk-spacing(4);
132
- background-color: govuk-colour("light-grey");
133
- box-shadow: inset 0 0 0 1px govuk-colour("mid-grey");
132
+ background-color: govuk-colour("black", $variant: "tint-95");
133
+ box-shadow: inset 0 0 0 1px govuk-colour("black", $variant: "tint-80");
134
134
 
135
135
  ul:last-of-type {
136
136
  margin-bottom: 0; // IE9 +
@@ -183,8 +183,8 @@
183
183
  }
184
184
 
185
185
  &:focus {
186
- color: $govuk-focus-text-colour;
187
- background-color: $govuk-focus-colour;
186
+ color: govuk-functional-colour(focus-text);
187
+ background-color: govuk-functional-colour(focus);
188
188
  }
189
189
 
190
190
  &:hover {
@@ -211,7 +211,7 @@
211
211
  .moj-filter__options {
212
212
  margin-top: -1px;
213
213
  padding: govuk-spacing(4);
214
- box-shadow: inset 0 0 0 1px govuk-colour("mid-grey");
214
+ box-shadow: inset 0 0 0 1px govuk-colour("black", $variant: "tint-80");
215
215
 
216
216
  div:last-of-type {
217
217
  margin-bottom: 0; // IE9 +
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/moj/components/filter/_filter.scss"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,uCAAuC;EACvC,oDAAoD;;EAEpD;IACE;;oCAEgC;EAClC;AACF;;AAEA;EACE,0CAA0C;EAC1C,0CAA0C;EAC1C,YAAY,EAAE,kCAAkC;EAChD,mBAAmB,EAAE,qCAAqC;;EAE1D;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;;EAEA;IACE,gBAAgB;EAClB;AACF;;AAEA,YAAY;AACZ;EACE,WAAW;EACX,iBAAiB,EAAE,oDAAoD;;EAEvE;IACE,gBAAgB;IAChB,sBAAsB;IACtB,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,SAAS;IACT,UAAU;IACV,cAAc;IACd,gBAAgB;IAChB,6BAA6B;IAC7B,gBAAgB;IAChB,eAAe,EAAE,wBAAwB;IACzC,wBAAwB;IACxB,6CAA6C;;IAE7C,wCAAwC;IACxC;MACE,UAAU;MACV,SAAS;IACX;;IAEA;MACE,WAAW;MACX,cAAc;MACd,kBAAkB;MAClB,QAAQ;MACR,QAAQ;MACR,WAAW;MACX,YAAY;MACZ,gBAAgB,EAAE,6BAA6B;MAC/C,oEAAoE;MACpE,wBAAwB;IAC1B;;IAEA;MACE,8BAA8B;IAChC;EACF;AACF;;AAEA;;EAEE,qBAAqB;EACrB,gBAAgB;EAChB,sBAAsB;AACxB;;AAEA;EACE,SAAS;EACT,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,2BAA2B;EAC3B,4BAA4B;EAC5B,6BAA6B;EAC7B,eAAe,EAAE,6BAA6B;EAC9C,wBAAwB;EACxB,gBAAgB;EAChB,uBAAuB;;EAEvB;IACE,aAAa;IACb,+BAA+B;IAC/B,qCAAqC;IACrC;;oCAEgC;EAClC;;EAEA,wCAAwC;EACxC;IACE,UAAU;IACV,SAAS;EACX;;EAEA;IACE,WAAW;IACX,qBAAqB;IACrB,kBAAkB;IAClB,SAAS,EAAE,iBAAiB;IAC5B,WAAW;IACX,YAAY;IACZ,8BAA8B;IAC9B,oEAAoE;IACpE,sBAAsB;EACxB;AACF;;AAEA;EACE,yBAAyB;EACzB,4CAA4C;EAC5C,oDAAoD;;EAEpD;IACE,gBAAgB,EAAE,OAAO;EAC3B;AACF;;AAEA;EACE,YAAY,EAAE,kCAAkC;EAChD,mBAAmB,EAAE,qCAAqC;;EAE1D;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;AACF;;AAEA;;EAEE,qBAAqB;EACrB,gBAAgB;EAChB,sBAAsB;EACtB,uBAAuB;AACzB;;AAEA;EACE,+BAA+B,EAAE,mCAAmC;EACpE,eAAe;EACf,YAAY;;EAEZ;IACE,qBAAqB;IACrB,8BAA8B;EAChC;AACF;;AAEA;EACE,qBAAqB;EACrB,4BAA4B;EAC5B,yBAAyB;EACzB,uCAAuC;EACvC,4BAA4B;EAC5B,uCAAuC;EACvC,qBAAqB;EACrB,uBAAuB;;EAEvB;;IAEE,4BAA4B;EAC9B;;EAEA;IACE,+BAA+B;IAC/B,qCAAqC;EACvC;;EAEA;IACE,4BAA4B;IAC5B,uCAAuC;EACzC;;EAEA;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;IACX,YAAY;IACZ,6BAA6B;IAC7B,mEAAmE;IACnE,iBAAiB;IACjB,sBAAsB;EACxB;;EAEA;IACE,yEAAyE;EAC3E;AACF;;AAEA;EACE,gBAAgB;EAChB,yBAAyB;EACzB,oDAAoD;;EAEpD;IACE,gBAAgB,EAAE,OAAO;EAC3B;AACF","file":"_filter.scss","sourcesContent":["@use \"../../settings/assets\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #FILTER\n ========================================================================== */\n\n.moj-filter {\n background-color: govuk-colour(\"white\");\n box-shadow: inset 0 0 0 1px govuk-colour(\"mid-grey\");\n\n &:focus {\n box-shadow:\n 0 -2px $govuk-focus-colour,\n 0 4px $govuk-focus-text-colour;\n }\n}\n\n.moj-filter__header {\n padding: govuk-spacing(2) govuk-spacing(4);\n background-color: govuk-colour(\"mid-grey\");\n font-size: 0; // Hide whitespace between elements\n text-align: justify; // Trick to remove the need for floats\n\n &::after {\n content: \"\";\n display: inline-block;\n width: 100%;\n }\n\n [class^=\"govuk-heading-\"] {\n margin-bottom: 0;\n }\n}\n\n// JavaScript\n.moj-filter__legend {\n width: 100%;\n overflow: visible; // Override govuk to allow for focus style to be seen\n\n button {\n appearance: none;\n box-sizing: border-box;\n display: block;\n position: relative;\n width: 100%;\n margin: 0;\n padding: 0;\n border: 0 none;\n border-radius: 0;\n background-color: transparent;\n text-align: left;\n cursor: pointer; // Adam would not approve\n -webkit-appearance: none;\n @include govuk-font($size: 24, $weight: bold);\n\n // Fix unwanted button padding in Firefox\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 50%;\n right: 0;\n width: 16px;\n height: 16px;\n margin-top: -8px; // Half the height of the icon\n background-image: url(#{$moj-images-path}icon-toggle-plus-minus.svg);\n background-position: 0 0;\n }\n\n &[aria-expanded=\"true\"]::after {\n background-position: 16px 16px;\n }\n }\n}\n\n.moj-filter__header-title,\n.moj-filter__header-action {\n display: inline-block;\n text-align: left;\n vertical-align: middle;\n}\n\n.moj-filter__close {\n margin: 0;\n padding: 0;\n border: none;\n border-radius: 0;\n // @include govuk-focusable;\n color: govuk-colour(\"black\");\n background-color: transparent;\n cursor: pointer; // I know Adam won’t like this\n -webkit-appearance: none;\n appearance: none;\n @include govuk-font(19);\n\n &:focus {\n outline: none;\n color: $govuk-focus-text-colour;\n background-color: $govuk-focus-colour;\n box-shadow:\n 0 -2px $govuk-focus-colour,\n 0 4px $govuk-focus-text-colour;\n }\n\n // Fix unwanted button padding in Firefox\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n\n &::before {\n content: \"\";\n display: inline-block;\n position: relative;\n top: -1px; // Alignment tweak\n width: 14px;\n height: 14px;\n margin-right: govuk-spacing(1);\n background-image: url(#{$moj-images-path}icon-close-cross-black.svg);\n vertical-align: middle;\n }\n}\n\n.moj-filter__selected {\n padding: govuk-spacing(4);\n background-color: govuk-colour(\"light-grey\");\n box-shadow: inset 0 0 0 1px govuk-colour(\"mid-grey\");\n\n ul:last-of-type {\n margin-bottom: 0; // IE9 +\n }\n}\n\n.moj-filter__selected-heading {\n font-size: 0; // Hide whitespace between elements\n text-align: justify; // Trick to remove the need for floats\n\n &::after {\n content: \"\";\n display: inline-block;\n width: 100%;\n }\n}\n\n.moj-filter__heading-title,\n.moj-filter__heading-action {\n display: inline-block;\n text-align: left;\n vertical-align: middle;\n @include govuk-font(16);\n}\n\n.moj-filter-tags {\n margin-bottom: govuk-spacing(4); // Needs to adjust to 15px on mobile\n padding-left: 0;\n font-size: 0;\n\n li {\n display: inline-block;\n margin-right: govuk-spacing(2);\n }\n}\n\n.moj-filter__tag {\n display: inline-block;\n margin-top: govuk-spacing(1);\n padding: govuk-spacing(1);\n border: 1px solid govuk-colour(\"black\");\n color: govuk-colour(\"black\");\n background-color: govuk-colour(\"white\");\n text-decoration: none;\n @include govuk-font(16);\n\n &:link,\n &:visited {\n color: govuk-colour(\"black\");\n }\n\n &:focus {\n color: $govuk-focus-text-colour;\n background-color: $govuk-focus-colour;\n }\n\n &:hover {\n color: govuk-colour(\"white\");\n background-color: govuk-colour(\"black\");\n }\n\n &::after {\n content: \"\";\n display: inline-block;\n width: 10px;\n height: 10px;\n margin-left: govuk-spacing(1);\n background-image: url(#{$moj-images-path}icon-tag-remove-cross.svg);\n font-weight: bold;\n vertical-align: middle;\n }\n\n &:hover::after {\n background-image: url(#{$moj-images-path}icon-tag-remove-cross-white.svg);\n }\n}\n\n.moj-filter__options {\n margin-top: -1px;\n padding: govuk-spacing(4);\n box-shadow: inset 0 0 0 1px govuk-colour(\"mid-grey\");\n\n div:last-of-type {\n margin-bottom: 0; // IE9 +\n }\n}\n"]}
1
+ {"version":3,"sources":["../../../../src/moj/components/filter/_filter.scss"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,uCAAuC;EACvC,sEAAsE;;EAEtE;IACE;;oCAEgC;EAClC;AACF;;AAEA;EACE,0CAA0C;EAC1C,4DAA4D;EAC5D,YAAY,EAAE,kCAAkC;EAChD,mBAAmB,EAAE,qCAAqC;;EAE1D;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;;EAEA;IACE,gBAAgB;EAClB;AACF;;AAEA,YAAY;AACZ;EACE,WAAW;EACX,iBAAiB,EAAE,oDAAoD;;EAEvE;IACE,gBAAgB;IAChB,sBAAsB;IACtB,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,SAAS;IACT,UAAU;IACV,cAAc;IACd,gBAAgB;IAChB,6BAA6B;IAC7B,gBAAgB;IAChB,eAAe,EAAE,wBAAwB;IACzC,wBAAwB;IACxB,6CAA6C;;IAE7C,wCAAwC;IACxC;MACE,UAAU;MACV,SAAS;IACX;;IAEA;MACE,WAAW;MACX,cAAc;MACd,kBAAkB;MAClB,QAAQ;MACR,QAAQ;MACR,WAAW;MACX,YAAY;MACZ,gBAAgB,EAAE,6BAA6B;MAC/C,oEAAoE;MACpE,wBAAwB;IAC1B;;IAEA;MACE,8BAA8B;IAChC;EACF;AACF;;AAEA;;EAEE,qBAAqB;EACrB,gBAAgB;EAChB,sBAAsB;AACxB;;AAEA;EACE,SAAS;EACT,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,2BAA2B;EAC3B,4BAA4B;EAC5B,6BAA6B;EAC7B,eAAe,EAAE,6BAA6B;EAC9C,wBAAwB;EACxB,gBAAgB;EAChB,uBAAuB;;EAEvB;IACE,aAAa;IACb,0CAA0C;IAC1C,gDAAgD;IAChD;;+CAE2C;EAC7C;;EAEA,wCAAwC;EACxC;IACE,UAAU;IACV,SAAS;EACX;;EAEA;IACE,WAAW;IACX,qBAAqB;IACrB,kBAAkB;IAClB,SAAS,EAAE,iBAAiB;IAC5B,WAAW;IACX,YAAY;IACZ,8BAA8B;IAC9B,oEAAoE;IACpE,sBAAsB;EACxB;AACF;;AAEA;EACE,yBAAyB;EACzB,4DAA4D;EAC5D,sEAAsE;;EAEtE;IACE,gBAAgB,EAAE,OAAO;EAC3B;AACF;;AAEA;EACE,YAAY,EAAE,kCAAkC;EAChD,mBAAmB,EAAE,qCAAqC;;EAE1D;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;EACb;AACF;;AAEA;;EAEE,qBAAqB;EACrB,gBAAgB;EAChB,sBAAsB;EACtB,uBAAuB;AACzB;;AAEA;EACE,+BAA+B,EAAE,mCAAmC;EACpE,eAAe;EACf,YAAY;;EAEZ;IACE,qBAAqB;IACrB,8BAA8B;EAChC;AACF;;AAEA;EACE,qBAAqB;EACrB,4BAA4B;EAC5B,yBAAyB;EACzB,uCAAuC;EACvC,4BAA4B;EAC5B,uCAAuC;EACvC,qBAAqB;EACrB,uBAAuB;;EAEvB;;IAEE,4BAA4B;EAC9B;;EAEA;IACE,0CAA0C;IAC1C,gDAAgD;EAClD;;EAEA;IACE,4BAA4B;IAC5B,uCAAuC;EACzC;;EAEA;IACE,WAAW;IACX,qBAAqB;IACrB,WAAW;IACX,YAAY;IACZ,6BAA6B;IAC7B,mEAAmE;IACnE,iBAAiB;IACjB,sBAAsB;EACxB;;EAEA;IACE,yEAAyE;EAC3E;AACF;;AAEA;EACE,gBAAgB;EAChB,yBAAyB;EACzB,sEAAsE;;EAEtE;IACE,gBAAgB,EAAE,OAAO;EAC3B;AACF","file":"_filter.scss","sourcesContent":["@use \"../../settings/assets\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n #FILTER\n ========================================================================== */\n\n.moj-filter {\n background-color: govuk-colour(\"white\");\n box-shadow: inset 0 0 0 1px govuk-colour(\"black\", $variant: \"tint-80\");\n\n &:focus {\n box-shadow:\n 0 -2px $govuk-focus-colour,\n 0 4px $govuk-focus-text-colour;\n }\n}\n\n.moj-filter__header {\n padding: govuk-spacing(2) govuk-spacing(4);\n background-color: govuk-colour(\"black\", $variant: \"tint-80\");\n font-size: 0; // Hide whitespace between elements\n text-align: justify; // Trick to remove the need for floats\n\n &::after {\n content: \"\";\n display: inline-block;\n width: 100%;\n }\n\n [class^=\"govuk-heading-\"] {\n margin-bottom: 0;\n }\n}\n\n// JavaScript\n.moj-filter__legend {\n width: 100%;\n overflow: visible; // Override govuk to allow for focus style to be seen\n\n button {\n appearance: none;\n box-sizing: border-box;\n display: block;\n position: relative;\n width: 100%;\n margin: 0;\n padding: 0;\n border: 0 none;\n border-radius: 0;\n background-color: transparent;\n text-align: left;\n cursor: pointer; // Adam would not approve\n -webkit-appearance: none;\n @include govuk-font($size: 24, $weight: bold);\n\n // Fix unwanted button padding in Firefox\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 50%;\n right: 0;\n width: 16px;\n height: 16px;\n margin-top: -8px; // Half the height of the icon\n background-image: url(#{$moj-images-path}icon-toggle-plus-minus.svg);\n background-position: 0 0;\n }\n\n &[aria-expanded=\"true\"]::after {\n background-position: 16px 16px;\n }\n }\n}\n\n.moj-filter__header-title,\n.moj-filter__header-action {\n display: inline-block;\n text-align: left;\n vertical-align: middle;\n}\n\n.moj-filter__close {\n margin: 0;\n padding: 0;\n border: none;\n border-radius: 0;\n // @include govuk-focusable;\n color: govuk-colour(\"black\");\n background-color: transparent;\n cursor: pointer; // I know Adam won’t like this\n -webkit-appearance: none;\n appearance: none;\n @include govuk-font(19);\n\n &:focus {\n outline: none;\n color: govuk-functional-colour(focus-text);\n background-color: govuk-functional-colour(focus);\n box-shadow:\n 0 -2px govuk-functional-colour(focus),\n 0 4px govuk-functional-colour(focus-text);\n }\n\n // Fix unwanted button padding in Firefox\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n\n &::before {\n content: \"\";\n display: inline-block;\n position: relative;\n top: -1px; // Alignment tweak\n width: 14px;\n height: 14px;\n margin-right: govuk-spacing(1);\n background-image: url(#{$moj-images-path}icon-close-cross-black.svg);\n vertical-align: middle;\n }\n}\n\n.moj-filter__selected {\n padding: govuk-spacing(4);\n background-color: govuk-colour(\"black\", $variant: \"tint-95\");\n box-shadow: inset 0 0 0 1px govuk-colour(\"black\", $variant: \"tint-80\");\n\n ul:last-of-type {\n margin-bottom: 0; // IE9 +\n }\n}\n\n.moj-filter__selected-heading {\n font-size: 0; // Hide whitespace between elements\n text-align: justify; // Trick to remove the need for floats\n\n &::after {\n content: \"\";\n display: inline-block;\n width: 100%;\n }\n}\n\n.moj-filter__heading-title,\n.moj-filter__heading-action {\n display: inline-block;\n text-align: left;\n vertical-align: middle;\n @include govuk-font(16);\n}\n\n.moj-filter-tags {\n margin-bottom: govuk-spacing(4); // Needs to adjust to 15px on mobile\n padding-left: 0;\n font-size: 0;\n\n li {\n display: inline-block;\n margin-right: govuk-spacing(2);\n }\n}\n\n.moj-filter__tag {\n display: inline-block;\n margin-top: govuk-spacing(1);\n padding: govuk-spacing(1);\n border: 1px solid govuk-colour(\"black\");\n color: govuk-colour(\"black\");\n background-color: govuk-colour(\"white\");\n text-decoration: none;\n @include govuk-font(16);\n\n &:link,\n &:visited {\n color: govuk-colour(\"black\");\n }\n\n &:focus {\n color: govuk-functional-colour(focus-text);\n background-color: govuk-functional-colour(focus);\n }\n\n &:hover {\n color: govuk-colour(\"white\");\n background-color: govuk-colour(\"black\");\n }\n\n &::after {\n content: \"\";\n display: inline-block;\n width: 10px;\n height: 10px;\n margin-left: govuk-spacing(1);\n background-image: url(#{$moj-images-path}icon-tag-remove-cross.svg);\n font-weight: bold;\n vertical-align: middle;\n }\n\n &:hover::after {\n background-image: url(#{$moj-images-path}icon-tag-remove-cross-white.svg);\n }\n}\n\n.moj-filter__options {\n margin-top: -1px;\n padding: govuk-spacing(4);\n box-shadow: inset 0 0 0 1px govuk-colour(\"black\", $variant: \"tint-80\");\n\n div:last-of-type {\n margin-bottom: 0; // IE9 +\n }\n}\n"]}