vanilla-framework 3.0.0 → 3.1.1

package/package.json

@@ -44,7 +44,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.0.0",
+  "version": "3.1.1",
   "files": [
     "_index.scss",
     "/scss",
@@ -52,12 +52,12 @@
     "!/scss/standalone"
   ],
   "dependencies": {
-    "@canonical/cookie-policy": "3.3.0",
+    "@canonical/cookie-policy": "3.4.0",
     "@canonical/latest-news": "1.3.0",
-    "autoprefixer": "10.4.1",
-    "postcss": "8.4.5",
+    "autoprefixer": "10.4.2",
+    "postcss": "8.4.6",
     "postcss-cli": "9.1.0",
-    "sass": "1.45.2"
+    "sass": "1.49.7"
   },
   "devDependencies": {
     "@percy/script": "1.1.0",
@@ -65,7 +65,7 @@
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
     "prettier": "2.5.1",
-    "stylelint": "14.2.0",
+    "stylelint": "14.3.0",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",

package/scss/_base_forms-range.scss

@@ -1,10 +1,9 @@
 @mixin vf-b-range {
   $thumb-shadow: 0 0 $bar-thickness 1px rgba(0, 0, 0, 0.2);
-  $thumb-size: 24px;
-  $thumb-radius: $bar-thickness;
-  $track-height: 5px;
-  $track-border-size: 1px;
-  $track-border: $track-border-size solid $colors--light-theme--border-high-contrast;
+  $thumb-size: 1rem;
+  $thumb-radius: 50%;
+  $thumb-border: 1px solid $color-mid-dark;
+  $track-height: $bar-thickness;
   $track-radius: $bar-thickness;
 
   // stylelint-disable selector-max-type -- base styles can use type selectors
@@ -14,16 +13,15 @@
     -moz-appearance: none;
     appearance: none;
     // stylelint-enable property-no-vendor-prefix
-    border-radius: $track-radius + 1;
+    border-radius: $track-radius;
     margin: $sp-small 0;
     padding: 0;
     width: 100%;
 
     // Chrome
     &::-webkit-slider-runnable-track {
-      border: $track-border;
-      border-radius: $track-radius + 1;
-      height: $track-height + 1;
+      border-radius: $track-radius;
+      height: $track-height;
     }
 
     &::-webkit-slider-thumb {
@@ -33,11 +31,11 @@
       appearance: none;
       // stylelint-enable property-no-vendor-prefix
       background: $color-x-light;
-      border: 0;
+      border: $thumb-border;
       border-radius: $thumb-radius;
       box-shadow: $thumb-shadow;
       height: $thumb-size;
-      margin-top: ((-$thumb-size + $track-height) * 0.5) - $track-border-size;
+      margin-top: (-$thumb-size + $track-height) * 0.5;
       width: $thumb-size;
 
       &:hover {
@@ -47,21 +45,20 @@
 
     // Firefox
     &::-moz-range-track {
-      background: $color-x-light;
-      border: $track-border;
+      background: $color-mid-light;
       border-radius: $track-radius;
-      height: $track-height - 1;
+      height: $track-height;
     }
 
     &::-moz-range-progress {
-      background-color: $color-information;
+      background-color: $color-link;
       border-radius: $track-radius;
-      height: $track-height - 1;
+      height: $track-height;
     }
 
     &::-moz-range-thumb {
       background: $color-x-light;
-      border: 0;
+      border: $thumb-border;
       border-radius: $thumb-radius;
       box-shadow: $thumb-shadow;
       height: $thumb-size;

package/scss/_patterns_lists.scss

@@ -29,6 +29,18 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
     }
   }
 
+  %nested-counter {
+    // Counter is named and it will be reset for each "ol" element.
+    counter-reset: list-item;
+    li::marker {
+      // "counters" function returns a string representing the current value of the named counter ("list-item").
+      // It is used to insert a string between different levels of nested counters.
+      // Source: https://www.w3schools.com/css/css_counters.asp
+      content: counters(list-item, '.') '. ';
+      counter-increment: list-item;
+    }
+  }
+
   // Mixin for list items
   %vf-list-item {
     padding-bottom: $spv--x-small;
@@ -395,6 +407,12 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
   }
 }
 
+@mixin vf-p-list-nested-counter {
+  .p-list--nested-counter {
+    @extend %nested-counter;
+  }
+}
+
 @mixin vf-p-lists {
   @include vf-p-list-placeholders;
 
@@ -407,4 +425,5 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
   @include vf-p-stepped-list;
   @include vf-p-stepped-list-detailed;
   @include vf-p-list-split;
+  @include vf-p-list-nested-counter;
 }

package/scss/_patterns_notifications.scss

@@ -101,6 +101,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
       background-repeat: no-repeat;
       background-size: unset;
       border: 0;
+      // set the height of the button to be size of an icon + padding on top and bottom
+      height: calc(2 * $spv--small + $default-icon-size);
       position: absolute;
       right: $sph--large * 0.5;
       top: $spv--small;

package/scss/_patterns_pagination.scss

@@ -5,7 +5,8 @@
     @extend %vf-button-base;
     @include vf-button-pattern;
 
-    &.is-active {
+    &.is-active,
+    &[aria-current='page'] {
       background-color: scale-color($color-x-light, $lightness: -$active-background-opacity-amount * 100%);
       color: $color-dark;
       text-decoration: none;

package/scss/_patterns_pull-quotes.scss

@@ -29,6 +29,7 @@
     .p-pull-quote__citation {
       @extend %vf-heading-6;
 
+      display: block;
       margin-top: $spv--small;
     }
   }

package/scss/_patterns_search-and-filter.scss

@@ -153,9 +153,11 @@
       border: 0;
     }
 
-    // hide chips lead when there are in panel
-    // FIXME: this should be handled in HTML/React, not CSS
     .p-chip {
+      margin-bottom: $spv--small;
+
+      // hide chips lead when there are in panel
+      // FIXME: this should be handled in HTML/React, not CSS
       .p-chip__lead {
         display: none;
       }
@@ -177,7 +179,7 @@
       position: relative;
 
       &[aria-expanded='false'] {
-        max-height: 4rem;
+        max-height: 5rem; // 2 rows of chips
       }
     }
 

package/scss/_patterns_side-navigation.scss

@@ -288,6 +288,8 @@
     li > strong,
     li > a {
       @extend %side-navigation__text;
+
+      display: block;
     }
 
     li li > span,
@@ -429,11 +431,11 @@
     border-color: $color-sidenav-list-border;
   }
 
-  %theme-side-navigation__list {
+  .p-side-navigation__list::after {
     background: $color-sidenav-list-border;
   }
 
-  %theme-side-navigation__link {
+  .p-side-navigation__link {
     &,
     &:visited {
       color: $color-sidenav-text-default;
@@ -460,14 +462,6 @@
     }
   }
 
-  .p-side-navigation__list::after {
-    @extend %theme-side-navigation__list;
-  }
-
-  .p-side-navigation__link {
-    @extend %theme-side-navigation__link;
-  }
-
   .p-side-navigation__item--title,
   .p-side-navigation__item--title .p-side-navigation__link {
     color: $color-sidenav-text-active;

package/scss/_patterns_switch.scss

@@ -1,8 +1,9 @@
 @import 'settings';
-$knob-size: $sp-unit * 3;
+$knob-size: $sp-unit * 2;
 
 @mixin vf-p-switch {
   .p-switch {
+    align-items: center;
     display: flex;
   }
 
@@ -12,6 +13,7 @@ $knob-size: $sp-unit * 3;
     position: absolute;
 
     &:checked + .p-switch__slider::before {
+      border: 1px solid $color-link;
       left: 50%;
     }
 
@@ -19,6 +21,10 @@ $knob-size: $sp-unit * 3;
       @extend %vf-disabled-element;
     }
 
+    &:checked + .p-switch__slider {
+      background: $color-link;
+    }
+
     &:focus {
       outline: none;
 
@@ -29,9 +35,8 @@ $knob-size: $sp-unit * 3;
   }
 
   .p-switch__slider {
-    @extend %vf-has-round-corners;
-
-    background: linear-gradient(to right, $color-link 50%, $color-mid-light 50%);
+    background: $color-mid-light;
+    border-radius: $knob-size;
     box-shadow: inset 0 2px 5px 0 transparentize($color-dark, 0.8);
     display: inline-block;
     height: $knob-size;
@@ -45,6 +50,8 @@ $knob-size: $sp-unit * 3;
       @include vf-animation($duration: slow);
 
       background: $color-x-light;
+      border: 1px solid $color-mid-dark;
+      border-radius: 50%;
       content: '';
       height: $knob-size;
       left: 0;

package/scss/_patterns_table-mobile-card.scss

@@ -27,16 +27,13 @@
         tr {
           border: $border;
           border-radius: $border-radius;
-          display: grid;
-          grid-gap: 0 map-get($grid-gutter-widths, small);
-          grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-          grid-template-rows: auto;
+          display: block;
           margin-bottom: $spv--x-large;
           padding: 0 $sph--large;
         }
-
         td,
         tbody th {
+          display: block;
           min-width: 100%;
           overflow: hidden;
           padding-left: 0;