Improve cards CSS for IE11

nationalarchives · Sep 17, 2024 · fe4dcc1 · fe4dcc1
1 parent 77a552d
commit fe4dcc1
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed colour of hovered buttons using the `<button>` element
+- Improved cards CSS for IE11
 
 ### Security
 

diff --git a/src/nationalarchives/ie.scss b/src/nationalarchives/ie.scss
@@ -1,5 +1,6 @@
 /* stylelint-disable */
 
+@use "sass:math";
 @use "tools/media";
 
 .tna-global-header__logo--link,
@@ -59,6 +60,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%;
+  }
+
+  &--full-click &__heading-link {
+    &::before {
+      display: none;
+    }
+  }
+
+  @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;
 }