vanilla-framework 3.0.0-alpha.2 → 3.0.0

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;
-    }
-  }
-}