vanilla-framework 2.36.0 → 3.0.0-beta.1

package/scss/_settings_spacing.scss

@@ -1,11 +1,7 @@
-// Density multiplier
-$multi: 2 !default;
-
-// Options
-$pad-lists: true !default; // Adds padding to list items
+@use 'sass:math';
 
 // Typographic scale settings
-$ms-ratio: 16 / 14 !default;
+$ms-ratio: math.div(16, 14) !default;
 $sp-unit-ratio: 0.5 !default;
 
 // Baseline grid settings
@@ -73,71 +69,53 @@ $browser-rounding-compensations: (
   h1: 0.001rem,
 ) !default;
 
-////////////////////////////////////////////////////////
-// Variables connecting spacings that should be identical
-
-// 1. VERTICAL SPACING
-// 1.1 Vertical spacing inside components
-$spv-inner--x-small: $sp-unit * 0.5 !default; // buttons margins inside table,
-$spv-inner--x-small--scaleable: $spv-inner--x-small * $multi !default;
-$spv-inner--small: $sp-unit !default;
-$spv-inner--scaleable: $sp-unit * $multi !default; // can be deleted for 3.0
-$spv-inner--medium: $sp-unit * 1.5 !default; //vertical padding in: navigation, tabs
-$spv-inner--large: $sp-unit * 2;
-
-// 1.2 Vertical spacing between components
-$spv-outer--small: $sp-unit !default; //labels
-$spv-outer--small-scaleable: $sp-unit * $multi !default;
-$spv-outer--medium: $sp-unit * 2 !default;
-$spv-outer--scaleable: $sp-unit * (1 + $multi) !default;
-
-// 1.3 Vertical spacing between a group of components and its wrapper - strips, views, entire page
-$spv-outer--shallow-scaleable: $spv-outer--scaleable !default;
-$spv-outer--regular-scaleable: $sp-unit * 2 * (2 + $multi) !default;
-$spv-outer--deep-scaleable: $sp-unit * 2 * (4 + $multi) !default;
-
-// 2. HORIZONTAL SPACING
-// 2.1 Horizontal spacing inside components
-$sph-inner--x-small: $sp-unit * 0.5 !default; // Not currently used
-$sph-inner--small: $sp-unit !default; // input-elements
-$sph-inner: $sp-unit * 2 !default; // buttons, accordions, tabs, menu, card padding, stepped-list bullet offset
-$sph-inner--large: $sp-unit * 3 !default;
-// 2.2 Horizontal spacing outside components
-$sph-outer: $sph-inner !default;
-$sph-outer--large: $sp-unit * 3 !default; // checboxes, radios, list bullets
+// Main spacing variables. spv stands spacing-vertical; sph stands for spacing-horizontal.
+
+$spv--x-small: $sp-unit * 0.5 !default;
+$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-regular: $sp-unit * 8 !default;
+$spv--strip-deep: $sp-unit * 12 !default;
+
+$sph--small: $sp-unit !default;
+$sph--large: $sp-unit * 2 !default;
+$sph--x-large: $sp-unit * 3 !default;
 
 // Space after text elements
 $sp-after: (
-  h1: $spv-outer--small-scaleable,
-  h2: $spv-outer--small-scaleable,
-  h3: $spv-outer--small-scaleable,
-  h4: $spv-outer--small-scaleable,
-  p: $spv-outer--scaleable,
-  p-dense: $spv-outer--scaleable - $sp-unit,
-  h1-mobile: $spv-outer--small-scaleable,
-  h2-mobile: $spv-outer--small-scaleable,
-  h3-mobile: $spv-outer--small-scaleable,
-  h4-mobile: $spv-outer--small-scaleable,
-  small: $spv-outer--small-scaleable,
-  small--dense: $spv-outer--small-scaleable,
-  x-small: $spv-outer--small-scaleable,
+  h1: $spv--large,
+  h2: $spv--large,
+  h3: $spv--large,
+  h4: $spv--large,
+  p: $spv--x-large,
+  p-dense: $spv--large,
+  h1-mobile: $spv--large,
+  h2-mobile: $spv--large,
+  h3-mobile: $spv--large,
+  h4-mobile: $spv--large,
+  small: $spv--large,
+  small--dense: $spv--large,
+  x-small: $spv--large,
   default-text: $sp-unit,
 ) !default;
 
 // commonly occuring calculations available as variables
 $spv-nudge: map-get($nudges, nudge--p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
 $spv-nudge-compensation: $sp-unit - $spv-nudge !default;
-$input-margin-bottom: $sp-unit * (2 + $multi) - $spv-nudge * 2;
+$input-margin-bottom: $sp-unit * 4 - $spv-nudge * 2;
 $input-vertical-padding: calc(#{$spv-nudge} - 1px);
 
-$max-width--default: 40em !default;
+// tick element variables
+$form-tick-box-size: 1rem;
+$form-tick-height: 0.375rem;
+$form-tick-offset-top: 0.1875rem;
+$form-tick-box-nudge: 0.15rem; // to nudge the tick box a bit below baseline (to correctly align with default text size)
+$form-radio-inner-circle-diameter: 0.375rem;
+$form-radio-circle-offset: 0.5 * ($form-tick-box-size - $form-radio-inner-circle-diameter);
 
-$max-widths: (
-  long: $max-width--default,
-  default: $max-width--default,
-  heading--long: $max-width--default,
-  heading--short: $max-width--default,
-) !default;
+$max-width--default: 40em !default;
 
 $icon-sizes: (
   accordion: $sp-unit * 1.5,
@@ -151,7 +129,7 @@ $icon-sizes: (
 
 $default-icon-size: map-get($icon-sizes, default);
 
-$table-cell-vertical-padding: $spv-inner--x-small--scaleable;
+$table-cell-vertical-padding: $spv--small;
 
 // generic units
 $sp-xx-small: $sp-unit * 0.25 !default;

package/scss/_settings_system.scss

@@ -1,7 +1 @@
-// Global system settings
-@if function-exists(vanilla-version) {
-  $app-version: vanilla-version();
-} @else {
-  // update the fallback with major releases
-  $app-version: '2.0.0' !default;
-}
+$app-version: '2.0.0' !default;

package/scss/_utilities_baseline-grid.scss

@@ -36,7 +36,7 @@
   // stylelint-enable selector-max-type
 
   .u-baseline-grid__toggle {
-    bottom: $spv-outer--scaleable;
+    bottom: $spv--x-large;
     position: fixed;
     right: $sp-unit * 3;
     z-index: 201;

package/scss/_utilities_embedded-media.scss

@@ -4,8 +4,8 @@
 @mixin vf-u-embedded-media {
   .u-embedded-media {
     height: 0;
-    margin-bottom: $spv-outer--scaleable;
-    margin-top: $spv-inner--small;
+    margin-bottom: $spv--x-large;
+    margin-top: $spv--small;
     max-width: 100%;
     overflow: hidden;
     padding-bottom: 56.25%;

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;
       }
     }
@@ -65,17 +65,17 @@
   // stylelint-enable selector-max-type
 
   // expanding table uses flex layout, so use standard u-hide for it
-  .p-table-expanding .u-hide {
+  .p-table--expanding .u-hide {
     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

@@ -3,21 +3,17 @@
 // Show elements with explicit breakpoints
 @mixin vf-u-show {
   .u-show {
-    // We keep inherit for IE that doesn't support `initial`.
-    // It's not ideal (makes things inline/block based on their parent, not their own initial value),
-    // but at least makes stuff visible again.
-    display: inherit !important;
     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

@@ -8,8 +8,6 @@
 @import 'patterns_buttons';
 @import 'patterns_card';
 @import 'patterns_chip';
-@import 'patterns_code-copyable';
-@import 'patterns_code-numbered';
 @import 'patterns_code-snippet';
 @import 'patterns_contextual-menu';
 @import 'patterns_divider';
@@ -23,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';
@@ -34,7 +31,6 @@
 @import 'patterns_modal';
 @import 'patterns_muted-heading';
 @import 'patterns_navigation';
-@import 'patterns_subnav';
 @import 'patterns_notifications';
 @import 'patterns_pagination';
 @import 'patterns_pull-quotes';
@@ -92,8 +88,6 @@
   @include vf-p-buttons;
   @include vf-p-card;
   @include vf-p-chip;
-  @include vf-p-code-copyable;
-  @include vf-p-code-numbered;
   @include vf-p-code-snippet;
   @include vf-p-contextual-menu;
   @include vf-p-divider;
@@ -101,9 +95,6 @@
   @include vf-p-form-validation;
   @include vf-p-form-tick-elements;
   @include vf-p-forms;
-  @include deprecate('3.0.0', 'vf-p-grid-modifications mixin will be removed') {
-    @include vf-p-grid-modifications;
-  }
   @include vf-p-grid;
   @include vf-p-heading-icon;
   @include vf-p-headings;
@@ -111,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;
@@ -122,7 +112,6 @@
   @include vf-p-modal;
   @include vf-p-muted-heading;
   @include vf-p-navigation;
-  @include vf-p-subnav;
   @include vf-p-notification;
   @include vf-p-pagination;
   @include vf-p-pull-quotes;