@nationalarchives/frontend 0.2.13 → 0.2.15

package/nationalarchives/ie.scss

@@ -1,6 +1,72 @@
 /* stylelint-disable */
 
+@use "sass:math";
+@use "variables/a11y" as a11yVariables;
+@use "tools/colour";
 @use "tools/media";
+@use "tools/spacing";
+
+a,
+button,
+input,
+textarea,
+select,
+summary {
+  &:focus {
+    z-index: 9;
+
+    outline: colour.brand-colour("blue") a11yVariables.$focus-outline-width
+      solid;
+    outline-offset: a11yVariables.$focus-outline-offset;
+  }
+}
+
+.tna-checkboxes,
+.tna-radios {
+  &__item {
+    input {
+      width: 1.5rem;
+      height: 1.5rem;
+
+      display: inline-block;
+
+      position: static;
+
+      vertical-align: middle;
+
+      opacity: 1;
+    }
+  }
+
+  &__item-label {
+    display: inline-block;
+  }
+}
+
+.tna-compound-filters {
+  &__link {
+    &::before,
+    &::after {
+      border-left: 2px #000 solid !important;
+    }
+  }
+}
+
+.tna-index-grid {
+  &__item-image {
+    height: 100%;
+  }
+
+  &__item-content {
+    flex: auto;
+  }
+}
+
+.tna-button {
+  svg {
+    display: none;
+  }
+}
 
 .tna-global-header__logo--link,
 .tna-global-header__navigation-item-link,
@@ -14,7 +80,7 @@
 }
 
 .tna-global-header__navigation-item-link {
-  border-bottom: 0.5px rgba(255, 255, 255, 0.5) solid;
+  border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
 }
 
 @include media.on-larger-than-mobile {
@@ -59,6 +125,52 @@
   }
 }
 
+@mixin horizontal-card-layout($modifierClass, $innerPaddingAmount) {
+  &#{$modifierClass} {
+    padding-left: 50%;
+  }
+
+  &#{$modifierClass}#{&}--flipped {
+    padding-right: 50%;
+    padding-left: 0;
+  }
+
+  &#{$modifierClass} &__image-container {
+    width: 50%;
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.tna-card {
+  &__image-container {
+    margin-bottom: spacing.space(1);
+    padding-bottom: #{math.div(2, 3) * 100%};
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__heading-link {
+    &::after {
+      display: none !important;
+    }
+  }
+
+  @include media.on-larger-than-mobile {
+    @include horizontal-card-layout("--horizontal", 2);
+  }
+
+  @include media.on-small {
+    @include horizontal-card-layout("--horizontal-on-small", 1);
+  }
+}
+
 .tna-columns {
   column-count: 1 !important;
 }
@@ -83,6 +195,7 @@
     right: 0;
   }
 
+  &__information,
   &__content-inner {
     background: #fff;
   }
@@ -105,7 +218,3 @@
 .tna-chip {
   background: #fff;
 }
-
-.etna-video {
-  padding-bottom: 56.25%;
-}