vanilla-framework 3.0.0-alpha.2 → 3.0.0-beta.1

package/package.json

@@ -43,7 +43,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-beta.1",
   "files": [
     "_index.scss",
     "/scss",
@@ -53,8 +53,8 @@
   "dependencies": {
     "@canonical/cookie-policy": "3.3.0",
     "@canonical/latest-news": "1.2.0",
-    "autoprefixer": "10.3.7",
-    "postcss": "8.3.9",
+    "autoprefixer": "10.4.0",
+    "postcss": "8.3.11",
     "postcss-cli": "8.3.1",
     "sass": "1.37.5"
   },

package/scss/_base_button.scss

@@ -26,11 +26,10 @@
     font-weight: $font-weight-regular-text;
     justify-content: center;
     line-height: map-get($line-heights, default-text);
-    margin: 0 0 $input-margin-bottom 0;
+    margin: 0 $sph--large $input-margin-bottom 0;
     padding: $input-vertical-padding $sph--large;
     text-align: center;
     text-decoration: none;
-    width: 100%;
 
     &:active,
     &:focus,
@@ -44,13 +43,8 @@
       opacity: $disabled-element-opacity;
     }
 
-    @media (min-width: $breakpoint-x-small) {
-      margin-right: $sph--large;
-      width: auto;
-
-      &:last-child {
-        margin-right: 0;
-      }
+    &:last-child {
+      margin-right: 0;
     }
 
     &.is-dense {
@@ -81,12 +75,6 @@
     p + p > & {
       margin-top: $spv-nudge-compensation;
     }
-
-    @media (max-width: $breakpoint-x-small - 1) {
-      p & + & {
-        margin-top: $sp-unit + $spv-nudge-compensation;
-      }
-    }
     // stylelint-enable selector-max-type
   }
 
@@ -97,8 +85,6 @@
   }
 
   %vf-button-has-icon {
-    width: auto;
-
     & [class*='p-icon'] {
       margin-left: $sph--small;
       margin-right: $sph--small;

package/scss/_base_forms.scss

@@ -82,7 +82,7 @@
   // stylelint-disable selector-max-type -- base styles can use type selectors
   label {
     cursor: pointer;
-    display: block;
+    display: inline-block;
     margin-bottom: $spv--large - $spv-nudge;
     margin-top: 0;
     max-width: $max-width--default;

package/scss/_base_grid-definitions.scss

@@ -12,13 +12,13 @@
   }
 
   %span-full-grid-on-mobile {
-    @media (max-width: $threshold-4-6-col) {
+    @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) {
+    @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
       grid-column: auto / span $grid-columns-medium;
     }
   }

package/scss/_layouts_application.scss

@@ -3,7 +3,7 @@
 // default max width of the pinned aside panel in the application layout
 $application-layout--aside-panel-max-width: 50vw !default;
 // screen width breakpoint (min-width) at which side navigation is in collapsed mode
-$application-layout--breakpoint-side-nav-collapsed: $breakpoint-medium !default;
+$application-layout--breakpoint-side-nav-collapsed: $breakpoint-small !default;
 // screen width breakpoint (min-width) at which side navigation is in expanded mode
 $application-layout--breakpoint-side-nav-expanded: $breakpoint-large !default;
 // width of the collapsed side navigation

package/scss/_layouts_fluid-breakout.scss

@@ -149,7 +149,7 @@
       grid-column: 2 / -1;
       grid-template-columns: repeat(2, minmax(0, 1fr));
 
-      @media (max-width: $threshold-4-6-col) {
+      @media (max-width: $threshold-4-6-col - 1) {
         grid-template-columns: repeat(1, minmax(0, 1fr));
         width: $l-fluid-breakout-main-child-width;
       }
@@ -163,7 +163,7 @@
       &:nth-child(2) {
         justify-content: flex-end;
 
-        @media (max-width: $threshold-4-6-col) {
+        @media (max-width: $threshold-4-6-col - 1) {
           justify-content: flex-start;
         }
       }

package/scss/_patterns_article-pagination.scss

@@ -55,7 +55,8 @@
     padding-left: $sp-xx-large;
     text-align: left;
 
-    @media (max-width: $breakpoint-x-small) {
+    @media (max-width: $breakpoint-x-small - 1) {
+      margin-right: 0;
       width: auto;
 
       &:only-child {
@@ -83,7 +84,7 @@
     padding-right: $sp-xx-large;
     text-align: right;
 
-    @media (max-width: $breakpoint-x-small) {
+    @media (max-width: $breakpoint-x-small - 1) {
       width: 100%;
     }
 

package/scss/_patterns_buttons.scss

@@ -290,10 +290,7 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
 
 @mixin vf-button-inline {
   [class*='p-button'].is-inline {
-    @media (min-width: $breakpoint-x-small) {
-      margin-left: $sph--large;
-      width: auto;
-    }
+    margin-left: $sph--large;
   }
 }
 

package/scss/_patterns_chip.scss

@@ -82,10 +82,6 @@
       position: relative;
       top: 0.05rem;
 
-      @media (max-width: $breakpoint-x-small) {
-        width: auto;
-      }
-
       [class*='p-icon'] {
         vertical-align: calc(#{0.5 * $cap-height} - #{0.5 * $default-icon-size});
       }

package/scss/_patterns_divider.scss

@@ -10,7 +10,7 @@
   .p-divider__block {
     position: relative;
 
-    @media (max-width: $threshold-6-12-col) {
+    @media (max-width: $threshold-6-12-col - 1) {
       padding-bottom: $spv--large;
       padding-top: $spv--large;
 

package/scss/_patterns_form-password-toggle.scss

@@ -5,12 +5,6 @@
     align-items: flex-start;
     display: flex;
     justify-content: space-between;
-
-    .p-button--base {
-      @media (max-width: $breakpoint-small) {
-        width: auto !important;
-      }
-    }
   }
 
   .p-form-password-toggle__label {

package/scss/_patterns_form-tick-elements.scss

@@ -149,6 +149,7 @@
   // Fix label alignment when text drops to new line
   .p-checkbox,
   .p-radio {
+    display: block;
     padding-left: $sph--large + $form-tick-box-size;
     text-indent: -1 * ($sph--large + $form-tick-box-size);
 

package/scss/_patterns_forms.scss

@@ -17,7 +17,7 @@
     width: 100%;
 
     .p-form__group {
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $threshold-6-12-col) {
         align-items: baseline;
 
         + .p-form__group {
@@ -30,7 +30,7 @@
 
 @mixin vf-p-forms-inline {
   .p-form--inline {
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       align-items: baseline;
       display: inline-flex;
       flex-direction: row;
@@ -42,7 +42,7 @@
     }
 
     .p-form__group {
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $threshold-6-12-col) {
         display: flex;
         flex-shrink: 1;
         width: auto;

package/scss/_patterns_grid.scss

@@ -27,7 +27,7 @@
   }
 
   // mobile grid
-  @media (max-width: $threshold-4-6-col) {
+  @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);
@@ -38,7 +38,7 @@
   }
 
   // tablet grid
-  @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
+  @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
     @for $i from $grid-columns-medium through 1 {
       .#{$grid-medium-col-prefix}#{$i} {
         @include vf-grid-column($i);
@@ -94,11 +94,11 @@
   @each $label, $breakpoint-min, $breakpoint-max, $col-count in $offsets {
     $query: null;
     @if $breakpoint-min == 0 {
-      $query: '(max-width: #{$breakpoint-max})';
+      $query: '(max-width: #{$breakpoint-max - 1})';
     } @else if $breakpoint-max == -1 {
       $query: '(min-width: #{$breakpoint-min})';
     } @else {
-      $query: '(min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max})';
+      $query: '(min-width: #{$breakpoint-min}) and (max-width: #{$breakpoint-max - 1})';
     }
 
     @media #{$query} {
@@ -127,7 +127,7 @@
       position: absolute;
       right: map-get($grid-margin-widths, small);
 
-      @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col) {
+      @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
         left: map-get($grid-margin-widths, medium);
         right: map-get($grid-margin-widths, medium);
       }

package/scss/_patterns_heading-icon.scss

@@ -4,7 +4,7 @@
   .p-heading-icon {
     margin-bottom: $spv--x-large;
 
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $breakpoint-heading-threshold) {
       margin-bottom: 0;
     }
   }
@@ -25,7 +25,7 @@
     margin-top: map-get($nudges, nudge--h3-mobile);
     width: map-get($icon-sizes, heading-icon--small);
 
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $breakpoint-heading-threshold) {
       height: map-get($icon-sizes, heading-icon);
       margin-top: map-get($nudges, nudge--h3);
       width: map-get($icon-sizes, heading-icon);
@@ -38,7 +38,7 @@
       margin-top: $sp-x-small;
       width: map-get($icon-sizes, heading-icon--x-small);
 
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $breakpoint-heading-threshold) {
         height: map-get($icon-sizes, heading-icon--small);
         margin-top: 0;
         width: map-get($icon-sizes, heading-icon--small);

package/scss/_patterns_list-tree.scss

@@ -77,7 +77,6 @@
     margin: 0 0.5rem 0 -1.75rem;
     padding: 0 0.5rem 0 1.75rem;
     transition-duration: 0s;
-    width: auto;
 
     &:hover {
       background: transparent;

package/scss/_patterns_lists.scss

@@ -347,7 +347,7 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
       @extend %vf-row;
       @include vf-b-row-reset;
 
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $threshold-6-12-col) {
         padding-top: $sp-unit;
         position: relative;
 
@@ -368,7 +368,7 @@ $list-status-icon-nudge: 0.3rem; // 0.3rem seems to be a magic number that posit
 // Adaptor class `is-split` to split the items of a list into two columns
 @mixin vf-p-list-split {
   [class*='p-list'].is-split {
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-4-6-col) {
       @supports ((-webkit-columns: 1) or (columns: 1)) {
         column-gap: $sp-x-large;
         columns: 2;

package/scss/_patterns_matrix.scss

@@ -25,24 +25,22 @@
       border-top: none;
     }
 
-    @media (min-width: $breakpoint-small) {
+    @media (min-width: $threshold-4-6-col) {
       display: flex;
       flex-wrap: wrap;
       width: 33.333%;
     }
 
-    @media (min-width: $breakpoint-small) and (max-width: $breakpoint-medium) {
+    @media (min-width: $threshold-4-6-col) and (max-width: $threshold-6-12-col - 1) {
+      flex-direction: column;
+
       &:nth-child(2),
       &:nth-child(3) {
         border-top: none;
       }
     }
 
-    @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
-      flex-direction: column;
-    }
-
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       border-right: 1px solid $color-mid-light;
       padding-left: $spv--large;
       padding-right: $spv--large;
@@ -67,7 +65,7 @@
       }
     }
 
-    @media (min-width: $breakpoint-large) {
+    @media (min-width: $threshold-6-12-col) {
       // 3 items per row
       border-right: 1px solid $color-mid-light;
       width: 33.333%;
@@ -141,7 +139,7 @@
   .p-matrix__desc {
     margin-bottom: $spv-nudge-compensation;
 
-    @media (max-width: $breakpoint-heading-threshold) {
+    @media (max-width: $breakpoint-heading-threshold - 1) {
       margin-top: -#{$sp-unit};
     }
 

package/scss/_patterns_modal.scss

@@ -35,7 +35,7 @@
     right: $sph--x-large;
     width: auto;
 
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       bottom: initial;
       left: initial;
       position: relative;

package/scss/_patterns_pull-quotes.scss

@@ -108,7 +108,7 @@
   .p-pull-quote--large {
     .p-pull-quote__quote {
       &:first-of-type::before {
-        @media (max-width: $breakpoint-heading-threshold) {
+        @media (max-width: $breakpoint-heading-threshold - 1) {
           top: 0.75rem;
         }
       }

package/scss/_patterns_search-box.scss

@@ -6,7 +6,6 @@
     height: calc(#{2 * $spv-nudge + map-get($line-heights, default-text)} - #{2 * $bar-thickness}); // side padding + icon width - focus outline width * 2
     margin: $bar-thickness 0;
     position: relative;
-    width: auto;
 
     &:hover {
       background: inherit;

package/scss/_patterns_side-navigation.scss

@@ -90,9 +90,6 @@
   .p-side-navigation__toggle--in-drawer {
     @extend %vf-button-base;
 
-    // override base button styles that extend button to full width on mobile
-    width: auto;
-
     &::before {
       @extend %icon;
 
@@ -116,7 +113,7 @@
     }
   }
 
-  @media (min-width: $breakpoint-large) {
+  @media (min-width: $threshold-6-12-col) {
     // make whole navigation sticky on large screens
     .p-side-navigation.is-sticky,
     [class*='p-side-navigation--'].is-sticky {

package/scss/_patterns_strip.scss

@@ -134,7 +134,7 @@ $color-suru-slant-left-fallback: rgba(205, 205, 205, 0.14) !default;
       margin-bottom: -$padding;
       padding-bottom: ($padding * 3) !important;
 
-      @media (min-width: $breakpoint-medium) {
+      @media (min-width: $threshold-6-12-col) {
         $padding: 6rem;
 
         background-position: 0% 0%, top right, right 0 bottom $padding, right bottom, 0% 0%;

package/scss/_patterns_table-mobile-card.scss

@@ -10,7 +10,7 @@
       text-align: left;
     }
 
-    @media (max-width: $breakpoint-medium) {
+    @media (max-width: $threshold-6-12-col - 1) {
       @supports (display: grid) {
         thead {
           display: none;
@@ -82,12 +82,5 @@
 
       // stylelint-enable selector-max-type
     }
-
-    @media (max-width: $breakpoint-small) {
-      // stylelint-disable-next-line selector-max-type
-      tr {
-        width: 100%;
-      }
-    }
   }
 }

package/scss/_patterns_table-of-contents.scss

@@ -6,7 +6,7 @@
     font-size: 0.875rem;
     padding: 0 $sp-large;
 
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       border-left: 1px solid $color-mid-light;
       border-top: 0;
       padding: 0 $sp-medium;

package/scss/_settings_breakpoints.scss

@@ -1,8 +1,7 @@
 // Global breakpoints
 $breakpoint-x-small: 460px !default;
 $breakpoint-small: 620px !default;
-$breakpoint-medium: 772px !default;
 $breakpoint-large: 1036px !default;
-$breakpoint-navigation-threshold: $breakpoint-medium !default;
-$breakpoint-heading-threshold: $breakpoint-medium !default;
+$breakpoint-navigation-threshold: $breakpoint-small !default;
+$breakpoint-heading-threshold: $breakpoint-large !default;
 $breakpoint-x-large: 1681px !default; // exclude most laptops

package/scss/_utilities_equal-height.scss

@@ -4,7 +4,7 @@
 @mixin vf-u-equal-height {
   // Default equal-height pattern styles
   .u-equal-height {
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       display: flex;
 
       &.row {

package/scss/_utilities_floats.scss

@@ -6,13 +6,13 @@
     float: right !important;
 
     &--small {
-      @media (max-width: $breakpoint-small) {
+      @media (max-width: $breakpoint-small - 1) {
         float: right !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-medium) and (max-width: $breakpoint-large) {
+      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
         float: right !important;
       }
     }
@@ -28,13 +28,13 @@
     float: left !important;
 
     &--small {
-      @media (max-width: $breakpoint-small) {
+      @media (max-width: $breakpoint-small - 1) {
         float: left !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-medium) and (max-width: $breakpoint-large) {
+      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
         float: left !important;
       }
     }

package/scss/_utilities_hide.scss

@@ -21,13 +21,13 @@
     display: none !important;
 
     &--small {
-      @media (max-width: $breakpoint-medium - 1) {
+      @media (max-width: $breakpoint-small - 1) {
         display: none !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-medium) and (max-width: $breakpoint-large - 1) {
+      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
         display: none !important;
       }
     }
@@ -45,19 +45,19 @@
     @include vf-hide-table-column;
 
     &--small {
-      @media (max-width: $breakpoint-medium - 1) {
+      @media (max-width: $breakpoint-small - 1) {
         @include vf-hide-table-column;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-medium) and (max-width: $breakpoint-large - 1) {
+      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
         @include vf-hide-table-column;
       }
     }
 
     &--large {
-      @media (min-width: $breakpoint-large) {
+      @media (min-width: $breakpoint-small) {
         @include vf-hide-table-column;
       }
     }
@@ -69,13 +69,13 @@
     display: none !important;
 
     &--small {
-      @media (max-width: $breakpoint-medium - 1) {
+      @media (max-width: $breakpoint-small - 1) {
         display: none !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-medium) and (max-width: $breakpoint-large - 1) {
+      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
         display: none !important;
       }
     }

package/scss/_utilities_image-position.scss

@@ -1,7 +1,7 @@
 // Create utility class for positioning images at top or bottom of the section
 @mixin vf-u-image-position {
   .u-image-position {
-    @media (min-width: $breakpoint-medium) {
+    @media (min-width: $threshold-6-12-col) {
       overflow: hidden;
       position: relative;
 

package/scss/_utilities_show.scss

@@ -6,14 +6,14 @@
     display: initial !important;
 
     &--small {
-      @media (max-width: $breakpoint-medium) {
+      @media (max-width: $breakpoint-small - 1) {
         display: inherit !important;
         display: initial !important;
       }
     }
 
     &--medium {
-      @media (min-width: $breakpoint-medium) and (max-width: $breakpoint-large) {
+      @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
         display: inherit !important;
         display: initial !important;
       }

package/scss/_utilities_vertical-spacing.scss

@@ -1,7 +1,4 @@
 @mixin vf-u-vertical-spacing($start: -3, $end: 3) {
-  // adds baseline units between the element it is applied to and relatively positioned elements after it.
-  // useful when you want to vertically align elements after an h3 in one column and elements after a search field in another.
-  // See example in maas-layout.html
   %u-vertical-spacer {
     content: '';
     display: block;
@@ -9,17 +6,14 @@
     position: relative;
   }
 
-  $slug: u-sv !default;
-
   @for $i from $start through $end {
-    .u-sv#{$i} {
-      &::after {
-        @extend %u-vertical-spacer;
-        // Due to margin collapse, if elements beneath this have a margin top, the margin of this and the next item will be summed up.
-        // For predictable results, use single margin direction (https://csswizardry.com/2012/06/single-direction-margin-declarations/)
-        // From vanilla 1.7 forward, margin direction is bottom.
+    @if $i != 0 {
+      .u-sv#{$i} {
+        &::after {
+          @extend %u-vertical-spacer;
 
-        margin-top: calc(#{$sp-unit * $i} - 1px); // subtracting the element height, which is set to 1px above.
+          margin-top: calc(#{$sp-unit * $i} - 1px); // subtracting the element height, which is set to 1px above.
+        }
       }
     }
   }

package/scss/_vanilla.scss

@@ -21,7 +21,6 @@
 @import 'patterns_headings';
 @import 'patterns_icons';
 @import 'patterns_image';
-@import 'patterns_inline-images';
 @import 'patterns_label';
 @import 'patterns_links';
 @import 'patterns_list-tree';
@@ -103,7 +102,6 @@
   @include vf-p-form-password-toggle;
   @include vf-p-icons;
   @include vf-p-image;
-  @include vf-p-inline-images;
   @include vf-p-label;
   @include vf-p-links;
   @include vf-p-list-tree;

package/scss/_patterns_inline-images.scss

@@ -1,37 +0,0 @@
-@import 'settings';
-
-// Image grid to showcase group of images
-@mixin vf-p-inline-images {
-  .p-inline-images {
-    @extend %vf-clearfix;
-
-    display: block;
-    list-style: none; // if list is used as wrapper
-    margin-left: 0;
-    padding-left: 0;
-    text-align: center;
-  }
-
-  .p-inline-images__item {
-    display: inline-block;
-    margin: 1rem;
-    overflow: hidden;
-    text-align: center;
-    vertical-align: middle;
-
-    @media (min-width: $breakpoint-medium) {
-      margin: 1.875rem;
-    }
-  }
-
-  .p-inline-images__logo {
-    max-height: map-get($icon-sizes, thumb);
-    max-width: 7rem;
-    width: auto;
-
-    @media (min-width: $breakpoint-medium) {
-      max-height: 5.5rem;
-      max-width: 9rem;
-    }
-  }
-}