<div class="display-block"></div>
```
-By default, we have just added the most used display classes. but as you would know, there are many other display classes as specified by MDN [here](https://developer.mozilla.org/en-US/docs/Web/CSS/display). If you need some of those classes, then you can add them easily through Sass variables with `$prototype-display-classes`. Sass Reference [here](#sass-reference)
+By default, we have just added the most used display classes. but as you would know, there are many other display classes as specified by MDN [here](https://developer.mozilla.org/en-US/docs/Web/CSS/display). If you need some of those classes, then you can add them easily through Sass variables with `$prototype-display`. Sass Reference [here](#sass-reference)
---
/// Map containing all the `display` classes
/// @type Map
-$prototype-display-classes: (
+$prototype-display: (
none, inline, inline-block, block
) !default;
-/// Display classes, by default coming through a map `$prototype-display-classes`
+/// Display classes, by default coming through a map `$prototype-display`
/// @param {String} $display [] Display classes
@mixin display($display) {
display: $display !important;
}
@mixin foundation-prototype-display {
- @each $display in $prototype-display-classes {
+ @each $display in $prototype-display {
.display-#{$display} {
@include display($display);
}
// Loop through Responsive Breakpoints
@each $size in $breakpoint-classes {
@include breakpoint($size) {
- @each $display in $prototype-display-classes {
+ @each $display in $prototype-display {
@if $size != $-zf-zero-breakpoint {
.#{$size}-display-#{$display} {
@include display($display);
/// Map containing all the `overflow` classes
/// @type Map
-$prototype-overflow-classes: (
+$prototype-overflow: (
visible, hidden, scroll
) !default;
-/// Overflow classes, by default coming through a map `$prototype-overflow-classes`
+/// Overflow classes, by default coming through a map `$prototype-overflow`
/// @param {String} $overflow [] Overflow classes
@mixin overflow($overflow) {
overflow: $overflow;
}
-/// Overflow classes on horizontal axis, by default coming through a map `$prototype-overflow-classes`
+/// Overflow classes on horizontal axis, by default coming through a map `$prototype-overflow`
/// @param {String} $overflow [] Overflow classes (horizontal axis)
@mixin overflow-x($overflow) {
overflow-x: $overflow;
}
-/// Overflow classes on vertical axis, by default coming through a map `$prototype-overflow-classes`
+/// Overflow classes on vertical axis, by default coming through a map `$prototype-overflow`
/// @param {String} $overflow [] Overflow classes (vertical axis)
@mixin overflow-y($overflow) {
overflow-y: $overflow;
}
@mixin foundation-prototype-overflow {
- @each $overflow in $prototype-overflow-classes {
+ @each $overflow in $prototype-overflow {
.overflow-#{$overflow} {
@include overflow($overflow);
}
// Loop through Responsive Breakpoints
@each $size in $breakpoint-classes {
@include breakpoint($size) {
- @each $overflow in $prototype-overflow-classes {
+ @each $overflow in $prototype-overflow {
@if $size != $-zf-zero-breakpoint {
.#{$size}-overflow-#{$overflow} {
@include overflow($overflow);
/// Map containing all the `position` classes
/// @type Map
-$prototype-position-classes: (
+$prototype-position: (
static, relative, absolute, fixed
) !default;
/// @type Number
$prototype-position-z-index: 975 !default;
-/// Position classes, by default coming through a map `$prototype-position-classes`
+/// Position classes, by default coming through a map `$prototype-position`
/// @param {String} $position [] Position classes
@mixin position($position) {
position: $position;
@mixin foundation-prototype-position {
// Position: Static, Relative, Fixed, Absolute
- @each $position in $prototype-position-classes {
+ @each $position in $prototype-position {
.position-#{$position} {
@include position($position);
}
@each $size in $breakpoint-classes {
@include breakpoint($size) {
// Position: Static, Relative, Fixed, Absolute
- @each $position in $prototype-position-classes {
+ @each $position in $prototype-position {
@if $size != $-zf-zero-breakpoint {
.#{$size}-position-#{$position} {
@include position($position);
/// Map containing all the `sizing` classes
/// @type Map
-$prototype-sizing-classes: (
+$prototype-sizing: (
width, height
) !default;
@mixin foundation-prototype-sizing {
// Element Sizing
- @each $sizing in $prototype-sizing-classes {
+ @each $sizing in $prototype-sizing {
@each $size, $percentage in $prototype-sizes {
.#{$sizing}-#{$size} {
#{$sizing}: $percentage;
/// Map containing all the `spacing` classes
/// @type Map
-$prototype-spacing-classes: (
+$prototype-spacing: (
margin: m,
padding: p
) !default;
}
@mixin foundation-prototype-spacing {
- @each $prop, $abbrev in $prototype-spacing-classes {
+ @each $prop, $abbrev in $prototype-spacing {
@each $size, $lengths in $prototype-spacers {
$length-x: map-get($lengths, x);
$length-y: map-get($lengths, y);