From: harry Date: Sat, 4 Feb 2017 16:01:55 +0000 (+0530) Subject: Reloacated old code back for float, text alignment and visibility classes X-Git-Tag: v6.4.0-rc1~23^2~20^2~139 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ebbfd0bf05e810d4cfd2bbb59071879f564a1c82;p=thirdparty%2Ffoundation%2Ffoundation-sites.git 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 index 000000000..811f38f12 --- /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 index 000000000..060c022ce --- /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 6e32eb1a7..c663e1da9 100644 --- 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 9aa7da2e3..d7f9fd28e 100644 --- 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 index 000000000..f3f2112b7 --- /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 751e02442..c794126ad 100644 --- 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; }