vanilla-framework 3.8.0 → 3.8.1

package/package.json

@@ -47,7 +47,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.8.0",
+  "version": "3.8.1",
   "files": [
     "_index.scss",
     "/scss",

package/scss/_base_grid-definitions.scss

@@ -11,24 +11,6 @@
     display: block;
   }
 
-  %span-full-grid-on-mobile {
-    @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 - 1) {
-      grid-column: auto / span $grid-columns-medium;
-    }
-  }
-
-  %span-full-grid-on-desktop {
-    @media (min-width: $threshold-6-12-col) {
-      grid-column: auto / span $grid-columns;
-    }
-  }
-
   %fixed-width-container--common-properties {
     @extend %vf-grid-container-padding;
 

package/scss/_base_links.scss

@@ -20,6 +20,8 @@
     &:hover {
       cursor: pointer;
       text-decoration: underline;
+      text-decoration-thickness: 1px;
+      text-underline-offset: 0.075em;
     }
 
     &:visited {

package/scss/_base_placeholders.scss

@@ -210,9 +210,9 @@
   }
 
   %icon {
+    $vertical-offset: 0.5px;
     @extend %vf-hide-text;
     @include vf-icon-size($default-icon-size);
-    $vertical-offset: 0.5px;
     background: {
       position: center;
       repeat: no-repeat;

package/scss/_layouts_application.scss

@@ -40,6 +40,10 @@ $application-layout--side-nav-width-expanded: 15rem !default;
 }
 
 @mixin vf-l-application {
+  $panel-drop-shadow: $box-shadow--deep;
+  $panel-drop-shadow-transparent: 0 0 0 0 transparent;
+  @include vf-l-application-panels;
+
   .l-application {
     display: grid;
     grid-template-areas:
@@ -53,9 +57,6 @@ $application-layout--side-nav-width-expanded: 15rem !default;
     width: 100vw;
   }
 
-  $panel-drop-shadow: $box-shadow--deep;
-  $panel-drop-shadow-transparent: 0 0 0 0 transparent;
-
   // Top navigation bar to toggle side navigation on small screens
   .l-navigation-bar {
     grid-area: navbar;
@@ -275,6 +276,4 @@ $application-layout--side-nav-width-expanded: 15rem !default;
       }
     }
   }
-
-  @include vf-l-application-panels;
 }

package/scss/_patterns_accordion.scss

@@ -32,9 +32,9 @@
     z-index: 2;
 
     &::before {
+      @extend %icon;
       @include vf-icon-chevron($color-mid-dark);
       @include vf-transition($property: transform, $duration: fast);
-      @extend %icon;
 
       content: '';
       margin-right: $sph--large;

package/scss/_patterns_divider.scss

@@ -1,5 +1,37 @@
 @import 'settings';
 
+@mixin horizontal-dividers() {
+  padding-bottom: $spv--large;
+  padding-top: $spv--large;
+
+  &:not(:first-child)::before {
+    bottom: auto;
+    content: '';
+    height: 1px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: auto;
+  }
+}
+
+@mixin vertical-dividers() {
+  padding-bottom: 0;
+  padding-top: 0;
+
+  &:not(:first-child)::before {
+    bottom: 0;
+    content: '';
+    height: auto;
+    left: map-get($grid-gutter-widths, default) * -0.5;
+    position: absolute;
+    right: auto;
+    top: 0;
+    width: 1px;
+  }
+}
+
 @mixin vf-p-divider {
   .p-divider {
     @extend %vf-row;
@@ -10,29 +42,19 @@
   .p-divider__block {
     position: relative;
 
-    @media (max-width: $threshold-6-12-col - 1) {
-      padding-bottom: $spv--large;
-      padding-top: $spv--large;
-
-      &:not(:first-child)::before {
-        content: '';
-        height: 1px;
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
+    @include horizontal-dividers();
+
+    // Medium screens will have horizontal dividers unless col-medium-...
+    // classes have been applied.
+    @media (min-width: $threshold-4-6-col) {
+      // If a col-medium- class has been applied then use vertical dividers.
+      &[class*='#{$grid-medium-col-prefix}'] {
+        @include vertical-dividers();
       }
     }
 
     @media (min-width: $threshold-6-12-col) {
-      &:not(:first-child)::before {
-        bottom: 0;
-        content: '';
-        left: map-get($grid-gutter-widths, default) * -0.5; // "large" here is not a typo. The grid switches to 12 columns at breakpoint medium. Hence the use of large-screen gutter
-        position: absolute;
-        top: 0;
-        width: 1px;
-      }
+      @include vertical-dividers();
     }
   }
 

package/scss/_patterns_form-password-toggle.scss

@@ -11,4 +11,14 @@
     display: inline-block;
     margin-right: $sp-xx-small;
   }
+
+  // Override the input text so that it is more easy to read when it
+  // has been toggled to display the text. This expects that the input
+  // immediately follows the .p-form-password-toggle element.
+  .p-form-password-toggle + [type='text'] {
+    &[readonly],
+    &[readonly='readonly'] {
+      color: $color-dark;
+    }
+  }
 }

package/scss/_patterns_form-validation.scss

@@ -23,8 +23,8 @@
     }
 
     .p-form-validation__message {
-      @include vf-icon-success($color-positive);
       @extend %vf-validation-wrapper;
+      @include vf-icon-success($color-positive);
 
       color: $color-positive;
     }
@@ -36,8 +36,8 @@
     }
 
     .p-form-validation__message {
-      @include vf-icon-warning($color-caution);
       @extend %vf-validation-wrapper;
+      @include vf-icon-warning($color-caution);
     }
   }
 
@@ -47,8 +47,8 @@
     }
 
     .p-form-validation__message {
-      @include vf-icon-error($color-negative);
       @extend %vf-validation-wrapper;
+      @include vf-icon-error($color-negative);
 
       color: $color-negative;
     }

package/scss/_patterns_grid.scss

@@ -14,6 +14,26 @@
   }
 }
 
+@mixin vf-grid-column-reordering($label, $col-count, $reset: false) {
+  @for $i from 1 through $col-count {
+    .row [class*='#{$grid-column-prefix}'].#{$grid-column-prefix}start-#{$label}-#{$i} {
+      @if $reset {
+        grid-column-start: initial;
+      } @else {
+        grid-column-start: #{$i};
+      }
+    }
+
+    .#{$grid-column-prefix}order-#{$label}-#{$i} {
+      @if $reset {
+        order: initial;
+      } @else {
+        order: #{$i};
+      }
+    }
+  }
+}
+
 @mixin vf-p-grid {
   // FIXME: this should be removed from framework SCSS
   // (see https://github.com/canonical/vanilla-framework/issues/3199)
@@ -27,18 +47,59 @@
   }
 
   // mobile grid
-  @media (max-width: $threshold-4-6-col - 1) {
-    @for $i from $grid-columns-small through 1 {
-      .#{$grid-small-col-prefix}#{$i} {
-        @include vf-grid-column($i);
 
-        width: 100%;
-      }
+  // by default medium and large screen col classes should span full width on mobile (to match block level element behaviour)
+  %span-full-grid-on-mobile {
+    grid-column: auto / span $grid-columns-small;
+  }
+
+  @for $i from 1 through $grid-columns-medium {
+    .#{$grid-medium-col-prefix}#{$i} {
+      @extend %span-full-grid-on-mobile;
+      @extend %display-block;
+    }
+  }
+
+  @for $i from 1 through $grid-columns {
+    .#{$grid-large-col-prefix}#{$i} {
+      @extend %span-full-grid-on-mobile;
+      @extend %display-block;
+    }
+  }
+
+  // col-small-X classes define grid for small screen
+  @for $i from $grid-columns-small through 1 {
+    .#{$grid-small-col-prefix}#{$i} {
+      @extend %display-block;
+      @include vf-grid-column($i);
+
+      width: 100%;
     }
   }
 
   // tablet grid
-  @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
+
+  // on medium/tablet screens, small and large grid class names span full width (to match block level element behaviour)
+  %span-full-grid-on-tablet {
+    @media (min-width: $threshold-4-6-col) {
+      grid-column: auto / span $grid-columns-medium;
+    }
+  }
+
+  @for $i from 1 through $grid-columns-small {
+    .#{$grid-small-col-prefix}#{$i} {
+      @extend %span-full-grid-on-tablet;
+    }
+  }
+
+  @for $i from 1 through $grid-columns {
+    .#{$grid-large-col-prefix}#{$i} {
+      @extend %span-full-grid-on-tablet;
+    }
+  }
+
+  // col-medium-X classes define grid for medium screens
+  @media (min-width: $threshold-4-6-col) {
     @for $i from $grid-columns-medium through 1 {
       .#{$grid-medium-col-prefix}#{$i} {
         @include vf-grid-column($i);
@@ -49,38 +110,34 @@
   }
 
   // desktop grid
-  @media (min-width: $threshold-6-12-col) {
-    @for $i from $grid-columns through 1 {
-      // set col-* to span respective number of columns on desktop
-      .#{$grid-large-col-prefix}#{$i} {
-        // on smaller screens let them display full width one under another
-        @include vf-grid-column($i);
-      }
+
+  // on desktop screens small and medium grid class names span full width (to match block level element behaviour)
+  %span-full-grid-on-desktop {
+    @media (min-width: $threshold-6-12-col) {
+      grid-column: auto / span $grid-columns;
     }
   }
 
-  // span full grid on other breakpoints; (to match block level element behaviour)
   @for $i from 1 through $grid-columns-small {
     .#{$grid-small-col-prefix}#{$i} {
-      @extend %span-full-grid-on-tablet;
       @extend %span-full-grid-on-desktop;
-      @extend %display-block;
     }
   }
 
   @for $i from 1 through $grid-columns-medium {
     .#{$grid-medium-col-prefix}#{$i} {
-      @extend %span-full-grid-on-mobile;
       @extend %span-full-grid-on-desktop;
-      @extend %display-block;
     }
   }
 
-  @for $i from 1 through $grid-columns {
-    .#{$grid-large-col-prefix}#{$i} {
-      @extend %span-full-grid-on-mobile;
-      @extend %span-full-grid-on-tablet;
-      @extend %display-block;
+  // col-X class names define grid on large/desktop screens
+  @media (min-width: $threshold-6-12-col) {
+    @for $i from $grid-columns through 1 {
+      // set col-* to span respective number of columns on desktop
+      .#{$grid-large-col-prefix}#{$i} {
+        // on smaller screens let them display full width one under another
+        @include vf-grid-column($i);
+      }
     }
   }
 
@@ -88,28 +145,21 @@
   $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, -1, $grid-columns - 1)
+    (large, $threshold-6-12-col, false, $grid-columns - 1)
   );
 
-  @each $label, $breakpoint-min, $breakpoint-max, $col-count in $offsets {
-    $query: null;
+  @each $label, $breakpoint-min, $breakpoint-reset, $col-count in $offsets {
     @if $breakpoint-min == 0 {
-      $query: '(max-width: #{$breakpoint-max - 1})';
-    } @else if $breakpoint-max == -1 {
-      $query: '(min-width: #{$breakpoint-min})';
+      @include vf-grid-column-reordering($label, $col-count);
     } @else {
-      $query: '(min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max - 1})';
+      @media (min-width: #{$breakpoint-min}) {
+        @include vf-grid-column-reordering($label, $col-count);
+      }
     }
 
-    @media #{$query} {
-      @for $i from 1 through $col-count {
-        .row [class*='#{$grid-column-prefix}'].#{$grid-column-prefix}start-#{$label}-#{$i} {
-          grid-column-start: #{$i};
-        }
-
-        .#{$grid-column-prefix}order-#{$label}-#{$i} {
-          order: #{$i};
-        }
+    @if $breakpoint-reset {
+      @media (min-width: #{$breakpoint-reset}) {
+        @include vf-grid-column-reordering($label, $col-count, $reset: true);
       }
     }
   }
@@ -127,7 +177,7 @@
       position: absolute;
       right: map-get($grid-margin-widths, small);
 
-      @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
+      @media (min-width: $threshold-4-6-col) {
         left: map-get($grid-margin-widths, default);
         right: map-get($grid-margin-widths, default);
       }

package/scss/_patterns_lists.scss

@@ -17,12 +17,15 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
 
     &::before {
       align-self: start;
-      background-color: $color-mid-x-light;
+      background-color: $color-x-light;
+      border: 1px solid $color-x-dark;
       border-radius: 100%;
       content: counter(li);
       counter-increment: li;
       direction: rtl;
       display: block;
+      font-size: map-get($base-font-sizes, base);
+      font-weight: $font-weight-regular-text;
       left: 0;
       position: absolute;
       text-align: center;
@@ -274,10 +277,14 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
     }
 
     &::before {
+      // Need to account for the 1px border:
+      line-height: calc(#{$bullet-width-mobile} - 2px);
       margin-right: $sph--large;
       width: $bullet-width-mobile;
 
       @media (min-width: $breakpoint-heading-threshold) {
+        // Need to account for the 1px border:
+        line-height: calc(#{$bullet-width} - 2px);
         width: $bullet-width;
       }
     }
@@ -295,10 +302,16 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
     // Bullet sizes for each heading level
     $bullet-width: map-get($line-heights, default-text);
     $bullet-width-mobile: map-get($line-heights, default-text);
+    // h6 line height is the same as the bullet width so no need to apply any margin:
+    $bullet-margin: 0;
+    $bullet-margin-mobile: 0;
 
     @if $i < 5 {
-      $bullet-width: map-get($line-heights, h#{$i});
-      $bullet-width-mobile: map-get($line-heights, h#{$i}-mobile);
+      // To align the bullet with the title we need to use half
+      // the height difference between the bullet and the title and then add the
+      // nudge to position it with the lower case text.
+      $bullet-margin: calc((map-get($line-heights, h#{$i}) - $bullet-width) / 2) + map-get($nudges, h#{$i});
+      $bullet-margin-mobile: calc((map-get($line-heights, h#{$i}-mobile) - $bullet-width-mobile) / 2) + map-get($nudges, h#{$i});
     }
 
     .p-heading--#{$i}.p-stepped-list__title,
@@ -310,10 +323,16 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
       }
 
       &::before {
+        // Need to account for the 1px border:
+        line-height: calc(#{$bullet-width-mobile} - 2px);
         margin-right: $sph--large;
+        margin-top: $bullet-margin-mobile;
         width: $bullet-width-mobile;
 
         @media (min-width: $breakpoint-heading-threshold) {
+          // Need to account for the 1px border:
+          line-height: calc(#{$bullet-width} - 2px);
+          margin-top: $bullet-margin;
           width: $bullet-width;
         }
       }

package/scss/_patterns_logo-section.scss

@@ -41,7 +41,6 @@
     $percentage-contribution: $logo-column-span * $percentage-width-of-one-col;
     $gutter-width-inside-logo: $gutter * ($logo-column-span - 1);
     $rem-contribution: $logo-column-span * math.div($gutters-total-width, $grid-column-count) - $gutter-width-inside-logo;
-
     @include vf-p-apply-logo-section-item-width($percentage-contribution, $rem-contribution);
 
     // Looping in reverse to ensure nested column rules end up further down in the generated css file, thus having higher specificity.

package/scss/_patterns_navigation.scss

@@ -1,14 +1,13 @@
 @import 'settings';
 
 $lightness-threshold: 70;
-$navigation-logo-tag-width: 1.5rem;
-$navigation-logo-tag-height: 2.2rem;
-$navigation-logo-tag-height-desktop: 2.4rem;
-$navigation-logo-height: 3rem;
+$navigation-logo-tag-width: 1.313rem; // 21px when 1rem is 16px
+$navigation-logo-tag-height: 2rem;
+$navigation-logo-tag-height-desktop: 2.3rem;
 $navigation-logo-height-desktop: 3.5rem;
-$navigation-logo-width: 1.1rem;
+$navigation-logo-size: 1rem;
 $sph-navigation-link: 0.3rem;
-$spv-navigation-logo: 0.3125rem;
+$spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
 @mixin vf-p-navigation {
   // placeholders
@@ -200,7 +199,7 @@ $spv-navigation-logo: 0.3125rem;
   .p-navigation__logo {
     display: flex;
     flex: 0 0 auto;
-    height: $navigation-logo-height;
+    height: $navigation-logo-size;
     margin: 0 $sph--large 0 0;
 
     @media (min-width: $breakpoint-navigation-threshold) {
@@ -233,11 +232,12 @@ $spv-navigation-logo: 0.3125rem;
     }
 
     .p-navigation__logo-icon {
-      bottom: $spv-navigation-logo;
+      bottom: $spv-navigation-logo-bottom-position;
+      height: $navigation-logo-size;
       left: 50%;
       position: absolute;
       transform: translate(-50%, 0);
-      width: $navigation-logo-width;
+      width: $navigation-logo-size;
     }
 
     .p-navigation__logo-title {
@@ -249,7 +249,7 @@ $spv-navigation-logo: 0.3125rem;
     .p-navigation__link {
       @extend %navigation-link;
 
-      padding-left: $navigation-logo-tag-width + $sph-navigation-link;
+      padding-left: $sph--x-large;
 
       &:hover {
         background-color: transparent !important;

package/scss/_patterns_side-navigation.scss

@@ -397,11 +397,10 @@
   .p-side-navigation__text,
   .p-side-navigation__link,
   .p-side-navigation__accordion-button {
-    @extend %side-navigation__text;
-
     // offset for accordion chevrons is icon size + twice spacing around it
     // we don't use grid width spacing for accordion (as we do in icon version)
     $sp-sidenav--accordion-offset: $sp-sidenav--icon-width + 2 * $sph--large;
+    @extend %side-navigation__text;
 
     .p-side-navigation--icons & {
       @include vf-side-navigation-spacing-left($multiplier: 2, $offset: $sp-sidenav--icon-width);

package/scss/_patterns_slider.scss

@@ -8,7 +8,6 @@
   }
 
   .p-slider__input {
-    height: 2.625rem;
     margin: 0 0 0 $sp-medium;
     min-width: 5rem;
     text-align: center;

package/scss/_patterns_strip.scss

@@ -109,14 +109,6 @@ $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%);
 
-    @supports (background-blend-mode: multiply) {
-      background-blend-mode: multiply, multiply, normal, normal, normal;
-      background-image: linear-gradient(to bottom right, $color-suru-slant-left 0%, $color-suru-slant-left 49.8%, transparent 50%, transparent 100%),
-        linear-gradient(to bottom left, $color-suru-slant-right 0%, $color-suru-slant-right 49.8%, transparent 50%, transparent 100%),
-        linear-gradient(to top right, $color-suru-background 0%, $color-suru-background 49%, transparent 50%, transparent 100%),
-        linear-gradient($color-suru-background 0%, $color-suru-background 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-repeat: no-repeat;
     background-size: 100% calc(100% - 4rem), 50% 100%, 100% 4rem, 100% 4rem, auto;
@@ -126,6 +118,14 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
     padding-bottom: 12rem;
     position: relative;
 
+    @supports (background-blend-mode: multiply) {
+      background-blend-mode: multiply, multiply, normal, normal, normal;
+      background-image: linear-gradient(to bottom right, $color-suru-slant-left 0%, $color-suru-slant-left 49.8%, transparent 50%, transparent 100%),
+        linear-gradient(to bottom left, $color-suru-slant-right 0%, $color-suru-slant-right 49.8%, transparent 50%, transparent 100%),
+        linear-gradient(to top right, $color-suru-background 0%, $color-suru-background 49%, transparent 50%, transparent 100%),
+        linear-gradient($color-suru-background 0%, $color-suru-background 100%), linear-gradient(111deg, $color-suru-start 10%, $color-suru-middle 37%, $color-suru-end 100%);
+    }
+
     &.is-deep {
       $padding: 3rem;
 
@@ -160,6 +160,12 @@ $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-repeat: no-repeat;
+    background-size: 39.4% 6rem, 54% 4rem, 63% 4rem, 62.6% 4rem;
+    padding-bottom: 4rem;
+    padding-top: 6rem;
+
     @supports (background-blend-mode: multiply) {
       background-blend-mode: multiply, multiply, normal, normal;
       background-image: linear-gradient(to bottom left, rgba(229, 229, 229, 0.5) 0%, rgba(229, 229, 229, 0.5) 49%, transparent 50%, transparent 100%),
@@ -168,12 +174,6 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
         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-repeat: no-repeat;
-    background-size: 39.4% 6rem, 54% 4rem, 63% 4rem, 62.6% 4rem;
-    padding-bottom: 4rem;
-    padding-top: 6rem;
-
     &.is-shallow {
       // Override is-shallow class with default padding, as Suru strips were not designed to be shallow
       padding: 6rem 0 4rem 0;

package/scss/_patterns_table-sortable.scss

@@ -2,9 +2,9 @@
 
 @mixin vf-p-table-sortable {
   %heading-icon {
+    $vertical-offset: 0.5px;
     @include vf-icon-chevron;
     @include vf-icon-size(map-get($icon-sizes, default));
-    $vertical-offset: 0.5px;
 
     background: {
       repeat: no-repeat;

package/scss/_utilities_hide.scss

@@ -57,7 +57,7 @@
     }
 
     &--large {
-      @media (min-width: $breakpoint-small) {
+      @media (min-width: $breakpoint-large) {
         @include vf-hide-table-column;
       }
     }