vanilla-framework 3.0.0-alpha.1 → 3.0.0-rc.1

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

@@ -1,5 +1,3 @@
-@use 'sass:math';
-
 @import 'settings';
 @import 'base';
 // Patterns
@@ -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';
@@ -105,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;
-    }
-  }
-}

package/scss/standalone/base.scss

@@ -1,2 +0,0 @@
-@import '../vanilla';
-@include vf-base;

package/scss/standalone/custom.scss

@@ -1,7 +0,0 @@
-// we are testing building Vanilla with custom settings
-
-// using 100% grid to make sure it works if it's not in rem units
-$grid-max-width: 100%;
-
-@import '../vanilla';
-@include vanilla;

package/scss/standalone/dark.scss

@@ -1,11 +0,0 @@
-$theme-default-forms: 'dark';
-$theme-default-hr: 'dark';
-$theme-default-nav: 'dark';
-$theme-default-p-search-box: 'dark';
-$theme-default-p-contextual-menu: 'dark';
-$theme-default-p-divider: 'dark';
-$theme-default-p-inline-list--middot: 'dark';
-
-@import '../vanilla';
-
-@include vanilla;

package/scss/standalone/example.scss

@@ -1,15 +0,0 @@
-// styles specific for the example pages
-
-@import '../vanilla';
-@include vf-u-baseline-grid;
-
-// stylelint-disable selector-max-type -- examples base can use type selectors
-html {
-  background: $colors--light-theme--background-default;
-}
-
-body {
-  background: $colors--light-theme--background-default;
-  margin: 1rem;
-}
-// stylelint-enable selector-max-type

package/scss/standalone/import.scss

@@ -1,2 +0,0 @@
-// for testing if just importing Vanilla builds without errors
-@import '../vanilla';

package/scss/standalone/layouts_fluid-breakout-full.scss

@@ -1,8 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-l-fluid-breakout(14rem, 13rem, 0, '--single-main');
-
-@include vf-p-grid;
-@include vf-p-lists;
-@include vf-p-strip;

package/scss/standalone/layouts_fluid-breakout.scss

@@ -1,8 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-l-fluid-breakout;
-
-@include vf-p-card;
-@include vf-p-grid;
-@include vf-p-lists;

package/scss/standalone/patterns_accordion.scss

@@ -1,6 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-// needed for the example with checkboxes
-@include vf-p-form-tick-elements;
-@include vf-p-accordion;

package/scss/standalone/patterns_article-pagination.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-article-pagination;

package/scss/standalone/patterns_breadcrumbs.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-breadcrumbs;

package/scss/standalone/patterns_buttons.scss

@@ -1,9 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-// needed in buttons icon example
-@include vf-p-icons;
-
-// needed in aria-pressed example
-@include vf-p-contextual-menu;
-@include vf-p-buttons;

package/scss/standalone/patterns_card.scss

@@ -1,9 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-card;
-@include vf-p-grid;
-@include vf-p-strip;
-
-@include vf-u-vertical-spacing;
-@include vf-u-align;

package/scss/standalone/patterns_chip.scss

@@ -1,6 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-chip;
-@include vf-p-icons-common;
-@include vf-p-icon-close;

package/scss/standalone/patterns_code-snippet.scss

@@ -1,6 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-code-snippet;
-
-@include vf-u-hide;

package/scss/standalone/patterns_contextual-menu.scss

@@ -1,9 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-buttons;
-
-// icons are needed for indicator variant
-@include vf-p-icons-common;
-@include vf-p-icon-chevron;
-@include vf-p-contextual-menu;

package/scss/standalone/patterns_divider.scss

@@ -1,7 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-divider;
-
-// grid classes (col-X) needed for divider pattern
-@include vf-p-grid;

package/scss/standalone/patterns_form-password-toggle.scss

@@ -1,19 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-// button styles used in some form examples
-@include vf-p-buttons;
-
-// importing forms and related patterns as they are all used in various examples
-@include vf-p-forms;
-@include vf-p-form-password-toggle;
-
-// icons for password toggle
-@include vf-p-icon-hide;
-@include vf-p-icon-show;
-
-// Add margin utilities
-@include vf-u-margin-collapse;
-
-// Add form validation
-@include vf-p-form-validation;

package/scss/standalone/patterns_form-tick-elements.scss

@@ -1,13 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-// grid required by stacked form example
-@include vf-p-grid;
-
-// button styles used in some form examples
-@include vf-p-buttons;
-@include vf-p-muted-heading;
-@include vf-p-form-tick-elements;
-@include vf-p-form-help-text;
-
-@include vf-u-layout;

package/scss/standalone/patterns_forms.scss

@@ -1,17 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-// grid required by stacked form example
-@include vf-p-grid;
-
-// button styles used in some form examples
-@include vf-p-buttons;
-
-// importing forms and related patterns as they are all used in various examples
-@include vf-p-forms;
-@include vf-p-form-help-text;
-@include vf-p-form-validation;
-@include vf-p-form-tick-elements;
-
-// float utilities used to position buttons in some examples
-@include vf-u-floats;

package/scss/standalone/patterns_grid.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-grid;

package/scss/standalone/patterns_heading-icon.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-heading-icon;

package/scss/standalone/patterns_headings.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-headings;

package/scss/standalone/patterns_icons-additional.scss

@@ -1,104 +0,0 @@
-// This file contains everything needed to render
-// the application icon set only. This is not a standard
-// pattern, but is needed to display this icon set in
-// our examples.
-
-@import '../vanilla';
-@include vf-b-placeholders;
-
-@include vf-p-icons-common;
-
-@include vf-p-icon-applications;
-@include vf-p-icon-controllers;
-@include vf-p-icon-fullscreen;
-@include vf-p-icon-models;
-@include vf-p-icon-machines;
-@include vf-p-icon-pin;
-@include vf-p-icon-units;
-@include vf-p-icon-priority-critical;
-@include vf-p-icon-priority-high;
-@include vf-p-icon-priority-low;
-@include vf-p-icon-priority-medium;
-@include vf-p-icon-priority-negligible;
-@include vf-p-icon-priority-unknown;
-@include vf-p-icon-add-canvas;
-@include vf-p-icon-add-logical-volume;
-@include vf-p-icon-add-partition;
-@include vf-p-icon-back-to-top;
-@include vf-p-icon-begin-downloading;
-@include vf-p-icon-bundle;
-@include vf-p-icon-canvas;
-@include vf-p-icon-change-version;
-@include vf-p-icon-comments;
-@include vf-p-icon-conflict-grey;
-@include vf-p-icon-conflict-resolution-grey;
-@include vf-p-icon-conflict-resolution;
-@include vf-p-icon-conflict;
-@include vf-p-icon-connected;
-@include vf-p-icon-containers;
-@include vf-p-icon-copy-to-clipboard;
-@include vf-p-icon-disconnect;
-@include vf-p-icon-edit;
-@include vf-p-icon-export;
-@include vf-p-icon-exposed;
-@include vf-p-icon-filter;
-@include vf-p-icon-fork;
-@include vf-p-icon-get-link;
-@include vf-p-icon-halfscreen-bar;
-@include vf-p-icon-hide;
-@include vf-p-icon-highlight-off;
-@include vf-p-icon-highlight-on;
-@include vf-p-icon-home;
-@include vf-p-icon-import;
-@include vf-p-icon-in-progress;
-@include vf-p-icon-inspector-debug;
-@include vf-p-icon-loading-steps;
-@include vf-p-icon-lock-locked-active;
-@include vf-p-icon-lock-locked;
-@include vf-p-icon-lock-unlock;
-@include vf-p-icon-maximise-bar;
-@include vf-p-icon-minimise-bar;
-@include vf-p-icon-mount-2;
-@include vf-p-icon-mount;
-@include vf-p-icon-open-terminal;
-@include vf-p-icon-plans;
-@include vf-p-icon-pods;
-@include vf-p-icon-power-error;
-@include vf-p-icon-power-off;
-@include vf-p-icon-power-on;
-@include vf-p-icon-profile;
-@include vf-p-icon-restart;
-@include vf-p-icon-revisions;
-@include vf-p-icon-security;
-@include vf-p-icon-settings;
-@include vf-p-icon-show;
-@include vf-p-icon-sort-both;
-@include vf-p-icon-sort-down;
-@include vf-p-icon-sort-up;
-@include vf-p-icon-starred;
-@include vf-p-icon-status-failed-small;
-@include vf-p-icon-status-in-progress-small;
-@include vf-p-icon-status-in-progress;
-@include vf-p-icon-status-queued-small;
-@include vf-p-icon-status-queued;
-@include vf-p-icon-status-succeeded-small;
-@include vf-p-icon-status-waiting-small;
-@include vf-p-icon-status-waiting;
-@include vf-p-icon-status;
-@include vf-p-icon-submit-bug;
-@include vf-p-icon-success-grey;
-@include vf-p-icon-switcher-dashboard;
-@include vf-p-icon-switcher-environments;
-@include vf-p-icon-switcher;
-@include vf-p-icon-tag;
-@include vf-p-icon-task-outstanding;
-@include vf-p-icon-timed-out-grey;
-@include vf-p-icon-timed-out;
-@include vf-p-icon-topic;
-@include vf-p-icon-unit-pending;
-@include vf-p-icon-unit-running;
-@include vf-p-icon-unmount;
-@include vf-p-icon-unstarred;
-@include vf-p-icon-user-group;
-@include vf-p-icon-video-play;
-@include vf-p-icon-warning-grey;

package/scss/standalone/patterns_icons.scss

@@ -1,7 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-icons;
-
-// for spin animation on the spinner icon
-@include vf-u-animations;

package/scss/standalone/patterns_image.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-image;

package/scss/standalone/patterns_inline-images.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-inline-images;

package/scss/standalone/patterns_label.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-label;

package/scss/standalone/patterns_links.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-links;

package/scss/standalone/patterns_list-tree.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-list-tree;

package/scss/standalone/patterns_lists.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-lists;

package/scss/standalone/patterns_logo-section.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-logo-section;

package/scss/standalone/patterns_matrix.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-matrix;

package/scss/standalone/patterns_media-object.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-media-object;

package/scss/standalone/patterns_modal.scss

@@ -1,9 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-// used in the example
-@include vf-p-heading-icon;
-@include vf-p-modal;
-@include vf-button-negative;
-
-@include vf-u-margin-collapse;

package/scss/standalone/patterns_muted-heading.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-muted-heading;

package/scss/standalone/patterns_navigation.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-navigation;

package/scss/standalone/patterns_notifications.scss

@@ -1,7 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-notification;
-
-// needed in borderless demo
-@include vf-u-margin-collapse;

package/scss/standalone/patterns_pagination.scss

@@ -1,7 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-// p-icon--chevron-down needed as next/prev icon
-@include vf-p-icons-common;
-@include vf-p-icon-chevron;
-@include vf-p-pagination;

package/scss/standalone/patterns_pull-quotes.scss

@@ -1,4 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-pull-quotes;

package/scss/standalone/patterns_search-and-filter.scss

@@ -1,8 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-chip;
-@include vf-p-icon-close;
-@include vf-p-search-and-filter;
-
-@include vf-u-off-screen;

package/scss/standalone/patterns_search-box.scss

@@ -1,15 +0,0 @@
-@import '../vanilla';
-@include vf-base;
-
-@include vf-p-search-box;
-
-// icons are needed for search box buttons
-@include vf-p-icons-common;
-@include vf-p-icon-close;
-@include vf-p-icon-search;
-
-// navigation is used in some examples
-@include vf-p-navigation;
-
-// used by navigation
-@include vf-u-off-screen;