vanilla-framework 4.14.0 → 4.16.0

package/scss/_patterns_equal-height-row.scss

@@ -1,12 +1,36 @@
+/*
+  @classreference
+  equal-height-row:
+    Equal height row:
+      .p-equal-height-row:
+        Main element of the equal height row component.
+      "&.has-divider-1":
+        Cross-column divider shown between the first and second grid rows.
+      "&.has-divider-2":
+        Cross-column divider shown between the second and third grid rows.
+      "&.has-divider-3":
+        Cross-column divider shown between the third and fourth grid rows.
+      .p-equal-height-row--wrap:
+        Wraps contents such that two items appear per row on medium screen sizes.
+    Column:
+      .p-equal-height-row__col:
+        Column element within an equal height row.
+    Item:
+      .p-equal-height-row__item:
+        Item element within an equal height row column.
+*/
+
 @import 'settings';
 
 @mixin vf-p-equal-height-row {
-  .p-equal-height-row {
+  .p-equal-height-row,
+  .p-equal-height-row--wrap {
     @extend %vf-row;
+
     position: relative;
 
     .p-equal-height-row__col {
-      // smaller screens each column will have border top by default
+      // At smaller sizes, each column will have top border by default
       border-top-color: $colors--theme--border-low-contrast;
       border-top-style: solid;
       border-top-width: 1px;
@@ -15,21 +39,24 @@
       grid-row: span 4;
       grid-template-rows: subgrid;
       margin-bottom: $spv--small;
-      margin-top: -1px;
       position: relative;
 
       @media screen and ($breakpoint-small <= width < $breakpoint-large) {
         grid-column: span $grid-columns-medium;
         grid-template-columns: subgrid;
 
-        // for medium screen, each column item will take half of the available cols from the parent grid
+        // At medium size, each column item will take half of the available
+        // cols from the parent grid
         .p-equal-height-row__item {
           grid-column: span calc($grid-columns-medium / 2);
         }
 
-        // for medium screen, position the first column item on the left of the grid
+        // At medium size, position the first column item on the left of the
+        // grid
         .p-equal-height-row__item:first-child {
-          grid-row: span 100; // this needs to be sufficiently large so remaining column items won't get stretched
+          // This needs to be sufficiently large so remaining column items won't
+          // get stretched
+          grid-row: span 100;
         }
       }
 
@@ -42,63 +69,80 @@
 
     // DIVIDERS
 
-    // For each row or column grid we only have access to two pseudo elements
-    // if 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after)
-    // if 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before)
+    // For each row or column grid we only have access to two pseudo elements:
+    // If 1st-divider (::before) is present, assume 2nd-divider (::after) isn't, then 3rd-divider must be (::after)
+    // If 2nd-divider (::after) is present, assume 1st-divider (::before) isn't, then 3rd-divider must be (::before)
     &.has-divider-1::before,
     &.has-divider-2::after,
     &.has-divider-3:not(.has-divider-1)::before,
     &.has-divider-3:not(.has-divider-2)::after {
-      // row level dividers are not visible on smaller screen sizes
       @extend %vf-pseudo-border;
-      background-color: $colors--theme--border-low-contrast; // override border color to be low contrast
+
+      // Override border color to be low contrast
+      background-color: $colors--theme--border-low-contrast;
+      // Row-level dividers are not visible on smaller screen sizes
       display: none;
-    }
+      grid-column-end: span 12;
+      grid-column-start: 1;
+      margin: auto;
 
-    @media screen and (width >= $breakpoint-large) {
-      &.has-divider-1::before,
-      &.has-divider-2::after,
-      &.has-divider-3:not(.has-divider-1)::before,
-      &.has-divider-3:not(.has-divider-2)::after {
+      @media screen and (width >= $breakpoint-large) {
         display: block;
-        grid-column-end: span 12;
-        grid-column-start: 1;
-        margin: auto;
       }
+    }
 
-      &.has-divider-1::before {
-        grid-row: 2;
-      }
+    &.has-divider-1::before {
+      grid-row: 2;
+    }
 
-      &.has-divider-2::after {
-        grid-row: 3;
-      }
+    &.has-divider-2::after {
+      grid-row: 3;
+    }
 
-      // when 3rd-divider is present and 1st-divider is not present
-      &.has-divider-3:not(.has-divider-1)::before,
-      // when 3rd-divider is present and 2nd-divider is not present
-      &.has-divider-3:not(.has-divider-2)::after,
-      // when only 3rd-divider is present
-      &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::before {
-        grid-row: 4;
-      }
+    // When 3rd-divider is present and 1st-divider is not present
+    &.has-divider-3:not(.has-divider-1)::before,
+    // When 3rd-divider is present and 2nd-divider is not present
+    &.has-divider-3:not(.has-divider-2)::after,
+    // When only 3rd-divider is present
+    &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::before {
+      grid-row: 4;
+    }
 
-      &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::after {
-        display: none;
-      }
+    &.has-divider-3:not(.has-divider-1):not(.has-divider-2)::after {
+      display: none;
     }
   }
 
-  // support for 25-75 split on large screen size for this pattern
-  .row--25-75-on-large > .col,
-  .row > .col-9 {
-    & .p-equal-height-row {
-      grid-template-columns: repeat($grid-columns-small, minmax(0, 1fr));
+  // WRAP VARIANT
 
+  // This variant displays multiple columns side-by-side and wraps them at
+  // medium size; we have to unset some grid properties from the default
+  // variant to enable this functionality
+  .p-equal-height-row--wrap {
+    .p-equal-height-row__col {
       @media screen and ($breakpoint-small <= width < $breakpoint-large) {
-        grid-template-columns: repeat($grid-columns-medium, minmax(0, 1fr));
+        // Fit 2 columns onto each row at medium size
+        grid-column: span calc($grid-columns-medium / 2);
+        grid-template-columns: none;
+
+        .p-equal-height-row__item {
+          grid-column: auto;
+        }
+
+        .p-equal-height-row__item:first-child {
+          grid-row: auto;
+        }
       }
+    }
+  }
 
+  // ADVANCED GRID SUPPORT
+
+  // Support for 25-75 split on large screen size
+  .row--25-75-on-large > .col,
+  .row > .col-9 {
+    & .p-equal-height-row,
+    & .p-equal-height-row--wrap {
       @media screen and (width >= $breakpoint-large) {
         grid-template-columns: repeat(9, minmax(0, 1fr));
       }

package/scss/_patterns_grid.scss

@@ -39,7 +39,7 @@
   // (see https://github.com/canonical/vanilla-framework/issues/3199)
   .grid-demo .col,
   .grid-demo [class*='#{$grid-column-prefix}'] {
-    background: transparentize($color-negative, 0.9);
+    background: $colors--theme--background-negative-default;
     margin-bottom: $spv--small;
   }
 
@@ -167,11 +167,12 @@
 
   // variants
 
+  // deprecated, will be removed in v5
   .row.is-bordered {
     position: relative;
 
     &::before {
-      background: $color-mid-light;
+      background: $colors--theme--border-low-contrast;
       content: '';
       height: 1px;
       left: map-get($grid-margin-widths, small);
@@ -319,6 +320,77 @@
     }
   }
 
+  // 75/25 split on medium and large screens
+  .row--75-25 {
+    @extend %vf-row;
+
+    > .col {
+      @include vf-grid-column($grid-columns-small);
+
+      @media (min-width: $threshold-4-6-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column(4);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column(2);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-column(6);
+        }
+      }
+
+      @media (min-width: $threshold-6-12-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column($col-75);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column($col-25);
+        }
+      }
+    }
+  }
+
+  .row--75-25-on-medium {
+    @extend %vf-row;
+
+    > .col {
+      @media ($threshold-4-6-col <= width < $threshold-6-12-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column(4);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column(2);
+        }
+
+        // if there is only one column, use the whole width
+        &:only-of-type {
+          @include vf-grid-column(6);
+        }
+      }
+    }
+  }
+
+  .row--75-25-on-large {
+    @extend %vf-row;
+
+    > .col {
+      @media (min-width: $threshold-6-12-col) {
+        &:nth-of-type(1) {
+          @include vf-grid-column($col-75);
+        }
+
+        &:nth-of-type(2) {
+          @include vf-grid-column($col-25);
+        }
+      }
+    }
+  }
+
   .row--25-25-50 {
     @extend %vf-row;
 

package/scss/_patterns_icons.scss

@@ -130,21 +130,23 @@
 
 @mixin vf-p-icon-chevron {
   .p-icon--chevron-up {
-    transform: rotate(180deg);
-  }
-  .p-icon--chevron-left {
-    transform: rotate(90deg);
+    @include vf-icon-chevron-up-themed;
   }
   .p-icon--chevron-right {
-    transform: rotate(-90deg);
+    @include vf-icon-chevron-right-themed;
+  }
+  .p-icon--chevron-down {
+    @include vf-icon-chevron-down-themed;
+  }
+  .p-icon--chevron-left {
+    @include vf-icon-chevron-left-themed;
   }
 
-  .p-icon--chevron-left,
+  .p-icon--chevron-up,
   .p-icon--chevron-right,
   .p-icon--chevron-down,
-  .p-icon--chevron-up {
+  .p-icon--chevron-left {
     @extend %icon;
-    @include vf-icon-chevron-themed;
   }
 }
 

package/scss/_patterns_image.scss

@@ -4,6 +4,8 @@
     Image container:
       .p-image-container:
         Main element of the image component.
+      "&.is-cover":
+        Cover variant, to be used to set the `.p-image-container__image` within to cover the container.
       "&.is-highlighted":
         Highlighted variant, to be used to highlight contents.
       .p-image-container--16-9:
@@ -16,6 +18,8 @@
         Wraps contents in a container with an aspect ratio of 2.4:1.
       .p-image-container--square:
         Wraps contents in a container with an aspect ratio of 1:1.
+      .p-image-container--(16-9|3-2|2-3|cinematic|square)-on-(small|medium|large):
+        Wraps contents in a container with the specified aspect ratio on the specified breakpoint.
     Image:
       .p-image-container__image:
         Image element within an image container.
@@ -23,6 +27,54 @@
 
 @import 'settings';
 
+// Mapping of aspect ratio class names to their `aspect-ratio` values (width / height).
+$aspect-ratios: (
+  '16-9': calc(16 / 9),
+  '3-2': calc(3 / 2),
+  '2-3': calc(2 / 3),
+  'cinematic': 2.4,
+  'square': 1,
+);
+
+@mixin aspect-ratio-classes {
+  @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+    .p-image-container--#{$aspect-ratio} {
+      aspect-ratio: $aspect-ratio-value;
+    }
+  }
+
+  @each $breakpoint-name, $breakpoint-bounds-pair in $breakpoint-bounds {
+    $min-width: map-get($breakpoint-bounds-pair, min);
+    $max-width: map-get($breakpoint-bounds-pair, max);
+
+    @if $min-width and $max-width {
+      @media ($min-width <= width < $max-width) {
+        @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+          .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
+            aspect-ratio: $aspect-ratio-value;
+          }
+        }
+      }
+    } @else if $min-width {
+      @media (width >= $min-width) {
+        @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+          .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
+            aspect-ratio: $aspect-ratio-value;
+          }
+        }
+      }
+    } @else if $max-width {
+      @media (width < $max-width) {
+        @each $aspect-ratio, $aspect-ratio-value in $aspect-ratios {
+          .p-image-container--#{$aspect-ratio}-on-#{$breakpoint-name} {
+            aspect-ratio: $aspect-ratio-value;
+          }
+        }
+      }
+    }
+  }
+}
+
 @mixin vf-p-image {
   .p-image-container,
   [class^='p-image-container--'] {
@@ -52,21 +104,7 @@
     }
   }
 
-  .p-image-container--16-9 {
-    aspect-ratio: 16/9;
-  }
-  .p-image-container--3-2 {
-    aspect-ratio: 3/2;
-  }
-  .p-image-container--2-3 {
-    aspect-ratio: 2/3;
-  }
-  .p-image-container--cinematic {
-    aspect-ratio: 2.4/1;
-  }
-  .p-image-container--square {
-    aspect-ratio: 1/1;
-  }
+  @include aspect-ratio-classes;
 
   // Deprecated; will be removed in v5
   .p-image--bordered {

package/scss/_patterns_links.scss

@@ -41,7 +41,7 @@
     top: -999px;
 
     &:focus {
-      @include vf-focus;
+      @include vf-focus-themed;
 
       left: 0;
       padding: $spv--x-small;

package/scss/_patterns_list-tree.scss

@@ -1,87 +1,93 @@
 @import 'settings';
 
 @mixin vf-p-list-tree {
-  %list-tree-icon {
-    $icon-size: 0.9375rem; // 15px
-    background: {
-      position: center;
-      repeat: no-repeat;
-    }
+  $list-tree-toggle-icon-size: 1rem;
+  $list-tree-item-indent-size: calc($sph--x-large + map-get($icon-sizes, small) / 2);
 
+  %list-tree-icon {
     content: ' ';
     display: block;
-    height: $icon-size;
-    left: -0.75rem;
+    height: $list-tree-toggle-icon-size;
+    left: 0;
     pointer-events: none;
     position: absolute;
-    top: 0.4rem;
-    width: $icon-size;
+    top: 0.3rem;
+    width: $list-tree-toggle-icon-size;
+  }
+
+  %list-tree-expand-icon {
+    @extend %list-tree-icon;
+    @include vf-icon-chevron-right-themed;
+  }
+
+  %list-tree-collapse-icon {
+    @extend %list-tree-icon;
+    @include vf-icon-chevron-down-themed;
+  }
+
+  .p-list-tree__link,
+  .p-list-tree__toggle {
+    color: $colors--theme--text-default;
+    cursor: pointer;
+
+    &:hover {
+      color: $colors--theme--link-default;
+      text-decoration: underline;
+    }
+
+    &.is-active {
+      color: $colors--theme--link-default;
+    }
   }
 
   .p-list-tree {
-    border-left: 1px solid $color-mid-light;
     list-style-type: none;
-    margin-left: $sp-medium;
-    padding: 0 0 0 $sp-x-small;
+    margin-left: $sp-x-small;
+    padding-left: $sph--small;
 
     .p-list-tree {
       display: none;
-      margin-left: 0;
+      margin: 0;
+      padding: 0;
 
       &[aria-hidden='false'] {
         display: block;
       }
 
-      &[aria-hidden='false']::after {
-        @extend %list-tree-icon;
-
-        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='15' width='15' viewBox='0 0 15 15'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h15v15H0z'/%3E%3C/defs%3E%3Cg fill-rule='evenodd' fill='none'%3E%3Cuse xlink:href='%23a' fill='%23FFF'/%3E%3Cpath stroke='%23888' d='M.5.5h14v14H.5z'/%3E%3Cpath fill='%23888' d='M4 8V7h7v1z'/%3E%3C/g%3E%3C/svg%3E");
-        // At this point we need to push this icon above the --group icon.
-        z-index: 1;
+      &[aria-hidden='false']::before {
+        @extend %list-tree-collapse-icon;
       }
     }
   }
 
   .p-list-tree__item {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     margin-top: $sp-xx-small;
-    padding-left: 0.8rem;
+    padding-left: $list-tree-item-indent-size;
     position: relative;
+  }
 
+  .p-list-tree__toggle[aria-expanded='false'] {
     &::before {
-      background: $color-mid-light;
-      content: ' ';
-      display: block;
-      height: 1px;
-      left: -$sp-x-small;
-      pointer-events: none;
-      position: absolute;
-      top: 0.8rem;
-      width: 0.625rem;
+      @extend %list-tree-expand-icon;
     }
   }
 
-  .p-list-tree__item--group::after {
-    @extend %list-tree-icon;
-
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='15' width='15' viewBox='0 0 15 15'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h15v15H0z'/%3E%3C/defs%3E%3Cg fill-rule='evenodd' fill='none'%3E%3Cuse xlink:href='%23a' fill='%23FFF'/%3E%3Cpath stroke='%23888' d='M.5.5h14v14H.5z'/%3E%3Cpath fill='%23888' d='M7 4h1v7H7z'/%3E%3Cpath fill='%23888' d='M4 8V7h7v1z'/%3E%3C/g%3E%3C/svg%3E");
-  }
-
   .p-list-tree__toggle {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     background: transparent;
     border: 0;
     font-weight: normal;
-    margin: 0 0.5rem 0 -1.75rem;
-    padding: 0 0.5rem 0 1.75rem;
+    margin: 0 0 0 (-$list-tree-item-indent-size);
+    padding: 0 $sph--small 0 $list-tree-item-indent-size;
     transition-duration: 0s;
 
+    // Hide the default button styling for toggles
+    &[aria-expanded='true'],
     &:hover {
-      background: transparent;
-      color: $color-link;
-      text-decoration: underline;
+      background: $colors--theme--background-default;
     }
   }
 }

package/scss/_patterns_lists.scss

@@ -3,24 +3,24 @@ $list-status-icon-height: $default-icon-size;
 $list-step-bullet-margin: $sph--x-large;
 
 @mixin vf-p-list-placeholders {
-  // container for stepped lists (`ol`)
-  // defines the layout and resets the native browser counter
+  // Container for .p-stepped-list and .p-stepped-list--detailed ordered lists;
+  // Defines the layout and resets a custom counter
   %numbered-step-container {
-    counter-reset: list-item;
+    counter-reset: p-stepped-list-counter;
     display: flex;
     flex-direction: column;
     list-style: none;
     padding-left: 0;
   }
 
-  // list item for stepped lists (`li`)
-  // increments the default browser counter
+  // List item for .p-stepped-list and .p-stepped-list--detailed ordered lists;
+  // Increments the custom counter
   %numbered-step-item {
-    counter-increment: list-item;
+    counter-increment: p-stepped-list-counter;
   }
 
-  // title for stepped lists
-  // displays the title and step counter
+  // Title for .p-stepped-list and .p-stepped-list--detailed ordered lists;
+  // Displays the title and step counter
   %numbered-step-title {
     list-style: none;
     margin-left: 0;
@@ -28,7 +28,7 @@ $list-step-bullet-margin: $sph--x-large;
     position: relative;
 
     &::before {
-      content: counter(list-item) '.';
+      content: counter(p-stepped-list-counter) '.';
       display: block;
       height: map-get($line-heights, default-text);
       left: 0;
@@ -39,16 +39,30 @@ $list-step-bullet-margin: $sph--x-large;
     }
   }
 
-  // used with .p-list--nested-counter
+  // Styles for .p-list--nested-counter
   %nested-counter {
     // Counter is named and it will be reset for each "ol" element.
-    counter-reset: list-item;
+    counter-reset: p-list-nested-counter-top;
+
+    li {
+      counter-increment: p-list-nested-counter-top;
+    }
+
     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;
+      content: counter(p-list-nested-counter-top) '. ';
+    }
+
+    // Counter is named and it will be reset for each nested "ol" element.
+    li ol {
+      counter-reset: p-list-nested-counter-nested;
+    }
+
+    li ol li {
+      counter-increment: p-list-nested-counter-nested;
+    }
+
+    li ol li::marker {
+      content: counter(p-list-nested-counter-top) '.' counter(p-list-nested-counter-nested) '. ';
     }
   }
 
@@ -80,7 +94,10 @@ $list-step-bullet-margin: $sph--x-large;
     top: $spv--small;
   }
 
+  // Styles for .p-list--divided ordered lists
   %vf-list-item-ordered {
+    counter-increment: p-list-divided-counter;
+
     &::marker {
       content: none;
       display: none;
@@ -88,9 +105,32 @@ $list-step-bullet-margin: $sph--x-large;
 
     &::before {
       color: $colors--theme--text-default;
-      content: counters(list-item, '.') '. ';
+      // If .p-list--divided ordered list is not within stepped list, display
+      // counter as unique whole number
+      content: counter(p-list-divided-counter) '.';
       display: inline-block;
       text-align: right;
+
+      // If .p-list--divided ordered list is within a stepped list, display
+      // counter as decimal nested under parent number
+      .p-stepped-list &,
+      .p-stepped-list--detailed & {
+        content: counter(p-stepped-list-counter) '.' counter(p-list-divided-counter) '.';
+      }
+    }
+
+    // If .p-list--divided is within another .p-list--divided, display counter
+    // as decimal nested under parent number
+    ol.p-list--divided {
+      counter-reset: p-list-divided-nested-counter;
+
+      .p-list__item {
+        counter-increment: p-list-divided-nested-counter;
+
+        &::before {
+          content: counter(p-list-divided-counter) '.' counter(p-list-divided-nested-counter) '.';
+        }
+      }
     }
   }
 
@@ -187,6 +227,7 @@ $list-step-bullet-margin: $sph--x-large;
 
   // stylelint-disable selector-max-type -- we want to target ordered lists
   ol.p-list--divided {
+    counter-reset: p-list-divided-counter;
     list-style: none;
 
     .p-list__item {