From 0091dcb73ff36fbc1f9d653841b4f300126ffa4f Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Tue, 7 May 2024 16:45:12 +0100 Subject: [PATCH] Define CSS property order --- .stylelintrc | 231 +++++++++++++++--- package-lock.json | 23 ++ package.json | 3 +- .../components/breadcrumbs/breadcrumbs.scss | 17 +- .../components/button/button.scss | 13 +- .../components/card/card.scss | 2 +- .../components/checkboxes/checkboxes.scss | 5 +- .../compound-filters/compound-filters.scss | 16 +- .../featured-records/featured-records.scss | 8 +- .../components/footer/footer.scss | 5 +- .../components/gallery/gallery.scss | 3 +- .../global-header/global-header.scss | 23 +- .../components/grid/grid.scss | 6 +- .../components/header/header.scss | 32 +-- .../components/hero/hero.scss | 24 +- .../components/pagination/pagination.scss | 4 +- .../components/picture/picture.scss | 2 +- .../quick-filters/quick-filters.scss | 6 +- .../components/radios/radios.scss | 5 +- .../search-filters/search-filters.scss | 13 +- .../sensitive-image/sensitive-image.scss | 13 +- .../components/skip-link/skip-link.scss | 8 +- .../components/tabs/tabs.scss | 14 +- .../components/textarea/textarea.scss | 11 +- .../components/warning/warning.scss | 12 +- src/nationalarchives/tools/_typography.scss | 16 +- src/nationalarchives/utilities/_a11y.scss | 8 +- src/nationalarchives/utilities/_debug.scss | 8 +- src/nationalarchives/utilities/_lists.scss | 8 +- src/nationalarchives/utilities/_tables.scss | 16 +- .../utilities/_typography.scss | 10 +- 31 files changed, 396 insertions(+), 169 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 8230f641..0381ec4c 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,32 +1,205 @@ { - "extends": [ - "stylelint-config-standard-scss" + "extends": ["stylelint-config-standard-scss"], + "plugins": ["stylelint-selector-bem-pattern", "stylelint-order"], + "ignoreFiles": ["src/nationalarchives/lib/font-awesome/**/*.scss"], + "rules": { + "at-rule-empty-line-before": null, + "block-no-empty": null, + "declaration-empty-line-before": null, + "property-no-vendor-prefix": null, + "value-keyword-case": null, + "scss/dollar-variable-empty-line-before": null, + "scss/double-slash-comment-empty-line-before": null, + "selector-class-pattern": null, + "no-invalid-position-at-import-rule": null, + "plugin/selector-bem-pattern": { + "preset": "bem" + }, + "color-function-notation": [ + "modern", + { + "ignore": ["with-var-inside"] + } ], - "plugins": [ - "stylelint-selector-bem-pattern" - ], - "ignoreFiles": ["src/nationalarchives/lib/font-awesome/**/*.scss"], - "rules": { - "at-rule-empty-line-before": null, - "block-no-empty": null, - "declaration-empty-line-before": null, - "property-no-vendor-prefix": null, - "value-keyword-case": null, - "scss/dollar-variable-empty-line-before": null, - "scss/double-slash-comment-empty-line-before": null, - "selector-class-pattern": null, - "no-invalid-position-at-import-rule": null, - "plugin/selector-bem-pattern": { - "preset": "bem" - }, - "color-function-notation": [ - "modern", - { - "ignore": [ - "with-var-inside" - ] - } - ], - "scss/operator-no-newline-after": null - } + "scss/operator-no-newline-after": null, + "order/order": ["dollar-variables", "custom-properties", "declarations"], + "order/properties-order": [ + [ + { + "emptyLineBefore": "always", + "properties": ["content"] + }, + { + "emptyLineBefore": "always", + "properties": [ + "min-width", + "width", + "max-width", + "min-height", + "height", + "max-height", + "margin", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "padding", + "padding-top", + "padding-right", + "padding-bottom", + "padding-left" + ] + }, + { + "emptyLineBefore": "always", + "properties": [ + "appearance", + "display", + "flex-wrap", + "flex-direction", + "justify-content", + "align-items", + "gap", + "box-sizing", + "visibility", + "overflow", + "overflow-x", + "overflow-y", + "resize" + ] + }, + { + "emptyLineBefore": "always", + "properties": ["float", "clear"] + }, + { + "emptyLineBefore": "always", + "properties": [ + "position", + "inset", + "top", + "right", + "bottom", + "left", + "z-index" + ] + }, + { + "emptyLineBefore": "always", + "properties": [ + "color", + "font-family", + "src", + "font-size", + "font-weight", + "line-height", + "text-align", + "text-align-last", + "vertical-align", + "font-style", + "font-display", + "font-optical-sizing", + "text-transform", + "text-decoration", + "text-decoration-thickness", + "direction", + "letter-spacing", + "word-spacing", + "text-indent", + "text-justify", + "text-overflow", + "text-overflow-ellipsis", + "text-overflow-mode", + "text-rendering", + "text-size-adjust", + "text-outline", + "text-shadow", + "text-transform", + "text-wrap", + "word-wrap", + "word-break", + "text-emphasis", + "white-space", + "word-spacing", + "hyphens" + ] + }, + { + "emptyLineBefore": "always", + "properties": ["columns", "column-gap"] + }, + { + "emptyLineBefore": "always", + "properties": ["list-style"] + }, + { + "emptyLineBefore": "always", + "properties": ["fill"] + }, + { + "emptyLineBefore": "always", + "properties": [ + "background", + "background-color", + "background-image", + "background-size", + "background-repeat", + "background-clip" + ] + }, + { + "emptyLineBefore": "always", + "properties": [ + "border", + "border-width", + "border-color", + "border-style", + "border-top-width", + "border-top-color", + "border-top-style", + "border-right-width", + "border-right-color", + "border-right-style", + "border-bottom-width", + "border-bottom-color", + "border-bottom-style", + "border-left-width", + "border-left-color", + "border-left-style", + "border-collapse", + "border-radius", + "border-top-left-radius", + "border-top-right-radius", + "border-bottom-left-radius", + "border-bottom-right-radius", + "outline", + "outline-width", + "outline-color", + "outline-style", + "outline-offset" + ] + }, + { + "emptyLineBefore": "always", + "properties": ["transform"] + }, + { + "emptyLineBefore": "always", + "properties": ["translate"] + }, + { + "emptyLineBefore": "always", + "properties": ["opacity"] + }, + { + "emptyLineBefore": "always", + "properties": ["cursor"] + }, + { + "emptyLineBefore": "always", + "properties": ["clip", "clip-path", "zoom", "resize"] + } + ] + ] + } } diff --git a/package-lock.json b/package-lock.json index a998a646..9d533ec4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -45,6 +45,7 @@ "style-loader": "^3.3.1", "stylelint": "^16.0.2", "stylelint-config-standard-scss": "^13.0.0", + "stylelint-order": "^6.0.4", "stylelint-selector-bem-pattern": "^4.0.0", "webpack": "^5.89.0", "webpack-cli": "^5.1.4" @@ -22904,6 +22905,15 @@ "node": ">=4" } }, + "node_modules/postcss-sorting": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz", + "integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==", + "dev": true, + "peerDependencies": { + "postcss": "^8.4.20" + } + }, "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", @@ -25734,6 +25744,19 @@ } } }, + "node_modules/stylelint-order": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz", + "integrity": "sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==", + "dev": true, + "dependencies": { + "postcss": "^8.4.32", + "postcss-sorting": "^8.0.2" + }, + "peerDependencies": { + "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.1" + } + }, "node_modules/stylelint-scss": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.2.1.tgz", diff --git a/package.json b/package.json index f8aa4ede..861ca871 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "build:package": "./tasks/build-package.sh", "compile:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives", "compile:scripts": "webpack", - "lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'", + "lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html,stylelintrc}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'", "test:all": "npm run test:lint && npm run test:unit && npm run test:html && npm run test:fixtures && npm run test:storybook && npm run build:package && npm run test:package", "test:fixtures": "node tasks/test-fixtures.js", "test:html": "node tasks/generate-fixture-html.js && html-validate fixtures-html", @@ -80,6 +80,7 @@ "style-loader": "^3.3.1", "stylelint": "^16.0.2", "stylelint-config-standard-scss": "^13.0.0", + "stylelint-order": "^6.0.4", "stylelint-selector-bem-pattern": "^4.0.0", "webpack": "^5.89.0", "webpack-cli": "^5.1.4" diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss index ea362405..195d458f 100644 --- a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss +++ b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss @@ -15,10 +15,10 @@ margin: 0; padding: 0; - list-style: none; - display: flex; flex-wrap: wrap; + + list-style: none; } &__item { @@ -26,14 +26,14 @@ + .tna-breadcrumbs__item { &::before { + content: "\203A"; + content: "\203A" / ""; + margin: 0 spacing.space(0.75); display: inline-block; vertical-align: baseline; - - content: "\203A"; - content: "\203A" / ""; } } @@ -78,19 +78,20 @@ } button#{&}__link { + height: 100%; margin: 0; padding: 0; - height: 100%; + + appearance: none; font-size: inherit; - line-height: inherit; font-weight: inherit; + line-height: inherit; background-color: transparent; border: none; - appearance: none; cursor: pointer; &:hover { diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss index 4a7f5076..9ac41aa8 100644 --- a/src/nationalarchives/components/button/button.scss +++ b/src/nationalarchives/components/button/button.scss @@ -11,23 +11,24 @@ $button-border-width: 4px !default; padding: spacing.space(0.25) spacing.space(1); display: inline-flex; - align-items: baseline; justify-content: center; + align-items: baseline; gap: spacing.space(0.75); - @include typography.relative-font-size(18); - @include typography.main-font-weight-bold; line-height: 2rem; - text-decoration: none; text-align: center; + text-decoration: none; text-wrap: balance; + cursor: pointer; + + @include typography.relative-font-size(18); + @include typography.main-font-weight-bold; + @include colour.colour-background("button-background"); @include colour.colour-border("button-background", $button-border-width); - cursor: pointer; - &, &:link, &:visited { diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss index 4f0508b5..a7a476ae 100644 --- a/src/nationalarchives/components/card/card.scss +++ b/src/nationalarchives/components/card/card.scss @@ -129,8 +129,8 @@ } .tna-card__image-container { - height: auto; min-height: 50%; + height: auto; margin-bottom: 0; padding-bottom: 0; diff --git a/src/nationalarchives/components/checkboxes/checkboxes.scss b/src/nationalarchives/components/checkboxes/checkboxes.scss index f2eb36f8..ec02b400 100644 --- a/src/nationalarchives/components/checkboxes/checkboxes.scss +++ b/src/nationalarchives/components/checkboxes/checkboxes.scss @@ -37,6 +37,8 @@ &::before, &::after { + content: ""; + width: 2rem; position: absolute; @@ -44,8 +46,6 @@ left: 0; @include colour.light; - - content: ""; } &::before { @@ -113,6 +113,7 @@ &--inline { flex-flow: row wrap; + align-items: center; gap: spacing.space(1) spacing.space(2); diff --git a/src/nationalarchives/components/compound-filters/compound-filters.scss b/src/nationalarchives/components/compound-filters/compound-filters.scss index 332d85de..de4506b8 100644 --- a/src/nationalarchives/components/compound-filters/compound-filters.scss +++ b/src/nationalarchives/components/compound-filters/compound-filters.scss @@ -16,20 +16,23 @@ padding: 0 spacing.space(0.125) 0 spacing.space(0.75); display: flex; - gap: spacing.space(0.5); align-items: center; + gap: spacing.space(0.5); - @include typography.relative-font-size(16); line-height: 1.75; - @include colour.colour-border("keyline", 1px); border-radius: 1rem; + @include typography.relative-font-size(16); + + @include colour.colour-border("keyline", 1px); + &--remove { padding-right: 0; padding-left: 0; background: none; + border: none; border-radius: 0; } @@ -41,14 +44,17 @@ position: relative; - text-decoration: none; font-size: 0; line-height: 0; + text-decoration: none; + border-radius: 100%; &::before, &::after { + content: ""; + width: 2px; height: 1rem; margin-left: -1px; @@ -60,8 +66,6 @@ left: 50%; @include colour.colour-background("font-base"); - - content: ""; } &::before { diff --git a/src/nationalarchives/components/featured-records/featured-records.scss b/src/nationalarchives/components/featured-records/featured-records.scss index db7cb702..48f6852d 100644 --- a/src/nationalarchives/components/featured-records/featured-records.scss +++ b/src/nationalarchives/components/featured-records/featured-records.scss @@ -16,12 +16,13 @@ padding: spacing.space(1) spacing.space(1.5); display: flex; - gap: spacing.space(2); justify-content: flex-start; align-items: center; + gap: spacing.space(2); - @include colour.colour-border("keyline", 1px); border-top-width: 0; + + @include colour.colour-border("keyline", 1px); } &__image { @@ -83,9 +84,10 @@ &__item { padding: spacing.space(1); - gap: spacing.space(1); flex-direction: column; align-items: flex-start; + + gap: spacing.space(1); } } } diff --git a/src/nationalarchives/components/footer/footer.scss b/src/nationalarchives/components/footer/footer.scss index f8a6c677..bc341317 100644 --- a/src/nationalarchives/components/footer/footer.scss +++ b/src/nationalarchives/components/footer/footer.scss @@ -58,8 +58,8 @@ &-items { display: flex; flex-wrap: wrap; - gap: spacing.space(0.3125); align-items: flex-start; + gap: spacing.space(0.3125); } &-item { @@ -70,9 +70,10 @@ display: block; - text-align: center; line-height: 1; + text-align: center; + border: 0 transparent solid; border-width: 4px 0; diff --git a/src/nationalarchives/components/gallery/gallery.scss b/src/nationalarchives/components/gallery/gallery.scss index 609ce695..afd278de 100644 --- a/src/nationalarchives/components/gallery/gallery.scss +++ b/src/nationalarchives/components/gallery/gallery.scss @@ -37,8 +37,8 @@ } &-image { - margin: 0 auto; height: auto; + margin: 0 auto; } &-description { @@ -70,6 +70,7 @@ &--touchable { .tna-gallery__items { flex-flow: row nowrap; + gap: spacing.space(6); overflow-x: scroll; diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index 3ea8d1c8..babe7c49 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -37,8 +37,8 @@ &__logo { display: flex; - gap: spacing.space(1); align-items: flex-end; + gap: spacing.space(1); text-decoration: none; @@ -60,10 +60,11 @@ &__logo-strapline { padding-right: spacing.space(0.625); + line-height: math.div(6.75rem, 3); + text-transform: uppercase; + @include typography.heading-font; @include typography.relative-font-size(20); - text-transform: uppercase; - line-height: math.div(6.75rem, 3); } &__navigation-button-wrapper { @@ -80,6 +81,8 @@ &::before, &::after { + content: ""; + height: 0.25rem; display: block; @@ -89,8 +92,6 @@ left: 0; background-color: inherit; - - content: ""; } &::before { @@ -106,12 +107,12 @@ height: 2rem; padding: 0; + appearance: none; + display: block; position: relative; - appearance: none; - font-size: 0; background: none; @@ -151,6 +152,7 @@ columns: 2; column-gap: spacing.space(2); + list-style: none; } @@ -165,9 +167,10 @@ display: block; box-sizing: border-box; - @include typography.relative-font-size(17); - text-decoration: none; line-height: math.div(6.75rem, 3); + text-decoration: none; + + @include typography.relative-font-size(17); @include colour.colour-border("keyline", 0.5px, solid, bottom); @@ -192,8 +195,8 @@ &__top-navigation-link { display: flex; - gap: spacing.space(0.5); align-items: center; + gap: spacing.space(0.5); text-decoration: none; diff --git a/src/nationalarchives/components/grid/grid.scss b/src/nationalarchives/components/grid/grid.scss index 28d5c598..5bbb96d7 100644 --- a/src/nationalarchives/components/grid/grid.scss +++ b/src/nationalarchives/components/grid/grid.scss @@ -4,20 +4,20 @@ @use "../../tools/grid"; .tna-container { - max-width: gridVars.$largest-container-width; width: 100%; + max-width: gridVars.$largest-container-width; margin-right: auto; margin-left: auto; padding-right: grid.gutter-width-half(); padding-left: grid.gutter-width-half(); - box-sizing: border-box; - display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; + box-sizing: border-box; + &--no-padding, &--no-padding-all { max-width: gridVars.$largest-container-width - grid.gutter-width-double(); diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss index 99993c6d..e550be6e 100644 --- a/src/nationalarchives/components/header/header.scss +++ b/src/nationalarchives/components/header/header.scss @@ -122,6 +122,8 @@ &::before, &::after { + content: ""; + height: 0.25rem; display: block; @@ -131,8 +133,6 @@ left: 0; background-color: inherit; - - content: ""; } &::before { @@ -148,12 +148,12 @@ height: 2rem; padding: 0; + appearance: none; + display: block; position: relative; - appearance: none; - font-size: 0; background: none; @@ -200,10 +200,11 @@ justify-content: flex-end; gap: spacing.space(0.5) spacing.space(1.5); - @include typography.relative-font-size(15); + line-height: 1; + list-style: none; - line-height: 1; + @include typography.relative-font-size(15); } &__top-navigation-item { @@ -245,9 +246,9 @@ flex-wrap: nowrap; gap: spacing.space(2); - list-style: none; - white-space: nowrap; + + list-style: none; } &__navigation-item { @@ -260,11 +261,14 @@ position: relative; - @include typography.main-font-weight-medium; - text-decoration: none; line-height: 2; + text-decoration: none; + + @include typography.main-font-weight-medium; &::after { + content: ""; + height: 0; position: absolute; @@ -273,8 +277,6 @@ left: 0; @include colour.colour-background("font-dark"); - - content: ""; } &, @@ -330,8 +332,8 @@ } &__navigation { - align-items: stretch; flex-direction: column; + align-items: stretch; &.tna-column { padding-right: 0; @@ -402,8 +404,8 @@ line-height: 1.75rem; &::after { - height: auto; width: 0; + height: auto; top: 0; right: auto; @@ -413,8 +415,8 @@ &, &:hover { &::after { - height: auto; width: 0.5rem; + height: auto; } } } diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss index a4cf6e41..0e3467c8 100644 --- a/src/nationalarchives/components/hero/hero.scss +++ b/src/nationalarchives/components/hero/hero.scss @@ -48,12 +48,12 @@ $shift-units: 5 !default; &__caption { width: 100%; + overflow: visible; + position: absolute; top: 0; right: 0; z-index: 5; - - overflow: visible; } &__details { @@ -72,17 +72,19 @@ $shift-units: 5 !default; z-index: 2; font-size: 0; - text-align: center; line-height: 1.5rem; - list-style: none; + text-align: center; - @include colour.accent; + list-style: none; - @include colour.colour-border("background", 4px); border-radius: 100%; cursor: pointer; + @include colour.accent; + + @include colour.colour-border("background", 4px); + &:hover { @include colour.colour-font("background"); @@ -92,8 +94,8 @@ $shift-units: 5 !default; &__details-summary-icon { font-size: 1.25rem; - font-style: normal; font-weight: 700; + font-style: normal; text-transform: lowercase; } @@ -131,6 +133,8 @@ $shift-units: 5 !default; &::before, &::after { + content: ""; + width: 1.5rem; height: 0.125rem; @@ -141,8 +145,6 @@ $shift-units: 5 !default; left: 50%; @include colour.colour-background("font-dark"); - - content: ""; } &::before { @@ -214,9 +216,9 @@ $shift-units: 5 !default; padding-top: spacing.space(2); padding-bottom: spacing.space(2); - box-sizing: border-box; - align-items: center; + + box-sizing: border-box; } &--split &__information { diff --git a/src/nationalarchives/components/pagination/pagination.scss b/src/nationalarchives/components/pagination/pagination.scss index 0ea5df2c..38c27db5 100644 --- a/src/nationalarchives/components/pagination/pagination.scss +++ b/src/nationalarchives/components/pagination/pagination.scss @@ -6,10 +6,10 @@ .tna-pagination { display: flex; - gap: spacing.space(1); + flex-wrap: wrap; justify-content: center; align-items: center; - flex-wrap: wrap; + gap: spacing.space(1); @include spacing.space-above; diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss index 0c553cc7..bff033f5 100644 --- a/src/nationalarchives/components/picture/picture.scss +++ b/src/nationalarchives/components/picture/picture.scss @@ -19,8 +19,8 @@ &__image { width: auto; - max-height: 40rem; height: auto; + max-height: 40rem; margin: 0 auto; } diff --git a/src/nationalarchives/components/quick-filters/quick-filters.scss b/src/nationalarchives/components/quick-filters/quick-filters.scss index 34d944a7..6afd5813 100644 --- a/src/nationalarchives/components/quick-filters/quick-filters.scss +++ b/src/nationalarchives/components/quick-filters/quick-filters.scss @@ -20,12 +20,14 @@ &__link { padding: spacing.space(0.125) spacing.space(0.75); - text-decoration: none; line-height: 1.75; - @include colour.colour-border("keyline", 1px); + text-decoration: none; + border-radius: 1rem; + @include colour.colour-border("keyline", 1px); + &, &:link, &:visited { diff --git a/src/nationalarchives/components/radios/radios.scss b/src/nationalarchives/components/radios/radios.scss index 7a3f27ad..b6d0073c 100644 --- a/src/nationalarchives/components/radios/radios.scss +++ b/src/nationalarchives/components/radios/radios.scss @@ -37,6 +37,8 @@ &::before, &::after { + content: ""; + position: absolute; top: 0; left: 0; @@ -44,8 +46,6 @@ border-radius: 100%; @include colour.light; - - content: ""; } &::before { @@ -104,6 +104,7 @@ &--inline { flex-flow: row wrap; + align-items: center; gap: spacing.space(1) spacing.space(2); diff --git a/src/nationalarchives/components/search-filters/search-filters.scss b/src/nationalarchives/components/search-filters/search-filters.scss index 7c3de9f9..193b7e5b 100644 --- a/src/nationalarchives/components/search-filters/search-filters.scss +++ b/src/nationalarchives/components/search-filters/search-filters.scss @@ -62,22 +62,23 @@ cursor: pointer; &::before { + content: ""; + width: 0; height: 0; position: absolute; - right: spacing.space(0.5); top: calc(50% - #{math.div(math.sqrt(3), 4)}rem); + right: spacing.space(0.5); + + border-bottom-width: 0; + border-right: 0.5rem transparent solid; + border-left: 0.5rem transparent solid; @include colour.colour-border( "font-base", #{math.div(math.sqrt(3), 2)}rem ); - border-right: 0.5rem transparent solid; - border-bottom-width: 0; - border-left: 0.5rem transparent solid; - - content: ""; } &:hover, diff --git a/src/nationalarchives/components/sensitive-image/sensitive-image.scss b/src/nationalarchives/components/sensitive-image/sensitive-image.scss index 6d8cac7d..a92599c6 100644 --- a/src/nationalarchives/components/sensitive-image/sensitive-image.scss +++ b/src/nationalarchives/components/sensitive-image/sensitive-image.scss @@ -9,6 +9,8 @@ position: relative; &::after { + content: ""; + width: 100%; padding-bottom: calc( 100% * var(--sensitive-image-height) / var(--sensitive-image-width) @@ -20,19 +22,17 @@ z-index: -1; background-image: var(--sensitive-image); - background-clip: padding-box; background-size: contain; + background-clip: padding-box; filter: blur(20px) saturate(0); - - content: ""; } } &__show { display: flex; - align-items: center; justify-content: center; + align-items: center; position: absolute; inset: 0; @@ -43,12 +43,13 @@ cursor: pointer; &::after { + content: attr(data-action); + padding: spacing.space(0.5) spacing.space(2); - @include typography.relative-font-size(16); background-color: #ff0; - content: attr(data-action); + @include typography.relative-font-size(16); } &:hover { diff --git a/src/nationalarchives/components/skip-link/skip-link.scss b/src/nationalarchives/components/skip-link/skip-link.scss index ffbf1f8c..673b0b5d 100644 --- a/src/nationalarchives/components/skip-link/skip-link.scss +++ b/src/nationalarchives/components/skip-link/skip-link.scss @@ -12,11 +12,11 @@ display: block !important; + overflow: hidden !important; + position: absolute !important; left: -100vw; - overflow: hidden !important; - white-space: nowrap !important; clip: rect(0 0 0 0) !important; @@ -47,10 +47,10 @@ margin: inherit !important; padding: spacing.space(1) !important; - position: static !important; - overflow: visible !important; + position: static !important; + white-space: inherit !important; clip: auto !important; diff --git a/src/nationalarchives/components/tabs/tabs.scss b/src/nationalarchives/components/tabs/tabs.scss index 5695361d..61151e40 100644 --- a/src/nationalarchives/components/tabs/tabs.scss +++ b/src/nationalarchives/components/tabs/tabs.scss @@ -11,9 +11,9 @@ padding: 0; display: flex; + flex-wrap: nowrap; align-items: stretch; gap: spacing.space(1); - flex-wrap: nowrap; list-style: none; } @@ -27,12 +27,11 @@ display: flex; align-items: center; + position: relative; - @include typography.relative-font-size(20); - @include typography.heading-font; - text-decoration: none; text-align: center; + text-decoration: none; background: transparent; @@ -40,6 +39,9 @@ cursor: pointer; + @include typography.relative-font-size(20); + @include typography.heading-font; + &, &:link, &:visited { @@ -47,12 +49,12 @@ } &::after { + content: ""; + position: absolute; right: 0; bottom: 0; left: 0; - - content: ""; } &:hover, diff --git a/src/nationalarchives/components/textarea/textarea.scss b/src/nationalarchives/components/textarea/textarea.scss index 6879cbf4..e377a654 100644 --- a/src/nationalarchives/components/textarea/textarea.scss +++ b/src/nationalarchives/components/textarea/textarea.scss @@ -15,18 +15,21 @@ $textarea-vertical-padding: 0.25 !default; display: block; box-sizing: border-box; - resize: vertical; - @include colour.light; - @include colour.colour-font("input-foreground"); font-family: inherit; font-size: inherit; line-height: 1.5rem; + border-radius: 0.1px; + + resize: vertical; + + @include colour.light; + @include colour.colour-font("input-foreground"); + @include colour.colour-background("input-background"); @include colour.colour-border("input-border", forms.$form-field-border-width); - border-radius: 0.1px; .tna-form__group--error & { @include colour.colour-border("form-error"); diff --git a/src/nationalarchives/components/warning/warning.scss b/src/nationalarchives/components/warning/warning.scss index f89ae23c..4d13f06c 100644 --- a/src/nationalarchives/components/warning/warning.scss +++ b/src/nationalarchives/components/warning/warning.scss @@ -8,8 +8,8 @@ padding: spacing.space(1); display: flex; - gap: spacing.space(1); align-items: flex-start; + gap: spacing.space(1); @include colour.accent-light; @@ -31,15 +31,17 @@ display: block; + line-height: 2rem; + text-align: center; + text-transform: lowercase; + + border-radius: 100%; + @include colour.colour-font("font-dark"); @include typography.relative-font-size(24); @include typography.main-font-weight-bold; - text-transform: lowercase; - text-align: center; - line-height: 2rem; @include colour.colour-border("font-dark", 0.1875rem); - border-radius: 100%; @include media.on-mobile { width: 1.5rem; diff --git a/src/nationalarchives/tools/_typography.scss b/src/nationalarchives/tools/_typography.scss index d745a636..a15d56e5 100644 --- a/src/nationalarchives/tools/_typography.scss +++ b/src/nationalarchives/tools/_typography.scss @@ -21,14 +21,14 @@ @mixin main-font($bold: false) { font-family: typography.$main-font-family; + font-style: normal; + font-optical-sizing: auto; + font-variation-settings: "wdth" 100; @if $bold { @include main-font-weight-bold; } @else { @include main-font-weight; } - font-optical-sizing: auto; - font-style: normal; - font-variation-settings: "wdth" 100; } @mixin heading-font { @@ -38,20 +38,20 @@ @mixin detail-font($bold: false) { font-family: typography.$detail-font-family; + font-style: normal; + font-optical-sizing: auto; @if $bold { font-weight: typography.$detail-font-weight-bold; } @else { font-weight: typography.$detail-font-weight; } - font-optical-sizing: auto; - font-style: normal; } @mixin detail-font-small { @include detail-font; @include relative-font-size(14); - text-transform: uppercase; line-height: 1.1; + text-transform: uppercase; } @mixin interacted-text-decoration { @@ -66,14 +66,14 @@ $font-size-tiny, $line-height ) { - @include relative-font-size($font-size-default); - line-height: $line-height; $small-and-tiny-identical: $font-size-small == $font-size-tiny; $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and $small-and-tiny-identical; $all-identical: $font-size-default == $font-size-medium and $medium-small-and-tiny-identical and $small-and-tiny-identical; + line-height: $line-height; + @include relative-font-size($font-size-default); @if $all-identical != true { @if $medium-small-and-tiny-identical != true { diff --git a/src/nationalarchives/utilities/_a11y.scss b/src/nationalarchives/utilities/_a11y.scss index df678faa..b927bdd7 100644 --- a/src/nationalarchives/utilities/_a11y.scss +++ b/src/nationalarchives/utilities/_a11y.scss @@ -7,18 +7,18 @@ margin: 0 !important; padding: 0 !important; + overflow: hidden !important; + position: absolute !important; top: -9999px !important; left: -9999px !important; z-index: -1 !important; - overflow: hidden !important; - - clip: rect(0, 0, 0, 0) !important; + background-color: transparent !important; border: 0 !important; - background-color: transparent !important; + clip: rect(0, 0, 0, 0) !important; // &::before, // &::after { diff --git a/src/nationalarchives/utilities/_debug.scss b/src/nationalarchives/utilities/_debug.scss index ebab818a..3ff42424 100644 --- a/src/nationalarchives/utilities/_debug.scss +++ b/src/nationalarchives/utilities/_debug.scss @@ -19,6 +19,8 @@ 0 0 0.5rem #f0a !important; &::after { + content: ""; + width: 20px; height: 20px; @@ -34,13 +36,11 @@ outline: 2px #0f3 solid; outline-offset: 10px; + transform: translateX(-50%) translateY(-50%); + box-shadow: 0 0 0 2px #0f3, 0 0 0.5rem #0f3 !important; - - transform: translateX(-50%) translateY(-50%); - - content: ""; } &:not(.tna-checkboxes__item-label, .tna-radios__item-label) { diff --git a/src/nationalarchives/utilities/_lists.scss b/src/nationalarchives/utilities/_lists.scss index 3049d07e..a4489e9d 100644 --- a/src/nationalarchives/utilities/_lists.scss +++ b/src/nationalarchives/utilities/_lists.scss @@ -81,9 +81,9 @@ } dd { - background: transparent !important; - margin-left: 0; + + background: transparent !important; } } } @@ -103,10 +103,10 @@ margin: 0; padding: spacing.space(0.5) spacing.space(1); - position: relative; - box-sizing: border-box; + position: relative; + word-wrap: break-word; } diff --git a/src/nationalarchives/utilities/_tables.scss b/src/nationalarchives/utilities/_tables.scss index a6e5b664..a59a4696 100644 --- a/src/nationalarchives/utilities/_tables.scss +++ b/src/nationalarchives/utilities/_tables.scss @@ -8,12 +8,12 @@ .tna-table { width: 100%; - @include spacing.space-above; - - border-collapse: collapse; text-align: left; + border-collapse: collapse; + @include spacing.space-above; + &:first-child { margin-top: 0; } @@ -85,18 +85,18 @@ .tna-table-wrapper { width: 100%; - @include spacing.space-above; - padding-left: grid.gutter-width(); padding-right: grid.gutter-width(); + padding-left: grid.gutter-width(); + + overflow: auto; position: relative; left: -#{grid.gutter-width()}; - - overflow: auto; + @include spacing.space-above; @include media.on-tiny { - padding-left: grid.gutter-width-tiny(); padding-right: grid.gutter-width-tiny(); + padding-left: grid.gutter-width-tiny(); left: -#{grid.gutter-width-tiny()}; } diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index b81e5129..8237f1d8 100644 --- a/src/nationalarchives/utilities/_typography.scss +++ b/src/nationalarchives/utilities/_typography.scss @@ -9,12 +9,12 @@ .tna-template { @include colour.colour-font("font-base"); @include typography.main-font; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; + direction: ltr; text-rendering: optimizeLegibility; -webkit-text-size-adjust: none; text-size-adjust: none; - direction: ltr; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; } .tna-template__body { @@ -191,13 +191,13 @@ small { display: inline-block; &::after { + content: "\203A"; + padding-left: spacing.space(0.5); display: inline-block; font-weight: 700; - - content: "\203A"; } &:hover {