vanilla-framework 2.36.0 → 3.0.0-beta.1

package/README.md

@@ -61,7 +61,7 @@ Then reference it from your own Sass files, with optional settings:
 $color-brand: #ffffff;
 
 // Import the theme
-@import 'vanilla-framework/scss/vanilla';
+@import 'vanilla-framework';
 @include vanilla;
 
 // Add theme if applicable

package/_index.scss

@@ -0,0 +1 @@
+@import './scss/vanilla';

package/package.json

@@ -28,7 +28,7 @@
   "scripts": {
     "start": "yarn build && yarn serve",
     "build": "yarn build-scss && yarn build-js",
-    "build-scss": "yarn run build-js && node-sass scss --functions sass-functions.js --output-style compressed --source-map true --source-map-contents true --output build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
+    "build-scss": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
     "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules",
     "serve": "./entrypoint 0.0.0.0:${PORT}",
     "test-scss": "node -e 'require(\"./tests/parker\").parkerTest()'",
@@ -36,38 +36,40 @@
     "test": "yarn lint-scss && yarn lint-prettier &&  yarn test-spelling && yarn test-scss",
     "lint-prettier": "prettier -c .",
     "lint-scss": "stylelint 'scss/**/*.scss'",
-    "watch:scss": "node-sass scss --functions sass-functions.js --output-style compressed --source-map true --source-map-contents true --output build/css --watch",
-    "watch:scss:skip-standalone": "node-sass  scss/docs --functions sass-functions.js --output-style compressed --output build/css/docs --watch",
+    "watch:scss": "sass --load-path=node_modules --embed-sources --style=compressed scss:build/css --watch",
+    "watch:scss:skip-standalone": "sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css --watch",
     "watch": "yarn build && yarn watch:scss",
     "clean": "rm -rf build docs/static/css node_modules/ yarn-error.log",
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "2.36.0",
+  "version": "3.0.0-beta.1",
   "files": [
+    "_index.scss",
     "/scss",
-    "!/scss/docs"
+    "!/scss/docs",
+    "!/scss/standalone"
   ],
   "dependencies": {
     "@canonical/cookie-policy": "3.3.0",
     "@canonical/latest-news": "1.2.0",
-    "autoprefixer": "10.3.4",
-    "node-sass": "6.0.1",
-    "postcss": "8.3.6",
-    "postcss-cli": "8.3.1"
+    "autoprefixer": "10.4.0",
+    "postcss": "8.3.11",
+    "postcss-cli": "8.3.1",
+    "sass": "1.37.5"
   },
   "devDependencies": {
     "@percy/script": "1.1.0",
     "get-site-urls": "1.1.7",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "prettier": "2.3.2",
+    "prettier": "2.4.1",
     "stylelint": "13.13.1",
     "stylelint-config-prettier": "8.0.2",
     "stylelint-config-standard": "22.0.0",
     "stylelint-order": "4.1.0",
     "stylelint-prettier": "1.2.0",
-    "stylelint-scss": "3.20.1",
-    "svgo": "2.5.0"
+    "stylelint-scss": "3.21.0",
+    "svgo": "2.7.0"
   }
 }

package/scss/_base_blockquotes.scss

@@ -5,11 +5,11 @@
   // stylelint-disable selector-max-type -- base styles can use type selectors
   blockquote {
     border-left: 2px solid $color-mid-dark;
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     margin-left: 0;
     margin-top: 0;
     overflow: auto; // include margins of children into it's own height
-    padding-bottom: $spv-inner--small;
+    padding-bottom: $spv--small;
     padding-left: $sp-large;
 
     & > :last-child {

package/scss/_base_button.scss

@@ -26,11 +26,10 @@
     font-weight: $font-weight-regular-text;
     justify-content: center;
     line-height: map-get($line-heights, default-text);
-    margin: 0 0 $input-margin-bottom 0;
-    padding: $input-vertical-padding $sph-inner;
+    margin: 0 $sph--large $input-margin-bottom 0;
+    padding: $input-vertical-padding $sph--large;
     text-align: center;
     text-decoration: none;
-    width: 100%;
 
     &:active,
     &:focus,
@@ -44,13 +43,8 @@
       opacity: $disabled-element-opacity;
     }
 
-    @media (min-width: $breakpoint-x-small) {
-      margin-right: $sph-outer;
-      width: auto;
-
-      &:last-child {
-        margin-right: 0;
-      }
+    &:last-child {
+      margin-right: 0;
     }
 
     &.is-dense {
@@ -63,7 +57,7 @@
       font-size: #{map-get($font-sizes, small)}rem;
       line-height: map-get($line-heights, small);
       margin-bottom: $input-margin-bottom - $sp-unit;
-      padding: calc(#{map-get($nudges, nudge--small)} - 1px) $sph-inner--small;
+      padding: calc(#{map-get($nudges, nudge--small)} - 1px) $sph--small;
     }
 
     &.is-small.is-dense {
@@ -81,12 +75,6 @@
     p + p > & {
       margin-top: $spv-nudge-compensation;
     }
-
-    @media (max-width: $breakpoint-x-small - 1) {
-      p & + & {
-        margin-top: $sp-unit + $spv-nudge-compensation;
-      }
-    }
     // stylelint-enable selector-max-type
   }
 
@@ -97,18 +85,16 @@
   }
 
   %vf-button-has-icon {
-    width: auto;
-
     & [class*='p-icon'] {
-      margin-left: $sph-inner--small;
-      margin-right: $sph-inner--small;
+      margin-left: $sph--small;
+      margin-right: $sph--small;
 
       &:first-child {
-        margin-left: -#{$sph-inner--small};
+        margin-left: -$sph--small;
       }
 
       &:last-child {
-        margin-right: -#{$sph-inner--small};
+        margin-right: -$sph--small;
       }
     }
   }
@@ -158,8 +144,4 @@
       border-color: $button-disabled-border-color;
     }
   }
-
-  .p-link--external {
-    color: currentColor;
-  }
 }

package/scss/_base_code.scss

@@ -2,7 +2,7 @@
 
 $color-pre-bg: rgba($color-x-dark, 0.03);
 $digit-width: 1ch; // measured width of one character in the monospaced font
-$code-sidebar-width: calc(#{$sph-inner} + (4 * #{$digit-width})) !default;
+$code-sidebar-width: calc(#{$sph--large} + (4 * #{$digit-width})) !default;
 $code-inline-padding: 0.25rem;
 
 // Base code styles
@@ -38,7 +38,6 @@ $code-inline-padding: 0.25rem;
     direction: ltr;
     // stylelint-disable property-no-vendor-prefix
     -webkit-hyphens: none;
-    -ms-hyphens: none;
     hyphens: none;
     -moz-tab-size: 4;
     -o-tab-size: 4;
@@ -64,10 +63,10 @@ $code-inline-padding: 0.25rem;
     background-color: $color-code-background;
     color: $color-dark;
     display: block;
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     margin-top: 0;
     overflow: auto;
-    padding: $spv-inner--x-small--scaleable $sph-inner;
+    padding: $spv--small $sph--large;
     text-align: left;
     text-shadow: none;
     white-space: pre;
@@ -86,15 +85,15 @@ $code-inline-padding: 0.25rem;
       @include vf-icon-linux-prompt($color-mid-dark);
 
       content: '';
-      left: $sph-inner;
+      left: $sph--large;
       position: absolute;
-      top: #{$spv-inner--x-small--scaleable + 0.5 * (map-get($line-heights, default-text) - map-get($icon-sizes, default))};
+      top: #{$spv--small + 0.5 * (map-get($line-heights, default-text) - map-get($icon-sizes, default))};
       width: map-get($icon-sizes, default);
 
       @if ($increase-font-size-on-larger-screens) {
         // stylelint-disable-next-line max-nesting-depth
         @media (min-width: $breakpoint-x-large) {
-          top: #{$spv-inner--x-small--scaleable + 0.5 * (map-get($line-heights, default-text) * $font-size-ratio--largescreen - map-get($icon-sizes, default))};
+          top: #{$spv--small + 0.5 * (map-get($line-heights, default-text) * $font-size-ratio--largescreen - map-get($icon-sizes, default))};
         }
       }
     }
@@ -102,7 +101,7 @@ $code-inline-padding: 0.25rem;
 
   %code-numbered-line {
     display: inline-block;
-    padding: 0 $sph-inner 0 $code-sidebar-width;
+    padding: 0 $sph--large 0 $code-sidebar-width;
     position: relative;
     width: 100%;
 
@@ -118,7 +117,7 @@ $code-inline-padding: 0.25rem;
       height: 100%;
       left: -$digit-width;
       overflow: hidden;
-      padding-right: $sph-inner;
+      padding-right: $sph--large;
       pointer-events: none;
       position: absolute;
       text-align: right;

package/scss/_base_details.scss

@@ -1,16 +1,16 @@
 @mixin vf-b-details {
   // stylelint-disable selector-max-type -- base styles can use type selectors
   details {
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     overflow: auto;
   }
 
   summary {
     @extend %common-default-text-properties;
     @include vf-focus;
-    @include p-max-width;
 
     margin-bottom: $spv-nudge; //push subsequent text onto baseline
+    max-width: $max-width--default;
     padding-bottom: 2 * $sp-unit - map-get($nudges, nudge--p); // use padding instead of margin-bottom in order to make the focus state symmetric
   }
   // stylelint-enable selector-max-type

package/scss/_base_forms-range.scss

@@ -37,7 +37,7 @@
       border-radius: $thumb-radius;
       box-shadow: $thumb-shadow;
       height: $thumb-size;
-      margin-top: ((-$thumb-size + $track-height) / 2) - $track-border-size;
+      margin-top: ((-$thumb-size + $track-height) * 0.5) - $track-border-size;
       width: $thumb-size;
 
       &:hover {
@@ -76,46 +76,6 @@
       border: 0;
     }
 
-    // IE
-    &::-ms-track {
-      background: transparent;
-      border-color: transparent;
-      border-width: $thumb-size / 2;
-      color: transparent;
-      height: $track-height + 1;
-      width: calc(100% - (#{$thumb-size} / 2));
-    }
-
-    &::-ms-fill-lower {
-      background: $color-information;
-      border: $track-border;
-      border-radius: $track-radius;
-    }
-
-    &::-ms-fill-upper {
-      background: $color-x-light;
-      border: $track-border;
-      border-radius: $track-radius;
-    }
-
-    &::-ms-thumb {
-      background: $color-x-light;
-      border: 0;
-      border-radius: $thumb-radius;
-      box-shadow: $thumb-shadow;
-      height: $thumb-size;
-      margin: 0 $bar-thickness;
-      width: $thumb-size;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    &::-ms-tooltip {
-      display: none;
-    }
-
     &:focus {
       outline: none;
 
@@ -126,10 +86,6 @@
       &::-moz-range-thumb {
         outline: $bar-thickness solid $color-focus;
       }
-
-      &::-ms-thumb {
-        outline: $bar-thickness solid $color-focus;
-      }
     }
 
     &:disabled {

package/scss/_base_forms.scss

@@ -1,10 +1,8 @@
 @import 'settings';
-@import 'base_forms-tick-elements';
 @import 'base_forms-range';
 
 // Form element styles
 @mixin vf-b-forms {
-  @include vf-b-tick-elements;
   @include vf-b-range;
 
   // Used in buttons, inputs
@@ -35,23 +33,15 @@
     line-height: map-get($line-heights, default-text);
     margin-bottom: $input-margin-bottom;
     min-width: 10em;
-    padding-left: $sph-inner--small;
-    padding-right: $sph-inner--small;
+    padding-left: $sph--small;
+    padding-right: $sph--small;
     vertical-align: baseline;
     width: 100%;
 
     &.is-dense {
       margin: 0 0 $spv-nudge-compensation 0;
-      padding-bottom: calc(#{$spv-nudge - $spv-inner--x-small} - 1px);
-      padding-top: calc(#{$spv-nudge - $spv-inner--x-small} - 1px);
-    }
-
-    &::-webkit-placeholder,
-    &::-ms-placeholder,
-    &:-ms-placeholder,
-    &::placeholder {
-      color: $color-mid-dark;
-      opacity: 1;
+      padding-bottom: calc(#{$spv-nudge - $spv--x-small} - 1px);
+      padding-top: calc(#{$spv-nudge - $spv--x-small} - 1px);
     }
 
     &[disabled],
@@ -91,12 +81,11 @@
 
   // stylelint-disable selector-max-type -- base styles can use type selectors
   label {
-    @include p-max-width;
-
     cursor: pointer;
-    display: block;
-    margin-bottom: $spv-outer--small-scaleable - $spv-nudge;
+    display: inline-block;
+    margin-bottom: $spv--large - $spv-nudge;
     margin-top: 0;
+    max-width: $max-width--default;
     padding-top: map-get($nudges, nudge--p);
     width: fit-content;
 
@@ -162,6 +151,12 @@
     }
   }
 
+  input[list] {
+    &::-webkit-calendar-picker-indicator {
+      opacity: 0;
+    }
+  }
+
   // Select styles
   select {
     @include vf-icon-chevron;
@@ -172,13 +167,13 @@
     appearance: none;
     // stylelint-enable property-no-vendor-prefix
     background-color: $color-x-light;
-    background-position: right $sph-inner--small center;
+    background-position: right $sph--small center;
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
     box-shadow: none;
     color: $color-dark;
     min-height: map-get($line-heights, default-text);
-    padding-right: calc(#{$default-icon-size} + #{2 * $sph-inner--small});
+    padding-right: calc(#{$default-icon-size} + #{2 * $sph--small});
     text-indent: 0.01px;
     text-overflow: '';
 
@@ -195,7 +190,7 @@
       option {
         font-weight: $font-weight-regular-text;
         line-height: calc(#{$sp-unit * 2} - 2px);
-        padding: $spv-inner--x-small 0;
+        padding: $spv--x-small 0;
       }
     }
   }
@@ -217,7 +212,7 @@
 
     margin-left: 0;
     margin-right: 0;
-    padding: calc(#{$spv-inner--large} - 1px);
+    padding: calc(#{$spv--large} - 1px);
   }
   // stylelint-enable selector-max-type
 }

package/scss/_base_grid-definitions.scss

@@ -12,13 +12,13 @@
   }
 
   %span-full-grid-on-mobile {
-    @media (max-width: $threshold-4-6-col) {
+    @media (max-width: $threshold-4-6-col - 1) {
       grid-column: auto / span $grid-columns-small;
     }
   }
 
   %span-full-grid-on-tablet {
-    @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
+    @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
       grid-column: auto / span $grid-columns-medium;
     }
   }
@@ -46,12 +46,6 @@
   %vf-row {
     @extend %fixed-width-container;
 
-    // default to flexbox for IE on large screens
-    // on small screens we let columns render one under another
-    @media (min-width: $threshold-6-12-col) {
-      display: flex;
-    }
-
     & & {
       @include vf-b-row-reset;
     }
@@ -110,18 +104,3 @@
     }
   }
 }
-
-// flexbox approximation of grid column styles for IE
-// this needs to be a @mixin rather than %placeholder because it's used inside @media queries
-@mixin vf-grid-flex-column($size: 1) {
-  flex-basis: 0;
-  flex-grow: $size;
-  flex-shrink: 1;
-
-  // set static gutter width
-  margin-left: map-get($grid-gutter-widths, large);
-
-  &:first-child {
-    margin-left: 0;
-  }
-}

package/scss/_base_hr.scss

@@ -6,7 +6,7 @@
   hr {
     @extend %hr;
 
-    margin-bottom: calc(#{$spv-outer--small} - 1px);
+    margin-bottom: calc(#{$spv--small} - 1px);
 
     &.u-no-margin--bottom {
       // compensate for hr thickness, to make sure it doesn't drift from baseline grid

package/scss/_base_icon-definitions.scss

@@ -22,12 +22,6 @@
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 1a3 3 0 013 3v8a3 3 0 01-3 3H4a3 3 0 01-3-3V4a3 3 0 013-3h8zm0 1.5H4a1.5 1.5 0 00-1.493 1.356L2.5 4v8a1.5 1.5 0 001.356 1.493L4 13.5h8a1.5 1.5 0 001.493-1.356L13.5 12V4a1.5 1.5 0 00-1.356-1.493L12 2.5zM8.027 5.282l3.76 3.76-1.06 1.061-2.701-2.7-2.699 2.7-1.06-1.06 3.76-3.76z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
 }
 
-@mixin vf-icon-contextual-menu($color) {
-  @include deprecate('3.0.0', 'Use the `vf-icon-chevron` mixin instead') {
-    @include vf-icon-chevron($color);
-  }
-}
-
 @mixin vf-icon-close($color) {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero' d='M13.041 1.898l1.06 1.06L9.062 8l5.04 5.042-1.06 1.06L8 9.062 2.96 14.1l-1.06-1.06L6.938 8 1.9 2.96l1.06-1.06 5.04 5.04z'/%3E%3C/svg%3E");
 }
@@ -88,12 +82,6 @@
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1a4 4 0 014 4v.5a3.987 3.987 0 01-1.139 2.795 6 6 0 014.135 5.48L15 14H1a6.003 6.003 0 014.14-5.706A3.98 3.98 0 014 5.5V5a4 4 0 014-4zm1 8.5H7a4.502 4.502 0 00-4.203 2.888l-.04.112h10.486l-.03-.084a4.504 4.504 0 00-4-2.911L9 9.5zm-1-7a2.5 2.5 0 00-2.495 2.336L5.5 5v.5a2.5 2.5 0 004.995.164L10.5 5.5V5A2.5 2.5 0 008 2.5z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
 }
 
-@mixin vf-icon-question($color) {
-  @include deprecate('3.0.0', 'Use the `vf-icon-help` mixin instead') {
-    @include vf-icon-help($color);
-  }
-}
-
 @mixin vf-icon-spinner($color) {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 13.5a5.488 5.488 0 004.183-1.929l1.317.76A6.988 6.988 0 018 15a6.988 6.988 0 01-5.5-2.669l1.316-.76A5.488 5.488 0 008 13.5zM6.999 1.071v1.52A5.502 5.502 0 002.815 9.84L1.5 10.6A7.002 7.002 0 016.764 1.11l.235-.038zM15 8c0 .918-.177 1.795-.498 2.6l-1.317-.761A5.502 5.502 0 009 2.59V1.07c3.392.485 6 3.403 6 6.929z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
 }
@@ -122,18 +110,6 @@
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40' height='40'%3E%3Cdefs%3E%3Cpath id='a' d='M.014.009H40v28.173H.014z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(0 6)'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%23DA322A' d='M39.164 4.4A5.026 5.026 0 0035.628.842C32.508 0 20 0 20 0S7.492 0 4.372.841a5.026 5.026 0 00-3.536 3.56C0 7.54 0 14.09 0 14.09s0 6.55.836 9.69a5.026 5.026 0 003.536 3.56c3.12.84 15.628.84 15.628.84s12.508 0 15.628-.84a5.026 5.026 0 003.536-3.56c.836-3.14.836-9.69.836-9.69s0-6.55-.836-9.69' mask='url(%23b)'/%3E%3Cpath fill='%23FFFFFE' d='M15.909 20.038V8.143l10.455 5.948-10.455 5.947'/%3E%3C/g%3E%3C/svg%3E");
 }
 
-@mixin vf-icon-canonical {
-  @include deprecate('3.0.0', 'Removing icon from framework please use an alternative icon from our social set') {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath fill='%23772953' d='M20 32.735c-7.033 0-12.735-5.7-12.735-12.735 0-7.034 5.702-12.735 12.735-12.735 7.034 0 12.736 5.701 12.736 12.735 0 7.035-5.701 12.735-12.735 12.735zM40 20c0 11.046-8.954 20-20 20S0 31.045 0 20C0 8.954 8.954 0 20 0s20 8.954 20 20zM20 4.865C11.64 4.865 4.865 11.641 4.865 20c0 8.36 6.776 15.135 15.135 15.135 8.36 0 15.135-6.775 15.135-15.135 0-8.358-6.775-15.135-15.135-15.135z'/%3E%3C/svg%3E");
-  }
-}
-
-@mixin vf-icon-ubuntu {
-  @include deprecate('3.0.0', 'Removing icon from framework please use an alternative icon from our social set') {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none'%3E%3Cpath fill='%23E95420' d='M40 20.04c0 11.012-8.95 19.95-20 19.95S0 31.052 0 20.04C0 9.017 8.95.09 20 .09s20 8.927 20 19.95z'/%3E%3Cpath fill='%23FFF' d='M6.4 17.377a2.666 2.666 0 00-2.67 2.663c0 1.466 1.2 2.663 2.67 2.663s2.67-1.197 2.67-2.663c0-1.476-1.2-2.663-2.67-2.663zm19.07 12.1a2.667 2.667 0 102.67 4.618 2.667 2.667 0 00.98-3.641c-.75-1.267-2.38-1.706-3.65-.978zM12.2 20.04a7.749 7.749 0 013.32-6.364l-1.95-3.262a11.622 11.622 0 00-4.8 6.723 3.751 3.751 0 011.38 2.903c0 1.167-.54 2.214-1.38 2.903a11.578 11.578 0 004.8 6.723l1.95-3.262a7.749 7.749 0 01-3.32-6.364zm7.8-7.78c4.08 0 7.42 3.112 7.77 7.092l3.81-.06a11.503 11.503 0 00-3.45-7.501c-1.02.379-2.19.319-3.2-.26a3.737 3.737 0 01-1.83-2.643 11.8 11.8 0 00-3.1-.42c-1.85 0-3.59.43-5.14 1.198l1.86 3.312a7.81 7.81 0 013.28-.719zm0 15.56a7.89 7.89 0 01-3.29-.718l-1.86 3.312c1.55.768 3.3 1.197 5.14 1.197 1.07 0 2.11-.15 3.1-.419a3.728 3.728 0 011.83-2.643 3.742 3.742 0 013.2-.26 11.551 11.551 0 003.45-7.501l-3.81-.06c-.34 3.97-3.68 7.092-7.76 7.092zm5.46-17.226c1.28.738 2.91.299 3.65-.978.74-1.277.3-2.903-.98-3.64a2.673 2.673 0 00-3.65.977 2.676 2.676 0 00.98 3.64z'/%3E%3C/g%3E%3C/svg%3E");
-  }
-}
-
 @mixin vf-icon-rss {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none'%3E%3Crect width='40' height='40' fill='%23EA7819' rx='5' transform='rotate(180 20 20)'/%3E%3Cpath fill='%23FFF' d='M6.34 6.274c15.07 0 27.332 12.314 27.332 27.452H28.41c0-12.236-9.9-22.19-22.07-22.19zM6.334 15.6c9.95 0 18.044 8.128 18.044 18.119h-5.261c0-3.44-1.33-6.671-3.747-9.097a12.657 12.657 0 00-9.036-3.76zm3.639 10.805a3.645 3.645 0 110 7.29 3.645 3.645 0 010-7.29z'/%3E%3C/g%3E%3C/svg%3E");
 }

package/scss/_base_lists.scss

@@ -4,10 +4,10 @@
   // stylelint-disable selector-max-type -- base styles can use type selectors
   ol,
   ul {
-    margin-bottom: $spv-outer--scaleable;
-    margin-left: $sph-outer;
+    margin-bottom: $spv--x-large;
+    margin-left: $sph--large;
     margin-top: 0;
-    padding-left: $sph-outer;
+    padding-left: $sph--large;
 
     nav & {
       list-style: none;
@@ -32,7 +32,7 @@
   }
 
   dl {
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     margin-top: 0;
     padding: 0;
   }
@@ -40,7 +40,7 @@
   dd {
     @extend %default-text;
 
-    margin-left: $sph-inner;
+    margin-left: $sph--large;
   }
 
   dt {

package/scss/_base_media.scss

@@ -10,13 +10,8 @@
     max-width: 100%;
   }
 
-  // Corrects overflow displayed oddly in IE9
-  svg:not(:root) {
-    overflow: hidden;
-  }
-
   figure {
-    margin-bottom: $spv-outer--scaleable;
+    margin-bottom: $spv--x-large;
     margin-left: 0;
     width: 100%;
 

package/scss/_base_placeholders.scss

@@ -35,18 +35,16 @@
 
   %vf-card-padding {
     overflow: auto;
-    padding: $spv-inner--large;
+    padding: $spv--large;
   }
 
   %vf-card {
     @extend %vf-bg--x-light;
     @extend %vf-card-padding;
 
-    margin-bottom: $spv-outer--scaleable;
-  }
-
-  %vf-card-inner {
-    @extend %vf-card-padding;
+    margin-bottom: $spv--x-large;
+    overflow: auto; // prevent overflow of child margins
+    padding: $spv--large;
   }
 
   //accordion, table
@@ -102,38 +100,37 @@
 
   // Spacing
   %section-padding--shallow {
-    padding-bottom: $spv-outer--shallow-scaleable * 0.5;
-    padding-top: $spv-outer--shallow-scaleable * 0.5;
+    padding-bottom: $spv--x-large * 0.5;
+    padding-top: $spv--x-large * 0.5;
 
     @media (min-width: $breakpoint-large) {
-      padding-bottom: $spv-outer--shallow-scaleable;
-      padding-top: $spv-outer--shallow-scaleable;
+      padding-bottom: $spv--x-large;
+      padding-top: $spv--x-large;
     }
   }
 
   %section-padding--default {
-    padding-bottom: $spv-outer--regular-scaleable * 0.5;
-    padding-top: $spv-outer--regular-scaleable * 0.5;
+    padding-bottom: $spv--strip-regular * 0.5;
+    padding-top: $spv--strip-regular * 0.5;
 
     @media (min-width: $breakpoint-large) {
-      padding-bottom: $spv-outer--regular-scaleable;
-      padding-top: $spv-outer--regular-scaleable;
+      padding-bottom: $spv--strip-regular;
+      padding-top: $spv--strip-regular;
     }
   }
 
   %section-padding--deep {
-    padding: $spv-outer--deep-scaleable * 0.5 0 $spv-outer--deep-scaleable * 0.5;
+    padding: $spv--strip-deep * 0.5 0 $spv--strip-deep * 0.5;
 
     @media (min-width: $breakpoint-large) {
-      padding: $spv-outer--deep-scaleable 0;
+      padding: $spv--strip-deep 0;
     }
   }
 
   // Utilities
   %vf-hide-text {
     overflow: hidden;
-    // vw value necessary because text indent in % does not work with padding,
-    // and IE 11 does not support calc() on text-indent;
+    // vw value necessary because text indent in % does not work with padding;
     // 110vw ensures the text is off the screen, and in most cases will
     // still be smaller than 9999px, so should have better performance
     text-indent: 110vw;