vanilla-framework 2.37.0 → 3.0.0-beta.2

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;
         }
       }

package/scss/_patterns_accordion.scss

@@ -5,7 +5,7 @@
 
   .p-accordion__list {
     list-style-type: none;
-    margin: 0 0 $spv-outer--scaleable 0;
+    margin: 0 0 $spv--x-large 0;
     padding: 0;
   }
 
@@ -15,35 +15,31 @@
     }
   }
 
-  .p-accordion__tab,
-  .p-accordion__tab--with-title {
+  .p-accordion__tab {
+    // calculate icon top position based on top padding (from %single-border-text-vpadding--scaling)
+    // and offset to align it with baseline of accordion tab text element
+    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, default-text) - $icon-size) * 0.5});
+
     @extend %single-border-text-vpadding--scaling;
     @include vf-focus;
 
-    background-color: inherit;
+    background: {
+      color: inherit;
+      position: top $icon-top-position left $sph--large;
+      repeat: no-repeat;
+    }
+
     border: 0;
     border-radius: 0;
+    font-size: inherit;
     justify-content: flex-start;
     margin-bottom: 0;
-    padding-left: $sph-inner + $icon-size + $sph-inner;
-    padding-right: $sph-inner;
+    padding-left: $sph--large + $icon-size + $sph--large;
+    padding-right: $sph--large;
     text-align: left;
     transition-duration: 0s;
     width: 100%;
     z-index: 2;
-  }
-
-  .p-accordion__tab {
-    // calculate icon top position based on top padding (from %single-border-text-vpadding--scaling)
-    // and offset to align it with baseline of accordion tab text element
-    $icon-top-position: calc(#{$table-cell-vertical-padding + (map-get($line-heights, default-text) - $icon-size) * 0.5});
-
-    background: {
-      position: top $icon-top-position left $sph-inner;
-      repeat: no-repeat;
-    }
-
-    font-size: inherit;
 
     // aria-selected controls the open and closed state for the accordion tab
     &[aria-expanded='true'] {
@@ -65,57 +61,6 @@
     }
   }
 
-  @include deprecate('3.0.0', '.p-accordion__title and .p-accordion__tab--with-title are being deprecated, please use .p-accordion__heading > .p-accordion__tab pattern instead') {
-    .p-accordion__title {
-      margin-bottom: 0;
-      padding-top: 0;
-      position: relative;
-      text-indent: -$sph-inner - $icon-size;
-
-      &::before {
-        background-size: $icon-size;
-        content: '';
-        display: inline-block;
-        height: $icon-size;
-        margin-right: $sph-inner;
-        width: $icon-size;
-      }
-    }
-
-    // FIXME: we shouldn't be targeting types directly here
-    // stylelint-disable selector-max-type
-    h2.p-accordion__title::before {
-      // make icon bigger for h2 (same as p-icon)
-      $icon-size-h2: $x-height;
-
-      background-size: $icon-size-h2;
-      height: $icon-size-h2;
-      width: $icon-size-h2;
-    }
-
-    h5.p-accordion__title::before,
-    h6.p-accordion__title::before {
-      // align icon within font metrics same as p-icon pattern
-      $vertical-offset: 0.5px;
-
-      vertical-align: calc(#{$vertical-offset} + #{0.5 * $cap-height} - #{0.5 * $icon-size});
-    }
-    // stylelint-enable selector-max-type
-
-    // override base expanded button styles
-    .p-accordion__tab--with-title[aria-expanded] {
-      background-color: inherit;
-    }
-
-    .p-accordion__tab--with-title[aria-expanded='true'] .p-accordion__title::before {
-      @include vf-icon-minus($color-mid-dark);
-    }
-
-    .p-accordion__tab--with-title[aria-expanded='false'] .p-accordion__title::before {
-      @include vf-icon-plus($color-mid-dark);
-    }
-  }
-
   .p-accordion__heading {
     margin-bottom: 0;
     max-width: none;
@@ -154,7 +99,7 @@
   .p-accordion__panel {
     margin: 0;
     overflow: auto; // include child margins into its height
-    padding-left: $sph-inner + $icon-size + $sph-inner * 2;
+    padding-left: $sph--large + $icon-size + $sph--large * 2;
 
     // Hides panel content
     &[aria-hidden='true'] {

package/scss/_patterns_article-pagination.scss

@@ -49,17 +49,14 @@
     width: 50%;
   }
 
-  .p-article-pagination__link {
-    @extend %p-article-pagination__link;
-  }
-
   .p-article-pagination__link--previous {
     @extend %p-article-pagination__link;
 
     padding-left: $sp-xx-large;
     text-align: left;
 
-    @media (max-width: $breakpoint-x-small) {
+    @media (max-width: $breakpoint-x-small - 1) {
+      margin-right: 0;
       width: auto;
 
       &:only-child {
@@ -87,7 +84,7 @@
     padding-right: $sp-xx-large;
     text-align: right;
 
-    @media (max-width: $breakpoint-x-small) {
+    @media (max-width: $breakpoint-x-small - 1) {
       width: 100%;
     }
 

package/scss/_patterns_breadcrumbs.scss

@@ -21,7 +21,7 @@
     margin-bottom: $spv-nudge-compensation;
 
     &:not(:first-of-type) {
-      text-indent: $sph-outer;
+      text-indent: $sph--large;
     }
 
     &:not(:first-of-type)::before {

package/scss/_patterns_buttons.scss

@@ -5,7 +5,6 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
 // Default button styling
 @mixin vf-p-buttons {
   @include vf-button-plain;
-  @include vf-button-neutral;
   @include vf-button-brand;
   @include vf-button-positive;
   @include vf-button-negative;
@@ -13,16 +12,9 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
   @include vf-button-link;
   @include vf-button-inline;
   @include vf-button-processing;
-  @include vf-button-active;
   @include vf-button-icon;
 }
 
-@mixin vf-button-white-success-icon {
-  @include deprecate('3.0.0', 'vf-button-white-success-icon mixin will be removed as it is not needed, %vf-button-white-success-icon is part of base styles') {
-    //
-  }
-}
-
 @mixin vf-button-plain {
   %p-button-light {
     @include vf-button-pattern();
@@ -62,21 +54,6 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
   }
 }
 
-// p-button--neutral is is exactly the same as p-button, so we are deprecating it
-@mixin vf-button-neutral {
-  @include deprecate('3.0.0', 'Use the `p-button` instead') {
-    %p-button--neutral {
-      @extend %vf-button-base;
-
-      @include vf-button-pattern;
-    }
-
-    .p-button--neutral {
-      @extend %p-button--neutral;
-    }
-  }
-}
-
 @mixin vf-button-brand {
   %p-button--brand-light {
     @include vf-button-pattern(
@@ -313,10 +290,7 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
 
 @mixin vf-button-inline {
   [class*='p-button'].is-inline {
-    @media (min-width: $breakpoint-x-small) {
-      margin-left: $sph-outer;
-      width: auto;
-    }
+    margin-left: $sph--large;
   }
 }
 
@@ -326,14 +300,6 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
   }
 }
 
-@mixin vf-button-active {
-  @include deprecate('3.0.0', 'Use the `vf-button-processing instead') {
-    [class*='p-button'].is-active {
-      opacity: 1 !important;
-    }
-  }
-}
-
 @mixin vf-button-icon {
   [class*='p-button'].has-icon {
     @extend %vf-button-has-icon;

package/scss/_patterns_card.scss

@@ -14,7 +14,7 @@
     @extend %vf-is-bordered;
     @extend %vf-has-round-corners;
 
-    padding: calc(#{$spv-inner--large} - 1px);
+    padding: calc(#{$spv--large} - 1px);
   }
 }
 
@@ -34,9 +34,9 @@
   .p-card--overlay {
     background: transparentize($color-x-light, 0.1);
     color: $color-dark;
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     overflow: auto;
-    padding: $spv-inner--large;
+    padding: $spv--large;
   }
 }
 
@@ -46,9 +46,9 @@
     @extend %vf-has-box-shadow;
     @extend %vf-has-round-corners;
 
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     overflow: auto;
-    padding: $spv-inner--large;
+    padding: $spv--large;
   }
 }
 
@@ -58,13 +58,13 @@
 
   .p-card__image {
     display: block;
-    margin-bottom: $spv-inner--small;
+    margin-bottom: $spv--small;
     width: 100%;
   }
 
   .p-card__header {
     border-bottom: 1px solid $color-mid-light;
-    padding-bottom: $spv-inner--large;
+    padding-bottom: $spv--large;
 
     > .p-link--soft {
       display: inline-block;
@@ -73,7 +73,7 @@
   }
 
   .p-card__inner {
-    @extend %vf-card-inner;
+    @extend %vf-card-padding;
   }
 
   .p-card__content {