@nationalarchives/frontend 0.1.60 → 0.1.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/nationalarchives/all.css +1 -1
- package/nationalarchives/all.css.map +1 -1
- package/nationalarchives/components/accordion/accordion.css +1 -1
- package/nationalarchives/components/accordion/accordion.css.map +1 -1
- package/nationalarchives/components/accordion/accordion.scss +17 -19
- package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map +1 -1
- package/nationalarchives/components/button/button.css +1 -1
- package/nationalarchives/components/button/button.css.map +1 -1
- package/nationalarchives/components/card/card.css +1 -1
- package/nationalarchives/components/card/card.css.map +1 -1
- package/nationalarchives/components/card/card.scss +7 -0
- package/nationalarchives/components/card/card.stories.js +32 -8
- package/nationalarchives/components/card/fixtures.json +25 -25
- package/nationalarchives/components/card/template.njk +2 -2
- package/nationalarchives/components/checkboxes/checkboxes.css +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.css.map +1 -1
- package/nationalarchives/components/compound-filters/compound-filters.css.map +1 -1
- package/nationalarchives/components/date-input/date-input.css +1 -1
- package/nationalarchives/components/date-input/date-input.css.map +1 -1
- package/nationalarchives/components/date-search/date-search.css +1 -1
- package/nationalarchives/components/date-search/date-search.css.map +1 -1
- package/nationalarchives/components/details/details.css.map +1 -1
- package/nationalarchives/components/error-summary/error-summary.css +1 -1
- package/nationalarchives/components/error-summary/error-summary.css.map +1 -1
- package/nationalarchives/components/featured-records/featured-records.css.map +1 -1
- package/nationalarchives/components/footer/footer.css.map +1 -1
- package/nationalarchives/components/gallery/gallery.css.map +1 -1
- package/nationalarchives/components/global-header/global-header.css.map +1 -1
- package/nationalarchives/components/header/header.css.map +1 -1
- package/nationalarchives/components/hero/hero.css +1 -1
- package/nationalarchives/components/hero/hero.css.map +1 -1
- package/nationalarchives/components/index-grid/index-grid.css +1 -1
- package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
- package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
- package/nationalarchives/components/picture/picture.css.map +1 -1
- package/nationalarchives/components/quick-filters/quick-filters.css.map +1 -1
- package/nationalarchives/components/radios/radios.css +1 -1
- package/nationalarchives/components/radios/radios.css.map +1 -1
- package/nationalarchives/components/search-field/search-field.css +1 -1
- package/nationalarchives/components/search-field/search-field.css.map +1 -1
- package/nationalarchives/components/search-filters/search-filters.css.map +1 -1
- package/nationalarchives/components/select/select.css +1 -1
- package/nationalarchives/components/select/select.css.map +1 -1
- package/nationalarchives/components/sensitive-image/sensitive-image.css.map +1 -1
- package/nationalarchives/components/sidebar/sidebar.css +1 -1
- package/nationalarchives/components/sidebar/sidebar.css.map +1 -1
- package/nationalarchives/components/sidebar/sidebar.scss +9 -4
- package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
- package/nationalarchives/components/tabs/tabs.css.map +1 -1
- package/nationalarchives/components/text-input/text-input.css +1 -1
- package/nationalarchives/components/text-input/text-input.css.map +1 -1
- package/nationalarchives/components/textarea/textarea.css +1 -1
- package/nationalarchives/components/textarea/textarea.css.map +1 -1
- package/nationalarchives/components/warning/warning.css.map +1 -1
- package/nationalarchives/global-header-package.css +1 -1
- package/nationalarchives/global-header-package.css.map +1 -1
- package/nationalarchives/prototype-kit.css +1 -1
- package/nationalarchives/prototype-kit.css.map +1 -1
- package/nationalarchives/stories/intro.mdx +2 -0
- package/nationalarchives/templates/fixtures.json +4 -4
- package/nationalarchives/templates/layouts/_generic.njk +3 -3
- package/nationalarchives/tools/_colour.scss +1 -3
- package/nationalarchives/utilities/_lists.scss +1 -0
- package/nationalarchives/utilities/_typography.scss +24 -24
- package/nationalarchives/variables/_colour.scss +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/card/card.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAkOA,oEACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,8CACA,yCAvLA,4CAJA,gCCxCF,UACE,gBAEA,sBACE,aCLF,iBACE,aACA,sBAGF,mJAGE,oBAGF,mBACE,QAIA,+BACE,wBAIJ,2BACE,SACA,mBACA,8BAEA,kBACA,QAGF,iBACE,kBACA,QAEA,qBACE,WACA,YAEA,iBAIJ,uBACE,4BAEA,kBACA,QACA,SAEA,oEF2BE,+CEpBJ,gBACE,iBAEA,QAGF,gBACE,aACA,eACA,aAEA,gBAEA,gBAEA,kBACE,gBAIJ,mBACE,gBAEA,aACA,cAEA,QAGF,kBCvEA,YCYsB,IFkEpB,kcAGE,kBACA,iBAIJ,sBACE,sBAEA,kBGhDF,6BHmDI,uCACE,gBACA,aAGF,iDACE,eACA,YACA,gBACA,iBAEA,cAEA,kBACA,gBAGF,wHAGE,eACA,eGtDN,wBH+DI,uLACE,iBAGF,qNACE,mBAGF,8iBAGE,kBACA,kBAKN,yDACE,gBF7FE,kDA2WJ,8BE3aF,UF0EM,+CA2VJ,+BEraF,UF0EM,+CAiWJ,8BEnQI,sDACE,oBAGF,qKAGE,kBACA,kBFqPN,+BE7PI,sDACE,oBAGF,qKAGE,kBACA,kBFqPN,+BEraF,UF0EM","file":"card.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\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 }\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 }\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 }\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 }\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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, 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($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\n \"form-error\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\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-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\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(--font-base);\n --accent-list-marker: var(--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 }\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\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\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-list-marker: #{colour.brand-colour(\"brown\")} !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.45)} !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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-background: #{colour.brand-colour(\"brown\")} !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.45)} !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-background: #{colour.brand-colour(\"black\")} !important;\n --button-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-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-list-marker: #{colour.brand-colour(\"black\")} !important;\n --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-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(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accent-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(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accent-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(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accent-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(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accent-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","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\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 \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-card {\n @include spacing.space-above;\n\n &__inner {\n display: flex;\n flex-direction: column;\n }\n\n &.tna-background-contrast &__inner,\n &.tna-background-tint &__inner,\n &.tna-background-accent &__inner {\n padding-bottom: spacing.space(1);\n }\n\n &__heading {\n order: 2;\n }\n\n &__heading-link {\n &::after {\n display: none !important;\n }\n }\n\n &__image-container {\n height: 0;\n margin-bottom: spacing.space(1);\n padding-bottom: #{math.div(2, 3) * 100%};\n\n position: relative;\n order: 1;\n }\n\n &__image {\n position: absolute;\n inset: 0;\n\n img {\n width: 100%;\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__image-label {\n max-width: calc(100% - #{spacing.space(1)});\n\n position: absolute;\n top: spacing.space(0.5);\n left: spacing.space(0.5);\n\n .tna-background-accent &:not(.tna-chip--plain) {\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\");\n }\n }\n\n &__body {\n padding-top: spacing.space(1);\n\n order: 3;\n }\n\n &__meta {\n display: flex;\n flex-wrap: wrap;\n gap: spacing.space(0.5) spacing.space(1.5);\n\n line-height: 1.3;\n\n list-style: none;\n\n + p {\n margin-top: spacing.space(1);\n }\n }\n\n &__actions {\n margin-top: spacing.space(1);\n\n display: flex;\n gap: spacing.space(1) spacing.space(2);\n\n order: 4;\n }\n\n &__action {\n @include typography.main-font-weight-bold;\n }\n\n &__heading,\n &__body,\n &__actions {\n .tna-card.tna-background-contrast &,\n .tna-card.tna-background-tint &,\n .tna-card.tna-background-accent & {\n margin-right: spacing.space(1);\n margin-left: spacing.space(1);\n }\n }\n\n &--horizontal {\n aspect-ratio: auto 3/1;\n\n position: relative;\n\n @include media.on-larger-than-mobile {\n .tna-card__inner {\n margin-left: 50%;\n padding: spacing.space(2);\n }\n\n .tna-card__image-container {\n min-height: 50%;\n height: auto;\n margin-bottom: 0;\n padding-bottom: 0;\n\n display: block;\n\n position: absolute;\n inset: 0 50% 0 0;\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: 0;\n margin-left: 0;\n }\n }\n }\n\n &--horizontal.tna-background-contrast,\n &--horizontal.tna-background-tint,\n &--horizontal.tna-background-accent {\n @include media.on-mobile {\n .tna-card__inner {\n padding: 0 0 spacing.space(1);\n }\n\n .tna-card__image-container {\n margin-bottom: spacing.space(1);\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: spacing.space(1);\n margin-left: spacing.space(1);\n }\n }\n }\n\n &__inner:has(&__heading + &__body) {\n padding-top: spacing.space(0.5);\n\n @include colour.thick-keyline-dark(top);\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n &:not(#{&}--horizontal) {\n @include colour.on-high-contrast-and-forced-colours {\n .tna-card__inner {\n padding-bottom: spacing.space(1);\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: spacing.space(1);\n margin-left: spacing.space(1);\n }\n }\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\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 interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\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","/*\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: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !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: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !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.6 !default;\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\n%hide-on-print {\n @media print {\n display: none;\n }\n}\n\n@mixin hide-on-print() {\n @extend %hide-on-print;\n}\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/card/card.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAkOA,oEACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,8CACA,yCAvLA,4CAJA,gCCxCF,UACE,gBAEA,sBACE,aCLF,iBACE,aACA,sBAGF,mJAGE,oBAGF,uLAGE,mBACA,kBAGF,mBACE,QAIA,+BACE,wBAIJ,2BACE,SACA,mBACA,8BAEA,kBACA,QAGF,iBACE,kBACA,QAEA,qBACE,WACA,YAEA,iBAIJ,uBACE,4BAEA,kBACA,QACA,SAEA,oEFoBE,+CEbJ,gBACE,iBAEA,QAGF,gBACE,aACA,eACA,aAEA,gBAEA,gBAEA,kBACE,gBAIJ,mBACE,gBAEA,aACA,cAEA,QAGF,kBC9EA,YCYsB,IFyEpB,kcAGE,kBACA,iBAIJ,sBACE,sBAEA,kBGvDF,6BH0DI,uCACE,gBACA,aAGF,iDACE,eACA,YACA,gBACA,iBAEA,cAEA,kBACA,gBAGF,wHAGE,eACA,eG7DN,wBHsEI,uLACE,iBAGF,qNACE,mBAGF,8iBAGE,kBACA,kBAKN,yDACE,gBFpGE,kDAyWJ,8BEzaF,UF0EM,+CAyVJ,+BEnaF,UF0EM,+CA+VJ,8BE1PI,sDACE,oBAGF,qKAGE,kBACA,kBF4ON,+BEpPI,sDACE,oBAGF,qKAGE,kBACA,kBF4ON,+BEnaF,UF0EM","file":"card.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\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 }\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 }\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 }\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 }\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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, 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($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\n \"form-error\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\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-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\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(--font-base);\n --accent-list-marker: var(--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 }\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\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\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-list-marker: #{colour.brand-colour(\"brown\")} !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.45)} !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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-background: #{colour.brand-colour(\"brown\")} !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.45)} !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-accent-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-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-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(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accent-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(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accent-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(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accent-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(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accent-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","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\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 \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-card {\n @include spacing.space-above;\n\n &__inner {\n display: flex;\n flex-direction: column;\n }\n\n &.tna-background-contrast &__inner,\n &.tna-background-tint &__inner,\n &.tna-background-accent &__inner {\n padding-bottom: spacing.space(1);\n }\n\n &--horizontal.tna-background-contrast &__inner,\n &--horizontal.tna-background-tint &__inner,\n &--horizontal.tna-background-accent &__inner {\n padding-right: spacing.space(1);\n padding-left: spacing.space(1);\n }\n\n &__heading {\n order: 2;\n }\n\n &__heading-link {\n &::after {\n display: none !important;\n }\n }\n\n &__image-container {\n height: 0;\n margin-bottom: spacing.space(1);\n padding-bottom: #{math.div(2, 3) * 100%};\n\n position: relative;\n order: 1;\n }\n\n &__image {\n position: absolute;\n inset: 0;\n\n img {\n width: 100%;\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__image-label {\n max-width: calc(100% - #{spacing.space(1)});\n\n position: absolute;\n top: spacing.space(0.5);\n left: spacing.space(0.5);\n\n .tna-background-accent &:not(.tna-chip--plain) {\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\");\n }\n }\n\n &__body {\n padding-top: spacing.space(1);\n\n order: 3;\n }\n\n &__meta {\n display: flex;\n flex-wrap: wrap;\n gap: spacing.space(0.5) spacing.space(1.5);\n\n line-height: 1.3;\n\n list-style: none;\n\n + p {\n margin-top: spacing.space(1);\n }\n }\n\n &__actions {\n margin-top: spacing.space(1);\n\n display: flex;\n gap: spacing.space(1) spacing.space(2);\n\n order: 4;\n }\n\n &__action {\n @include typography.main-font-weight-bold;\n }\n\n &__heading,\n &__body,\n &__actions {\n .tna-card.tna-background-contrast &,\n .tna-card.tna-background-tint &,\n .tna-card.tna-background-accent & {\n margin-right: spacing.space(1);\n margin-left: spacing.space(1);\n }\n }\n\n &--horizontal {\n aspect-ratio: auto 3/1;\n\n position: relative;\n\n @include media.on-larger-than-mobile {\n .tna-card__inner {\n margin-left: 50%;\n padding: spacing.space(2);\n }\n\n .tna-card__image-container {\n min-height: 50%;\n height: auto;\n margin-bottom: 0;\n padding-bottom: 0;\n\n display: block;\n\n position: absolute;\n inset: 0 50% 0 0;\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: 0;\n margin-left: 0;\n }\n }\n }\n\n &--horizontal.tna-background-contrast,\n &--horizontal.tna-background-tint,\n &--horizontal.tna-background-accent {\n @include media.on-mobile {\n .tna-card__inner {\n padding: 0 0 spacing.space(1);\n }\n\n .tna-card__image-container {\n margin-bottom: spacing.space(1);\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: spacing.space(1);\n margin-left: spacing.space(1);\n }\n }\n }\n\n &__inner:has(&__heading + &__body) {\n padding-top: spacing.space(0.5);\n\n @include colour.thick-keyline-dark(top);\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n &:not(#{&}--horizontal) {\n @include colour.on-high-contrast-and-forced-colours {\n .tna-card__inner {\n padding-bottom: spacing.space(1);\n }\n\n .tna-card__heading,\n .tna-card__body,\n .tna-card__actions {\n margin-right: spacing.space(1);\n margin-left: spacing.space(1);\n }\n }\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\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 interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\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","/*\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: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !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: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !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.6 !default;\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\n%hide-on-print {\n @media print {\n display: none;\n }\n}\n\n@mixin hide-on-print() {\n @extend %hide-on-print;\n}\n"]}
|
|
@@ -18,6 +18,13 @@
|
|
|
18
18
|
padding-bottom: spacing.space(1);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
&--horizontal.tna-background-contrast &__inner,
|
|
22
|
+
&--horizontal.tna-background-tint &__inner,
|
|
23
|
+
&--horizontal.tna-background-accent &__inner {
|
|
24
|
+
padding-right: spacing.space(1);
|
|
25
|
+
padding-left: spacing.space(1);
|
|
26
|
+
}
|
|
27
|
+
|
|
21
28
|
&__heading {
|
|
22
29
|
order: 2;
|
|
23
30
|
}
|
|
@@ -114,7 +114,7 @@ Standard.args = {
|
|
|
114
114
|
supertitle: "Card supertitle",
|
|
115
115
|
title: "Card title",
|
|
116
116
|
headingLevel: 3,
|
|
117
|
-
headingSize: "
|
|
117
|
+
headingSize: "m",
|
|
118
118
|
href: "#",
|
|
119
119
|
imageSrc:
|
|
120
120
|
"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
|
|
@@ -131,7 +131,7 @@ export const Simple = Template.bind({});
|
|
|
131
131
|
Simple.args = {
|
|
132
132
|
title: "Card title",
|
|
133
133
|
headingLevel: 3,
|
|
134
|
-
headingSize: "
|
|
134
|
+
headingSize: "m",
|
|
135
135
|
imageSrc:
|
|
136
136
|
"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
|
|
137
137
|
imageAlt: "The National Archives office",
|
|
@@ -147,7 +147,7 @@ Meta.args = {
|
|
|
147
147
|
supertitle: "Card supertitle",
|
|
148
148
|
title: "Card title",
|
|
149
149
|
headingLevel: 3,
|
|
150
|
-
headingSize: "
|
|
150
|
+
headingSize: "m",
|
|
151
151
|
href: "#",
|
|
152
152
|
imageSrc:
|
|
153
153
|
"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
|
|
@@ -171,7 +171,7 @@ PlainSupertitle.args = {
|
|
|
171
171
|
supertitle: "Card supertitle",
|
|
172
172
|
title: "Card title",
|
|
173
173
|
headingLevel: 3,
|
|
174
|
-
headingSize: "
|
|
174
|
+
headingSize: "m",
|
|
175
175
|
href: "#",
|
|
176
176
|
imageSrc:
|
|
177
177
|
"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
|
|
@@ -189,7 +189,7 @@ Contrast.args = {
|
|
|
189
189
|
supertitle: "Card supertitle",
|
|
190
190
|
title: "Card title",
|
|
191
191
|
headingLevel: 3,
|
|
192
|
-
headingSize: "
|
|
192
|
+
headingSize: "m",
|
|
193
193
|
href: "#",
|
|
194
194
|
imageSrc:
|
|
195
195
|
"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
|
|
@@ -208,7 +208,7 @@ Accent.args = {
|
|
|
208
208
|
supertitle: "Card supertitle",
|
|
209
209
|
title: "Card title",
|
|
210
210
|
headingLevel: 3,
|
|
211
|
-
headingSize: "
|
|
211
|
+
headingSize: "m",
|
|
212
212
|
href: "#",
|
|
213
213
|
imageSrc:
|
|
214
214
|
"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
|
|
@@ -226,7 +226,7 @@ export const NoImage = Template.bind({});
|
|
|
226
226
|
NoImage.args = {
|
|
227
227
|
title: "Card title",
|
|
228
228
|
headingLevel: 3,
|
|
229
|
-
headingSize: "
|
|
229
|
+
headingSize: "m",
|
|
230
230
|
href: "#",
|
|
231
231
|
body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
|
|
232
232
|
htmlElement: "article",
|
|
@@ -356,12 +356,36 @@ HorizontalMobile.args = {
|
|
|
356
356
|
classes: "tna-card--demo",
|
|
357
357
|
};
|
|
358
358
|
|
|
359
|
+
export const HorizontalContrastMobile = Template.bind({});
|
|
360
|
+
HorizontalContrastMobile.parameters = {
|
|
361
|
+
viewport: {
|
|
362
|
+
defaultViewport: "small",
|
|
363
|
+
},
|
|
364
|
+
chromatic: {
|
|
365
|
+
viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
|
|
366
|
+
},
|
|
367
|
+
};
|
|
368
|
+
HorizontalContrastMobile.args = {
|
|
369
|
+
title: "Card title",
|
|
370
|
+
headingLevel: 3,
|
|
371
|
+
headingSize: "l",
|
|
372
|
+
imageSrc:
|
|
373
|
+
"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
|
|
374
|
+
imageAlt: "The National Archives office",
|
|
375
|
+
imageWidth: 499,
|
|
376
|
+
imageHeight: 333,
|
|
377
|
+
horizontal: true,
|
|
378
|
+
style: "contrast",
|
|
379
|
+
htmlElement: "article",
|
|
380
|
+
classes: "tna-card--demo",
|
|
381
|
+
};
|
|
382
|
+
|
|
359
383
|
export const Sources = Template.bind({});
|
|
360
384
|
Sources.args = {
|
|
361
385
|
supertitle: "Card supertitle",
|
|
362
386
|
title: "Card title",
|
|
363
387
|
headingLevel: 3,
|
|
364
|
-
headingSize: "
|
|
388
|
+
headingSize: "m",
|
|
365
389
|
imageSrc: "https://www.gstatic.com/webp/gallery/2.jpg",
|
|
366
390
|
imageAlt: "A man in a canoe paddling through white water",
|
|
367
391
|
imageWidth: 550,
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"headingLevel": 3,
|
|
9
9
|
"body": "<p>Card body</p>"
|
|
10
10
|
},
|
|
11
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
11
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
"name": "with supertitle",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"headingLevel": 3,
|
|
19
19
|
"body": "<p>Card body</p>"
|
|
20
20
|
},
|
|
21
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup-
|
|
21
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup-m tna-card__heading\"><p class=\"tna-hgroup__supertitle\">Card supertitle</p><h3 class=\"tna-hgroup__title\">Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
"name": "heading size",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"headingLevel": 1,
|
|
38
38
|
"body": "<p>Card body</p>"
|
|
39
39
|
},
|
|
40
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\"tna-heading-
|
|
40
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\"tna-heading-m tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
"name": "with link",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"href": "#",
|
|
48
48
|
"body": "<p>Card body</p>"
|
|
49
49
|
},
|
|
50
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
50
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"name": "with meta",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
],
|
|
71
71
|
"body": "<p>Card body</p>"
|
|
72
72
|
},
|
|
73
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
73
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><dl class=\"tna-card__meta tna-dl-chips tna-dl-chips--plain\"><dt></dt><dd class=\"tna-dl-chips__item\"><span class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-calendar\" aria-hidden=\"true\"></i>24th September 2023</span></dd><dt></dt><dd class=\"tna-dl-chips__item\"><span class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-ticket\" aria-hidden=\"true\"></i>From £16</span></dd><dt></dt><dd class=\"tna-dl-chips__item\"><span class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-location-dot\" aria-hidden=\"true\"></i>Online</span></dd></dl><p>Card body</p></div></div></div>"
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
"name": "with text",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"headingLevel": 3,
|
|
80
80
|
"text": "Card body"
|
|
81
81
|
},
|
|
82
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
82
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
83
83
|
},
|
|
84
84
|
{
|
|
85
85
|
"name": "with image",
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
"imageHeight": 360,
|
|
93
93
|
"body": "<p>Card body</p>"
|
|
94
94
|
},
|
|
95
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
95
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
96
96
|
},
|
|
97
97
|
{
|
|
98
98
|
"name": "with lazily loaded image",
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
"lazyImage": true,
|
|
107
107
|
"body": "<p>Card body</p>"
|
|
108
108
|
},
|
|
109
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
109
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" loading=\"lazy\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
110
110
|
},
|
|
111
111
|
{
|
|
112
112
|
"name": "with image and alternative sources",
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
],
|
|
126
126
|
"body": "<p>Card body</p>"
|
|
127
127
|
},
|
|
128
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
128
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"640\" height=\"360\"><source srcset=\"https://loremflickr.com/640/360\" type=\"image/jpeg\" width=\"640\" height=\"360\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
129
129
|
},
|
|
130
130
|
{
|
|
131
131
|
"name": "with link and image",
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
"href": "#",
|
|
140
140
|
"body": "<p>Card body</p>"
|
|
141
141
|
},
|
|
142
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
142
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
143
143
|
},
|
|
144
144
|
{
|
|
145
145
|
"name": "with actions",
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
}
|
|
155
155
|
]
|
|
156
156
|
},
|
|
157
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
157
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\">Card action</a></div></div></div>"
|
|
158
158
|
},
|
|
159
159
|
{
|
|
160
160
|
"name": "with actions with titles",
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
}
|
|
171
171
|
]
|
|
172
172
|
},
|
|
173
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
173
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" title=\"Go and do the action\">Card action</a></div></div></div>"
|
|
174
174
|
},
|
|
175
175
|
{
|
|
176
176
|
"name": "with actions with classes",
|
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
}
|
|
187
187
|
]
|
|
188
188
|
},
|
|
189
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
189
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action card__test-class\">Card action</a></div></div></div>"
|
|
190
190
|
},
|
|
191
191
|
{
|
|
192
192
|
"name": "with actions with attributes",
|
|
@@ -204,7 +204,7 @@
|
|
|
204
204
|
}
|
|
205
205
|
]
|
|
206
206
|
},
|
|
207
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
207
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" data-testattribute=\"foobar\">Card action</a></div></div></div>"
|
|
208
208
|
},
|
|
209
209
|
{
|
|
210
210
|
"name": "with a label",
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
"label": "New",
|
|
219
219
|
"body": "<p>Card body</p>"
|
|
220
220
|
},
|
|
221
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
221
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture><div class=\"tna-chip tna-card__image-label\">New</div></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
222
222
|
},
|
|
223
223
|
{
|
|
224
224
|
"name": "with a coloured label",
|
|
@@ -233,7 +233,7 @@
|
|
|
233
233
|
"labelColour": "green",
|
|
234
234
|
"body": "<p>Card body</p>"
|
|
235
235
|
},
|
|
236
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
236
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture><div class=\"tna-chip tna-chip--green tna-card__image-label\">New</div></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
237
237
|
},
|
|
238
238
|
{
|
|
239
239
|
"name": "with a contrast style",
|
|
@@ -243,7 +243,7 @@
|
|
|
243
243
|
"body": "<p>Card body</p>",
|
|
244
244
|
"style": "contrast"
|
|
245
245
|
},
|
|
246
|
-
"html": "<div class=\"tna-card tna-background-contrast\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
246
|
+
"html": "<div class=\"tna-card tna-background-contrast\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
247
247
|
},
|
|
248
248
|
{
|
|
249
249
|
"name": "with a tint style",
|
|
@@ -253,7 +253,7 @@
|
|
|
253
253
|
"body": "<p>Card body</p>",
|
|
254
254
|
"style": "tint"
|
|
255
255
|
},
|
|
256
|
-
"html": "<div class=\"tna-card tna-background-tint\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
256
|
+
"html": "<div class=\"tna-card tna-background-tint\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
257
257
|
},
|
|
258
258
|
{
|
|
259
259
|
"name": "with a accent style",
|
|
@@ -263,7 +263,7 @@
|
|
|
263
263
|
"body": "<p>Card body</p>",
|
|
264
264
|
"style": "accent"
|
|
265
265
|
},
|
|
266
|
-
"html": "<div class=\"tna-card tna-background-accent\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
266
|
+
"html": "<div class=\"tna-card tna-background-accent\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
267
267
|
},
|
|
268
268
|
{
|
|
269
269
|
"name": "with an unknown style",
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
"body": "<p>Card body</p>",
|
|
274
274
|
"style": "foobar"
|
|
275
275
|
},
|
|
276
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
276
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
277
277
|
},
|
|
278
278
|
{
|
|
279
279
|
"name": "horizontal card",
|
|
@@ -283,7 +283,7 @@
|
|
|
283
283
|
"body": "<p>Card body</p>",
|
|
284
284
|
"horizontal": true
|
|
285
285
|
},
|
|
286
|
-
"html": "<div class=\"tna-card tna-card--horizontal\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
286
|
+
"html": "<div class=\"tna-card tna-card--horizontal\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
287
287
|
},
|
|
288
288
|
{
|
|
289
289
|
"name": "with classes for href items",
|
|
@@ -294,7 +294,7 @@
|
|
|
294
294
|
"body": "<p>Card body</p>",
|
|
295
295
|
"hrefClasses": "card__test-class"
|
|
296
296
|
},
|
|
297
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
297
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link card__test-class\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
298
298
|
},
|
|
299
299
|
{
|
|
300
300
|
"name": "with attributes for href items",
|
|
@@ -307,7 +307,7 @@
|
|
|
307
307
|
"data-testattribute": "foobar"
|
|
308
308
|
}
|
|
309
309
|
},
|
|
310
|
-
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
310
|
+
"html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\" data-testattribute=\"foobar\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
311
311
|
},
|
|
312
312
|
{
|
|
313
313
|
"name": "with classes",
|
|
@@ -317,7 +317,7 @@
|
|
|
317
317
|
"body": "<p>Card body</p>",
|
|
318
318
|
"classes": "card__test-class"
|
|
319
319
|
},
|
|
320
|
-
"html": "<div class=\"tna-card card__test-class\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
320
|
+
"html": "<div class=\"tna-card card__test-class\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
321
321
|
},
|
|
322
322
|
{
|
|
323
323
|
"name": "with attributes",
|
|
@@ -329,7 +329,7 @@
|
|
|
329
329
|
"data-testattribute": "foobar"
|
|
330
330
|
}
|
|
331
331
|
},
|
|
332
|
-
"html": "<div class=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-
|
|
332
|
+
"html": "<div class=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>"
|
|
333
333
|
}
|
|
334
334
|
]
|
|
335
335
|
}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<{{ htmlElement }} class="tna-card{% if classes %} {{ classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
|
|
15
15
|
<div class="tna-card__inner">
|
|
16
16
|
{%- if params.supertitle %}
|
|
17
|
-
<hgroup class="tna-hgroup-{{ params.headingSize or '
|
|
17
|
+
<hgroup class="tna-hgroup-{{ params.headingSize or 'm' }} tna-card__heading">
|
|
18
18
|
<p class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</p>
|
|
19
19
|
<h{{ params.headingLevel }} class="tna-hgroup__title">
|
|
20
20
|
{%- if params.href %}
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
</h{{ params.headingLevel }}>
|
|
26
26
|
</hgroup>
|
|
27
27
|
{%- else %}
|
|
28
|
-
<h{{ params.headingLevel }} class="tna-heading-{{ params.headingSize or '
|
|
28
|
+
<h{{ params.headingLevel }} class="tna-heading-{{ params.headingSize or 'm' }} tna-card__heading">
|
|
29
29
|
{%- if params.href %}
|
|
30
30
|
<a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ params.title }}</a>
|
|
31
31
|
{%- else %}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{--background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/0.58);--icon-light: rgb(52 51 56/0.45);--link: #005fa3;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light:
|
|
1
|
+
.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{--background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/0.58);--icon-light: rgb(52 51 56/0.45);--link: #005fa3;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{--background: rgb(255, 255, 255);--background-tint: #ddd;--font-base: rgb(1, 1, 1);--font-dark: rgb(1, 1, 1);--font-light: rgb(1, 1, 1);--icon-light: rgb(1 1 1/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(1, 1, 1);--keyline-dark: rgb(1, 1, 1);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: rgb(1, 1, 1);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}.tna-checkboxes{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.tna-checkboxes__item{position:relative}.tna-checkboxes__item input{width:1px;height:1px;margin:0;padding:0;position:absolute;top:-1px;left:-1px;opacity:0}.tna-checkboxes__item-label{padding-left:48px;display:block;line-height:2rem;cursor:pointer}.tna-checkboxes__item-label::before,.tna-checkboxes__item-label::after{content:"";width:2rem;position:absolute;top:0;left:0}.tna-checkboxes__item-label::before{height:2rem;display:block;box-sizing:border-box;z-index:1;background-color:var(--input-background, rgb(255, 255, 255));border:2px var(--input-border, rgb(1, 1, 1)) solid;border-radius:.1px}.tna-checkboxes__item-label::after{width:1.25rem;height:.5rem;margin-top:-0.1875rem;display:none;top:1rem;left:1rem;z-index:2;border:0 var(--input-background, rgb(255, 255, 255)) solid;border-width:0 0 .1875rem .1875rem;transform:translateX(-50%) translateY(-50%) rotate(-45deg)}.tna-checkboxes--small{gap:8px}.tna-checkboxes--small .tna-checkboxes__item-label{padding-left:36px;line-height:1.5rem}.tna-checkboxes--small .tna-checkboxes__item-label::before{width:1.5rem;height:1.5rem}.tna-checkboxes--small .tna-checkboxes__item-label::after{width:.825rem;height:.375rem;margin-top:-0.125rem;top:.75rem;left:.75rem}.tna-checkboxes--inline{flex-flow:row wrap;align-items:center;gap:16px 32px}@media(max-width: 30em){.tna-checkboxes--inline{flex-direction:column;align-items:flex-start}}.tna-checkboxes__item-label:active::before{outline:5px var(--focus-outline, rgb(0, 176, 255)) solid;outline-offset:2px;outline-offset:0}input:focus+.tna-checkboxes__item-label::before{outline:5px var(--focus-outline, rgb(0, 176, 255)) solid;outline-offset:2px}input:checked+.tna-checkboxes__item-label::before{background-color:var(--input-foreground, rgb(1, 1, 1))}input:checked+.tna-checkboxes__item-label::after{display:block}.tna-checkboxes--small .tna-checkboxes__item:hover .tna-checkboxes__item-label::before{box-shadow:0 0 0 .125rem var(--input-border)}/*# sourceMappingURL=checkboxes.css.map */
|