npm - @nationalarchives/frontend - Versions diffs - 0.41.1 → 0.42.0 - Mend

@nationalarchives/frontend 0.41.1 → 0.42.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.

Files changed (162) hide show

package/nationalarchives/components/file-input/file-input.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/components/file-input/file-input.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAgTA,kCACE,qCAhOA,4CAkQF,oGACE,6CACA,qBACA,0BACA,kCACA,kCACA,kCACA,gCACA,kCACA,kCAIA,kCAIA,8CAIA,0CAvRA,4CAJA,gCAiSE,mCADF,gQAKI,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,kEAIJ,4PAIE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iEA6BJ,+LACE,kDACA,kDACA,yDACA,yDACA,6CACA,qDACA,sDACA,2DACA,sDA2CF,2FACE,+CACA,yDACA,2CACA,qDACA,wDAQF,oGACE,gDACA,yDACA,4CACA,oDACA,yDC9dF,sDACE,qCACA,8BAEA,qCAGA,WACE,kCAGF,gFACE,8BAEA,wCAKA,mCADF,kFAEI,8BAEA,yCCvCN,gBACE,WAEA,cAEA,sBAEA,mBAEA,eAEA,sCACE,oBAEA,eAGF,2BACE,WACA,yBAEA,sBAEA,kBF8EE,wDG1GJ,cCDsB,IFqCpB,kCACE,oBAIJ,kFFsEI,kDE9DJ,2CACE,aAEA,kBACA,QACA,UAEA,UAGF,mCGxDA,mBH0DE,mBINF,wBJIA,mCAKI,mBACA,oBAIJ,kCACE,kBACA,eAEA,cACA,gBAEA,iBACA,uBAEA,mBC/EF,cCDsB,IFuFtB,oGGtEA,YEoBwB,IL0DpB,wHFpBJ,6CEsBM,qBAEA,yBAKN,2EFQI,kDEJF,2FACE,aACA,mBACA,uBAEA,kBACA,aACA,UAEA,oBF1CJ,4CKtDA,YEiBsB,IPyCtB,mDEkDE,yCACE,yBAKF,kDACE","file":"file-input.css","sourcesContent":["@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","@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","@use \"../../variables/forms\" as formsVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-file-input {\n width: 100%;\n\n display: block;\n\n box-sizing: border-box;\n\n border-radius: 0.1px;\n\n cursor: pointer;\n\n &::file-selector-button {\n margin-right: spacing.space(0.5);\n\n cursor: inherit;\n }\n\n &__droppable {\n width: 100%;\n padding: spacing.space(0.5) spacing.space(1) spacing.space(1);\n\n box-sizing: border-box;\n\n position: relative;\n\n @include colour.colour-border(\n \"keyline\",\n formsVars.$form-field-border-width\n );\n @include borders.rounded-border;\n\n &--empty {\n border-style: dashed;\n }\n }\n\n &__droppable:has(:is(&:hover, &:active)) {\n @include colour.colour-border(\"keyline-dark\");\n }\n\n &__droppable:has(&:focus) {\n @include a11y.focus-outline;\n }\n\n &__droppable & {\n padding: spacing.space(1);\n\n position: absolute;\n inset: 0;\n z-index: 1;\n\n opacity: 0;\n }\n\n &__droppable-buttons {\n @include typography.font-size(14);\n line-height: 1.5rem;\n\n @include media.on-tiny {\n flex-direction: row;\n align-items: center;\n }\n }\n\n &__droppable-status {\n margin-top: spacing.space(0.5);\n padding: spacing.space(0.5);\n\n display: block;\n overflow: hidden;\n\n line-height: 1.25;\n text-overflow: ellipsis;\n\n white-space: nowrap;\n\n @include borders.rounded-border;\n\n @include colour.tint;\n }\n\n &__droppable:not(&__droppable--empty) &__droppable-status {\n @include colour.blue-accent;\n @include colour.accent-light;\n @include typography.main-font-weight-medium;\n }\n\n &__droppable &:hover ~ &__droppable-buttons {\n .tna-button {\n &:not(.tna-button--plain) {\n @include colour.colour-font(\"button-hover-text\");\n text-decoration: none;\n\n background: transparent;\n }\n }\n }\n\n &__droppable--over,\n &__droppable--over-multiple {\n @include colour.colour-border(\"keyline-dark\");\n\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n\n position: absolute;\n inset: spacing.space(0.5);\n z-index: 2;\n\n pointer-events: none;\n\n @include colour.green-accent;\n\n @include colour.colour-font(\"accent-font-base\");\n @include typography.main-font-weight-bold;\n\n @include colour.colour-background(\"accent-background\");\n }\n }\n\n &__droppable--over {\n &::before {\n content: \"Drop file here\";\n }\n }\n\n &__droppable--over-multiple {\n &::before {\n content: \"Drop files here\";\n }\n }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\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","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/components/file-input/file-input.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAgTA,kCACE,qCAhOA,4CAkQF,oGACE,6CACA,qBACA,0BACA,kCACA,kCACA,kCACA,gCACA,kCACA,kCAIA,kCAIA,8CAIA,0CAvRA,4CAJA,gCAiSE,mCADF,gQAKI,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,kEAIJ,4PAIE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,yCACA,yCACA,qDACA,qDACA,iEA6BJ,+LACE,kDACA,kDACA,yDACA,yDACA,6CACA,qDACA,sDACA,2DACA,sDA2CF,2FACE,+CACA,yDACA,2CACA,qDACA,wDAQF,oGACE,gDACA,yDACA,4CACA,oDACA,yDC9dF,sDACE,qCACA,8BAEA,qCAGA,WACE,kCAGF,gFACE,8BAEA,wCAKA,mCADF,kFAEI,8BAEA,yCCvCN,gBACE,WAEA,cAEA,sBAEA,mBAEA,eAEA,sCACE,oBAEA,eAGF,2BACE,WACA,yBAEA,sBAEA,kBF8EE,wDG1GJ,cCDsB,IFqCpB,kCACE,oBAIJ,kFFsEI,kDE9DJ,2CACE,aAEA,kBACA,QACA,UAEA,UAGF,mCGxDA,mBH0DE,mBINF,wBJIA,mCAKI,mBACA,oBAIJ,kCACE,kBACA,eAEA,cACA,gBAEA,iBACA,uBAEA,mBC/EF,cCDsB,IFuFtB,oGGtEA,YEoBwB,IL0DpB,wHFpBJ,6CEsBM,qBAEA,yBAKN,2EFQI,kDEJF,2FACE,aACA,mBACA,uBAEA,kBACA,aACA,UAEA,oBF1CJ,4CKtDA,YEiBsB,IPyCtB,mDEkDE,yCACE,yBAKF,kDACE","file":"file-input.css","sourcesContent":["@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","@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","@use \"../../variables/forms\" as formsVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-file-input {\n width: 100%;\n\n display: block;\n\n box-sizing: border-box;\n\n border-radius: 0.1px;\n\n cursor: pointer;\n\n &::file-selector-button {\n margin-right: spacing.space(0.5);\n\n cursor: inherit;\n }\n\n &__droppable {\n width: 100%;\n padding: spacing.space(0.5) spacing.space(1) spacing.space(1);\n\n box-sizing: border-box;\n\n position: relative;\n\n @include colour.colour-border(\n \"keyline\",\n formsVars.$form-field-border-width\n );\n @include borders.rounded-border;\n\n &--empty {\n border-style: dashed;\n }\n }\n\n &__droppable:has(:is(&:hover, &:active)) {\n @include colour.colour-border(\"keyline-dark\");\n }\n\n &__droppable:has(&:focus) {\n @include a11y.focus-outline;\n }\n\n &__droppable & {\n padding: spacing.space(1);\n\n position: absolute;\n inset: 0;\n z-index: 1;\n\n opacity: 0;\n }\n\n &__droppable-buttons {\n @include typography.font-size(14);\n line-height: 1.5rem;\n\n @include media.on-tiny {\n flex-direction: row;\n align-items: center;\n }\n }\n\n &__droppable-status {\n margin-top: spacing.space(0.5);\n padding: spacing.space(0.5);\n\n display: block;\n overflow: hidden;\n\n line-height: 1.25;\n text-overflow: ellipsis;\n\n white-space: nowrap;\n\n @include borders.rounded-border;\n\n @include colour.tint;\n }\n\n &__droppable:not(&__droppable--empty) &__droppable-status {\n @include colour.blue-accent;\n @include colour.accent-light;\n @include typography.main-font-weight-medium;\n }\n\n &__droppable &:hover ~ &__droppable-buttons {\n .tna-button {\n &:not(.tna-button--plain) {\n @include colour.colour-font(\"button-hover-text\");\n text-decoration: none;\n\n background: transparent;\n }\n }\n }\n\n &__droppable--over,\n &__droppable--over-multiple {\n @include colour.colour-border(\"keyline-dark\");\n\n &::before {\n display: flex;\n align-items: center;\n justify-content: center;\n\n position: absolute;\n inset: spacing.space(0.5);\n z-index: 2;\n\n pointer-events: none;\n\n @include colour.green-accent;\n\n @include colour.colour-font(\"accent-font-base\");\n @include typography.main-font-weight-bold;\n\n @include colour.colour-background(\"accent-background\");\n }\n }\n\n &__droppable--over {\n &::before {\n content: \"Drop file here\";\n }\n }\n\n &__droppable--over-multiple {\n &::before {\n content: \"Drop files here\";\n }\n }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\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","@use \"sass:math\";\n\n/\n ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n /\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n /\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n /\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n"]}

package/nationalarchives/components/file-input/file-input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,()=>(()=>{"use strict";var e={d:(t,i)=>{for(var n in i)e.o(i,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:i[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function i(e){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i(e)}function n(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,r(n.key),n)}}function r(e){var t=function(e){if("object"!=i(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=i(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==i(t)?t:t+""}e.r(t),e.d(t,{FileInputDroppable:()=>o});var o=function(){return e=function e(t){var i=this;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$body=t&&t.querySelector(".tna-form-item__body"),this.$input=this.$body&&this.$body.querySelector(".tna-file-input"),this.$module&&this.$body&&this.$input){this.acceptMutltipleFiles=this.$input.hasAttribute("multiple"),this.$droppableArea=document.createElement("div"),this.$droppableArea.classList.add("tna-file-input__droppable","tna-file-input__droppable--empty"),this.$body.insertBefore(this.$droppableArea,this.$input),this.$droppableArea.appendChild(this.$input),this.$pseudoSelectFileText=document.createElement("span"),this.$pseudoSelectFileText.setAttribute("aria-live","polite"),this.$pseudoSelectFileText.classList.add("tna-file-input__droppable-status"),this.$pseudoSelectFileText.textContent="No file".concat(this.acceptMutltipleFiles?"s":""," selected"),this.$droppableArea.appendChild(this.$pseudoSelectFileText);var n=document.createElement("div");n.classList.add("tna-button-group","tna-button-group--small","tna-!--margin-top-s","tna-file-input__droppable-buttons"),this.$droppableArea.appendChild(n);var r=document.createElement("span");r.classList.add("tna-button"),r.textContent="Choose file".concat(this.acceptMutltipleFiles?"s":""),n.appendChild(r);var o=document.createElement("span");o.textContent="or drop file".concat(this.acceptMutltipleFiles?"s":""),n.appendChild(o),this.$droppableAreaAriaLabel=document.createElement("span"),this.$droppableAreaAriaLabel.classList.add("tna-visually-hidden"),this.$droppableAreaAriaLabel.setAttribute("aria-live","assertive"),this.$droppableArea.appendChild(this.$droppableAreaAriaLabel),this.$input.addEventListener("dragenter",function(e){return i.showDropTarget(e)}),this.$input.addEventListener("dragleave",function(){return i.hideDropTarget()}),this.$input.addEventListener("dragend",function(){return i.hideDropTarget()}),this.$input.addEventListener("change",function(){return i.onChange()}),this.$input.addEventListener("drop",function(){return i.onChange()})}},t=[{key:"isContainingFiles",value:function(e){var t=0===e.types.length,i=e.types.some(function(e){return"Files"===e});return t||i}},{key:"showDropTarget",value:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];e.dataTransfer&&this.isContainingFiles(e.dataTransfer)&&(this.$droppableArea.classList.add(e.dataTransfer.items.length>1?"tna-file-input__droppable--over-multiple":"tna-file-input__droppable--over"),t&&(this.$droppableAreaAriaLabel.textContent="Entered drop zone"))}},{key:"hideDropTarget",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.$droppableArea.classList.remove("tna-file-input__droppable--over","tna-file-input__droppable--over-multiple"),e&&(this.$droppableAreaAriaLabel.textContent="Left drop zone")}},{key:"onChange",value:function(){var e,t=this.$input.files;this.acceptMutltipleFiles?0===t.length?this.$pseudoSelectFileText.textContent="No files selected":this.$pseudoSelectFileText.textContent="".concat(t.length," file").concat(t.length>1?"s":""," selected"):this.$pseudoSelectFileText.textContent=(null===(e=t[0])||void 0===e?void 0:e.name)||"No file selected",0===t.length?this.$droppableArea.classList.add("tna-file-input__droppable--empty"):this.$droppableArea.classList.remove("tna-file-input__droppable--empty"),this.hideDropTarget(!1)}}],t&&n(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();return t})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,()=>(()=>{"use strict";var e={d:(t,n)=>{for(var i in n)e.o(n,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:n[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,r(i.key),i)}}function r(e){var t=function(e){if("object"!=n(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,"string");if("object"!=n(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==n(t)?t:t+""}e.r(t),e.d(t,{FileInputDroppable:()=>o});var o=function(){return e=function e(t){var n=this;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$body=t&&t.querySelector(".tna-form-item__body"),this.$input=this.$body&&this.$body.querySelector(".tna-file-input"),this.$module&&this.$body&&this.$input){this.acceptMutltipleFiles=this.$input.hasAttribute("multiple"),this.$droppableArea=document.createElement("div"),this.$droppableArea.classList.add("tna-file-input__droppable","tna-file-input__droppable--empty"),this.$body.insertBefore(this.$droppableArea,this.$input),this.$droppableArea.appendChild(this.$input),this.$pseudoSelectFileText=document.createElement("span"),this.$pseudoSelectFileText.setAttribute("aria-live","polite"),this.$pseudoSelectFileText.classList.add("tna-file-input__droppable-status");var i="file";this.acceptMutltipleFiles&&(i+="s"),this.$pseudoSelectFileText.textContent="No ".concat(i," selected"),this.$droppableArea.appendChild(this.$pseudoSelectFileText);var r=document.createElement("div");r.classList.add("tna-button-group","tna-button-group--small","tna-!--margin-top-s","tna-file-input__droppable-buttons"),this.$droppableArea.appendChild(r);var o=document.createElement("span");o.classList.add("tna-button"),o.textContent="Choose ".concat(i),r.appendChild(o);var a=document.createElement("span");a.textContent="or drop ".concat(i),r.appendChild(a),this.$droppableAreaAriaLabel=document.createElement("span"),this.$droppableAreaAriaLabel.classList.add("tna-visually-hidden"),this.$droppableAreaAriaLabel.setAttribute("aria-live","assertive"),this.$droppableArea.appendChild(this.$droppableAreaAriaLabel),this.$input.addEventListener("dragenter",function(e){return n.showDropTarget(e)}),this.$input.addEventListener("dragleave",function(){return n.hideDropTarget()}),this.$input.addEventListener("dragend",function(){return n.hideDropTarget()}),this.$input.addEventListener("change",function(){return n.onChange()}),this.$input.addEventListener("drop",function(){return n.onChange()})}},t=[{key:"isContainingFiles",value:function(e){var t=!e.types.length,n=e.types.some(function(e){return"Files"===e});return t||n}},{key:"showDropTarget",value:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if(e.dataTransfer&&this.isContainingFiles(e.dataTransfer)){var n="tna-file-input__droppable--over";e.dataTransfer.items.length&&(n="tna-file-input__droppable--over-multiple"),this.$droppableArea.classList.add(n),t&&(this.$droppableAreaAriaLabel.textContent="Entered drop zone")}}},{key:"hideDropTarget",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.$droppableArea.classList.remove("tna-file-input__droppable--over","tna-file-input__droppable--over-multiple"),e&&(this.$droppableAreaAriaLabel.textContent="Left drop zone")}},{key:"onChange",value:function(){var e,t=this.$input.files;if(this.acceptMutltipleFiles)if(t.length){var n="file";t.length>1&&(n+="s");var i="".concat(t.length," ").concat(n," selected");this.$pseudoSelectFileText.textContent=i}else this.$pseudoSelectFileText.textContent="No files selected";else this.$pseudoSelectFileText.textContent=(null===(e=t[0])||void 0===e?void 0:e.name)||"No file selected";t.length?this.$droppableArea.classList.remove("tna-file-input__droppable--empty"):this.$droppableArea.classList.add("tna-file-input__droppable--empty"),this.hideDropTarget(!1)}}],t&&i(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();return t})());
 //# sourceMappingURL=file-input.js.map

package/nationalarchives/components/file-input/file-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components/file-input/file-input.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,IAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACA,oBAAAkB,QAAAA,OAAAC,aACAV,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAuDC,MAAA,WAEvDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,stBCLzC,IAAMC,EAAkB,WAwD5B,SAvDD,SAAAA,EAAYC,GAAS,IAAAC,EAAAC,KAKnB,+FALmBC,CAAAD,KAAAH,GACnBG,KAAKF,QAAUA,EACfE,KAAKE,MAAQJ,GAAWA,EAAQK,cAAc,wBAC9CH,KAAKI,OAASJ,KAAKE,OAASF,KAAKE,MAAMC,cAAc,mBAEhDH,KAAKF,SAAYE,KAAKE,OAAUF,KAAKI,OAA1C,CAIAJ,KAAKK,qBAAuBL,KAAKI,OAAOE,aAAa,YAErDN,KAAKO,eAAiBC,SAASC,cAAc,OAC7CT,KAAKO,eAAeG,UAAUC,IAC5B,4BACA,oCAEFX,KAAKE,MAAMU,aAAaZ,KAAKO,eAAgBP,KAAKI,QAClDJ,KAAKO,eAAeM,YAAYb,KAAKI,QAErCJ,KAAKc,sBAAwBN,SAASC,cAAc,QACpDT,KAAKc,sBAAsBC,aAAa,YAAa,UACrDf,KAAKc,sBAAsBJ,UAAUC,IACnC,oCAEFX,KAAKc,sBAAsBE,YAAW,UAAAC,OAAajB,KAAKK,qBAAuB,IAAM,GAAE,aACvFL,KAAKO,eAAeM,YAAYb,KAAKc,uBAErC,IAAMI,EAAoBV,SAASC,cAAc,OACjDS,EAAkBR,UAAUC,IAC1B,mBACA,0BACA,sBACA,qCAEFX,KAAKO,eAAeM,YAAYK,GAEhC,IAAMC,EAA0BX,SAASC,cAAc,QACvDU,EAAwBT,UAAUC,IAAI,cACtCQ,EAAwBH,YAAW,cAAAC,OAAiBjB,KAAKK,qBAAuB,IAAM,IACtFa,EAAkBL,YAAYM,GAE9B,IAAMC,EAAwBZ,SAASC,cAAc,QACrDW,EAAsBJ,YAAW,eAAAC,OAAkBjB,KAAKK,qBAAuB,IAAM,IACrFa,EAAkBL,YAAYO,GAE9BpB,KAAKqB,wBAA0Bb,SAASC,cAAc,QACtDT,KAAKqB,wBAAwBX,UAAUC,IAAI,uBAC3CX,KAAKqB,wBAAwBN,aAAa,YAAa,aACvDf,KAAKO,eAAeM,YAAYb,KAAKqB,yBAErCrB,KAAKI,OAAOkB,iBAAiB,YAAa,SAACC,GAAC,OAAKxB,EAAKyB,eAAeD,EAAE,GACvEvB,KAAKI,OAAOkB,iBAAiB,YAAa,kBAAMvB,EAAK0B,gBAAgB,GACrEzB,KAAKI,OAAOkB,iBAAiB,UAAW,kBAAMvB,EAAK0B,gBAAgB,GACnEzB,KAAKI,OAAOkB,iBAAiB,SAAU,kBAAMvB,EAAK2B,UAAU,GAC5D1B,KAAKI,OAAOkB,iBAAiB,OAAQ,kBAAMvB,EAAK2B,UAAU,EA/C1D,CAgDF,IAAC,EAAA3C,IAAA,oBAAAa,MAED,SAAkB+B,GAChB,IAAMC,EAA+C,IAA9BD,EAAaE,MAAMC,OACpCC,EAAkBJ,EAAaE,MAAMG,KAAK,SAACC,GAAI,MAAc,UAATA,CAAgB,GAC1E,OAAOL,GAAkBG,CAC3B,GAAC,CAAAhD,IAAA,iBAAAa,MAED,SAAesC,GAA+B,IAAxBC,IAAeC,UAAAN,OAAA,QAAAO,IAAAD,UAAA,KAAAA,UAAA,GAC/BF,EAAMP,cAAgB3B,KAAKsC,kBAAkBJ,EAAMP,gBACrD3B,KAAKO,eAAeG,UAAUC,IAC5BuB,EAAMP,aAAaY,MAAMT,OAAS,EAC9B,2CACA,mCAGFK,IACFnC,KAAKqB,wBAAwBL,YAAc,qBAGjD,GAAC,CAAAjC,IAAA,iBAAAa,MAED,WAAuC,IAAxBuC,IAAeC,UAAAN,OAAA,QAAAO,IAAAD,UAAA,KAAAA,UAAA,GAC5BpC,KAAKO,eAAeG,UAAU8B,OAC5B,kCACA,4CAEEL,IACFnC,KAAKqB,wBAAwBL,YAAc,iBAE/C,GAAC,CAAAjC,IAAA,WAAAa,MAED,WACE,IAOO6C,EAPDC,EAAQ1C,KAAKI,OAAOsC,MACtB1C,KAAKK,qBACc,IAAjBqC,EAAMZ,OACR9B,KAAKc,sBAAsBE,YAAW,oBAEtChB,KAAKc,sBAAsBE,YAAW,GAAAC,OAAMyB,EAAMZ,OAAM,SAAAb,OAAQyB,EAAMZ,OAAS,EAAI,IAAM,GAAE,aAG7F9B,KAAKc,sBAAsBE,aACjB,QAARyB,EAAAC,EAAM,UAAE,IAAAD,OAAA,EAARA,EAAUE,OAAI,mBAEG,IAAjBD,EAAMZ,OACR9B,KAAKO,eAAeG,UAAUC,IAAI,oCAElCX,KAAKO,eAAeG,UAAU8B,OAAO,oCAEvCxC,KAAKyB,gBAAe,EACtB,oFAAC,CA1G4B","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/file-input/file-input.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class FileInputDroppable {\n constructor($module) {\n this.$module = $module;\n this.$body = $module && $module.querySelector(\".tna-form-item__body\");\n this.$input = this.$body && this.$body.querySelector(\".tna-file-input\");\n\n if (!this.$module \|\| !this.$body \|\| !this.$input) {\n return;\n }\n\n this.acceptMutltipleFiles = this.$input.hasAttribute(\"multiple\");\n\n this.$droppableArea = document.createElement(\"div\");\n this.$droppableArea.classList.add(\n \"tna-file-input__droppable\",\n \"tna-file-input__droppable--empty\",\n );\n this.$body.insertBefore(this.$droppableArea, this.$input);\n this.$droppableArea.appendChild(this.$input);\n\n this.$pseudoSelectFileText = document.createElement(\"span\");\n this.$pseudoSelectFileText.setAttribute(\"aria-live\", \"polite\");\n this.$pseudoSelectFileText.classList.add(\n \"tna-file-input__droppable-status\",\n );\n this.$pseudoSelectFileText.textContent = `No file${this.acceptMutltipleFiles ? \"s\" : \"\"} selected`;\n this.$droppableArea.appendChild(this.$pseudoSelectFileText);\n\n const $droppableButtons = document.createElement(\"div\");\n $droppableButtons.classList.add(\n \"tna-button-group\",\n \"tna-button-group--small\",\n \"tna-!--margin-top-s\",\n \"tna-file-input__droppable-buttons\",\n );\n this.$droppableArea.appendChild($droppableButtons);\n\n const $pseudoSelectFileButton = document.createElement(\"span\");\n $pseudoSelectFileButton.classList.add(\"tna-button\");\n $pseudoSelectFileButton.textContent = `Choose file${this.acceptMutltipleFiles ? \"s\" : \"\"}`;\n $droppableButtons.appendChild($pseudoSelectFileButton);\n\n const $pseudoDropFileButton = document.createElement(\"span\");\n $pseudoDropFileButton.textContent = `or drop file${this.acceptMutltipleFiles ? \"s\" : \"\"}`;\n $droppableButtons.appendChild($pseudoDropFileButton);\n\n this.$droppableAreaAriaLabel = document.createElement(\"span\");\n this.$droppableAreaAriaLabel.classList.add(\"tna-visually-hidden\");\n this.$droppableAreaAriaLabel.setAttribute(\"aria-live\", \"assertive\");\n this.$droppableArea.appendChild(this.$droppableAreaAriaLabel);\n\n this.$input.addEventListener(\"dragenter\", (e) => this.showDropTarget(e));\n this.$input.addEventListener(\"dragleave\", () => this.hideDropTarget());\n this.$input.addEventListener(\"dragend\", () => this.hideDropTarget());\n this.$input.addEventListener(\"change\", () => this.onChange());\n this.$input.addEventListener(\"drop\", () => this.onChange());\n }\n\n isContainingFiles(dataTransfer) {\n const hasNoTypesInfo = dataTransfer.types.length === 0;\n const isDraggingFiles = dataTransfer.types.some((type) => type === \"Files\");\n return hasNoTypesInfo \|\| isDraggingFiles;\n }\n\n showDropTarget(event, updateAriaLabel = true) {\n if (event.dataTransfer && this.isContainingFiles(event.dataTransfer)) {\n this.$droppableArea.classList.add(\n event.dataTransfer.items.length > 1\n ? \"tna-file-input__droppable--over-multiple\"\n : \"tna-file-input__droppable--over\",\n );\n\n if (updateAriaLabel) {\n this.$droppableAreaAriaLabel.textContent = \"Entered drop zone\";\n }\n }\n }\n\n hideDropTarget(updateAriaLabel = true) {\n this.$droppableArea.classList.remove(\n \"tna-file-input__droppable--over\",\n \"tna-file-input__droppable--over-multiple\",\n );\n if (updateAriaLabel) {\n this.$droppableAreaAriaLabel.textContent = \"Left drop zone\";\n }\n }\n\n onChange() {\n const files = this.$input.files;\n if (this.acceptMutltipleFiles) {\n if (files.length === 0) {\n this.$pseudoSelectFileText.textContent = `No files selected`;\n } else {\n this.$pseudoSelectFileText.textContent = `${files.length} file${files.length > 1 ? \"s\" : \"\"} selected`;\n }\n } else {\n this.$pseudoSelectFileText.textContent =\n files[0]?.name \|\| `No file selected`;\n }\n if (files.length === 0) {\n this.$droppableArea.classList.add(\"tna-file-input__droppable--empty\");\n } else {\n this.$droppableArea.classList.remove(\"tna-file-input__droppable--empty\");\n }\n this.hideDropTarget(false);\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","FileInputDroppable","$module","_this","this","_classCallCheck","$body","querySelector","$input","acceptMutltipleFiles","hasAttribute","$droppableArea","document","createElement","classList","add","insertBefore","appendChild","$pseudoSelectFileText","setAttribute","textContent","concat","$droppableButtons","$pseudoSelectFileButton","$pseudoDropFileButton","$droppableAreaAriaLabel","addEventListener","e","showDropTarget","hideDropTarget","onChange","dataTransfer","hasNoTypesInfo","types","length","isDraggingFiles","some","type","event","updateAriaLabel","arguments","undefined","isContainingFiles","items","remove","_files$","files","name"],"sourceRoot":""}
1	+ {"version":3,"file":"components/file-input/file-input.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,IAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACA,oBAAAkB,QAAAA,OAAAC,aACAV,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAuDC,MAAA,WAEvDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,stBCLzC,IAAMC,EAAkB,WAkE7B,SAjEA,SAAAA,EAAYC,GAAS,IAAAC,EAAAC,KAKnB,+FALmBC,CAAAD,KAAAH,GACnBG,KAAKF,QAAUA,EACfE,KAAKE,MAAQJ,GAAWA,EAAQK,cAAc,wBAC9CH,KAAKI,OAASJ,KAAKE,OAASF,KAAKE,MAAMC,cAAc,mBAEhDH,KAAKF,SAAYE,KAAKE,OAAUF,KAAKI,OAA1C,CAIAJ,KAAKK,qBAAuBL,KAAKI,OAAOE,aAAa,YAErDN,KAAKO,eAAiBC,SAASC,cAAc,OAC7CT,KAAKO,eAAeG,UAAUC,IAC5B,4BACA,oCAEFX,KAAKE,MAAMU,aAAaZ,KAAKO,eAAgBP,KAAKI,QAClDJ,KAAKO,eAAeM,YAAYb,KAAKI,QAErCJ,KAAKc,sBAAwBN,SAASC,cAAc,QACpDT,KAAKc,sBAAsBC,aAAa,YAAa,UACrDf,KAAKc,sBAAsBJ,UAAUC,IACnC,oCAGF,IAAIK,EAAW,OACXhB,KAAKK,uBACPW,GAAY,KAGdhB,KAAKc,sBAAsBG,YAAW,MAAAC,OAASF,EAAQ,aACvDhB,KAAKO,eAAeM,YAAYb,KAAKc,uBAErC,IAAMK,EAAoBX,SAASC,cAAc,OACjDU,EAAkBT,UAAUC,IAC1B,mBACA,0BACA,sBACA,qCAEFX,KAAKO,eAAeM,YAAYM,GAEhC,IAAMC,EAA0BZ,SAASC,cAAc,QACvDW,EAAwBV,UAAUC,IAAI,cACtCS,EAAwBH,YAAW,UAAAC,OAAaF,GAChDG,EAAkBN,YAAYO,GAE9B,IAAMC,EAAwBb,SAASC,cAAc,QACrDY,EAAsBJ,YAAW,WAAAC,OAAcF,GAC/CG,EAAkBN,YAAYQ,GAE9BrB,KAAKsB,wBAA0Bd,SAASC,cAAc,QACtDT,KAAKsB,wBAAwBZ,UAAUC,IAAI,uBAC3CX,KAAKsB,wBAAwBP,aAAa,YAAa,aACvDf,KAAKO,eAAeM,YAAYb,KAAKsB,yBAErCtB,KAAKI,OAAOmB,iBAAiB,YAAa,SAACC,GAAK,OAC9CzB,EAAK0B,eAAeD,EAAM,GAE5BxB,KAAKI,OAAOmB,iBAAiB,YAAa,kBAAMxB,EAAK2B,gBAAgB,GACrE1B,KAAKI,OAAOmB,iBAAiB,UAAW,kBAAMxB,EAAK2B,gBAAgB,GACnE1B,KAAKI,OAAOmB,iBAAiB,SAAU,kBAAMxB,EAAK4B,UAAU,GAC5D3B,KAAKI,OAAOmB,iBAAiB,OAAQ,kBAAMxB,EAAK4B,UAAU,EAvD1D,CAwDF,IAEA,EAAA5C,IAAA,oBAAAa,MACA,SAAkBgC,GAChB,IAAMC,GAAkBD,EAAaE,MAAMC,OACrCC,EAAkBJ,EAAaE,MAAMG,KAAK,SAACC,GAAI,MAAc,UAATA,CAAgB,GAC1E,OAAOL,GAAkBG,CAC3B,GAAC,CAAAjD,IAAA,iBAAAa,MAED,SAAe4B,GAA+B,IAAxBW,IAAeC,UAAAL,OAAA,QAAAM,IAAAD,UAAA,KAAAA,UAAA,GACnC,GAAIZ,EAAMI,cAAgB5B,KAAKsC,kBAAkBd,EAAMI,cAAe,CACpE,IAAIW,EAAa,kCACbf,EAAMI,aAAaY,MAAMT,SAC3BQ,EAAa,4CAEfvC,KAAKO,eAAeG,UAAUC,IAAI4B,GAE9BJ,IACFnC,KAAKsB,wBAAwBL,YAAc,oBAE/C,CACF,GAAC,CAAAlC,IAAA,iBAAAa,MAED,WAAuC,IAAxBuC,IAAeC,UAAAL,OAAA,QAAAM,IAAAD,UAAA,KAAAA,UAAA,GAC5BpC,KAAKO,eAAeG,UAAU+B,OAC5B,kCACA,4CAEEN,IACFnC,KAAKsB,wBAAwBL,YAAc,iBAE/C,GAAC,CAAAlC,IAAA,WAAAa,MAED,WACE,IAaO8C,EAbCC,EAAU3C,KAAKI,OAAfuC,MACR,GAAI3C,KAAKK,qBACP,GAAIsC,EAAMZ,OAAQ,CAChB,IAAIf,EAAW,OAEX2B,EAAMZ,OAAS,IACjBf,GAAY,KAEd,IAAMC,EAAW,GAAAC,OAAMyB,EAAMZ,OAAM,KAAAb,OAAIF,EAAQ,aAC/ChB,KAAKc,sBAAsBG,YAAcA,CAC3C,MACEjB,KAAKc,sBAAsBG,YAAW,yBAGxCjB,KAAKc,sBAAsBG,aAEjB,QAARyB,EAAAC,EAAM,UAAE,IAAAD,OAAA,EAARA,EAAUE,OAAI,mBAEdD,EAAMZ,OACR/B,KAAKO,eAAeG,UAAU+B,OAAO,oCAErCzC,KAAKO,eAAeG,UAAUC,IAAI,oCAEpCX,KAAK0B,gBAAe,EACtB,oFAAC,CA1H4B","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/file-input/file-input.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class FileInputDroppable {\n constructor($module) {\n this.$module = $module;\n this.$body = $module && $module.querySelector(\".tna-form-item__body\");\n this.$input = this.$body && this.$body.querySelector(\".tna-file-input\");\n\n if (!this.$module \|\| !this.$body \|\| !this.$input) {\n return;\n }\n\n this.acceptMutltipleFiles = this.$input.hasAttribute(\"multiple\");\n\n this.$droppableArea = document.createElement(\"div\");\n this.$droppableArea.classList.add(\n \"tna-file-input__droppable\",\n \"tna-file-input__droppable--empty\",\n );\n this.$body.insertBefore(this.$droppableArea, this.$input);\n this.$droppableArea.appendChild(this.$input);\n\n this.$pseudoSelectFileText = document.createElement(\"span\");\n this.$pseudoSelectFileText.setAttribute(\"aria-live\", \"polite\");\n this.$pseudoSelectFileText.classList.add(\n \"tna-file-input__droppable-status\",\n );\n\n let fileText = \"file\";\n if (this.acceptMutltipleFiles) {\n fileText += \"s\";\n }\n\n this.$pseudoSelectFileText.textContent = `No ${fileText} selected`;\n this.$droppableArea.appendChild(this.$pseudoSelectFileText);\n\n const $droppableButtons = document.createElement(\"div\");\n $droppableButtons.classList.add(\n \"tna-button-group\",\n \"tna-button-group--small\",\n \"tna-!--margin-top-s\",\n \"tna-file-input__droppable-buttons\",\n );\n this.$droppableArea.appendChild($droppableButtons);\n\n const $pseudoSelectFileButton = document.createElement(\"span\");\n $pseudoSelectFileButton.classList.add(\"tna-button\");\n $pseudoSelectFileButton.textContent = `Choose ${fileText}`;\n $droppableButtons.appendChild($pseudoSelectFileButton);\n\n const $pseudoDropFileButton = document.createElement(\"span\");\n $pseudoDropFileButton.textContent = `or drop ${fileText}`;\n $droppableButtons.appendChild($pseudoDropFileButton);\n\n this.$droppableAreaAriaLabel = document.createElement(\"span\");\n this.$droppableAreaAriaLabel.classList.add(\"tna-visually-hidden\");\n this.$droppableAreaAriaLabel.setAttribute(\"aria-live\", \"assertive\");\n this.$droppableArea.appendChild(this.$droppableAreaAriaLabel);\n\n this.$input.addEventListener(\"dragenter\", (event) =>\n this.showDropTarget(event),\n );\n this.$input.addEventListener(\"dragleave\", () => this.hideDropTarget());\n this.$input.addEventListener(\"dragend\", () => this.hideDropTarget());\n this.$input.addEventListener(\"change\", () => this.onChange());\n this.$input.addEventListener(\"drop\", () => this.onChange());\n }\n\n /* eslint-disable-next-line class-methods-use-this /\n isContainingFiles(dataTransfer) {\n const hasNoTypesInfo = !dataTransfer.types.length;\n const isDraggingFiles = dataTransfer.types.some((type) => type === \"Files\");\n return hasNoTypesInfo \|\| isDraggingFiles;\n }\n\n showDropTarget(event, updateAriaLabel = true) {\n if (event.dataTransfer && this.isContainingFiles(event.dataTransfer)) {\n let classToAdd = \"tna-file-input__droppable--over\";\n if (event.dataTransfer.items.length) {\n classToAdd = \"tna-file-input__droppable--over-multiple\";\n }\n this.$droppableArea.classList.add(classToAdd);\n\n if (updateAriaLabel) {\n this.$droppableAreaAriaLabel.textContent = \"Entered drop zone\";\n }\n }\n }\n\n hideDropTarget(updateAriaLabel = true) {\n this.$droppableArea.classList.remove(\n \"tna-file-input__droppable--over\",\n \"tna-file-input__droppable--over-multiple\",\n );\n if (updateAriaLabel) {\n this.$droppableAreaAriaLabel.textContent = \"Left drop zone\";\n }\n }\n\n onChange() {\n const { files } = this.$input;\n if (this.acceptMutltipleFiles) {\n if (files.length) {\n let fileText = \"file\";\n / eslint-disable-next-line no-magic-numbers /\n if (files.length > 1) {\n fileText += \"s\";\n }\n const textContent = `${files.length} ${fileText} selected`;\n this.$pseudoSelectFileText.textContent = textContent;\n } else {\n this.$pseudoSelectFileText.textContent = `No files selected`;\n }\n } else {\n this.$pseudoSelectFileText.textContent =\n / eslint-disable-next-line no-magic-numbers */\n files[0]?.name \|\| `No file selected`;\n }\n if (files.length) {\n this.$droppableArea.classList.remove(\"tna-file-input__droppable--empty\");\n } else {\n this.$droppableArea.classList.add(\"tna-file-input__droppable--empty\");\n }\n this.hideDropTarget(false);\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","FileInputDroppable","$module","_this","this","_classCallCheck","$body","querySelector","$input","acceptMutltipleFiles","hasAttribute","$droppableArea","document","createElement","classList","add","insertBefore","appendChild","$pseudoSelectFileText","setAttribute","fileText","textContent","concat","$droppableButtons","$pseudoSelectFileButton","$pseudoDropFileButton","$droppableAreaAriaLabel","addEventListener","event","showDropTarget","hideDropTarget","onChange","dataTransfer","hasNoTypesInfo","types","length","isDraggingFiles","some","type","updateAriaLabel","arguments","undefined","isContainingFiles","classToAdd","items","remove","_files$","files","name"],"sourceRoot":""}

package/nationalarchives/components/file-input/file-input.mjs CHANGED Viewed

@@ -23,7 +23,13 @@ export class FileInputDroppable {
     this.$pseudoSelectFileText.classList.add(
       "tna-file-input__droppable-status",
     );
-    this.$pseudoSelectFileText.textContent = `No file${this.acceptMutltipleFiles ? "s" : ""} selected`;
+    let fileText = "file";
+    if (this.acceptMutltipleFiles) {
+      fileText += "s";
+    }
+    this.$pseudoSelectFileText.textContent = `No ${fileText} selected`;
     this.$droppableArea.appendChild(this.$pseudoSelectFileText);
     const $droppableButtons = document.createElement("div");
@@ -37,11 +43,11 @@ export class FileInputDroppable {
     const $pseudoSelectFileButton = document.createElement("span");
     $pseudoSelectFileButton.classList.add("tna-button");
-    $pseudoSelectFileButton.textContent = `Choose file${this.acceptMutltipleFiles ? "s" : ""}`;
+    $pseudoSelectFileButton.textContent = `Choose ${fileText}`;
     $droppableButtons.appendChild($pseudoSelectFileButton);
     const $pseudoDropFileButton = document.createElement("span");
-    $pseudoDropFileButton.textContent = `or drop file${this.acceptMutltipleFiles ? "s" : ""}`;
+    $pseudoDropFileButton.textContent = `or drop ${fileText}`;
     $droppableButtons.appendChild($pseudoDropFileButton);
     this.$droppableAreaAriaLabel = document.createElement("span");
@@ -49,26 +55,29 @@ export class FileInputDroppable {
     this.$droppableAreaAriaLabel.setAttribute("aria-live", "assertive");
     this.$droppableArea.appendChild(this.$droppableAreaAriaLabel);
-    this.$input.addEventListener("dragenter", (e) => this.showDropTarget(e));
+    this.$input.addEventListener("dragenter", (event) =>
+      this.showDropTarget(event),
+    );
     this.$input.addEventListener("dragleave", () => this.hideDropTarget());
     this.$input.addEventListener("dragend", () => this.hideDropTarget());
     this.$input.addEventListener("change", () => this.onChange());
     this.$input.addEventListener("drop", () => this.onChange());
   }
+  /* eslint-disable-next-line class-methods-use-this */
   isContainingFiles(dataTransfer) {
-    const hasNoTypesInfo = dataTransfer.types.length === 0;
+    const hasNoTypesInfo = !dataTransfer.types.length;
     const isDraggingFiles = dataTransfer.types.some((type) => type === "Files");
     return hasNoTypesInfo || isDraggingFiles;
   }
   showDropTarget(event, updateAriaLabel = true) {
     if (event.dataTransfer && this.isContainingFiles(event.dataTransfer)) {
-      this.$droppableArea.classList.add(
-        event.dataTransfer.items.length > 1
-          ? "tna-file-input__droppable--over-multiple"
-          : "tna-file-input__droppable--over",
-      );
+      let classToAdd = "tna-file-input__droppable--over";
+      if (event.dataTransfer.items.length) {
+        classToAdd = "tna-file-input__droppable--over-multiple";
+      }
+      this.$droppableArea.classList.add(classToAdd);
       if (updateAriaLabel) {
         this.$droppableAreaAriaLabel.textContent = "Entered drop zone";
@@ -87,21 +96,28 @@ export class FileInputDroppable {
   }
   onChange() {
-    const files = this.$input.files;
+    const { files } = this.$input;
     if (this.acceptMutltipleFiles) {
-      if (files.length === 0) {
-        this.$pseudoSelectFileText.textContent = `No files selected`;
+      if (files.length) {
+        let fileText = "file";
+        /* eslint-disable-next-line no-magic-numbers */
+        if (files.length > 1) {
+          fileText += "s";
+        }
+        const textContent = `${files.length} ${fileText} selected`;
+        this.$pseudoSelectFileText.textContent = textContent;
       } else {
-        this.$pseudoSelectFileText.textContent = `${files.length} file${files.length > 1 ? "s" : ""} selected`;
+        this.$pseudoSelectFileText.textContent = `No files selected`;
       }
     } else {
       this.$pseudoSelectFileText.textContent =
+        /* eslint-disable-next-line no-magic-numbers */
         files[0]?.name || `No file selected`;
     }
-    if (files.length === 0) {
-      this.$droppableArea.classList.add("tna-file-input__droppable--empty");
-    } else {
+    if (files.length) {
       this.$droppableArea.classList.remove("tna-file-input__droppable--empty");
+    } else {
+      this.$droppableArea.classList.add("tna-file-input__droppable--empty");
     }
     this.hideDropTarget(false);
   }

package/nationalarchives/components/files-list/files-list.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tna-files-list{--background: var(--background-tint);background-color:var(--background, #f4f4f4)}.tna-files-list--full-click .tna-files-list__link:focus::before{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 .tna-files-list--full-click .tna-files-list__link:focus::before,.tna-files-list--full-click .tna-template--dark-theme .tna-files-list__link:focus::before{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-files-list--full-click .tna-files-list__link:focus::before,.tna-files-list--full-click .tna-template--system-theme .tna-files-list__link:focus::before{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}}.tna-files-list--full-click .tna-files-list__link:active::before{outline:2px #010101 solid !important;outline-offset:2px !important;box-shadow:0 0 0 2px #fc0 !important;transition:none}.tna-template--dark-theme .tna-files-list--full-click .tna-files-list__link:active::before,.tna-files-list--full-click .tna-template--dark-theme .tna-files-list__link:active::before{outline-color:#fc0 !important;box-shadow:0 0 0 2px #010101 !important}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-files-list--full-click .tna-files-list__link:active::before,.tna-files-list--full-click .tna-template--system-theme .tna-files-list__link:active::before{outline-color:#fc0 !important;box-shadow:0 0 0 2px #010101 !important}}.tna-files-list{position:relative}.tna-files-list--full-click .tna-files-list__link::before{content:"";position:absolute;inset:0;z-index:9;border-radius:2px}.tna-files-list--full-click .tna-files-list__link:focus,.tna-files-list--full-click .tna-files-list__link:active{outline:none !important;box-shadow:none !important}.tna-files-list{margin-top:2rem}.tna-files-list:first-child{margin-top:0}.tna-files-list{padding:1rem;border-radius:2px}.tna-files-list__items{margin:0;padding:0;display:flex;flex-direction:column;gap:1rem;~~flex:1;~~list-style:none;border:0 var(--keyline, rgba(38, 38, 42, 0.25)) solid;border-left-width:1px}.tna-files-list__item{padding:0 0 0 0.~~5rem~~;display:grid;grid-template-columns:auto 1fr;gap:0.25rem 1rem;position:relative}.tna-files-list__item-title{grid-column:2;grid-row:1}.tna-files-list__item-icon{margin:0.5rem 0;grid-column:1;grid-row:1/3;font-size:2.25rem}.tna-files-list__item-body{grid-column:2;grid-row:2}.tna-files-list__item-meta{padding-bottom:0.25rem}.tna-files-list__item-description{margin-top:0;font-size:1rem}.tna-files-list--full-click .tna-files-list__link:hover~~::before~~{border-left:5px var(--keyline, rgba(38, 38, 42, 0.25)) solid}/# sourceMappingURL=files-list.css.map /
1	+ .tna-files-list{--background: var(--background-tint);background-color:var(--background, #f4f4f4)}.tna-files-list--full-click .tna-files-list__link:focus::before{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 .tna-files-list--full-click .tna-files-list__link:focus::before,.tna-files-list--full-click .tna-template--dark-theme .tna-files-list__link:focus::before{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-files-list--full-click .tna-files-list__link:focus::before,.tna-files-list--full-click .tna-template--system-theme .tna-files-list__link:focus::before{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}}.tna-files-list--full-click .tna-files-list__link:active::before{outline:2px #010101 solid !important;outline-offset:2px !important;box-shadow:0 0 0 2px #fc0 !important;transition:none}.tna-template--dark-theme .tna-files-list--full-click .tna-files-list__link:active::before,.tna-files-list--full-click .tna-template--dark-theme .tna-files-list__link:active::before{outline-color:#fc0 !important;box-shadow:0 0 0 2px #010101 !important}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-files-list--full-click .tna-files-list__link:active::before,.tna-files-list--full-click .tna-template--system-theme .tna-files-list__link:active::before{outline-color:#fc0 !important;box-shadow:0 0 0 2px #010101 !important}}.tna-files-list{position:relative}.tna-files-list--full-click .tna-files-list__link::before{content:"";position:absolute;inset:0;z-index:9;border-radius:2px}.tna-files-list--full-click .tna-files-list__link:focus,.tna-files-list--full-click .tna-files-list__link:active{outline:none !important;box-shadow:none !important}.tna-files-list{margin-top:2rem}.tna-files-list:first-child{margin-top:0}.tna-files-list{padding:1rem;border-radius:2px}.tna-files-list__items{margin:0;padding:0;display:flex;flex:1;flex-direction:column;gap:1rem;list-style:none;border:0 var(--keyline, rgba(38, 38, 42, 0.25)) solid;border-left-width:1px}.tna-files-list__item{border-left:5px rgba(0,0,0,0) solid;padding:0 0 0 0.25rem;display:grid;grid-template-columns:auto 1fr;gap:0.25rem 1rem;position:relative}.tna-files-list__item-title{grid-column:2;grid-row:1}.tna-files-list__item-icon{margin:0.5rem 0;grid-column:1;grid-row:1/3;font-size:2.25rem}.tna-files-list__item-body{grid-column:2;grid-row:2}.tna-files-list__item-meta{padding-bottom:0.25rem}.tna-files-list__item-description{margin-top:0;font-size:1rem}.tna-files-list--full-click .tna-files-list__item:has(.tna-files-list__link:hover){border-left:5px var(--keyline, rgba(38, 38, 42, 0.25)) solid}/# sourceMappingURL=files-list.css.map /

package/nationalarchives/components/files-list/files-list.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/files-list/files-list.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAgTA,gBACE,qCAhOA,4CCxDF,gEACE,qCACA,8BAEA,qCAGA,WACE,kCAGF,oLACE,8BAEA,wCAKA,mCADF,wLAEI,8BAEA,yCAgBN,iEACE,qCAEA,8BAEA,qCAGA,gBAEA,sLACE,8BAEA,wCAKA,mCADF,0LAEI,8BAEA,yCAUN,gBACE,kBAIA,0DACE,WAEA,kBACA,QACA,UCrGF,cCDsB,IF2GtB,iHAnDA,wBAEA,2BGlCF,gBACE,gBAUA,4BACE,aC/BJ,gBAEE,aHNA,cCDsB,IEatB,uBACE,SACA,UAEA,aACA,sBACA,SACA,OAEA,gBLqFE,sDKlFF,sBAGF,sBACE,qBAEA,aACA,+BACA,iBAEA,kBAMF,4BACE,cACA,WAGF,2BACE,gBAEA,cACA,aC9CF,kBDkDA,2BACE,cACA,WAGF,2BACE,uBAGF,kCACE,aC5DF,eDwEI,gELqBA","file":"files-list.css","sourcesContent":["@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","@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","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/\n ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n /\n@function space($size) {\n // @return #{$size spacing.$spacing-unit-px}px;\n @return #{$size}rem;\n}\n\n%space-above {\n margin-top: space(2);\n @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../tools/a11y\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-files-list {\n @include spacing.space-above;\n padding: spacing.space(1);\n\n @include colour.tint;\n\n @include borders.rounded-border;\n\n &__items {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-direction: column;\n gap: spacing.space(1);\n flex: 1;\n\n list-style: none;\n\n @include colour.colour-border(\"keyline\", 0, solid);\n border-left-width: 1px;\n }\n\n &__item {\n padding: 0 0 0 spacing.space(0.5);\n\n display: grid;\n grid-template-columns: auto 1fr;\n gap: spacing.space(0.25) spacing.space(1);\n\n position: relative;\n }\n\n &__link {\n }\n\n &__item-title {\n grid-column: 2;\n grid-row: 1;\n }\n\n &__item-icon {\n margin: spacing.space(0.5) 0;\n\n grid-column: 1;\n grid-row: 1/3;\n @include typography.font-size(36);\n }\n\n &__item-body {\n grid-column: 2;\n grid-row: 2;\n }\n\n &__item-meta {\n padding-bottom: spacing.space(0.25);\n }\n\n &__item-description {\n margin-top: 0;\n\n @include typography.font-size(16);\n }\n\n &--full-click {\n }\n\n @include a11y.faux-full-outline(\"&--full-click &__link\");\n\n &--full-click &__link {\n &:hover {\n &::before {\n @include colour.thick-keyline(left);\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/files-list/files-list.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAgTA,gBACE,qCAhOA,4CCxDF,gEACE,qCACA,8BAEA,qCAGA,WACE,kCAGF,oLACE,8BAEA,wCAKA,mCADF,wLAEI,8BAEA,yCAgBN,iEACE,qCAEA,8BAEA,qCAGA,gBAEA,sLACE,8BAEA,wCAKA,mCADF,0LAEI,8BAEA,yCAUN,gBACE,kBAIA,0DACE,WAEA,kBACA,QACA,UCrGF,cCDsB,IF2GtB,iHAnDA,wBAEA,2BGlCF,gBACE,gBAUA,4BACE,aC/BJ,gBAEE,aHNA,cCDsB,IEatB,uBACE,SACA,UAEA,aACA,OACA,sBACA,SAEA,gBLqFE,sDKjFF,sBAIF,sBL4LE,oCKzLA,sBAEA,aACA,+BACA,iBAEA,kBAMF,4BACE,cACA,WAGF,2BACE,gBAEA,cACA,aClDF,kBDsDA,2BACE,cACA,WAGF,2BACE,uBAGF,kCACE,aChEF,eD0EA,mFLmBI","file":"files-list.css","sourcesContent":["@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","@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","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/\n ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n /\n@function space($size) {\n // @return #{$size spacing.$spacing-unit-px}px;\n @return #{$size}rem;\n}\n\n%space-above {\n margin-top: space(2);\n @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../tools/a11y\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-files-list {\n @include spacing.space-above;\n padding: spacing.space(1);\n\n @include colour.tint;\n\n @include borders.rounded-border;\n\n &__items {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: spacing.space(1);\n\n list-style: none;\n\n /* stylelint-disable /\n @include colour.colour-border(\"keyline\", 0, solid);\n border-left-width: 1px;\n / stylelint-enable */\n }\n\n &__item {\n @include colour.thick-keyline-transparent(left);\n\n padding: 0 0 0 spacing.space(0.25);\n\n display: grid;\n grid-template-columns: auto 1fr;\n gap: spacing.space(0.25) spacing.space(1);\n\n position: relative;\n }\n\n &__link {\n }\n\n &__item-title {\n grid-column: 2;\n grid-row: 1;\n }\n\n &__item-icon {\n margin: spacing.space(0.5) 0;\n\n grid-column: 1;\n grid-row: 1/3;\n @include typography.font-size(36);\n }\n\n &__item-body {\n grid-column: 2;\n grid-row: 2;\n }\n\n &__item-meta {\n padding-bottom: spacing.space(0.25);\n }\n\n &__item-description {\n margin-top: 0;\n\n @include typography.font-size(16);\n }\n\n &--full-click {\n }\n\n @include a11y.faux-full-outline(\"&--full-click &__link\");\n\n &--full-click &__item:has(&__link:hover) {\n @include colour.thick-keyline(left);\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n"]}

package/nationalarchives/components/files-list/files-list.scss CHANGED Viewed

@@ -18,18 +18,22 @@
     padding: 0;
     display: flex;
+    flex: 1;
     flex-direction: column;
     gap: spacing.space(1);
-    flex: 1;
     list-style: none;
+    /* stylelint-disable */
     @include colour.colour-border("keyline", 0, solid);
     border-left-width: 1px;
+    /* stylelint-enable */
   }
   &__item {
-    padding: 0 0 0 spacing.space(0.5);
+    @include colour.thick-keyline-transparent(left);
+    padding: 0 0 0 spacing.space(0.25);
     display: grid;
     grid-template-columns: auto 1fr;
@@ -74,11 +78,7 @@
   @include a11y.faux-full-outline("&--full-click &__link");
-  &--full-click &__link {
-    &:hover {
-      &::before {
-        @include colour.thick-keyline(left);
-      }
-    }
+  &--full-click &__item:has(&__link:hover) {
+    @include colour.thick-keyline(left);
   }
 }