vanilla-framework 2.36.0 → 3.0.0-beta.1

package/scss/_patterns_links.scss

@@ -42,18 +42,13 @@
       @include vf-focus;
 
       left: 0;
-      padding: $spv-inner--x-small;
+      padding: $spv--x-small;
       position: relative;
       top: 0;
       z-index: 999999;
     }
   }
 
-  // include external link styles only if CSS mask is supported
-  @supports (mask-size: 1em) or (-webkit-mask-size: 1em) {
-    @include vf-mask-supported;
-  }
-
   .p-top {
     align-items: center;
     display: flex;
@@ -62,7 +57,7 @@
       border-bottom: 1px solid $colors--light-theme--border-default;
       content: '';
       flex-grow: 1;
-      margin: $spv-outer--scaleable 0 calc(#{$spv-outer--scaleable} - 1px) 0;
+      margin: $spv--x-large 0 calc(#{$spv--x-large} - 1px) 0;
     }
 
     &::after {
@@ -70,37 +65,13 @@
       @include vf-icon-back-to-top($color-mid-dark);
 
       content: '';
-      margin-right: $sph-inner--small;
+      margin-right: $sph--small;
     }
   }
 
   .p-top__link {
     color: $color-dark;
-    padding: 0 $sph-inner--small 0 $sph-inner;
+    padding: 0 $sph--small 0 $sph--large;
     text-decoration: none;
   }
 }
-
-// For browsers that support CSS masks
-@mixin vf-mask-supported {
-  $external-icon-size--default-text: 1rem;
-
-  .p-link--external {
-    // Used for links point at a different domain
-    &::after {
-      background-color: currentColor;
-      content: '';
-      display: inline-block;
-      height: $external-icon-size--default-text;
-      line-height: 1;
-      // stylelint-disable property-no-vendor-prefix
-      -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.157 3l-1.5 1.5H6a.5.5 0 00-.492.41L5.5 5v5a.5.5 0 00.41.492L6 10.5h5a.5.5 0 00.492-.41L11.5 10V8.538l1.5-1.5V10a2 2 0 01-2 2H6a2 2 0 01-2-2V5a2 2 0 012-2h3.157zm5.593-1.75V6h-1.5V3.81L8.5 8.56 7.44 7.5l4.748-4.75H10v-1.5h4.75z' fill='%23666' fill-rule='evenodd'/%3E%3C/svg%3E")
-        no-repeat 0 0 / #{$external-icon-size--default-text};
-      // stylelint-enable property-no-vendor-prefix
-      mask: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.157 3l-1.5 1.5H6a.5.5 0 00-.492.41L5.5 5v5a.5.5 0 00.41.492L6 10.5h5a.5.5 0 00.492-.41L11.5 10V8.538l1.5-1.5V10a2 2 0 01-2 2H6a2 2 0 01-2-2V5a2 2 0 012-2h3.157zm5.593-1.75V6h-1.5V3.81L8.5 8.56 7.44 7.5l4.748-4.75H10v-1.5h4.75z' fill='%23666' fill-rule='evenodd'/%3E%3C/svg%3E")
-        no-repeat 0 0 / #{$external-icon-size--default-text};
-      vertical-align: calc(#{$baseline-position} - #{$external-icon-size--default-text} - 1px);
-      width: $external-icon-size--default-text;
-    }
-  }
-}

package/scss/_patterns_list-tree.scss

@@ -77,7 +77,6 @@
     margin: 0 0.5rem 0 -1.75rem;
     padding: 0 0.5rem 0 1.75rem;
     transition-duration: 0s;
-    width: auto;
 
     &:hover {
       background: transparent;

package/scss/_patterns_lists.scss

@@ -2,13 +2,6 @@
 $list-status-icon-height: 0.875rem; // 14px value from svg as rem so it can be used in calculations
 $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that positions the icon correctly
 
-$spv-list-item--inner: null;
-@if ($pad-lists) {
-  $spv-list-item--inner: $spv-inner--x-small; // padding top and bottom for lists containing loose text.
-} @else {
-  $spv-list-item--inner: 0;
-}
-
 @mixin vf-p-list-placeholders {
   %numbered-step-container {
     counter-reset: li;
@@ -38,8 +31,8 @@ $spv-list-item--inner: null;
 
   // Mixin for list items
   %vf-list-item {
-    padding-bottom: $spv-list-item--inner;
-    padding-top: $spv-list-item--inner;
+    padding-bottom: $spv--x-small;
+    padding-top: $spv--x-small;
 
     // FIXME: we need a better way to handle forms within lists
     // stylelint-disable selector-max-type
@@ -57,7 +50,7 @@ $spv-list-item--inner: null;
   %vf-list-item-state-base {
     @extend %vf-list;
 
-    background-position-y: $spv-list-item--inner + $list-status-icon-nudge;
+    background-position-y: $spv--x-small + $list-status-icon-nudge;
     background-repeat: no-repeat;
     background-size: $list-status-icon-height;
     padding-left: 2rem;
@@ -89,7 +82,7 @@ $spv-list-item--inner: null;
 @mixin vf-inline-list-item {
   display: inline;
   list-style: none;
-  margin-right: $sph-outer;
+  margin-right: $sph--large;
 
   &.last-item,
   &:last-of-type {
@@ -246,7 +239,7 @@ $spv-list-item--inner: null;
     float: none;
     margin-left: 0;
     overflow: visible;
-    padding-bottom: $spv-outer--scaleable;
+    padding-bottom: $spv--x-large;
     position: relative;
     width: 100%;
   }
@@ -262,14 +255,14 @@ $spv-list-item--inner: null;
   .p-stepped-list__title {
     @extend %numbered-step-title;
 
-    padding-left: $bullet-width-mobile + $sph-inner;
+    padding-left: $bullet-width-mobile + $sph--large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      padding-left: $bullet-width + $sph-inner;
+      padding-left: $bullet-width + $sph--large;
     }
 
     &::before {
-      margin-right: $sph-inner;
+      margin-right: $sph--large;
       width: $bullet-width-mobile;
 
       @media (min-width: $breakpoint-heading-threshold) {
@@ -279,10 +272,10 @@ $spv-list-item--inner: null;
   }
 
   .p-stepped-list__title + .p-stepped-list__content {
-    margin-left: $bullet-width-mobile + $sph-inner;
+    margin-left: $bullet-width-mobile + $sph--large;
 
     @media (min-width: $breakpoint-heading-threshold) {
-      margin-left: $bullet-width + $sph-inner;
+      margin-left: $bullet-width + $sph--large;
     }
   }
 
@@ -303,14 +296,14 @@ $spv-list-item--inner: null;
     }
 
     h#{$i}.p-stepped-list__title {
-      padding-left: $bullet-width-mobile + $sph-inner;
+      padding-left: $bullet-width-mobile + $sph--large;
 
       @media (min-width: $breakpoint-heading-threshold) {
-        padding-left: $bullet-width + $sph-inner;
+        padding-left: $bullet-width + $sph--large;
       }
 
       &::before {
-        margin-right: $sph-inner;
+        margin-right: $sph--large;
         width: $bullet-width-mobile;
 
         @media (min-width: $breakpoint-heading-threshold) {
@@ -320,10 +313,10 @@ $spv-list-item--inner: null;
     }
 
     h#{$i}.p-stepped-list__title + .p-stepped-list__content {
-      margin-left: $bullet-width-mobile + $sph-inner;
+      margin-left: $bullet-width-mobile + $sph--large;
 
       @media (min-width: $breakpoint-heading-threshold) {
-        margin-left: $bullet-width + $sph-inner;
+        margin-left: $bullet-width + $sph--large;
       }
     }
   }
@@ -335,14 +328,6 @@ $spv-list-item--inner: null;
 
     margin-left: auto;
 
-    // fallback for IE flex box grid implementation
-    @media (min-width: $threshold-6-12-col) {
-      .p-stepped-list__content,
-      .p-stepped-list__title {
-        @include vf-grid-flex-column;
-      }
-    }
-
     @supports (display: grid) {
       .p-stepped-list__content {
         @media (min-width: $threshold-6-12-col) {
@@ -362,7 +347,7 @@ $spv-list-item--inner: null;
       @extend %vf-row;
       @include vf-b-row-reset;
 
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $threshold-6-12-col) {
         padding-top: $sp-unit;
         position: relative;
 
@@ -383,7 +368,7 @@ $spv-list-item--inner: null;
 // Adaptor class `is-split` to split the items of a list into two columns
 @mixin vf-p-list-split {
   [class*='p-list'].is-split {
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-4-6-col) {
       @supports ((-webkit-columns: 1) or (columns: 1)) {
         column-gap: $sp-x-large;
         columns: 2;

package/scss/_patterns_logo-section.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @mixin vf-p-set-logo-section-item-width($breakpoint: small) {
   // This mixin calculates the width of an individual logo.
 
@@ -35,10 +37,10 @@
 
     // The logic of these calculations is explained further down, in the @for loop
     $gutters-total-width: $grid-column-count * $gutter;
-    $percentage-width-of-one-col: 100% / $grid-column-count;
+    $percentage-width-of-one-col: math.div(100%, $grid-column-count);
     $percentage-contribution: $logo-column-span * $percentage-width-of-one-col;
     $gutter-width-inside-logo: $gutter * ($logo-column-span - 1);
-    $rem-contribution: $logo-column-span * ($gutters-total-width / $grid-column-count) - $gutter-width-inside-logo;
+    $rem-contribution: $logo-column-span * math.div($gutters-total-width, $grid-column-count) - $gutter-width-inside-logo;
 
     @include vf-p-apply-logo-section-item-width($percentage-contribution, $rem-contribution);
 
@@ -63,7 +65,7 @@
       // Thus the calculation is split into 2 parts, which are then used in the final calc() function:
 
       // calculate the width of a single column by dividing the entire width by the number of columns it represents:
-      $percentage-width-of-one-col: 100% / $column-count;
+      $percentage-width-of-one-col: math.div(100%, $column-count);
 
       // multiply the width of one column by the number of columns the logo needs to span
       $percentage-contribution: $logo-column-span * $percentage-width-of-one-col;
@@ -73,7 +75,7 @@
 
       // add the width of gutters spanned by the logo, subtract the $gutters-total-width / $column-count;
       // the signs here are reversed because the variable is subtracted. This avoids having + and - in the final css, e.g.: "+ -.75rem"
-      $rem-contribution: $logo-column-span * ($gutters-total-width / $column-count) - $gutter-width-inside-logo;
+      $rem-contribution: $logo-column-span * math.div($gutters-total-width, $column-count) - $gutter-width-inside-logo;
 
       .#{$grid-column-prefix}#{$column-count} & {
         @include vf-p-apply-logo-section-item-width($percentage-contribution, $rem-contribution);
@@ -108,7 +110,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     // negates the margin of logos that sit in the first column
     margin-left: -#{$margin-small};
     width: calc(100% + #{$margin-small});

package/scss/_patterns_matrix.scss

@@ -3,13 +3,13 @@
 // List Grid
 @mixin vf-p-matrix {
   $matrix-img-width: map-get($icon-sizes, heading-icon--small);
-  $matrix-img-gutter: $sph-inner;
+  $matrix-img-gutter: $sph--large;
 
   .p-matrix {
     display: flex;
     flex-wrap: wrap;
     list-style: none;
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     margin-left: 0;
     padding-left: 0;
   }
@@ -18,34 +18,32 @@
     border-top: 1px solid $color-mid-light;
     display: flex;
     flex: 1 1 auto;
-    padding-bottom: $spv-inner--large;
-    padding-top: calc(#{$spv-inner--large} - 1px);
+    padding-bottom: $spv--large;
+    padding-top: calc(#{$spv--large} - 1px);
 
     &:first-child {
       border-top: none;
     }
 
-    @media (min-width: $breakpoint-small) {
+    @media (min-width: $threshold-4-6-col) {
       display: flex;
       flex-wrap: wrap;
       width: 33.333%;
     }
 
-    @media (min-width: $breakpoint-small) and (max-width: $breakpoint-medium) {
+    @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
+      flex-direction: column;
+
       &:nth-child(2),
       &:nth-child(3) {
         border-top: none;
       }
     }
 
-    @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
-      flex-direction: column;
-    }
-
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       border-right: 1px solid $color-mid-light;
-      padding-left: $spv-inner--large;
-      padding-right: $spv-inner--large;
+      padding-left: $spv--large;
+      padding-right: $spv--large;
       width: 33.333%;
 
       &:empty {
@@ -67,7 +65,7 @@
       }
     }
 
-    @media (min-width: $breakpoint-large) {
+    @media (min-width: $threshold-6-12-col) {
       // 3 items per row
       border-right: 1px solid $color-mid-light;
       width: 33.333%;
@@ -97,7 +95,7 @@
     align-self: flex-start;
     flex-shrink: 0;
     height: auto;
-    margin-bottom: $spv-inner--small;
+    margin-bottom: $spv--small;
     margin-right: $matrix-img-gutter;
     margin-top: 0;
     width: $matrix-img-width;
@@ -117,7 +115,7 @@
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
-    padding-right: $sph-inner;
+    padding-right: $sph--large;
 
     @media (min-width: $breakpoint-large) {
       width: calc(100% - #{$matrix-img-width + $matrix-img-gutter});
@@ -141,7 +139,7 @@
   .p-matrix__desc {
     margin-bottom: $spv-nudge-compensation;
 
-    @media (max-width: $breakpoint-heading-threshold) {
+    @media (max-width: $breakpoint-heading-threshold - 1) {
       margin-top: -#{$sp-unit};
     }
 

package/scss/_patterns_media-object.scss

@@ -4,14 +4,14 @@
   %p-media-object {
     display: flex;
     flex-shrink: 0;
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
   }
 
   %vf-meta-list-item {
     @extend %small-text;
 
     color: $color-dark;
-    padding-left: map-get($icon-sizes, default) + $sph-inner;
+    padding-left: map-get($icon-sizes, default) + $sph--large;
   }
 
   %vf-iconed-list-item {
@@ -31,7 +31,7 @@
     border-radius: $border-radius;
     flex-basis: inherit;
     flex-shrink: 0;
-    margin-right: $sph-inner;
+    margin-right: $sph--large;
     max-height: map-get($icon-sizes, thumb);
     max-width: map-get($icon-sizes, thumb);
     vertical-align: middle;
@@ -56,7 +56,7 @@
     list-style: none;
     margin: 0;
     padding-left: 0;
-    padding-top: $spv-inner--small;
+    padding-top: $spv--small;
   }
 
   .p-media-object__meta-list-item {

package/scss/_patterns_modal.scss

@@ -12,7 +12,7 @@
     justify-content: center;
     left: 0;
     margin: 0;
-    padding: $spv-inner--large;
+    padding: $spv--large;
     position: fixed;
     right: 0;
     top: 0;
@@ -25,18 +25,17 @@
     @extend %vf-has-box-shadow;
     @extend %vf-has-round-corners;
 
-    bottom: $spv-inner--large;
-    left: $sph-inner--large;
+    left: $sph--x-large;
     margin-bottom: 0;
-    max-height: calc(100% - #{2 * $spv-inner--large});
+    max-height: calc(100% - #{2 * $spv--large});
     max-width: $grid-max-width;
     overflow: auto;
+    padding-top: 0;
     position: absolute;
-    right: $sph-inner--large;
-    top: $spv-inner--large;
+    right: $sph--x-large;
     width: auto;
 
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       bottom: initial;
       left: initial;
       position: relative;
@@ -48,11 +47,16 @@
   .p-modal__header {
     @extend %vf-pseudo-border--bottom;
 
+    background: $color-x-light;
     display: flex;
     justify-content: space-between;
-    margin-bottom: $spv-inner--small;
+    margin-bottom: $spv--small;
     // add padding to accommodate the width of p-modal__close
-    padding-right: $icon-size + $sph-inner--small * 2;
+    padding-right: $icon-size + $sph--small * 2;
+    padding-top: $spv--large;
+    position: sticky;
+    top: 0;
+    z-index: 10;
   }
 
   .p-modal__title {
@@ -73,6 +77,7 @@
     box-sizing: content-box;
     height: $icon-size;
     margin: 0;
+    margin-top: $spv--large;
     padding: $sp-unit;
     position: absolute;
     right: 0;