vanilla-framework 2.36.0 → 3.0.0-beta.1

package/scss/_base_tables.scss

@@ -8,7 +8,7 @@
     border-collapse: collapse;
     caption-side: bottom;
     line-height: map-get($line-heights, default-text);
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     overflow-x: auto;
     width: 100%;
 
@@ -25,8 +25,8 @@
 
     font-weight: $font-weight-regular-text;
     overflow: hidden;
-    padding-left: $sph-inner--small;
-    padding-right: $sph-inner--small;
+    padding-left: $sph--small;
+    padding-right: $sph--small;
     text-align: left;
     text-overflow: ellipsis;
     vertical-align: top;
@@ -40,7 +40,7 @@
     th {
       @extend %table-header-label;
 
-      padding-bottom: $spv-inner--large - map-get($nudges, nudge--x-small);
+      padding-bottom: $spv--large - map-get($nudges, nudge--x-small);
       padding-top: map-get($nudges, nudge--x-small) + map-get($browser-rounding-compensations, small) + $sp-unit;
     }
 
@@ -65,8 +65,8 @@
   }
 
   caption {
-    padding-bottom: $spv-inner--small;
-    padding-top: $spv-inner--small;
+    padding-bottom: $spv--small;
+    padding-top: $spv--small;
   }
   // stylelint-enable selector-max-type
 

package/scss/_base_typography-definitions.scss

@@ -1,16 +1,13 @@
-@import 'base_typography-max-widths';
-
 @mixin vf-b-typography-definitions {
   //@section Heading styling in placeholders
   %vf-heading-1 {
-    @include heading-max-width--short;
-
     font-size: #{map-get($font-sizes, h1-mobile)}rem;
     font-style: normal;
     font-weight: $font-weight-display-heading;
     line-height: map-get($line-heights, h1-mobile);
     margin-bottom: map-get($sp-after, h1-mobile) - map-get($nudges, nudge--h1-mobile);
     margin-top: 0;
+    max-width: $max-width--default;
     padding-top: map-get($nudges, nudge--h1-mobile) + map-get($browser-rounding-compensations, h1);
 
     @media (min-width: $breakpoint-heading-threshold) {
@@ -33,14 +30,13 @@
   }
 
   %vf-heading-2 {
-    @include heading-max-width--short;
-
     font-size: #{map-get($font-sizes, h2-mobile)}rem;
     font-style: normal;
     font-weight: $font-weight-display-heading;
     line-height: map-get($line-heights, h2-mobile);
     margin-bottom: map-get($sp-after, h2-mobile) - map-get($nudges, nudge--h2-mobile);
     margin-top: 0;
+    max-width: $max-width--default;
     padding-top: map-get($nudges, nudge--h2-mobile) + map-get($browser-rounding-compensations, h2);
 
     @media (min-width: $breakpoint-heading-threshold) {
@@ -56,14 +52,13 @@
   }
 
   %vf-heading-3 {
-    @include heading-max-width--long;
-
     font-size: #{map-get($font-sizes, h3-mobile)}rem;
     font-style: normal;
     font-weight: $font-weight-display-heading;
     line-height: map-get($line-heights, h3-mobile);
     margin-bottom: map-get($sp-after, h3-mobile) - map-get($nudges, nudge--h3-mobile);
     margin-top: 0;
+    max-width: $max-width--default;
     padding-top: map-get($nudges, nudge--h3-mobile);
 
     @media (min-width: $breakpoint-heading-threshold) {
@@ -79,14 +74,13 @@
   }
 
   %vf-heading-4 {
-    @include heading-max-width--long;
-
     font-size: #{map-get($font-sizes, h4-mobile)}rem;
     font-style: normal;
     font-weight: $font-weight-regular-text;
     line-height: map-get($line-heights, h4-mobile);
     margin-bottom: map-get($sp-after, h4-mobile) - map-get($nudges, nudge--h4-mobile);
     margin-top: 0;
+    max-width: $max-width--default;
     padding-top: map-get($nudges, nudge--h4-mobile) + map-get($browser-rounding-compensations, h4);
 
     @media (min-width: $breakpoint-heading-threshold) {
@@ -109,14 +103,13 @@
   }
 
   %vf-heading-5 {
-    @include p-max-width;
-
     font-size: 1rem;
     font-style: normal;
     font-weight: $font-weight-bold;
     line-height: map-get($line-heights, default-text);
     margin-bottom: map-get($sp-after, p) - map-get($nudges, nudge--p);
     margin-top: 0;
+    max-width: $max-width--default;
     padding-top: map-get($nudges, nudge--p) + map-get($browser-rounding-compensations, h5);
 
     &.u-no-margin--bottom {
@@ -125,14 +118,13 @@
   }
 
   %vf-heading-6 {
-    @include p-max-width;
-
     font-size: 1rem;
     font-style: italic;
     font-weight: $font-weight-regular-text;
     line-height: map-get($line-heights, default-text);
     margin-bottom: map-get($sp-after, p) - map-get($nudges, nudge--p);
     margin-top: 0;
+    max-width: $max-width--default;
     padding-top: map-get($nudges, nudge--h6) + map-get($browser-rounding-compensations, h6);
 
     @if ($increase-font-size-on-larger-screens) {
@@ -234,42 +226,42 @@
   // Placeholder naming: $sp + -- + {preceding element} + {following element}, e.g. for p + h1: $sp--ph1
 
   %sp--ph1 {
-    padding-top: map-get($nudges, nudge--h1-mobile) + $spv-outer--scaleable;
+    padding-top: map-get($nudges, nudge--h1-mobile) + $spv--x-large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-top: map-get($nudges, nudge--h1) + $spv-outer--scaleable;
+      padding-top: map-get($nudges, nudge--h1) + $spv--x-large;
     }
   }
 
   %sp--ph2 {
-    padding-top: map-get($nudges, nudge--h2-mobile) + $spv-outer--scaleable;
+    padding-top: map-get($nudges, nudge--h2-mobile) + $spv--x-large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-top: map-get($nudges, nudge--h2) + $spv-outer--scaleable;
+      padding-top: map-get($nudges, nudge--h2) + $spv--x-large;
     }
   }
 
   %sp--ph3 {
-    padding-top: map-get($nudges, nudge--h3-mobile) + $spv-outer--scaleable;
+    padding-top: map-get($nudges, nudge--h3-mobile) + $spv--x-large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-top: map-get($nudges, nudge--h3) + $spv-outer--scaleable;
+      padding-top: map-get($nudges, nudge--h3) + $spv--x-large;
     }
   }
 
   %sp--ph4 {
-    padding-top: map-get($nudges, nudge--h4-mobile) + $spv-outer--scaleable;
+    padding-top: map-get($nudges, nudge--h4-mobile) + $spv--x-large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-top: map-get($nudges, nudge--h4) + $spv-outer--scaleable;
+      padding-top: map-get($nudges, nudge--h4) + $spv--x-large;
     }
   }
 
   %sp--ph5 {
-    padding-top: map-get($nudges, nudge--p) + $spv-outer--scaleable;
+    padding-top: map-get($nudges, nudge--p) + $spv--x-large;
   }
 
   %sp--pmuted {
-    padding-top: map-get($nudges, nudge--small) + $spv-outer--scaleable;
+    padding-top: map-get($nudges, nudge--small) + $spv--x-large;
   }
 }

package/scss/_base_typography.scss

@@ -1,16 +1,11 @@
 @import 'settings';
 @import 'base_fontfaces';
-@import 'base_typography-max-widths';
 @import 'base_typography-heading-mixins';
 
 // Typographic element styles
 @mixin vf-b-typography {
   @include vf-b-typography-fontfaces;
 
-  @include deprecate('3.0.0', 'The unused `vf-b-typography-max-widths` mixin will be removed') {
-    @include vf-b-typography-max-widths;
-  }
-
   // stylelint-disable selector-max-type -- base styles can use type selectors
   html {
     color: $color-dark;
@@ -62,7 +57,8 @@
 
   p {
     @extend %paragraph;
-    @include p-max-width;
+
+    max-width: $max-width--default;
   }
 
   .p-text--default {
@@ -92,35 +88,29 @@
   //@section Adjusted spacing for headings (or a p) following a paragraph
   p:not([class*='p-heading--']):not([class*='p-muted-heading']) {
     & + h1,
-    & + .p-heading--1,
-    & + .p-heading--one {
+    & + .p-heading--1 {
       @extend %sp--ph1;
     }
 
     & + h2,
-    & + .p-heading--2,
-    & + .p-heading--two {
+    & + .p-heading--2 {
       @extend %sp--ph2;
     }
 
     & + h3,
-    & + .p-heading--3,
-    & + .p-heading--three {
+    & + .p-heading--3 {
       @extend %sp--ph3;
     }
 
     & + h4,
-    & + .p-heading--4,
-    & + .p-heading--four {
+    & + .p-heading--4 {
       @extend %sp--ph4;
     }
 
     & + h5,
     & + .p-heading--5,
-    & + .p-heading--five,
     & + h6,
-    & + .p-heading--6,
-    & + .p-heading--six {
+    & + .p-heading--6 {
       @extend %sp--ph5;
     }
 

package/scss/_global_functions.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 // Functions used across multiple patterns or utils
 
 /// Replace `$search` with `$replace` in `$string`
@@ -38,16 +40,6 @@
   }
 }
 
-@mixin vf-external-link-color($color-link: $color-link, $color-icon: currentColor) {
-  .p-link--external {
-    color: $color-link;
-
-    &::after {
-      background-color: $color-icon;
-    }
-  }
-}
-
 // Returns the font color to be presented on the passed background-color
 // variable.
 @function vf-determine-text-color($background-color) {
@@ -101,7 +93,7 @@
     }
   } @else if $exponent < 0 {
     @for $i from 1 through -$exponent {
-      $value: $value / $number;
+      $value: math.div($value, $number);
     }
   }
 

package/scss/_layouts_application-panels.scss

@@ -62,7 +62,7 @@
 
   .p-panel__controls {
     margin-left: auto;
-    padding-top: $spv-inner--large;
+    padding-top: $spv--large;
   }
 
   .p-panel__toggle {

package/scss/_layouts_application.scss

@@ -3,7 +3,7 @@
 // default max width of the pinned aside panel in the application layout
 $application-layout--aside-panel-max-width: 50vw !default;
 // screen width breakpoint (min-width) at which side navigation is in collapsed mode
-$application-layout--breakpoint-side-nav-collapsed: $breakpoint-medium !default;
+$application-layout--breakpoint-side-nav-collapsed: $breakpoint-small !default;
 // screen width breakpoint (min-width) at which side navigation is in expanded mode
 $application-layout--breakpoint-side-nav-expanded: $breakpoint-large !default;
 // width of the collapsed side navigation

package/scss/_layouts_fluid-breakout.scss

@@ -6,94 +6,22 @@
   $grid-gap: $sp-unit * 2,
   $suffix: ''
 ) {
-  %l-fluid-breakout-ie11-fallback#{$suffix} {
-    @media (min-width: $breakpoint-large) {
-      display: flex;
-      flex-wrap: wrap;
-    }
-  }
-
-  %l-fluid-breakout__full-and-main-item-ie11-fallback#{$suffix} {
-    margin-right: $grid-gap;
-
-    @media (min-width: $l-fluid-breakout-3-col-threshold) {
-      flex: 1 1 auto;
-      width: $l-fluid-breakout-main-child-width;
-    }
-  }
-
-  %l-fluid-breakout__main-ie11-fallback#{$suffix} {
-    display: flex;
-    flex: 1 1 80%;
-    flex-wrap: wrap;
-    width: 100%;
-
-    @media (min-width: $l-fluid-breakout-3-col-threshold) {
-      width: calc(100% - #{$l-fluid-breakout-aside-width});
-    }
-  }
-
-  %l-fluid-breakout__aside-common-properties-ie-11-fallback#{$suffix} {
-    flex: 0 0 auto;
-    justify-content: flex-start;
-
-    @media (min-width: $breakpoint-large) {
-      flex: 1 1 13%;
-      width: $l-fluid-breakout-aside-width;
-    }
-  }
-
-  %l-fluid-breakout__aside--left-ie-11-fallback#{$suffix} {
-    @extend %l-fluid-breakout__aside-common-properties-ie-11-fallback#{$suffix};
-  }
-
-  %l-fluid-breakout__aside--right-ie-11-fallback#{$suffix} {
-    @extend %l-fluid-breakout__aside-common-properties-ie-11-fallback#{$suffix};
-
-    @media (max-width: $l-fluid-breakout-3-col-threshold) {
-      padding-left: 0;
-    }
-  }
-
-  %l-fluid-breakout__toolbar-ie-11-fallback#{$suffix} {
-    @media (min-width: $breakpoint-large) {
-      flex: 1 1 100%;
-      margin-left: $l-fluid-breakout-aside-width;
-    }
-  }
-
-  %l-fluid-breakout__toolbar-items-ie-11-fallback#{$suffix} {
-    @media (min-width: $breakpoint-large) {
-      display: flex;
-      flex: 1 1 100%;
-      justify-content: space-between;
-    }
-  }
-
   .l-fluid-breakout#{$suffix} {
-    @extend %l-fluid-breakout-ie11-fallback#{$suffix};
-
+    display: block;
+    grid-gap: 0 0;
     padding-left: map-get($grid-margin-widths, small);
     padding-right: map-get($grid-margin-widths, small);
 
-    @supports (display: grid) {
-      display: block;
-      grid-gap: 0 0;
-    }
-
     @media (min-width: $breakpoint-large) {
+      display: grid;
+      grid-template-columns:
+        minmax($l-fluid-breakout-aside-width, 1fr)
+        minmax(0, $l-fluid-breakout-max-width)
+        minmax($l-fluid-breakout-aside-width, 1fr);
+      grid-template-rows: auto;
       margin-left: auto;
       margin-right: auto;
       max-width: calc(2 * #{$l-fluid-breakout-aside-width} + #{$l-fluid-breakout-max-width});
-
-      @supports (display: grid) {
-        display: grid;
-        grid-template-columns:
-          minmax($l-fluid-breakout-aside-width, 1fr)
-          minmax(0, $l-fluid-breakout-max-width)
-          minmax($l-fluid-breakout-aside-width, 1fr);
-        grid-template-rows: auto;
-      }
     }
 
     @media (min-width: $threshold-4-6-col) {
@@ -116,15 +44,11 @@
     }
 
     .l-fluid-breakout__main {
-      @extend %l-fluid-breakout__main-ie11-fallback#{$suffix};
-
-      @supports (display: grid) {
-        display: grid;
-        grid-gap: 0 $grid-gap;
-        grid-row: 2;
-        grid-template-columns: repeat(auto-fit, minmax($l-fluid-breakout-main-child-width, 1fr));
-        width: 100%;
-      }
+      display: grid;
+      grid-gap: 0 $grid-gap;
+      grid-row: 2;
+      grid-template-columns: repeat(auto-fit, minmax($l-fluid-breakout-main-child-width, 1fr));
+      width: 100%;
 
       @media (min-width: $l-fluid-breakout-3-col-threshold) {
         padding-left: map-get($grid-margin-widths, large);
@@ -132,22 +56,16 @@
       }
 
       @media (min-width: $breakpoint-large) {
-        @supports (display: grid) {
-          grid-column: auto / span 2;
+        grid-column: auto / span 2;
 
-          // stylelint-disable-next-line max-nesting-depth
-          &.no-aside {
-            grid-column: 2 / span 2;
-          }
+        &.no-aside {
+          grid-column: 2 / span 2;
         }
       }
 
       &.is-full-width {
         @media (min-width: $breakpoint-large) {
-          // stylelint-disable-next-line max-nesting-depth
-          @supports (display: grid) {
-            grid-column: 1 / span 3;
-          }
+          grid-column: 1 / span 3;
         }
       }
 
@@ -159,37 +77,23 @@
     }
 
     .l-fluid-breakout__item {
-      @extend %l-fluid-breakout__full-and-main-item-ie11-fallback#{$suffix};
-
-      @supports (display: grid) {
-        // overwrite fallback margins
-        margin-left: 0;
-        margin-right: 0;
-
-        @media (min-width: $l-fluid-breakout-3-col-threshold) {
-          grid-column: auto / auto;
-          width: initial;
-        }
+      @media (min-width: $l-fluid-breakout-3-col-threshold) {
+        grid-column: auto / auto;
+        width: initial;
       }
     }
 
     %l-fluid-breakout__aside-common-properties#{$suffix} {
-      //negate properties needed for the ie11 fallback
-      padding-left: 0;
+      grid-column-end: span 1;
+      grid-column-start: auto;
+      grid-row: 2 / 100;
 
       @media (min-width: $l-fluid-breakout-3-col-threshold) {
         align-items: start;
       }
-
-      @supports (display: grid) {
-        grid-column-end: span 1;
-        grid-column-start: auto;
-        grid-row: 2 / 100;
-      }
     }
 
     .l-fluid-breakout__aside {
-      @extend %l-fluid-breakout__aside--right-ie-11-fallback#{$suffix};
       @extend %l-fluid-breakout__aside-common-properties#{$suffix};
 
       @media (min-width: $breakpoint-large) {
@@ -203,7 +107,6 @@
     }
 
     .l-fluid-breakout__aside--right {
-      @extend %l-fluid-breakout__aside--left-ie-11-fallback#{$suffix};
       @extend %l-fluid-breakout__aside-common-properties#{$suffix};
 
       @media (min-width: $breakpoint-large) {
@@ -220,24 +123,19 @@
     }
 
     .l-fluid-breakout__toolbar {
-      @extend %l-fluid-breakout__toolbar-ie-11-fallback#{$suffix};
-
-      margin-block-end: $spv-outer--medium;
+      margin-block-end: $spv--large;
 
       @media (min-width: $breakpoint-large) {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns:
+          minmax($l-fluid-breakout-aside-width, 1fr)
+          minmax(0, $l-fluid-breakout-max-width)
+          minmax($l-fluid-breakout-aside-width, 1fr);
+        grid-template-rows: auto;
+        margin-left: auto;
         margin-right: auto;
         max-width: calc(2 * #{$l-fluid-breakout-aside-width} + #{$l-fluid-breakout-max-width});
-
-        @supports (display: grid) {
-          display: grid;
-          grid-column: 1 / -1;
-          grid-template-columns:
-            minmax($l-fluid-breakout-aside-width, 1fr)
-            minmax(0, $l-fluid-breakout-max-width)
-            minmax($l-fluid-breakout-aside-width, 1fr);
-          grid-template-rows: auto;
-          margin-left: auto;
-        }
       }
 
       @media (min-width: $l-fluid-breakout-3-col-threshold) {
@@ -247,33 +145,25 @@
     }
 
     .l-fluid-breakout__toolbar-items {
-      @extend %l-fluid-breakout__toolbar-items-ie-11-fallback#{$suffix};
-
-      @supports (display: grid) {
-        display: grid;
-        grid-column: 2 / -1;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+      display: grid;
+      grid-column: 2 / -1;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
 
-        @media (max-width: $threshold-4-6-col) {
-          flex: 1 1 auto;
-          grid-template-columns: repeat(1, minmax(0, 1fr));
-          width: $l-fluid-breakout-main-child-width;
-        }
+      @media (max-width: $threshold-4-6-col - 1) {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+        width: $l-fluid-breakout-main-child-width;
       }
     }
 
     .l-fluid-breakout__toolbar-item {
       align-items: center;
       display: flex;
-
-      @supports (display: grid) {
-        grid-column-end: span 1;
-      }
+      grid-column-end: span 1;
 
       &:nth-child(2) {
         justify-content: flex-end;
 
-        @media (max-width: $threshold-4-6-col) {
+        @media (max-width: $threshold-4-6-col - 1) {
           justify-content: flex-start;
         }
       }