@nationalarchives/frontend 0.1.20-prerelease → 0.1.22-prerelease

package/nationalarchives/tools/_spacing.scss

@@ -1,16 +1,16 @@
 @use "sass:map";
 @use "../variables/spacing";
 
-%space-below {
-  margin-bottom: 2rem;
+%space-above {
+  margin-top: 2rem;
 
-  &:last-child {
-    margin-bottom: 0;
+  &:first-child {
+    margin-top: 0;
   }
 }
 
-@mixin space-below {
-  @extend %space-below;
+@mixin space-above {
+  @extend %space-above;
 }
 
 @function spacing($size) {

package/nationalarchives/tools/_typography.scss

@@ -1,8 +1,9 @@
 @use "sass:math";
+@use "colour";
 @use "../variables/typography";
 
 @mixin relative-font-size($fontSizePx) {
-  font-size: #{math.div($fontSizePx, typography.$base-font-size-px)}rem;
+  font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;
 }
 
 @mixin interacted-text-decoration {
@@ -34,9 +35,10 @@
 }
 
 @mixin detail-font-small {
+  @include colour.colour-font("font-dark");
   @include detail-font;
   @include relative-font-size(14);
   text-transform: uppercase;
-  line-height: #{math.div(typography.$base-font-size-px, 14)};
+  line-height: #{math.div(typography.$relative-1rem-px, 14)};
   // line-height: 1;
 }

package/nationalarchives/utilities/_a11y.scss

@@ -1,3 +1,5 @@
+@use "../tools/colour";
+
 .tna-visually-hidden {
   width: 1px !important;
   height: 1px !important;
@@ -22,3 +24,16 @@
     content: "\00a0";
   }
 }
+
+*:focus {
+  z-index: 9;
+
+  @include colour.colour-outline("focus-outline", 0.3125rem, solid);
+  outline-offset: 0.125rem;
+}
+
+.tna-\!--no-focus-style {
+  &:focus {
+    outline: none;
+  }
+}

package/nationalarchives/utilities/_columns.scss

@@ -0,0 +1,42 @@
+@use "../tools/media";
+@use "../variables/grid";
+
+.tna-columns {
+  column-gap: grid.$gutter-width;
+
+  &--2 {
+    column-count: 2;
+  }
+
+  &--3 {
+    column-count: 3;
+  }
+
+  @include media.on-tiny {
+    column-gap: grid.$gutter-width-tiny;
+  }
+
+  @include media.on-small {
+    @for $i from 1 through 4 {
+      &--#{$i}-small {
+        column-count: $i;
+      }
+    }
+  }
+
+  @include media.on-tiny {
+    @for $i from 1 through 4 {
+      &--#{$i}-tiny {
+        column-count: $i;
+      }
+    }
+  }
+
+  &__block {
+    break-inside: avoid;
+  }
+
+  &:has(&__block:only-of-type) {
+    column-count: 1;
+  }
+}

package/nationalarchives/utilities/_debug.scss

@@ -1,4 +1,4 @@
-@use "../features";
+@use "../variables/features";
 
 /*
  * ==========================================

package/nationalarchives/utilities/_global.scss

@@ -1,4 +1,3 @@
-@use "../features";
 @use "../tools/colour";
 @use "../tools/media";
 @use "../tools/spacing";
@@ -13,11 +12,17 @@
   width: 100%;
   height: 100%;
 
-  overflow-x: hidden;
-  overflow-y: auto;
+  /*
+   * ------------------------------------------
+   * Support ended with iOS 13 released on 19th
+   * September 2019. Deprecate in the future if
+   * iOS <13 share drops low enough.
+   * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling
+   * ------------------------------------------
+   */
   -webkit-overflow-scrolling: touch;
 
-  font-size: #{typography.$base-font-size-px}px;
+  font-size: #{typography.$relative-1rem-px}px;
 
   @include colour.colour-background("page-background");
 
@@ -63,11 +68,9 @@
     }
   }
 
-  @include colour.accent-css-vars("black"); // TODO: Temp
-
-  // &--black-accent {
-  //   @include colour.accent-css-vars("black");
-  // }
+  &--black-accent {
+    @include colour.accent-css-vars("black");
+  }
 
   &--yellow-accent {
     @include colour.accent-css-vars("yellow");
@@ -102,8 +105,6 @@
   margin: 0;
   padding: 0;
 
-  overflow: auto;
-
   &:has(.tna-header):has(#main-content[role="main"]):has(.tna-footer) {
     display: flex;
     flex-direction: column;
@@ -133,23 +134,12 @@ canvas {
   display: none;
 }
 
-*:focus {
-  // outline: 0.3125rem colour.$focus-colour solid;
-  outline: 0.3125rem solid;
-  @include colour.colour-outline("focus-outline");
-  outline-offset: 0.125rem;
-}
-
 hr {
-  margin: 2rem 0;
+  margin: 0;
 
   border-width: 1px 0 0;
   @include colour.colour-border("keyline");
   border-style: solid;
-
-  // @include colour.on-high-contrast {
-  //   border-style: solid;
-  // }
 }
 
 .tna-section {
@@ -165,7 +155,7 @@ hr {
 .tna-aside {
   padding: 2rem;
 
-  @include spacing.space-below;
+  @include spacing.space-above;
 
   @include media.on-mobile {
     padding: 1rem;
@@ -174,16 +164,26 @@ hr {
   @include colour.on-high-contrast {
     @include colour.colour-border("keyline-dark", 1px);
   }
-}
 
-.tna-background--contrast {
-  @include colour.invert;
+  &--tight {
+    padding: 1rem;
+  }
 }
 
-.tna-background--accent {
-  @include colour.accent;
-}
+.tna-background {
+  &--contrast {
+    @include colour.invert;
+  }
+
+  &--accent {
+    @include colour.accent;
+  }
+
+  &--accent-light {
+    @include colour.light-accent-background;
+  }
 
-.tna-background--accent-light {
-  @include colour.light-accent-background;
+  &--tint {
+    @include colour.tint-background;
+  }
 }

package/nationalarchives/utilities/_index.scss

@@ -1,5 +1,7 @@
 @use "a11y";
+@use "columns";
 @use "debug";
 @use "global";
+@use "lists";
 @use "overrides";
 @use "typography";

package/nationalarchives/utilities/_lists.scss

@@ -0,0 +1,181 @@
+@use "../tools/colour";
+@use "../tools/media";
+@use "../tools/spacing";
+@use "../tools/typography";
+
+.tna-ul,
+.tna-ol {
+  margin: 1rem 0;
+  padding: 0 0 0 2rem;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  li::marker {
+    @include colour.colour-font("accent-background");
+    font-weight: 700;
+  }
+
+  &--plain {
+    padding-left: 0;
+
+    list-style: none;
+  }
+}
+
+.tna-dl {
+  margin: 1rem 0;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  dt,
+  dd {
+    margin: 0;
+    padding: 0.5rem 1rem;
+
+    position: relative;
+
+    box-sizing: border-box;
+
+    word-wrap: break-word;
+    // word-break: break-all;
+  }
+
+  &--plain {
+    dt {
+      padding-left: 0;
+    }
+
+    dd {
+      padding-right: 0;
+    }
+  }
+
+  dt {
+    width: 30%;
+
+    @include typography.main-font-weight-bold;
+  }
+
+  dd {
+    width: 70%;
+
+    + dd {
+      margin-left: 30%;
+    }
+  }
+
+  &--icon-padding {
+    dt {
+      padding-left: 3rem !important;
+
+      position: relative;
+
+      .fa-solid {
+        overflow: visible;
+
+        position: absolute;
+        top: 50%;
+        left: 1rem;
+
+        @include colour.colour-font("icon-light");
+        text-align: left;
+
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  &--icon-padding#{&}--plain {
+    dt {
+      padding-left: 2rem !important;
+
+      .fa-solid {
+        left: 0;
+      }
+    }
+
+    dd {
+      padding-left: 2rem;
+    }
+  }
+
+  &:not(&--plain) {
+    dt:first-child,
+    dd:nth-of-type(2n) + dt,
+    dd:nth-of-type(2n + 1) {
+      @include colour.colour-background("background-tint");
+    }
+  }
+
+  @include media.on-small {
+    dt {
+      width: 35%;
+    }
+
+    dd {
+      width: 65%;
+
+      + dd {
+        margin-left: 35%;
+      }
+    }
+  }
+
+  @include media.on-tiny {
+    dt,
+    dd {
+      width: 100%;
+      margin-left: 0;
+    }
+
+    dd {
+      padding-left: 1rem;
+    }
+
+    &--plain {
+      dt {
+        padding-bottom: 0;
+      }
+
+      dd {
+        padding-top: 0;
+        // padding-left: 2rem;
+
+        + dt {
+          // @include colour.colour-border("keyline", 1px, solid, top);
+        }
+      }
+    }
+
+    &:not(&--plain) {
+      dt {
+        @include colour.colour-background("background-tint");
+      }
+
+      dd {
+        background: transparent !important;
+      }
+    }
+  }
+
+  @include colour.on-high-contrast {
+    @include colour.colour-border("keyline-dark", 1px, solid, bottom);
+
+    dt,
+    dd {
+      // padding-left: 0;
+      // padding-right: 0;
+
+      background: transparent !important;
+
+      @include colour.colour-border("keyline-dark", 1px, solid, top);
+    }
+  }
+}