+++ /dev/null
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group prototype-float
-////
-
-/// Responsive breakpoints for float classes
-/// @type Boolean
-$prototype-float-breakpoints: $global-prototype-breakpoints !default;
-
-/// Map containing all the `float` classes
-/// @type Map
-$prototype-float-classes: (
- left, right
-) !default;
-
-@mixin float-center {
- display: block;
- margin-right: auto;
- margin-left: auto;
-}
-
-@mixin foundation-prototype-float {
- // Float left and right
- @each $float in $prototype-float-classes {
- .float-#{$float} {
- float: $float !important;
- }
- }
- // Float center and clearfix
- .float-center {
- @include float-center;
- }
- .clearfix {
- @include clearfix;
- }
-
- @if ($prototype-float-breakpoints) {
- // Loop through Responsive Breakpoints
- @each $size in $breakpoint-classes {
- @include breakpoint($size) {
- // Float left and right
- @each $float in $prototype-float-classes {
- @if $size != $-zf-zero-breakpoint {
- .#{$size}-float-#{$float} {
- float: $float !important;
- }
- }
- }
-
- // Float center and clearfix
- @if $size != $-zf-zero-breakpoint {
- .#{$size}-float-center {
- @include float-center;
- }
- .#{$size}-clearfix {
- @include clearfix;
- }
- }
- }
- }
- }
-}
/// @group prototype
////
-// Float classes
-// @import 'float'; // This prototype will be added(moved) here in v6.5
-
-// Visibility classes
-// @import 'visibility'; // This prototype will be added(moved) here in v6.5
-
-// Text alignment classes
-// @import 'text-alignment'; // This prototype will be added(moved) here in v6.5
-
// Text utilities
@import 'text-utilities';
// Spacing Utilities
@import 'spacing';
-// Color Utilities
-// @import 'color';
-
-// Flex classes
-// @import 'flex';
-
-// Flex helpers
-// @import 'flex-helpers';
-
@mixin foundation-prototype-classes {
- // @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;
+++ /dev/null
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group prototype-text-alignment
-////
-
-/// Responsive breakpoints for text alignment utilities
-/// @type Boolean
-$prototype-alignment-breakpoints: $global-prototype-breakpoints !default;
-
-/// Map containing all the `text-alignment` classes
-/// @type Boolean
-$prototype-text-alignment-classes: (
- left, right, center, justify
-) !default;
-
-@mixin foundation-prototype-text-alignment {
- @each $align in $prototype-text-alignment-classes {
- .text-#{$align} {
- text-align: $align;
- }
- }
-
- @if ($prototype-alignment-breakpoints) {
- // Loop through Responsive Breakpoints
- @each $size in $breakpoint-classes {
- @include breakpoint($size) {
- @each $align in $prototype-text-alignment-classes {
- @if $size != $-zf-zero-breakpoint {
- .#{$size}-text-#{$align} {
- text-align: $align;
- }
- }
- }
- }
- }
- }
-}
+++ /dev/null
-// 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-prototype-visibility {
- // 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;
- }
- }
-}