vanilla-framework 4.4.0 → 4.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.4.0",
+  "version": "4.5.1",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -56,11 +56,11 @@
   ],
   "devDependencies": {
     "@canonical/cookie-policy": "3.5.0",
-    "@canonical/latest-news": "1.4.1",
+    "@canonical/latest-news": "1.5.0",
     "@percy/cli": "1.27.2",
     "@testing-library/cypress": "9.0.0",
     "autoprefixer": "10.4.16",
-    "cypress": "12.17.4",
+    "cypress": "13.6.0",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",

package/scss/_layouts_application-panels.scss

@@ -18,6 +18,7 @@
   }
 
   .p-panel__header.is-sticky {
+    background: $colors--light-theme--background-default;
     position: sticky;
     top: 0;
     z-index: 1;

package/scss/_layouts_docs.scss

@@ -89,8 +89,9 @@
     }
 
     // on largest screens we want to keep the table of contents sticky
-    .l-docs__meta {
-      align-self: start;
+    .l-docs__sticky-container {
+      max-height: 100vh;
+      overflow-y: auto;
       position: sticky;
       top: 0;
     }

package/scss/_patterns_grid.scss

@@ -144,9 +144,9 @@
 
   // column reordering
   $offsets: (
-    (small, 0, $threshold-4-6-col, $grid-columns-small - 1),
-    (medium, $threshold-4-6-col, $threshold-6-12-col, $grid-columns-medium - 1),
-    (large, $threshold-6-12-col, false, $grid-columns - 1)
+    (small, 0, $threshold-4-6-col, $grid-columns-small),
+    (medium, $threshold-4-6-col, $threshold-6-12-col, $grid-columns-medium),
+    (large, $threshold-6-12-col, false, $grid-columns)
   );
 
   @each $label, $breakpoint-min, $breakpoint-reset, $col-count in $offsets {

package/scss/_patterns_search-box.scss

@@ -79,31 +79,33 @@
     .p-search-box__input {
       @include vf-search-box-dark-theme;
     }
-
-    .p-search-box.is-light {
-      .p-search-box__input {
-        @include vf-search-box-light-theme;
-      }
-    }
   } @else {
     .p-search-box {
       .p-search-box__input {
         @include vf-search-box-light-theme;
       }
     }
-
-    .p-search-box.is-dark {
-      .p-search-box__input {
-        @include vf-search-box-dark-theme;
-      }
-    }
   }
 
+  // beware that the order of the following classes is important
+  // as they are used to override the default theme
   .is-paper .p-search-box {
     .p-search-box__input {
       @include vf-search-box-paper-theme;
     }
   }
+
+  .p-search-box.is-light {
+    .p-search-box__input {
+      @include vf-search-box-light-theme;
+    }
+  }
+
+  .p-search-box.is-dark {
+    .p-search-box__input {
+      @include vf-search-box-dark-theme;
+    }
+  }
 }
 
 @mixin vf-search-box-theme(

package/scss/_patterns_side-navigation-expandable.scss

@@ -46,6 +46,7 @@
   .p-side-navigation__expand[aria-expanded='false'] + .p-side-navigation__list {
     height: 0;
     opacity: 0;
+    overflow: hidden;
     transform: translate3d(0, -0.5rem, 0);
     // disable transition on close
     transition-duration: 0s;

package/scss/_patterns_side-navigation.scss

@@ -292,6 +292,7 @@
     &[aria-expanded='false'] {
       height: 0;
       opacity: 0;
+      overflow: hidden;
       transform: translate3d(0, -0.5rem, 0);
       visibility: hidden;
     }
@@ -544,6 +545,11 @@
       }
     }
   }
+
+  .is-paper .p-side-navigation__drawer,
+  .is-paper .p-side-navigation__drawer-header {
+    background: $color-paper;
+  }
 }
 
 // helper

package/scss/_patterns_suru.scss

@@ -5,15 +5,9 @@
     aspect-ratio: calc(2216 / 428); // aspect ratio calculated from image dimensions
     background-image: url('#{$assets-path}7f34ade9-website_suru_25.jpg');
     background-size: contain;
-    display: none; // only show suru on large screens
     margin: 0 auto;
     max-width: $grid-max-width;
 
-    // show suru only on large screens
-    @media (min-width: $breakpoint-large) {
-      display: block;
-    }
-
     &.is-dark {
       aspect-ratio: calc(2580 / 501); // aspect ratio calculated from image dimensions
       background-image: url('#{$assets-path}9469ef82-1_website_suru_DARK_25%20(1)122.jpg');