Reloacated old code back for float, text alignment and visibility classes

This is specific commit to let users dont have jitters. The new code for these prototypes has been created but won't be added untill 6.5 and the user's will be provided a clear cut depreciation notice that this will be removed from v6.5.
Within this commit i have added the old code back and commented out the new code for float, text alignment and visibility classes

diff --git a/scss/components/_float.scss b/scss/components/_float.scss
new file mode 100644 (file)
index 0000000..811f38f
--- /dev/null
+++ b/scss/components/_float.scss
@@ -0,0 +1,27 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group float
+////
+
+@mixin foundation-float-classes {
+  .float-left {
+    float: left !important;
+  }
+
+  .float-right {
+    float: right !important;
+  }
+
+  .float-center {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .clearfix {
+    @include clearfix;
+  }
+}
\ No newline at end of file

diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
new file mode 100644 (file)
index 0000000..060c022
--- /dev/null
+++ b/scss/components/_visibility.scss
@@ -0,0 +1,132 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+/// Hide an element by default, only displaying it above a certain screen size.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin show-for($size) {
+  $size: map-get($breakpoints, $size);
+  $size: -zf-bp-to-em($size) - (1 / 16);
+
+  @include breakpoint($size down) {
+    display: none !important;
+  }
+}
+
+/// Hide an element by default, only displaying it within a certain breakpoint.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin show-for-only($size) {
+  $lower-bound-size: map-get($breakpoints, $size);
+  $upper-bound-size: -zf-map-next($breakpoints, $size);
+
+  // more often than not this will be correct, just one time round the loop it won't so set in scope here
+  $lower-bound: -zf-bp-to-em($lower-bound-size) - (1 / 16);
+  // test actual lower-bound-size, if 0 set it to 0em
+  @if strip-unit($lower-bound-size) == 0 {
+    $lower-bound: -zf-bp-to-em($lower-bound-size);
+  }
+
+  @if $upper-bound-size == null {
+    @media screen and (max-width: $lower-bound) {
+      display: none !important;
+    }
+  }
+  @else {
+    $upper-bound: -zf-bp-to-em($upper-bound-size);
+
+    @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
+      display: none !important;
+    }
+  }
+}
+
+
+/// Show an element by default, and hide it above a certain screen size.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin hide-for($size) {
+  @include breakpoint($size) {
+    display: none !important;
+  }
+}
+
+/// Show an element by default, and hide it above a certain screen size.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin hide-for-only($size) {
+  @include breakpoint($size only) {
+    display: none !important;
+  }
+}
+
+@mixin foundation-visibility-classes {
+  // Basic hiding classes
+  .hide {
+    display: none !important;
+  }
+
+  .invisible {
+    visibility: hidden;
+  }
+
+  // Responsive visibility classes
+  @each $size in $breakpoint-classes {
+    @if $size != $-zf-zero-breakpoint {
+      .hide-for-#{$size} {
+        @include hide-for($size);
+      }
+
+      .show-for-#{$size} {
+        @include show-for($size);
+      }
+    }
+
+    .hide-for-#{$size}-only {
+      @include hide-for-only($size);
+    }
+
+    .show-for-#{$size}-only {
+      @include show-for-only($size);
+    }
+  }
+
+  // Screen reader visibility classes
+  // Need a "hide-for-sr" class? Add aria-hidden='true' to the element
+  .show-for-sr,
+  .show-on-focus {
+    @include element-invisible;
+  }
+
+  // Only display the element when it's focused
+  .show-on-focus {
+    &:active,
+    &:focus {
+      @include element-invisible-off;
+    }
+  }
+
+  // Landscape and portrait visibility
+  .show-for-landscape,
+  .hide-for-portrait {
+    display: block !important;
+
+    @include breakpoint(landscape) {
+      display: block !important;
+    }
+
+    @include breakpoint(portrait) {
+      display: none !important;
+    }
+  }
+
+  .hide-for-landscape,
+  .show-for-portrait {
+    display: none !important;
+
+    @include breakpoint(landscape) {
+      display: none !important;
+    }
+
+    @include breakpoint(portrait) {
+      display: block !important;
+    }
+  }
+}
\ No newline at end of file

diff --git a/scss/foundation.scss b/scss/foundation.scss
index 6e32eb1a779513ed14470a19eadcca5bf090b805..c663e1da93f6e064366c673aed4803d01a348fa6 100644 (file)
--- a/scss/foundation.scss
+++ b/scss/foundation.scss
@@ -28,6 +28,8 @@
 // Components
 @import 'grid/grid';
 @import 'typography/typography';
+@import 'components/visibility';
+@import 'components/float';
 @import 'forms/forms';
 @import 'components/button';
 @import 'components/button-group';
@@ -111,6 +113,8 @@
   @include foundation-title-bar;
   @include foundation-tooltip;
   @include foundation-top-bar;
+  @include foundation-visibility-classes;
+  @include foundation-float-classes;
 
   @if $flex {
     @include foundation-flex-classes;

diff --git a/scss/prototype/_prototype.scss b/scss/prototype/_prototype.scss
index 9aa7da2e3d664ca6ece59711fe4f21f795080127..d7f9fd28eb115fd7482f688318d0ffbb3bc6b796 100644 (file)
--- a/scss/prototype/_prototype.scss
+++ b/scss/prototype/_prototype.scss
@@ -7,13 +7,13 @@
 ////
 
 // Float classes
-@import 'float';
+// @import 'float'; // This prototype will be added(moved) here in v6.5
 
 // Visibility classes
-@import 'visibility';
+// @import 'visibility'; // This prototype will be added(moved) here in v6.5
 
 // Text alignment classes
-@import 'text-alignment';
+// @import 'text-alignment'; // This prototype will be added(moved) here in v6.5
 
 // Text utilities
 @import 'text-utilities';
@@ -55,9 +55,9 @@
 // @import 'flex-helpers';
 
 @mixin foundation-prototype-classes {
-  @include foundation-prototype-float;
-  @include foundation-prototype-visibility;
-  @include foundation-prototype-text-alignment;
+  // @include foundation-prototype-float;
+  // @include foundation-prototype-visibility;
+  // @include foundation-prototype-text-alignment;
   @include foundation-prototype-text-utilities;
   @include foundation-prototype-text-transformation;
   @include foundation-prototype-text-decoration;

diff --git a/scss/typography/_alignment.scss b/scss/typography/_alignment.scss
new file mode 100644 (file)
index 0000000..f3f2112
--- /dev/null
+++ b/scss/typography/_alignment.scss
@@ -0,0 +1,22 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@mixin foundation-text-alignment {
+  @each $size in $breakpoint-classes {
+    @include breakpoint($size) {
+      @each $align in (left, right, center, justify) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-text-#{$align} {
+            text-align: $align;
+          }
+        }
+        @else {
+          .text-#{$align} {
+            text-align: $align;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

diff --git a/scss/typography/_typography.scss b/scss/typography/_typography.scss
index 751e02442347379c724d16ebfd3012d27801eb2d..c794126adf7753df23d17331c89a53e0978b15e3 100644 (file)
--- a/scss/typography/_typography.scss
+++ b/scss/typography/_typography.scss
@@ -12,11 +12,15 @@
 // Typography helper classes (classes only)
 @import 'helpers';
 
+// Text alignment classes
+@import 'alignment';
+
 // Print styles
 @import 'print';
 
 @mixin foundation-typography {
   @include foundation-typography-base;
   @include foundation-typography-helpers;
+  @include foundation-text-alignment;
   @include foundation-print-styles;
 }