vanilla-framework 4.26.0 → 4.27.0

package/scss/_layouts_full-width.scss

@@ -22,7 +22,7 @@
       background: $colors--theme--background-alt;
 
       // height of top navigation, as padding applied to .p-navigation__link + line-heigh of the anchor text inside
-      $navigation-top-height: $spv--large * 2 + map-get($line-heights, default-text);
+      $navigation-top-height: $spv--large * 2 + map-get($settings-text-default, line-height);
 
       height: calc(100% - $navigation-top-height); // height of document reduced by height of top nav
       min-height: calc(100vh - $navigation-top-height);

package/scss/_patterns_badge.scss

@@ -13,7 +13,7 @@
     // the minimum content width should be the total desired width (the line-height)
     // minus the space already taken up by the left and right padding
     // Makes the shortest badge a perfect circle and keeps it related to line-height (of %x-small-text) and padding (below)
-    min-width: map-get($line-heights, x-small) - (2 * $spv--x-small);
+    min-width: map-get($settings-text-x-small, line-height) - (2 * $spv--x-small);
     overflow: hidden;
     padding: 0 $spv--x-small;
     text-align: center;

package/scss/_patterns_chip.scss

@@ -7,8 +7,6 @@
     align-self: center;
     background-size: map-get($icon-sizes, small);
     flex: 0 0 auto;
-    // Space chip away from the content preceding it in the chip body
-    margin-left: $sph--x-small;
     @media (min-width: $breakpoint-x-large) {
       background-size: math.div(map-get($icon-sizes, small), $font-size-ratio--largescreen); //ensure no rounding happens as it positions the icon off center
     }
@@ -27,7 +25,7 @@
     padding: calc($spv--x-small - $input-border-thickness) $sph--small; // account for border thickness using calc
     position: relative;
     user-select: none;
-    vertical-align: calc($input-border-thickness - map-get($nudges, p));
+    vertical-align: calc($input-border-thickness - map-get($settings-text-p, nudge));
     white-space: nowrap;
 
     [class*='p-icon--'],
@@ -58,6 +56,8 @@
       @include vf-icon-close-themed;
 
       border-radius: 50%;
+      // Space away from the content preceding it in the chip body
+      margin-left: $sph--x-small;
     }
 
     & > [class*='p-icon--'] {

package/scss/_patterns_grid-8.scss

@@ -82,7 +82,7 @@
 
   // on medium/tablet screens, small and large grid class names span full width (to match block level element behaviour)
   %grid-8-span-on-tablet {
-    @media (min-width: $threshold-4-6-col) {
+    @media (min-width: $threshold-4-small-4-med-col) {
       grid-column: auto / span $grid-8-columns-medium;
     }
   }
@@ -100,7 +100,7 @@
   }
 
   // col-medium-X classes define grid for medium screens
-  @media (min-width: $threshold-4-6-col) {
+  @media (min-width: $threshold-4-small-4-med-col) {
     @for $i from $grid-8-columns-medium through 1 {
       .#{$grid-8-medium-col-prefix}#{$i} {
         @include vf-grid-8-column($i);
@@ -114,7 +114,7 @@
 
   // on desktop screens small and medium grid class names span full width (to match block level element behaviour)
   %grid-8-span-on-desktop {
-    @media (min-width: $threshold-6-12-col) {
+    @media (min-width: $threshold-4-8-col) {
       grid-column: auto / span $grid-8-columns;
     }
   }
@@ -132,7 +132,7 @@
   }
 
   // col-X class names define grid on large/desktop screens
-  @media (min-width: $threshold-6-12-col) {
+  @media (min-width: $threshold-4-8-col) {
     @for $i from $grid-8-columns through 1 {
       // set col-* to span respective number of columns on desktop
       .#{$grid-8-large-col-prefix}#{$i} {
@@ -144,9 +144,9 @@
 
   // column reordering
   $offsets: (
-    (small, 0, $threshold-4-6-col, $grid-8-columns-small),
-    (medium, $threshold-4-6-col, $threshold-6-12-col, $grid-8-columns-medium),
-    (large, $threshold-6-12-col, false, $grid-8-columns)
+    (small, 0, $threshold-4-small-4-med-col, $grid-8-columns-small),
+    (medium, $threshold-4-small-4-med-col, $threshold-4-8-col, $grid-8-columns-medium),
+    (large, $threshold-4-8-col, false, $grid-8-columns)
   );
 
   @each $label, $breakpoint-min, $breakpoint-reset, $col-count in $offsets {
@@ -164,4 +164,253 @@
       }
     }
   }
+
+  // Common grid patterns
+  $col-50-medium: calc($grid-8-columns-medium / 2);
+
+  $col-25: calc($grid-8-columns / 4);
+  $col-25-medium: calc($grid-8-columns-medium / 4);
+  $col-50: calc($grid-8-columns / 2);
+  $col-75: calc(($grid-8-columns / 4) * 3);
+  $col-75-medium: calc(($grid-8-columns-medium / 4) * 3);
+
+  // 50/50 split on medium and large screens
+  .grid-row--50-50 {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @include vf-grid-8-column($grid-8-columns-small);
+
+      @media (min-width: $threshold-4-small-4-med-col) {
+        @include vf-grid-8-column($col-50-medium);
+      }
+
+      @media (min-width: $threshold-4-8-col) {
+        @include vf-grid-8-column($col-50);
+      }
+    }
+  }
+
+  // 25/75 split on medium and large screens
+  .grid-row--25-75 {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @include vf-grid-8-column($grid-8-columns-small);
+
+      @media (min-width: $threshold-4-small-4-med-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-25-medium);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-75-medium);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-8-column($grid-8-columns-medium);
+        }
+      }
+
+      @media (min-width: $threshold-4-8-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-25);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-75);
+        }
+
+        // if there is only one column we offset it to the right
+        &:only-of-type {
+          grid-column-start: calc($col-25 + 1);
+          @include vf-grid-8-column($col-75);
+        }
+      }
+    }
+  }
+
+  // 50/50 split just on medium screens
+  .grid-row--50-50-on-medium {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @media ($threshold-4-small-4-med-col <= width < $threshold-4-8-col) {
+        @include vf-grid-8-column($col-50-medium);
+      }
+    }
+  }
+
+  .grid-row--25-75-on-medium {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @media ($threshold-4-small-4-med-col <= width < $threshold-4-8-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-25-medium);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-75-medium);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-8-column($grid-8-columns-medium);
+        }
+      }
+    }
+  }
+
+  // 50/50 split just on large screens
+  .grid-row--50-50-on-large {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @media (min-width: $threshold-4-8-col) {
+        @include vf-grid-8-column($col-50);
+      }
+    }
+  }
+
+  .grid-row--25-75-on-large {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @media (min-width: $threshold-4-8-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-25);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-75);
+        }
+
+        // if there is only one column we offset it to the right
+        &:only-of-type {
+          grid-column-start: calc($col-25 + 1);
+          @include vf-grid-8-column($col-75);
+        }
+      }
+    }
+  }
+
+  // 75/25 split on medium and large screens
+  .grid-row--75-25 {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @include vf-grid-8-column($grid-8-columns-small);
+
+      @media (min-width: $threshold-4-small-4-med-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-75-medium);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-25-medium);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-8-column($grid-8-columns-medium);
+        }
+      }
+
+      @media (min-width: $threshold-4-8-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-75);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-25);
+        }
+      }
+    }
+  }
+
+  .grid-row--75-25-on-medium {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @media ($threshold-4-small-4-med-col <= width < $threshold-4-8-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-75-medium);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-25-medium);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-8-column($grid-8-columns-medium);
+        }
+      }
+    }
+  }
+
+  .grid-row--75-25-on-large {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @media (min-width: $threshold-4-8-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-8-column($col-75);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-25);
+        }
+      }
+    }
+  }
+
+  .grid-row--25-25-50 {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @include vf-grid-8-column($grid-8-columns-small);
+
+      @media (min-width: $threshold-4-small-4-med-col) {
+        // The first two columns are 50% each on medium
+        &:nth-of-type(-n + 2) {
+          @include vf-grid-8-column($col-50-medium);
+        }
+
+        // The third column is 100% on medium
+        &:nth-of-type(3) {
+          @include vf-grid-8-column($grid-8-columns-medium);
+        }
+      }
+
+      @media (min-width: $threshold-4-8-col) {
+        &:nth-of-type(1),
+        &:nth-of-type(2) {
+          @include vf-grid-8-column($col-25);
+        }
+
+        &:nth-of-type(3) {
+          @include vf-grid-8-column($col-50);
+        }
+      }
+    }
+  }
+
+  .grid-row--25-25-25-25 {
+    @extend %vf-grid-row;
+
+    > .grid-col {
+      @include vf-grid-8-column($grid-8-columns-small);
+
+      @media (min-width: $threshold-4-small-4-med-col) {
+        @include vf-grid-8-column($col-50-medium);
+      }
+
+      @media (min-width: $threshold-4-8-col) {
+        @include vf-grid-8-column($col-25);
+      }
+    }
+  }
 }

package/scss/_patterns_grid.scss

@@ -193,7 +193,6 @@
   }
 
   // Common grid patterns
-  // TODO implement the common grid patterns for the new 4/4/8 grid (.grid-row--)
   $col-50-medium: calc($grid-columns-medium / 2);
 
   $col-25: calc($grid-columns / 4);

package/scss/_patterns_heading-icon.scss

@@ -22,14 +22,14 @@
     height: map-get($icon-sizes, heading-icon);
     margin-bottom: 0;
     margin-right: $sph--large;
-    margin-top: calc(map-get($nudges, h3) / 2); // just a quick fix, should be calculated based on line height and icon size
+    margin-top: calc(map-get($settings-text-h3, nudge) / 2); // just a quick fix, should be calculated based on line height and icon size
     width: map-get($icon-sizes, heading-icon);
   }
 
   .p-heading-icon--small {
     .p-heading-icon__img {
       height: map-get($icon-sizes, heading-icon--small);
-      margin-top: map-get($nudges, h3);
+      margin-top: map-get($settings-text-h3, nudge);
       width: map-get($icon-sizes, heading-icon--small);
     }
   }

package/scss/_patterns_image.scss

@@ -25,25 +25,47 @@
         Image element within an image container.
 */
 
-@use 'sass:color';
+@use 'sass:math';
 @import 'settings';
 
-// Mapping of aspect ratio class names to their `aspect-ratio` values (width / height).
+// Mapping of aspect ratio class names to their values
 $aspect-ratios: (
-  '16-9': calc(16 / 9),
-  '3-2': calc(3 / 2),
-  '2-3': calc(2 / 3),
+  '16-9': math.div(16, 9),
+  '3-2': math.div(3, 2),
+  '2-3': math.div(2, 3),
   'cinematic': 2.4,
   'square': 1,
 );
 
+@mixin apply-aspect-ratio-styles($padding-value) {
+  &::before {
+    content: '';
+    display: block;
+    padding-bottom: $padding-value;
+  }
+
+  .p-image-container__image {
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
 @mixin aspect-ratio-classes {
   @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+    $padding-percentage: math.div(1, $aspect-ratio-value) * 100%;
     .p-image-container--#{$aspect-ratio} {
-      aspect-ratio: $aspect-ratio-value;
+      @include apply-aspect-ratio-styles($padding-percentage);
     }
   }
 
+  // Responsive aspect ratios
   @each $breakpoint-name, $breakpoint-bounds-pair in $breakpoint-bounds {
     $min-width: map-get($breakpoint-bounds-pair, min);
     $max-width: map-get($breakpoint-bounds-pair, max);
@@ -51,24 +73,27 @@ $aspect-ratios: (
     @if $min-width and $max-width {
       @media ($min-width <= width < $max-width) {
         @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+          $padding-percentage: math.div(1, $aspect-ratio-value) * 100%;
           .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
-            aspect-ratio: $aspect-ratio-value;
+            @include apply-aspect-ratio-styles($padding-percentage);
           }
         }
       }
     } @else if $min-width {
       @media (width >= $min-width) {
         @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+          $padding-percentage: math.div(1, $aspect-ratio-value) * 100%;
           .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
-            aspect-ratio: $aspect-ratio-value;
+            @include apply-aspect-ratio-styles($padding-percentage);
           }
         }
       }
     } @else if $max-width {
       @media (width < $max-width) {
         @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+          $padding-percentage: math.div(1, $aspect-ratio-value) * 100%;
           .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
-            aspect-ratio: $aspect-ratio-value;
+            @include apply-aspect-ratio-styles($padding-percentage);
           }
         }
       }
@@ -79,32 +104,33 @@ $aspect-ratios: (
 @mixin vf-p-image {
   .p-image-container,
   [class^='p-image-container--'] {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    text-align: center;
+    display: block;
+    position: relative;
+    width: 100%;
 
-    // If there is a child lazyloaded image, don't let it affect the layout
-    & > .lazyloaded {
-      display: contents;
+    .p-image-container__image {
+      display: block;
+      margin: auto;
     }
 
     &.is-highlighted {
       background: $colors--theme--background-alt;
     }
 
-    .p-image-container__image {
-      // max height prevents the image from stretching the container
-      // when the aspect ratio is set, and object-fit ensures the aspect ratio
-      // of the image content is maintained
-      max-height: 100%;
-      object-fit: contain;
+    // If there is a child lazyloaded image, don't let it affect the layout.
+    & > .lazyloaded {
+      display: contents;
     }
 
     &.is-cover {
       .p-image-container__image {
         height: 100%;
+        left: 0;
+        margin: 0;
         object-fit: cover;
+        position: absolute;
+        top: 0;
+        transform: none;
         width: 100%;
       }
     }

package/scss/_patterns_lists.scss

@@ -24,18 +24,18 @@ $list-step-bullet-margin: $sph--x-large;
   %numbered-step-title {
     list-style: none;
     margin-left: 0;
-    padding-left: calc(map-get($line-heights, default-text) + $list-step-bullet-margin);
+    padding-left: calc(map-get($settings-text-default, line-height) + $list-step-bullet-margin);
     position: relative;
 
     &::before {
       content: counter(p-stepped-list-counter) '.';
       display: block;
-      height: map-get($line-heights, default-text);
+      height: map-get($settings-text-default, line-height);
       left: 0;
       margin-right: $list-step-bullet-margin;
       position: absolute;
       text-align: right;
-      width: map-get($line-heights, default-text);
+      width: map-get($settings-text-default, line-height);
     }
   }
 
@@ -389,7 +389,7 @@ $list-step-bullet-margin: $sph--x-large;
 
       &::after {
         content: '\2022';
-        line-height: map-get($line-heights, default-text);
+        line-height: map-get($settings-text-default, line-height);
         position: relative;
         right: -0.25rem;
       }
@@ -445,8 +445,8 @@ $list-step-bullet-margin: $sph--x-large;
   }
 
   // Indent titles
-  $bullet-width: map-get($line-heights, default-text);
-  $bullet-width-mobile: map-get($line-heights, default-text);
+  $bullet-width: map-get($settings-text-default, line-height);
+  $bullet-width-mobile: map-get($settings-text-default, line-height);
 
   .p-stepped-list__title {
     @extend %numbered-step-title;
@@ -465,8 +465,19 @@ $list-step-bullet-margin: $sph--x-large;
 
   @for $i from 4 through 1 {
     // Bullet sizes for each heading level
-    $bullet-width: map-get($line-heights, h#{$i});
-    $bullet-width-mobile: map-get($line-heights, h#{$i}-mobile);
+    @if $i == 1 {
+      $bullet-width: map-get($settings-text-h1, line-height);
+      $bullet-width-mobile: map-get($settings-text-h1-mobile, line-height);
+    } @else if $i == 2 {
+      $bullet-width: map-get($settings-text-h2, line-height);
+      $bullet-width-mobile: map-get($settings-text-h2-mobile, line-height);
+    } @else if $i == 3 {
+      $bullet-width: map-get($settings-text-h3, line-height);
+      $bullet-width-mobile: map-get($settings-text-h3-mobile, line-height);
+    } @else if $i == 4 {
+      $bullet-width: map-get($settings-text-h4, line-height);
+      $bullet-width-mobile: map-get($settings-text-h4-mobile, line-height);
+    }
 
     .p-heading--#{$i}.p-stepped-list__title,
     h#{$i}.p-stepped-list__title {

package/scss/_patterns_matrix.scss

@@ -103,13 +103,13 @@
 
     @media (min-width: $breakpoint-heading-threshold) {
       // place image in the middle of the heading text
-      margin-top: calc(map-get($nudges, h4) + (map-get($line-heights, h4) - $matrix-img-width) / 2);
+      margin-top: calc(map-get($settings-text-h4, nudge) + (map-get($settings-text-h4, line-height) - $matrix-img-width) / 2);
     }
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
         // place image in the middle of the heading text
-        margin-top: calc(map-get($nudges, h4-large) + (map-get($line-heights, h4) - $matrix-img-width) / 2);
+        margin-top: calc(map-get($settings-text-h4-large, nudge) + (map-get($settings-text-h4, line-height) - $matrix-img-width) / 2);
       }
     }
   }
@@ -129,12 +129,12 @@
     @extend %vf-heading-4;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-bottom: -#{map-get($nudges, h4)};
+      margin-bottom: -#{map-get($settings-text-h4, nudge)};
     }
 
     @if ($increase-font-size-on-larger-screens) {
       @media (min-width: $breakpoint-x-large) {
-        margin-bottom: -#{map-get($nudges, h4-large)};
+        margin-bottom: -#{map-get($settings-text-h4-large, nudge)};
       }
     }
   }

package/scss/_patterns_navigation-reduced.scss

@@ -1,7 +1,7 @@
 @mixin vf-p-navigation-reduced {
   .p-navigation--reduced {
     // height of reduced navigation calculated from line height and padding
-    $reduced-nav-height: calc(map-get($line-heights, x-small) + 2 * $spv--small);
+    $reduced-nav-height: calc(map-get($settings-text-x-small, line-height) + 2 * $spv--small);
 
     background-color: $colors--theme--background-alt;
     position: relative;
@@ -26,7 +26,7 @@
     // reduced nav logo text uses default font size (on small screens)
     .p-navigation__logo-title {
       color: $colors--theme--text-muted;
-      font-size: #{map-get($font-sizes, default)}rem;
+      font-size: #{map-get($settings-text-default, font-size)}rem;
       font-weight: $font-weight-regular-text;
     }
 
@@ -47,8 +47,8 @@
       .p-navigation__link,
       .p-navigation__logo-title {
         color: $colors--theme--text-muted;
-        font-size: #{map-get($font-sizes, small)}rem;
-        line-height: map-get($line-heights, x-small);
+        font-size: #{map-get($settings-text-small, font-size)}rem;
+        line-height: map-get($settings-text-x-small, line-height);
       }
 
       .p-navigation__link {
@@ -88,7 +88,7 @@
       // use muted icon to align with text colour
       &::after {
         @include vf-icon-search-muted;
-        top: calc($spv--medium + map-get($nudges, x-small));
+        top: calc($spv--medium + map-get($settings-text-x-small, nudge));
       }
 
       // search label is always hidden in reduced navigation

package/scss/_patterns_navigation.scss

@@ -8,7 +8,7 @@ $navigation-logo-size: 1rem;
 $navigation-logo-padding: calc(1.5rem + 0.1rem); // ~25.6px to align better with logos as originally designed in SVG
 $sph-navigation-link: 0.3rem;
 $spv-navigation-logo-bottom-position: 0.25rem; // 4px when 1rem is 16px
-$navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large); // navigation bar height based on line height and paddings
+$navigation-height: calc(map-get($settings-text-p, line-height) + 2 * $spv--large); // navigation bar height based on line height and paddings
 
 @mixin vf-p-navigation {
   // placeholders
@@ -94,7 +94,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
 
     display: block;
     font-weight: $font-weight-regular-text;
-    line-height: map-get($line-heights, default-text);
+    line-height: map-get($settings-text-default, line-height);
     margin: 0;
     overflow: hidden;
     padding-left: calc(map-get($grid-margin-widths, small) + $navigation-logo-padding); // allow navigation align with tag logo text on small screens
@@ -576,7 +576,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
       position: absolute;
       right: calc($sph--large / 2);
       text-indent: calc(100% + 10rem);
-      top: calc($spv--large + map-get($nudges, x-small));
+      top: calc($spv--large + map-get($settings-text-x-small, nudge));
       width: map-get($icon-sizes, default);
     }
   }
@@ -690,7 +690,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
     @media (min-width: $breakpoint-navigation-threshold) {
       position: absolute;
       // padding applied to .p-navigation__link + line-heigh of the anchor text inside
-      top: $spv--large * 2 + map-get($line-heights, default-text);
+      top: $spv--large * 2 + map-get($settings-text-default, line-height);
     }
 
     @media (width < $breakpoint-navigation-threshold) {
@@ -728,7 +728,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
 
       @media (min-width: $breakpoint-navigation-threshold) {
         right: calc($sph--large / 2); // position by the center of grid margin
-        top: calc($spv--large + map-get($nudges, x-small));
+        top: calc($spv--large + map-get($settings-text-x-small, nudge));
         transform: rotate(0deg);
       }
     }