vanilla-framework 4.6.0 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -57,23 +57,22 @@
   "devDependencies": {
     "@canonical/cookie-policy": "3.5.0",
     "@canonical/latest-news": "1.5.0",
-    "@percy/cli": "1.27.6",
+    "@percy/cli": "1.27.7",
     "@testing-library/cypress": "10.0.1",
-    "autoprefixer": "10.4.16",
-    "cypress": "13.6.2",
+    "autoprefixer": "10.4.17",
+    "cypress": "13.6.4",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "postcss": "8.4.32",
-    "postcss-cli": "10.1.0",
+    "postcss": "8.4.33",
+    "postcss-cli": "11.0.0",
     "postcss-scss": "4.0.9",
-    "prettier": "2.8.8",
-    "sass": "1.69.6",
-    "stylelint": "15.11.0",
-    "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-recommended-scss": "5.0.2",
-    "stylelint-order": "5.0.0",
-    "stylelint-prettier": "2.0.0",
+    "prettier": "3.2.4",
+    "sass": "1.70.0",
+    "stylelint": "16.2.1",
+    "stylelint-config-recommended-scss": "14.0.0",
+    "stylelint-order": "6.0.4",
+    "stylelint-prettier": "5.0.0",
     "svgo": "2.8.0",
     "yaml": "2.3.4"
   }

package/scss/_base_forms.scss

@@ -200,7 +200,7 @@
     -webkit-appearance: none;
     appearance: none;
     // stylelint-enable property-no-vendor-prefix
-    background-position: right $sph--small center;
+    background-position: right calc(map-get($grid-margin-widths, default) / 2) center;
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
     box-shadow: none;

package/scss/_patterns_form-tick-elements.scss

@@ -16,7 +16,9 @@
 
     &::before,
     &::after {
-      $properties: #{background-color, border-color};
+      $properties:
+        #{background-color,
+        border-color};
       @include vf-transition($properties);
 
       position: absolute;

package/scss/_patterns_navigation.scss

@@ -7,6 +7,7 @@ $navigation-logo-tag-height-desktop: 2.3rem;
 $navigation-logo-banner-height: 3rem; // legacy logo height (small and medium screens)
 $navigation-logo-banner-height-desktop: 3.5rem; // legacy logo height (on large screens)
 $navigation-logo-size: 1rem;
+$navigation-logo-padding: calc(1.5rem + 0.19rem); // ~27px to align better with logos as originally designed in SVG
 $sph-navigation-link: 0.3rem;
 $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
@@ -31,7 +32,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-left: $sph--large;
+      padding-left: map-get($grid-margin-widths, default);
     }
   }
 
@@ -44,7 +45,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-right: $sph--large;
+      padding-right: map-get($grid-margin-widths, default);
     }
   }
 
@@ -54,7 +55,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
 
   %navigation-link {
-    $properties: #{background-color, color, opacity};
+    $properties:
+      #{background-color,
+      color,
+      opacity};
     @extend %navigation-link-responsive-padding-horizontal;
     @extend %navigation-link-responsive-padding-vertical;
     @extend %vf-navigation-separator;
@@ -71,7 +75,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     line-height: map-get($line-heights, default-text);
     margin: 0;
     overflow: hidden;
-    padding-left: calc(#{map-get($grid-margin-widths, small)} + #{$sph--x-large}); // allow navigation align with tag logo text on small screens
+    padding-left: calc(map-get($grid-margin-widths, small) + $navigation-logo-padding); // allow navigation align with tag logo text on small screens
     position: relative;
     text-align: left;
     text-overflow: ellipsis;
@@ -79,11 +83,11 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     width: 100%;
 
     @media (min-width: $threshold-4-6-col) {
-      padding-left: calc(#{map-get($grid-margin-widths, default)} + #{$sph--x-large});
+      padding-left: calc(map-get($grid-margin-widths, default) + $navigation-logo-padding);
     }
 
     @media (min-width: $breakpoint-navigation-threshold) {
-      padding-left: $sph--large;
+      padding-left: map-get($grid-margin-widths, default);
     }
 
     &:visited,
@@ -185,6 +189,52 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     width: 100%;
   }
 
+  .p-navigation__row--25-75 {
+    // ideally we'd like to extend row only on large screens,
+    // but that's not possible to use @extend inside media query
+    @extend %vf-row;
+
+    // when mobile navigation is displayed, remove default row padding
+    @media (width < $breakpoint-navigation-threshold) {
+      padding: 0;
+    }
+
+    // when large screen navigation is displayed, use 25/75 grid split
+    @media (min-width: $breakpoint-navigation-threshold) {
+      // remove padding from logo banner (the grid has its own padding)
+      .p-navigation__banner {
+        padding-left: 0;
+      }
+
+      // shift navigation items by the size of grid margin to align with grid
+      .p-navigation__items:first-child {
+        margin-left: calc(-1 * map-get($grid-margin-widths, default));
+      }
+
+      // on medium screen sizes (6 columns) use 2/4 column split
+      @media (min-width: $threshold-4-6-col) {
+        > .p-navigation__banner {
+          grid-column-end: span 2;
+        }
+
+        > .p-navigation__nav {
+          grid-column-end: span 4;
+        }
+      }
+
+      // on large screen sizes (12 columns) use 3/9 column split
+      @media (min-width: $threshold-6-12-col) {
+        > .p-navigation__banner {
+          grid-column-end: span 3;
+        }
+
+        > .p-navigation__nav {
+          grid-column-end: span 9;
+        }
+      }
+    }
+  }
+
   .p-navigation__item,
   .p-navigation__item--dropdown-toggle {
     @media (min-width: $breakpoint-navigation-threshold) {
@@ -282,7 +332,9 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     .p-navigation__link {
       @extend %navigation-link;
 
-      padding-left: calc($sph--x-large + 0.19rem); // additional padding added to align better with logos as originally designed in SVG
+      // within logo we don't need a regular item padding
+      @extend %vf-reset-horizontal-padding;
+      padding-left: $navigation-logo-padding;
 
       &:hover {
         background-color: transparent !important;
@@ -430,8 +482,9 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     display: block;
     height: 100%; // keep the height of the navigation when 'Search' label is hidden
+
     padding-left: 0; // on small screens label is hidden, so we remove left padding as well
-    padding-right: 2 * $sph--small + map-get($icon-sizes, default);
+    padding-right: calc(map-get($grid-margin-widths, default) + map-get($icon-sizes, default));
     position: relative;
 
     // hide "search" label on small screens (only show the icon)
@@ -441,7 +494,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
     // show both label and icon on large screens
     @media (min-width: $breakpoint-large) {
-      padding-left: $sph--large;
+      padding-left: map-get($grid-margin-widths, default);
 
       .p-navigation__search-label {
         display: initial;
@@ -457,7 +510,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       height: $spv--large;
       pointer-events: none;
       position: absolute;
-      right: calc($sph--small + 1px); // 1px for the border on selects. this aligns it with any selects underneath
+      right: calc(map-get($grid-margin-widths, default) / 2);
       text-indent: calc(100% + 10rem);
       top: calc($spv--medium + map-get($nudges, x-small));
       width: map-get($icon-sizes, default);
@@ -597,7 +650,7 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
       }
 
       @media (min-width: $breakpoint-navigation-threshold) {
-        right: calc($sph--small + 1px); // 1px for the border on selects. this aligns it with any selects underneath
+        right: calc(map-get($grid-margin-widths, default) / 2); // position by the center of grid margin
         top: calc($spv--large + map-get($nudges, x-small));
         transform: rotate(0deg);
       }
@@ -619,8 +672,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
 
     .p-navigation__link {
-      // add padding to accommodate icon
-      padding-right: 2 * $sph--small + map-get($icon-sizes, default);
+      // increase padding to accommodate chevron icon
+      padding-right: map-get($grid-margin-widths, default) + map-get($icon-sizes, default);
     }
 
     &:first-child .p-navigation__link::before {

package/scss/_patterns_strip.scss

@@ -116,9 +116,19 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
       linear-gradient(to top right, #fff 0%, #fff 49%, transparent 50%, transparent 100%), linear-gradient(to top right, #fff 0%, #fff 100%),
       linear-gradient(111deg, $color-suru-start 10%, $color-suru-middle 37%, $color-suru-end 100%);
 
-    background-position: 0% 0%, top right, right 0 bottom 4rem, right bottom, 0% 0%;
+    background-position:
+      0% 0%,
+      top right,
+      right 0 bottom 4rem,
+      right bottom,
+      0% 0%;
     background-repeat: no-repeat;
-    background-size: 100% calc(100% - 4rem), 50% 100%, 100% 4rem, 100% 4rem, auto;
+    background-size:
+      100% calc(100% - 4rem),
+      50% 100%,
+      100% 4rem,
+      100% 4rem,
+      auto;
     color: $color-x-light;
     margin-bottom: -4rem;
     overflow: hidden;
@@ -136,16 +146,36 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
     &.is-deep {
       $padding: 3rem;
 
-      background-position: 0% 0%, top right, right 0 bottom $padding, right bottom, 0% 0%;
-      background-size: 100% calc(100% - $padding), 100% 100%, 100% $padding, 100% $padding, auto;
+      background-position:
+        0% 0%,
+        top right,
+        right 0 bottom $padding,
+        right bottom,
+        0% 0%;
+      background-size:
+        100% calc(100% - $padding),
+        100% 100%,
+        100% $padding,
+        100% $padding,
+        auto;
       margin-bottom: -$padding;
       padding-bottom: ($padding * 3) !important;
 
       @media (min-width: $threshold-6-12-col) {
         $padding: 6rem;
 
-        background-position: 0% 0%, top right, right 0 bottom $padding, right bottom, 0% 0%;
-        background-size: 100% calc(100% - $padding), 50% 100%, 100% $padding, 100% $padding, auto;
+        background-position:
+          0% 0%,
+          top right,
+          right 0 bottom $padding,
+          right bottom,
+          0% 0%;
+        background-size:
+          100% calc(100% - $padding),
+          50% 100%,
+          100% $padding,
+          100% $padding,
+          auto;
         margin-bottom: -$padding;
         padding-bottom: ($padding * 3) !important;
       }
@@ -167,9 +197,17 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
       linear-gradient(to bottom right, transparent 0%, transparent 49%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%),
       linear-gradient(90deg, $color-suru-start 4%, $color-suru-middle 50%, $color-suru-end 88%);
 
-    background-position: top right, top right, top left, top left;
+    background-position:
+      top right,
+      top right,
+      top left,
+      top left;
     background-repeat: no-repeat;
-    background-size: 39.4% 6rem, 54% 4rem, 63% 4rem, 62.6% 4rem;
+    background-size:
+      39.4% 6rem,
+      54% 4rem,
+      63% 4rem,
+      62.6% 4rem;
     padding-bottom: 4rem;
     padding-top: 6rem;
 

package/scss/_settings_placeholders.scss

@@ -6,5 +6,8 @@ $input-border-thickness: 1.5px;
 $bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems so it scales with text if the root font-size changes at a breakpoint
 $border-radius: 0; // deprecated, will be removed in future version of Vanilla
 $border: $input-border-thickness solid $color-mid-light !default;
-$box-shadow: 0 1px 1px 0 transparentize($color-x-dark, 0.85), 0 2px 2px -1px transparentize($color-x-dark, 0.85), 0 0 3px 0 transparentize($color-x-dark, 0.8) !default;
+$box-shadow:
+  0 1px 1px 0 transparentize($color-x-dark, 0.85),
+  0 2px 2px -1px transparentize($color-x-dark, 0.85),
+  0 0 3px 0 transparentize($color-x-dark, 0.8) !default;
 $box-shadow--deep: 0 0 2rem 0 rgba($color-x-dark, $shadow-opacity) !default;