@nationalarchives/frontend 1.0.0 → 1.2.0
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.
- package/nationalarchives/all+analytics.js +1 -1
- package/nationalarchives/all+analytics.js.map +1 -1
- package/nationalarchives/all+analytics.mjs +0 -2
- package/nationalarchives/all.css +1 -1
- package/nationalarchives/all.css.map +1 -1
- package/nationalarchives/all.js +1 -1
- package/nationalarchives/all.js.map +1 -1
- package/nationalarchives/all.mjs +0 -2
- package/nationalarchives/analytics.js +1 -1
- package/nationalarchives/analytics.js.map +1 -1
- package/nationalarchives/analytics.mjs +4 -3
- package/nationalarchives/assets/fonts/fa-brands-400.woff2 +0 -0
- package/nationalarchives/assets/fonts/fa-solid-900.woff2 +0 -0
- package/nationalarchives/components/accordion/accordion.js +1 -1
- package/nationalarchives/components/accordion/accordion.js.map +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.js +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.js.map +1 -1
- package/nationalarchives/components/button/button.css +1 -1
- package/nationalarchives/components/button/button.css.map +1 -1
- package/nationalarchives/components/button/button.scss +3 -1
- package/nationalarchives/components/checkboxes/fixtures.json +25 -0
- package/nationalarchives/components/checkboxes/macro-options.json +9 -3
- package/nationalarchives/components/checkboxes/template.njk +1 -1
- package/nationalarchives/components/code-block/code-block.js +1 -1
- package/nationalarchives/components/code-block/code-block.js.map +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.js +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.js.map +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.mjs +5 -5
- package/nationalarchives/components/date-input/date-input.js +1 -1
- package/nationalarchives/components/date-input/date-input.js.map +1 -1
- package/nationalarchives/components/date-input/date-input.mjs +0 -4
- package/nationalarchives/components/error-summary/error-summary.js +1 -1
- package/nationalarchives/components/error-summary/error-summary.js.map +1 -1
- package/nationalarchives/components/file-input/file-input.js +1 -1
- package/nationalarchives/components/file-input/file-input.js.map +1 -1
- package/nationalarchives/components/file-input/file-input.mjs +3 -13
- package/nationalarchives/components/files-list/macro-options.json +1 -1
- package/nationalarchives/components/footer/fixtures.json +2 -2
- package/nationalarchives/components/footer/footer.css +1 -1
- package/nationalarchives/components/footer/footer.css.map +1 -1
- package/nationalarchives/components/footer/footer.js +1 -1
- package/nationalarchives/components/footer/footer.js.map +1 -1
- package/nationalarchives/components/footer/footer.mjs +5 -5
- package/nationalarchives/components/footer/template.njk +2 -2
- package/nationalarchives/components/gallery/gallery.js +1 -1
- package/nationalarchives/components/gallery/gallery.js.map +1 -1
- package/nationalarchives/components/global-header/global-header.css +1 -1
- package/nationalarchives/components/global-header/global-header.css.map +1 -1
- package/nationalarchives/components/global-header/global-header.js +1 -1
- package/nationalarchives/components/global-header/global-header.js.map +1 -1
- package/nationalarchives/components/header/header.css +1 -1
- package/nationalarchives/components/header/header.css.map +1 -1
- package/nationalarchives/components/header/header.js +1 -1
- package/nationalarchives/components/header/header.js.map +1 -1
- package/nationalarchives/components/hero/hero.css +1 -1
- package/nationalarchives/components/hero/hero.css.map +1 -1
- package/nationalarchives/components/hero/hero.scss +1 -1
- package/nationalarchives/components/picture/picture.js +1 -1
- package/nationalarchives/components/picture/picture.js.map +1 -1
- package/nationalarchives/components/radios/fixtures.json +25 -0
- package/nationalarchives/components/radios/macro-options.json +7 -1
- package/nationalarchives/components/radios/template.njk +1 -1
- package/nationalarchives/components/sidebar/fixtures.json +14 -6
- package/nationalarchives/components/sidebar/macro-options.json +56 -0
- package/nationalarchives/components/sidebar/sidebar.js +1 -1
- package/nationalarchives/components/sidebar/sidebar.js.map +1 -1
- package/nationalarchives/components/sidebar/template.njk +3 -3
- package/nationalarchives/components/skip-link/skip-link.css +1 -1
- package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
- package/nationalarchives/components/skip-link/skip-link.js +1 -1
- package/nationalarchives/components/skip-link/skip-link.js.map +1 -1
- package/nationalarchives/components/tabs/tabs.js +1 -1
- package/nationalarchives/components/tabs/tabs.js.map +1 -1
- package/nationalarchives/components/text-input/text-input.js +1 -1
- package/nationalarchives/components/text-input/text-input.js.map +1 -1
- package/nationalarchives/components/textarea/textarea.js +1 -1
- package/nationalarchives/components/textarea/textarea.js.map +1 -1
- package/nationalarchives/error-page.css +1 -1
- package/nationalarchives/error-page.css.map +1 -1
- package/nationalarchives/font-awesome.css +5 -5
- package/nationalarchives/font-awesome.css.map +1 -1
- package/nationalarchives/ie.css +1 -1
- package/nationalarchives/ie.css.map +1 -1
- package/nationalarchives/print.css +1 -1
- package/nationalarchives/print.css.map +1 -1
- package/nationalarchives/print.scss +17 -1
- package/nationalarchives/prototype-kit.css +1 -1
- package/nationalarchives/prototype-kit.css.map +1 -1
- package/nationalarchives/utilities/overrides/_index.scss +0 -6
- package/package.json +17 -19
- package/nationalarchives/lib/cookie-events.mjs +0 -70
- package/nationalarchives/lib/cookies.mjs +0 -398
package/nationalarchives/ie.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
a:focus,button:focus,input:focus,textarea:focus,select:focus,summary:focus{outline:3px #010101 solid !important;outline-offset:3px !important;box-shadow:0 0 0 3px #fc0 !important;transition:outline-offset .1s,box-shadow .1s}.tna-template--dark-theme a:focus,.tna-template--dark-theme button:focus,.tna-template--dark-theme input:focus,.tna-template--dark-theme textarea:focus,.tna-template--dark-theme select:focus,.tna-template--dark-theme summary:focus{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}@media(prefers-color-scheme: dark){.tna-template--system-theme a:focus,.tna-template--system-theme button:focus,.tna-template--system-theme input:focus,.tna-template--system-theme textarea:focus,.tna-template--system-theme select:focus,.tna-template--system-theme summary:focus{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}}a:focus,button:focus,input:focus,textarea:focus,select:focus,summary:focus{z-index:9}.tna-checkboxes__item input,.tna-radios__item input{width:1.5rem;height:1.5rem;display:inline-block;position:static;vertical-align:middle;opacity:1}.tna-checkboxes__item-label,.tna-radios__item-label{display:inline-block}.tna-compound-filters__link::before,.tna-compound-filters__link::after{border-left:2px #010101 solid !important}.tna-index-grid__item-image{height:100%}.tna-index-grid__item-content{flex:auto}.tna-button svg{display:none}.tna-global-header__logo--link,.tna-global-header__logo--link:link,.tna-global-header__logo--link:visited,.tna-global-header__navigation-item-link,.tna-global-header__navigation-item-link:link,.tna-global-header__navigation-item-link:visited,.tna-header__logo-contents--link,.tna-header__logo-contents--link:link,.tna-header__logo-contents--link:visited,.tna-header__navigation-item-link,.tna-header__navigation-item-link:link,.tna-header__navigation-item-link:visited{color:#fff}.tna-global-header__navigation-item-link{border-bottom:1px
|
|
1
|
+
a:focus,button:focus,input:focus,textarea:focus,select:focus,summary:focus{outline:3px #010101 solid !important;outline-offset:3px !important;box-shadow:0 0 0 3px #fc0 !important;transition:outline-offset .1s,box-shadow .1s}.tna-template--dark-theme a:focus,.tna-template--dark-theme button:focus,.tna-template--dark-theme input:focus,.tna-template--dark-theme textarea:focus,.tna-template--dark-theme select:focus,.tna-template--dark-theme summary:focus{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}@media(prefers-color-scheme: dark){.tna-template--system-theme a:focus,.tna-template--system-theme button:focus,.tna-template--system-theme input:focus,.tna-template--system-theme textarea:focus,.tna-template--system-theme select:focus,.tna-template--system-theme summary:focus{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}}a:focus,button:focus,input:focus,textarea:focus,select:focus,summary:focus{z-index:9}.tna-checkboxes__item input,.tna-radios__item input{width:1.5rem;height:1.5rem;display:inline-block;position:static;vertical-align:middle;opacity:1}.tna-checkboxes__item-label,.tna-radios__item-label{display:inline-block}.tna-compound-filters__link::before,.tna-compound-filters__link::after{border-left:2px #010101 solid !important}.tna-index-grid__item-image{height:100%}.tna-index-grid__item-content{flex:auto}.tna-button svg{display:none}.tna-global-header__logo--link,.tna-global-header__logo--link:link,.tna-global-header__logo--link:visited,.tna-global-header__navigation-item-link,.tna-global-header__navigation-item-link:link,.tna-global-header__navigation-item-link:visited,.tna-header__logo-contents--link,.tna-header__logo-contents--link:link,.tna-header__logo-contents--link:visited,.tna-header__navigation-item-link,.tna-header__navigation-item-link:link,.tna-header__navigation-item-link:visited{color:#fff}.tna-global-header__navigation-item-link{border-bottom:1px rgba(255,255,255,.5) solid}@media(min-width: 48.0625em){.tna-header__navigation-item+.tna-header__navigation-item{margin-left:2rem}}.tna-global-header__top-navigation-item+.tna-global-header__top-navigation-item{margin-left:2rem}.tna-global-header__top-navigation-link,.tna-global-header__top-navigation-link:link,.tna-global-header__top-navigation-link:visited,.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:rgba(255,255,255,.58)}.tna-global-header__top-navigation-link,.tna-global-header__top-navigation-link:focus,.tna-global-header__top-navigation-link:link,.tna-global-header__top-navigation-link:link:focus,.tna-global-header__top-navigation-link:visited,.tna-global-header__top-navigation-link:visited:focus,.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:focus,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:link:focus,.tna-header__top-navigation-item-link:visited,.tna-header__top-navigation-item-link:visited:focus{color:#fff}.tna-footer .tna-logo{height:96px}.tna-footer__licence-logo{height:24px}.tna-footer__govuk-logotype-crown{height:30px}.tna-card__image-container{margin-bottom:1rem;padding-bottom:66.6666666667%}.tna-card__image{width:100%;height:100%}.tna-card__heading-link::after{display:none !important}@media(min-width: 48.0625em){.tna-card--horizontal{padding-left:50%}.tna-card--horizontal.tna-card--flipped{padding-right:50%;padding-left:0}.tna-card--horizontal .tna-card__image-container{width:50%;position:absolute;top:0;bottom:0;left:0}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-card--horizontal-on-small{padding-left:50%}.tna-card--horizontal-on-small.tna-card--flipped{padding-right:50%;padding-left:0}.tna-card--horizontal-on-small .tna-card__image-container{width:50%;position:absolute;top:0;bottom:0;left:0}}.tna-columns{column-count:1 !important}.tna-breadcrumbs__link{color:#343338}.tna-sidebar--sticky{display:block}.tna-hero__image{top:0;left:0;bottom:0;right:0}.tna-hero__information,.tna-hero__content-inner{background:#fff}.tna-files-list__icon{height:3rem}.tna-form-item{display:block}.tna-form-item__contents{flex:none}.tna-chip{background:#fff}/*# sourceMappingURL=ie.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/nationalarchives/tools/_a11y.scss","../../src/nationalarchives/ie.scss","../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAyBA,2EACE,qCACA,8BAEA,qCAGA,WACE,kCAGF,uOACE,8BAEA,wCAKA,mCADF,mPAEI,8BAEA,yCCjCJ,2EACE,UASA,oDACE,aACA,cAEA,qBAEA,gBAEA,sBAEA,UAIJ,oDACE,qBAMA,uEAEE,yCAMJ,4BACE,YAGF,8BACE,UAKF,gBACE,aAQF,qdAGE,WAIJ,yCACE,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/nationalarchives/tools/_a11y.scss","../../src/nationalarchives/ie.scss","../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAyBA,2EACE,qCACA,8BAEA,qCAGA,WACE,kCAGF,uOACE,8BAEA,wCAKA,mCADF,mPAEI,8BAEA,yCCjCJ,2EACE,UASA,oDACE,aACA,cAEA,qBAEA,gBAEA,sBAEA,UAIJ,oDACE,qBAMA,uEAEE,yCAMJ,4BACE,YAGF,8BACE,UAKF,gBACE,aAQF,qdAGE,WAIJ,yCACE,6CChBA,6BDqBE,0DACE,kBAMJ,gFACE,iBAMF,oQAGE,4BAEA,4iBAEE,WAMJ,sBACE,YAGF,0BACE,YAGF,kCACE,YAyBF,2BACE,mBACA,8BAGF,iBACE,WACA,YAIA,+BACE,wBC9FJ,6BD8DA,sBACE,iBAGF,wCACE,kBACA,eAGF,iDACE,UAEA,kBACA,MACA,SACA,QCzFF,kDD0EA,+BACE,iBAGF,iDACE,kBACA,eAGF,0DACE,UAEA,kBACA,MACA,SACA,QA8BJ,aACE,0BAIA,uBACE,cAKF,qBACE,cAKF,iBACE,MACA,OACA,SACA,QAGF,gDAEE,gBAKF,sBACE,YAIJ,eACE,cAGF,yBACE,UAGF,UACE","file":"ie.css","sourcesContent":["@use \"../variables/a11y\";\n@use \"colour\";\n@use \"borders\";\n\n@mixin visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n overflow: hidden !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n background-color: transparent !important;\n\n border: 0 !important;\n\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n}\n\n%focus-outline {\n outline: a11y.$focus-outline-outer-width colour.brand-colour(\"black\") solid !important;\n outline-offset: a11y.$focus-outline-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition:\n outline-offset 0.1s,\n box-shadow 0.1s;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"black\") !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"black\") !important;\n }\n }\n}\n\n@mixin focus-outline {\n @extend %focus-outline;\n}\n\n@mixin no-focus-outline {\n outline: none !important;\n\n box-shadow: none !important;\n}\n\n%active-outline {\n outline: a11y.$focus-outline-active-outer-width colour.brand-colour(\"black\")\n solid !important;\n outline-offset: a11y.$focus-outline-active-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition: none;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"black\") !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"black\") !important;\n }\n }\n}\n\n@mixin active-outline {\n @extend %active-outline;\n}\n\n%faux-full-outline {\n position: relative;\n}\n\n%faux-full-outline-anchor {\n &::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 9;\n\n @include borders.rounded-border;\n }\n\n &:focus,\n &:active {\n @include no-focus-outline;\n }\n\n &:focus {\n &::before {\n @include focus-outline;\n }\n }\n\n &:active {\n &::before {\n @include active-outline;\n }\n }\n}\n\n@mixin faux-full-outline($anchor_selector) {\n @extend %faux-full-outline;\n\n #{$anchor_selector} {\n @extend %faux-full-outline-anchor;\n }\n}\n\n%focus-indicator-only-on-keyboard-focus {\n &:focus:not(:focus-visible) {\n @include no-focus-outline;\n }\n}\n\n@mixin focus-indicator-only-on-keyboard-focus {\n @extend %focus-indicator-only-on-keyboard-focus;\n}\n","/* stylelint-disable */\n\n@use \"sass:math\";\n@use \"tools/a11y\";\n@use \"tools/colour\";\n@use \"tools/media\";\n@use \"tools/spacing\";\n\na,\nbutton,\ninput,\ntextarea,\nselect,\nsummary {\n &:focus {\n z-index: 9;\n\n @include a11y.focus-outline;\n }\n}\n\n.tna-checkboxes,\n.tna-radios {\n &__item {\n input {\n width: 1.5rem;\n height: 1.5rem;\n\n display: inline-block;\n\n position: static;\n\n vertical-align: middle;\n\n opacity: 1;\n }\n }\n\n &__item-label {\n display: inline-block;\n }\n}\n\n.tna-compound-filters {\n &__link {\n &::before,\n &::after {\n border-left: 2px #010101 solid !important;\n }\n }\n}\n\n.tna-index-grid {\n &__item-image {\n height: 100%;\n }\n\n &__item-content {\n flex: auto;\n }\n}\n\n.tna-button {\n svg {\n display: none;\n }\n}\n\n.tna-global-header__logo--link,\n.tna-global-header__navigation-item-link,\n.tna-header__logo-contents--link,\n.tna-header__navigation-item-link {\n &,\n &:link,\n &:visited {\n color: #fff;\n }\n}\n\n.tna-global-header__navigation-item-link {\n border-bottom: 1px rgba(255, 255, 255, 0.5) solid;\n}\n\n@include media.on-larger-than-mobile {\n .tna-header__navigation-item {\n & + & {\n margin-left: 2rem;\n }\n }\n}\n\n.tna-global-header__top-navigation-item {\n & + & {\n margin-left: 2rem;\n }\n}\n\n.tna-global-header__top-navigation-link,\n.tna-header__top-navigation-item-link {\n &,\n &:link,\n &:visited {\n color: rgba(255, 255, 255, 0.58);\n\n &,\n &:focus {\n color: #fff;\n }\n }\n}\n\n.tna-footer {\n .tna-logo {\n height: 96px;\n }\n\n &__licence-logo {\n height: 24px;\n }\n\n &__govuk-logotype-crown {\n height: 30px;\n }\n}\n\n@mixin horizontal-card-layout($modifierClass, $innerPaddingAmount) {\n &#{$modifierClass} {\n padding-left: 50%;\n }\n\n &#{$modifierClass}#{&}--flipped {\n padding-right: 50%;\n padding-left: 0;\n }\n\n &#{$modifierClass} &__image-container {\n width: 50%;\n\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n }\n}\n\n.tna-card {\n &__image-container {\n margin-bottom: spacing.space(1);\n padding-bottom: #{math.div(2, 3) * 100%};\n }\n\n &__image {\n width: 100%;\n height: 100%;\n }\n\n &__heading-link {\n &::after {\n display: none !important;\n }\n }\n\n @include media.on-larger-than-mobile {\n @include horizontal-card-layout(\"--horizontal\", 2);\n }\n\n @include media.on-small {\n @include horizontal-card-layout(\"--horizontal-on-small\", 1);\n }\n}\n\n.tna-columns {\n column-count: 1 !important;\n}\n\n.tna-breadcrumbs {\n &__link {\n color: #343338;\n }\n}\n\n.tna-sidebar {\n &--sticky {\n display: block;\n }\n}\n\n.tna-hero {\n &__image {\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n }\n\n &__information,\n &__content-inner {\n background: #fff;\n }\n}\n\n.tna-files-list {\n &__icon {\n height: 3rem;\n }\n}\n\n.tna-form-item {\n display: block;\n}\n\n.tna-form-item__contents {\n flex: none;\n}\n\n.tna-chip {\n background: #fff;\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n"]}
|
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
* TNA Frontend print styles
|
|
4
4
|
* github.com/nationalarchives/tna-frontend
|
|
5
5
|
* ------------------------------------------
|
|
6
|
-
*/.tna-template,.tna-background-accent,.tna-background-contrast,.tna-hero:not(.tna-background-accent,.tna-background-tint) .tna-hero__inner{--background: #f4f4f4;--base-background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--base-font-base: #343338;--font-dark: rgb(1, 1, 1);--base-font-dark: rgb(1, 1, 1);--font-light: rgba(1, 1, 1, 0.58);--base-font-light: rgba(1, 1, 1, 0.58);--icon-light: rgba(1, 1, 1, 0.58);--base-icon-light: rgba(1, 1, 1, 0.58);--link: #005fa3;--base-link: #005fa3;--link-visited: #634abb;--base-link-visited: #634abb;--keyline: rgba(38, 38, 42, 0.25);--base-keyline: rgba(38, 38, 42, 0.25);--keyline-dark: rgb(38, 38, 42);--base-keyline-dark: rgb(38, 38, 42);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-border: #c20000;--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgba(255, 255, 255, 0.7);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-border-bright: rgb(217, 217, 214);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.7);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}.tna-breadcrumbs,.tna-cookie-banner,.tna-footer,.tna-global-header,.tna-header,.tna-hero__caption,.tna-phase-banner,.tna-picture__toggle-transcript,.tna-skip-link,.tna-tabs__list{display:none !important}.tna-dl{-webkit-print-color-adjust:exact;print-color-adjust:exact}.tna-tabs__item{display:block !important}.tna-tabs__item+.tna-tabs__item{margin-top:2rem}/*# sourceMappingURL=print.css.map */
|
|
6
|
+
*/.tna-\!--hide-on-print{display:none !important}.tna-template,.tna-background-accent,.tna-background-contrast,.tna-hero:not(.tna-background-accent,.tna-background-accent-light,.tna-background-contrast,.tna-background-tint,.tna-background-tint-light) .tna-hero__inner,.tna-picture__transcript,.tna-index-grid__item,.tna-hero__details-summary,.tna-gallery__item-figure-inner,.tna-gallery__navigation-item{--background: #f4f4f4;--base-background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--base-font-base: #343338;--font-dark: rgb(1, 1, 1);--base-font-dark: rgb(1, 1, 1);--font-light: rgba(1, 1, 1, 0.58);--base-font-light: rgba(1, 1, 1, 0.58);--icon-light: rgba(1, 1, 1, 0.58);--base-icon-light: rgba(1, 1, 1, 0.58);--link: #005fa3;--base-link: #005fa3;--link-visited: #634abb;--base-link-visited: #634abb;--keyline: rgba(38, 38, 42, 0.25);--base-keyline: rgba(38, 38, 42, 0.25);--keyline-dark: rgb(38, 38, 42);--base-keyline-dark: rgb(38, 38, 42);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-border: #c20000;--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgba(255, 255, 255, 0.7);--contrast-icon-light: rgba(255, 255, 255, 0.7);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgba(255, 255, 255, 0.3);--contrast-keyline-dark: rgba(255, 255, 255, 0.6);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-border-bright: rgb(217, 217, 214);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgba(1, 1, 1, 0.7);--accent-icon-light: rgba(1, 1, 1, 0.7);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgba(1, 1, 1, 0.3);--accent-keyline-dark: rgba(1, 1, 1, 0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}.tna-breadcrumbs,.tna-cookie-banner,.tna-footer,.tna-global-header,.tna-header,.tna-hero__caption,.tna-phase-banner,.tna-picture__toggle-transcript,.tna-skip-link,.tna-tabs__list{display:none !important}.tna-dl{-webkit-print-color-adjust:exact;print-color-adjust:exact}.tna-tabs__item{display:block !important}.tna-tabs__item+.tna-tabs__item{margin-top:2rem}/*# sourceMappingURL=print.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/nationalarchives/print.scss","../../src/nationalarchives/tools/_colour.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUA,0ICkBM,sBAEE,2BAFF,2DAEE,0BAFF,0BAEE,+BAFF,kCAEE,uCAFF,kCAEE,uCAFF,gBAEE,qBAFF,wBAEE,6BAFF,kCAEE,uCAFF,gCAEE,qCAFF,0iDDXN,mLAUE,wBAGF,QACE,iCACA,yBAIA,gBACE,yBAEA,gCACE","file":"print.css","sourcesContent":["/*!\n * ------------------------------------------\n * TNA Frontend print styles\n * github.com/nationalarchives/tna-frontend\n * ------------------------------------------\n */\n\n@use \"tools/colour\";\n@use \"tools/media\";\n\n.tna-template,\n.tna-background-accent,\n.tna-background-contrast,\n.tna-hero:not(.tna-background-accent, .tna-background-tint) .tna-hero__inner {\n @include colour.colour-css-vars;\n}\n\n.tna-breadcrumbs,\n.tna-cookie-banner,\n.tna-footer,\n.tna-global-header,\n.tna-header,\n.tna-hero__caption,\n.tna-phase-banner,\n.tna-picture__toggle-transcript,\n.tna-skip-link,\n.tna-tabs__list {\n display: none !important;\n}\n\n.tna-dl {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n}\n\n.tna-tabs {\n &__item {\n display: block !important;\n\n & + & {\n margin-top: 2rem;\n }\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"forest\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/nationalarchives/print.scss","../../src/nationalarchives/tools/_colour.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUA,uBACE,wBAGF,mWCcM,sBAEE,2BAFF,2DAEE,0BAFF,0BAEE,+BAFF,kCAEE,uCAFF,kCAEE,uCAFF,gBAEE,qBAFF,wBAEE,6BAFF,kCAEE,uCAFF,gCAEE,qCAFF,0iDDKN,mLAUE,wBAGF,QACE,iCACA,yBAIA,gBACE,yBAEA,gCACE","file":"print.css","sourcesContent":["/*!\n * ------------------------------------------\n * TNA Frontend print styles\n * github.com/nationalarchives/tna-frontend\n * ------------------------------------------\n */\n\n@use \"tools/colour\";\n@use \"tools/media\";\n\n.tna-\\!--hide-on-print {\n display: none !important;\n}\n\n.tna-template,\n.tna-background-accent,\n.tna-background-contrast,\n.tna-hero:not(\n .tna-background-accent,\n .tna-background-accent-light,\n .tna-background-contrast,\n .tna-background-tint,\n .tna-background-tint-light\n )\n .tna-hero__inner,\n.tna-picture__transcript,\n.tna-index-grid__item,\n.tna-hero__details-summary,\n.tna-gallery__item-figure-inner,\n.tna-gallery__navigation-item {\n @include colour.colour-css-vars;\n}\n\n.tna-breadcrumbs,\n.tna-cookie-banner,\n.tna-footer,\n.tna-global-header,\n.tna-header,\n.tna-hero__caption,\n.tna-phase-banner,\n.tna-picture__toggle-transcript,\n.tna-skip-link,\n.tna-tabs__list {\n display: none !important;\n}\n\n.tna-dl {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n}\n\n.tna-tabs {\n &__item {\n display: block !important;\n\n & + & {\n margin-top: 2rem;\n }\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"forest\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n"]}
|
|
@@ -8,10 +8,26 @@
|
|
|
8
8
|
@use "tools/colour";
|
|
9
9
|
@use "tools/media";
|
|
10
10
|
|
|
11
|
+
.tna-\!--hide-on-print {
|
|
12
|
+
display: none !important;
|
|
13
|
+
}
|
|
14
|
+
|
|
11
15
|
.tna-template,
|
|
12
16
|
.tna-background-accent,
|
|
13
17
|
.tna-background-contrast,
|
|
14
|
-
.tna-hero:not(
|
|
18
|
+
.tna-hero:not(
|
|
19
|
+
.tna-background-accent,
|
|
20
|
+
.tna-background-accent-light,
|
|
21
|
+
.tna-background-contrast,
|
|
22
|
+
.tna-background-tint,
|
|
23
|
+
.tna-background-tint-light
|
|
24
|
+
)
|
|
25
|
+
.tna-hero__inner,
|
|
26
|
+
.tna-picture__transcript,
|
|
27
|
+
.tna-index-grid__item,
|
|
28
|
+
.tna-hero__details-summary,
|
|
29
|
+
.tna-gallery__item-figure-inner,
|
|
30
|
+
.tna-gallery__navigation-item {
|
|
15
31
|
@include colour.colour-css-vars;
|
|
16
32
|
}
|
|
17
33
|
|