vanilla-framework 3.13.0 → 3.15.0

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "vanilla-framework",
-  "version": "3.13.0",
+  "version": "3.15.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
   },
   "bugs": {
     "email": "webteam@canonical.com",
-    "url": "http://github.com/canonical/vanilla-framework/issues"
+    "url": "https://github.com/canonical/vanilla-framework/issues"
   },
   "description": "A simple, extendable CSS framework.",
   "homepage": "https://vanillaframework.io/",
@@ -54,29 +54,27 @@
     "!/scss/docs",
     "!/scss/standalone"
   ],
-  "dependencies": {
+  "devDependencies": {
     "@canonical/cookie-policy": "3.4.0",
     "@canonical/latest-news": "1.4.1",
-    "autoprefixer": "10.4.13",
-    "postcss": "8.4.21",
-    "postcss-cli": "9.1.0",
-    "postcss-scss": "4.0.6",
-    "sass": "1.58.3",
-    "yaml": "1.10.2"
-  },
-  "devDependencies": {
     "@percy/script": "1.1.0",
     "@testing-library/cypress": "9.0.0",
-    "cypress": "12.7.0",
+    "autoprefixer": "10.4.14",
+    "cypress": "12.13.0",
     "get-site-urls": "3.0.0",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "prettier": "2.8.4",
+    "postcss": "8.4.24",
+    "postcss-cli": "10.1.0",
+    "postcss-scss": "4.0.6",
+    "prettier": "2.8.8",
+    "sass": "1.62.1",
     "stylelint": "14.16.1",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",
     "stylelint-prettier": "2.0.0",
-    "svgo": "2.8.0"
+    "svgo": "2.8.0",
+    "yaml": "2.3.1"
   }
 }

package/scss/_base_hr.scss

@@ -1,5 +1,27 @@
 @import 'settings';
 
+%fixed-width-hr {
+  @mixin adjusted-width($size) {
+    $gutters-sizes: 2 * map-get($grid-margin-widths, $size);
+
+    max-width: calc($grid-max-width - $gutters-sizes);
+    width: calc(100% - $gutters-sizes);
+  }
+
+  margin-left: auto;
+  margin-right: auto;
+  @include adjusted-width(small);
+
+  @media (min-width: $threshold-4-6-col) {
+    @include adjusted-width(default);
+  }
+
+  .row &,
+  .u-fixed-width & {
+    width: 100%;
+  }
+}
+
 // Horizontal rule
 @mixin vf-b-hr {
   // stylelint-disable selector-max-type -- base styles can use type selectors
@@ -18,25 +40,7 @@
     }
 
     &.is-fixed-width {
-      margin-left: auto;
-      margin-right: auto;
-      max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, small));
-      width: calc(100% - 2 * map-get($grid-margin-widths, small));
-
-      @media (min-width: $threshold-4-6-col) {
-        max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, default));
-        width: calc(100% - 2 * map-get($grid-margin-widths, default));
-      }
-
-      @media (min-width: $threshold-6-12-col) {
-        max-width: calc($grid-max-width - 2 * map-get($grid-margin-widths, default));
-        width: calc(100% - 2 * map-get($grid-margin-widths, default));
-      }
-
-      .row &,
-      .u-fixed-width & {
-        width: 100%;
-      }
+      @extend %fixed-width-hr;
     }
   }
 

package/scss/_base_media.scss

@@ -5,7 +5,6 @@
   // stylelint-disable selector-max-type -- base styles can use type selectors
   img {
     border: 0;
-    border-radius: $border-radius;
     height: auto;
     max-width: 100%;
   }

package/scss/_base_placeholders.scss

@@ -100,13 +100,8 @@
 
   // Spacing
   %section-padding--shallow {
-    padding-bottom: $spv--x-large * 0.5;
-    padding-top: $spv--x-large * 0.5;
-
-    @media (min-width: $breakpoint-large) {
-      padding-bottom: $spv--x-large;
-      padding-top: $spv--x-large;
-    }
+    padding-bottom: $spv--x-large;
+    padding-top: $spv--x-large;
   }
 
   %section-padding--default {

package/scss/_patterns_grid.scss

@@ -37,6 +37,7 @@
 @mixin vf-p-grid {
   // FIXME: this should be removed from framework SCSS
   // (see https://github.com/canonical/vanilla-framework/issues/3199)
+  .grid-demo .col,
   .grid-demo [class*='#{$grid-column-prefix}'] {
     background: transparentize($color-negative, 0.9);
     margin-bottom: $spv--small;
@@ -188,4 +189,100 @@
       }
     }
   }
+
+  // Common grid patterns
+  $col-50-medium: calc($grid-columns-medium / 2);
+
+  $col-25: calc($grid-columns / 4);
+  $col-50: calc($grid-columns / 2);
+  $col-75: calc(($grid-columns / 4) * 3);
+
+  .row--50-50 {
+    @extend %vf-row;
+
+    > .col {
+      @include vf-grid-column($grid-columns-small);
+
+      @media (min-width: $threshold-4-6-col) {
+        @include vf-grid-column($col-50-medium);
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        @include vf-grid-column($col-50);
+      }
+    }
+  }
+
+  .row--25-75 {
+    @extend %vf-row;
+
+    > .col {
+      @include vf-grid-column($grid-columns-small);
+
+      @media (min-width: $threshold-4-6-col) {
+        @include vf-grid-column($grid-columns-medium);
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column($col-25);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column($col-75);
+        }
+
+        // if there is only one column we offset it to the right
+        &:only-of-type {
+          grid-column-start: calc($col-25 + 1);
+          @include vf-grid-column($col-75);
+        }
+      }
+    }
+  }
+
+  .row--25-25-50 {
+    @extend %vf-row;
+
+    > .col {
+      @include vf-grid-column($grid-columns-small);
+
+      @media (min-width: $threshold-4-6-col) {
+        &:nth-of-type(-n + 2) {
+          @include vf-grid-column($col-50-medium);
+        }
+
+        &:nth-of-type(3) {
+          @include vf-grid-column($grid-columns-medium);
+        }
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        &:nth-of-type(1),
+        &:nth-of-type(2) {
+          @include vf-grid-column($col-25);
+        }
+
+        &:nth-of-type(3) {
+          @include vf-grid-column($col-50);
+        }
+      }
+    }
+  }
+
+  .row--25-25-25-25 {
+    @extend %vf-row;
+
+    > .col {
+      @include vf-grid-column($grid-columns-small);
+
+      @media (min-width: $threshold-4-6-col) {
+        @include vf-grid-column($col-50-medium);
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        @include vf-grid-column($col-25);
+      }
+    }
+  }
 }

package/scss/_patterns_lists.scss

@@ -116,6 +116,14 @@ $list-status-icon-height: $default-icon-size;
   margin: 0;
   padding-bottom: $sph--large;
   padding-top: $sph--small;
+
+  &:first-child {
+    box-shadow: none;
+  }
+
+  .p-list--divided > .p-list__item:first-child {
+    box-shadow: inset 0px 1px 0px 0px $color-mid-x-light;
+  }
 }
 
 // Mixin for inline list items
@@ -468,6 +476,7 @@ $list-status-icon-height: $default-icon-size;
         columns: 2;
 
         .p-list__item {
+          display: inline-block;
           width: 100%;
         }
       }

package/scss/_patterns_navigation.scss

@@ -117,7 +117,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
   }
 
-  .p-navigation {
+  .p-navigation,
+  .p-navigation--sliding {
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
@@ -244,7 +245,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   .p-navigation__tagged-logo {
     display: flex; // to prevent logo link from expanding full width
     margin-right: 0;
-    min-width: 13rem;
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      min-width: 13rem;
+    }
 
     .p-navigation__logo-tag {
       background-color: $color-accent;
@@ -498,7 +502,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   }
 
   // when navigation search is expanded
-  .p-navigation.has-search-open {
+  .p-navigation.has-search-open,
+  .p-navigation--sliding.has-search-open {
     // make sure search in navigation renders on top of the overlay
     .p-navigation__nav {
       display: flex;
@@ -606,8 +611,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
         }
       }
 
-      .p-navigation__dropdown,
-      .p-navigation__dropdown--right {
+      > .p-navigation__dropdown,
+      > .p-navigation__dropdown--right {
         display: block;
       }
     }
@@ -651,21 +656,216 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     }
   }
 
+  @keyframes vf-nav-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 0.5;
+    }
+  }
+
+  $sliding-nav-animation-settings: map-get($animation-duration, brisk) ease;
+
+  .p-navigation--sliding.has-menu-open {
+    height: 100vh;
+    overflow-y: hidden;
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      height: auto;
+      overflow-y: visible;
+    }
+
+    .p-navigation__banner .p-navigation__items {
+      display: flex;
+      flex-wrap: nowrap;
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        display: none;
+      }
+    }
+    .p-navigation__nav {
+      display: block;
+      height: 100vh;
+      overflow-x: hidden;
+
+      .p-navigation__items {
+        display: block;
+      }
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        display: flex;
+        height: auto;
+        overflow-x: visible;
+
+        .p-navigation__items {
+          display: flex;
+        }
+      }
+    }
+
+    .p-navigation__items:not(:first-child)::before {
+      content: none;
+    }
+  }
+
+  /* stylelint-disable max-nesting-depth */
+  .p-navigation--sliding .p-navigation__items {
+    transition: transform $sliding-nav-animation-settings;
+
+    &.is-active {
+      transform: translateX(-25vw);
+      @media (min-width: $breakpoint-navigation-threshold) {
+        transform: none;
+      }
+      .p-navigation__dropdown {
+        transform: translateX(25vw);
+        @media (min-width: $breakpoint-navigation-threshold) {
+          transform: none;
+        }
+        &[aria-hidden='false'],
+        &:not([aria-hidden]) {
+          transform: translateX(-75vw);
+          @media (min-width: $breakpoint-navigation-threshold) {
+            transform: none;
+          }
+          &.is-active {
+            transform: translateX(-100vw);
+            @media (min-width: $breakpoint-navigation-threshold) {
+              transform: none;
+            }
+          }
+        }
+      }
+    }
+  }
+  /* stylelint-enable max-nesting-depth */
+
+  .p-navigation--sliding .p-navigation__item--dropdown-toggle {
+    position: initial;
+
+    &::after {
+      content: none;
+    }
+
+    .p-navigation__link::after {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      content: '';
+      display: block;
+      height: $spv--large;
+      pointer-events: none;
+      position: absolute;
+      right: map-get($grid-margin-widths, small);
+      text-indent: calc(100% + 10rem);
+      top: 1rem;
+      transform: rotate(-90deg);
+      width: map-get($icon-sizes, default);
+      @include vf-icon-chevron($colors--dark-theme--text-default);
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        right: 0.5rem;
+        top: 1.2rem;
+        transform: none;
+      }
+    }
+
+    &.is-active > .p-navigation__link::after {
+      @media (min-width: $breakpoint-navigation-threshold) {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .p-navigation--sliding .p-navigation__item--dropdown-close {
+    .p-navigation__link::after {
+      left: 1rem;
+      transform: rotate(90deg);
+    }
+    @media (min-width: $breakpoint-navigation-threshold) {
+      display: none;
+    }
+  }
+
+  /* stylelint-disable max-nesting-depth */
+
+  .p-navigation--sliding .p-navigation__dropdown {
+    display: block;
+    height: 100vh;
+    left: 100vw;
+    position: absolute;
+    top: 0;
+    transition: transform $sliding-nav-animation-settings;
+
+    @media (min-width: $breakpoint-navigation-threshold) {
+      display: none;
+      height: auto;
+      left: auto;
+      min-width: unset;
+      top: unset;
+    }
+
+    &::before {
+      box-shadow: -100vw 15px 0 15px black;
+      content: '';
+      height: 100%;
+      opacity: 0;
+      position: absolute;
+      transition: opacity $sliding-nav-animation-settings;
+      width: 100%;
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        content: none;
+      }
+    }
+
+    &[aria-hidden='false'],
+    &:not([aria-hidden]) {
+      &::before {
+        opacity: 0.75;
+      }
+
+      display: block;
+      transform: translateX(-75vw);
+
+      @media (min-width: $breakpoint-navigation-threshold) {
+        transform: none;
+
+        .p-navigation__item--dropdown-close {
+          @media (min-width: $breakpoint-navigation-threshold) {
+            display: none;
+          }
+        }
+      }
+
+      &.is-active {
+        transform: translateX(-100vw);
+      }
+    }
+  }
+
+  /* stylelint-enable max-nesting-depth */
+
   // Theming
   @if ($theme-default-nav == 'dark') {
-    .p-navigation {
+    .p-navigation,
+    .p-navigation--sliding {
       @include vf-navigation-dark-theme;
     }
 
-    .p-navigation.is-light {
+    .p-navigation.is-light,
+    .p-navigation--sliding.is-light {
       @include vf-navigation-light-theme;
     }
   } @else {
-    .p-navigation {
+    .p-navigation,
+    .p-navigation--sliding {
       @include vf-navigation-light-theme;
     }
 
-    .p-navigation.is-dark {
+    .p-navigation.is-dark,
+    .p-navigation--sliding.is-dark {
       @include vf-navigation-dark-theme;
     }
   }
@@ -682,7 +882,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
   $color-navigation-background--hover,
   // color for the navigation highlight bar
   $color-navigation-highlight,
-  $color-navigation-icon
+  $color-navigation-icon,
+  $overlay-target-opacity
 ) {
   background-color: $color-navigation-background;
 
@@ -716,12 +917,25 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     &::after {
       @include vf-icon-chevron($color-navigation-icon);
     }
+    & > .p-navigation__link {
+      &::after {
+        @include vf-icon-chevron($color-navigation-icon);
+      }
+    }
 
     &.is-active > .p-navigation__link {
       background-color: $color-navigation-background--active;
     }
   }
 
+  .p-navigation__item--dropdown-close {
+    & > .p-navigation__link {
+      &::after {
+        @include vf-icon-chevron($color-navigation-icon);
+      }
+    }
+  }
+
   .p-navigation__toggle--search::after,
   .p-navigation__item .p-navigation__link--search-toggle::after {
     @include vf-icon-search($color-navigation-icon);
@@ -751,12 +965,15 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
 
   // on mobile expanded nav needs to match pressed color of the buttons
   &.has-menu-open .p-navigation__nav,
+  &.p-navigation:target .p-navigation__nav,
+  &.p-navigation:target .p-navigation__dropdown,
   &.has-search-open .p-navigation__nav {
-    background-color: $color-navigation-background--active;
+    background-color: $color-navigation-background;
+  }
 
-    @media (min-width: $breakpoint-navigation-threshold) {
-      background-color: transparent;
-    }
+  .p-navigation__dropdown[aria-hidden='false']::before,
+  .p-navigation__dropdown:not([aria-hidden])::before {
+    opacity: $overlay-target-opacity;
   }
 }
 
@@ -768,7 +985,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     $color-navigation-background--active: $colors--light-theme--background-active,
     $color-navigation-highlight: $colors--light-theme--text-default,
     $color-navigation-separator: $colors--light-theme--border-low-contrast,
-    $color-navigation-icon: $colors--light-theme--text-default
+    $color-navigation-icon: $colors--light-theme--text-default,
+    $overlay-target-opacity: 0.33
   );
 }
 
@@ -777,9 +995,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
     $color-navigation-text: $colors--dark-theme--text-default,
     $color-navigation-background: $colors--dark-theme--background-default,
     $color-navigation-background--hover: $colors--dark-theme--background-hover,
-    $color-navigation-background--active: $colors--dark-theme--background-active,
+    $color-navigation-background--active: $colors--dark-theme--background-alt,
     $color-navigation-highlight: $colors--dark-theme--text-default,
     $color-navigation-separator: $colors--dark-theme--border-low-contrast,
-    $color-navigation-icon: $colors--dark-theme--text-default
+    $color-navigation-icon: $colors--dark-theme--text-default,
+    $overlay-target-opacity: 0.75
   );
 }

package/scss/_patterns_rule.scss

@@ -0,0 +1,12 @@
+@import 'settings';
+
+@mixin vf-p-rule {
+  .p-rule,
+  .p-rule--highlight {
+    @extend %u-no-margin--bottom--hr;
+  }
+
+  .p-rule--highlight {
+    @include vf-highlight-bar($color-dark);
+  }
+}

package/scss/_patterns_section.scss

@@ -0,0 +1,15 @@
+@mixin vf-p-section {
+  .p-section {
+    // same as %section-padding--default
+    padding-bottom: $spv--strip-regular * 0.5;
+
+    @media (min-width: $breakpoint-large) {
+      padding-bottom: $spv--strip-regular;
+    }
+  }
+
+  .p-block {
+    // same as %section-padding--shallow
+    padding-bottom: $spv--x-large;
+  }
+}

package/scss/_settings_colors.scss

@@ -18,6 +18,8 @@ $color-caution: #f99b11 !default;
 $color-positive: #0e8420 !default;
 $color-information: #24598f !default;
 
+$color-paper: #f3f3f3 !default;
+
 // for dark themes
 $color-negative-dark: #a11223 !default;
 $color-positive-dark: #008013 !default;

package/scss/_settings_spacing.scss

@@ -75,8 +75,9 @@ $spv--small: $sp-unit !default;
 $spv--medium: $sp-unit * 1.5 !default;
 $spv--large: $sp-unit * 2;
 $spv--x-large: $sp-unit * 3 !default;
+$spv--strip-shallow: $sp-unit * 3 !default;
 $spv--strip-regular: $sp-unit * 8 !default;
-$spv--strip-deep: $sp-unit * 12 !default;
+$spv--strip-deep: $sp-unit * 16 !default;
 
 $sph--x-small: $sp-unit * 0.5 !default; // to be used in place of an inline space between characters/words
 $sph--small: $sp-unit !default;

package/scss/_vanilla.scss

@@ -34,8 +34,10 @@
 @import 'patterns_notifications';
 @import 'patterns_pagination';
 @import 'patterns_pull-quotes';
+@import 'patterns_rule';
 @import 'patterns_search-and-filter';
 @import 'patterns_search-box';
+@import 'patterns_section';
 @import 'patterns_separator';
 @import 'patterns_side-navigation';
 @import 'patterns_side-navigation-expandable';
@@ -92,6 +94,7 @@
   @include vf-p-buttons;
   @include vf-p-card;
   @include vf-p-chip;
+  @include vf-p-section;
   @include vf-p-badge;
   @include vf-p-code-snippet;
   @include vf-p-contextual-menu;
@@ -119,6 +122,7 @@
   @include vf-p-notification;
   @include vf-p-pagination;
   @include vf-p-pull-quotes;
+  @include vf-p-rule;
   @include vf-p-search-and-filter;
   @include vf-p-search-box;
   @include vf-p-segmented-control;