Now with sass-support
This commit is contained in:
Moritz »mo.« Sauer
parent
e8835b4899
commit
87ca494ca0
62 changed files with 12427 additions and 269 deletions
408
_sass/foundation-components/_visibility.scss
Normal file
408
_sass/foundation-components/_visibility.scss
Normal file
|
|
@ -0,0 +1,408 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// Foundation Visibility Classes
|
||||
//
|
||||
$include-html-visibility-classes: $include-html-classes !default;
|
||||
$include-accessibility-classes: true !default;
|
||||
$include-table-visibility-classes: true !default;
|
||||
$include-legacy-visibility-classes: true !default;
|
||||
|
||||
//
|
||||
// Media Class Names
|
||||
//
|
||||
// Visibility Breakpoints
|
||||
$visibility-breakpoint-sizes:
|
||||
small,
|
||||
medium,
|
||||
large,
|
||||
xlarge,
|
||||
xxlarge;
|
||||
|
||||
$visibility-breakpoint-queries:
|
||||
unquote($small-up),
|
||||
unquote($medium-up),
|
||||
unquote($large-up),
|
||||
unquote($xlarge-up),
|
||||
unquote($xxlarge-up);
|
||||
|
||||
@mixin visibility-loop {
|
||||
@each $current-visibility-breakpoint in $visibility-breakpoint-sizes {
|
||||
$visibility-inherit-list: ();
|
||||
$visibility-none-list: ();
|
||||
|
||||
$visibility-visible-list: ();
|
||||
$visibility-hidden-list: ();
|
||||
|
||||
$visibility-table-list: ();
|
||||
$visibility-table-header-group-list: ();
|
||||
$visibility-table-row-group-list: ();
|
||||
$visibility-table-row-list: ();
|
||||
$visibility-table-cell-list: ();
|
||||
|
||||
@each $visibility-comparison-breakpoint in $visibility-breakpoint-sizes {
|
||||
@if index($visibility-breakpoint-sizes, $visibility-comparison-breakpoint) < index($visibility-breakpoint-sizes, $current-visibility-breakpoint) {
|
||||
// Smaller than current breakpoint
|
||||
|
||||
$visibility-inherit-list: append($visibility-inherit-list, unquote(
|
||||
'.hide-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-none-list: append($visibility-none-list, unquote(
|
||||
'.show-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-visible-list: append($visibility-visible-list, unquote(
|
||||
'.hidden-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-hidden-list: append($visibility-hidden-list, unquote(
|
||||
'.visible-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-list: append($visibility-table-list, unquote(
|
||||
'table.hide-for-#{$visibility-comparison-breakpoint}-only, table.show-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-header-group-list: append($visibility-table-header-group-list, unquote(
|
||||
'thead.hide-for-#{$visibility-comparison-breakpoint}-only, thead.show-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-row-group-list: append($visibility-table-row-group-list, unquote(
|
||||
'tbody.hide-for-#{$visibility-comparison-breakpoint}-only, tbody.show-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-row-list: append($visibility-table-row-list, unquote(
|
||||
'tr.hide-for-#{$visibility-comparison-breakpoint}-only, tr.show-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-cell-list: append($visibility-table-cell-list, unquote(
|
||||
'th.hide-for-#{$visibility-comparison-breakpoint}-only, td.hide-for-#{$visibility-comparison-breakpoint}-only, th.show-for-#{$visibility-comparison-breakpoint}-up, td.show-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
|
||||
// Foundation 4 compatibility:
|
||||
// Include .show/hide-for-[size] and .show/hide-for-[size]-down classes
|
||||
// for small, medium, and large breakpoints only
|
||||
@if $include-legacy-visibility-classes and index((small, medium, large), $visibility-comparison-breakpoint) != false {
|
||||
$visibility-inherit-list: append($visibility-inherit-list, unquote(
|
||||
'.hide-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-none-list: append($visibility-none-list, unquote(
|
||||
'.show-for-#{$visibility-comparison-breakpoint}, .show-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-visible-list: append($visibility-visible-list, unquote(
|
||||
'.hidden-for-#{$visibility-comparison-breakpoint}, .hidden-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-hidden-list: append($visibility-hidden-list, unquote(
|
||||
'.visible-for-#{$visibility-comparison-breakpoint}, .visible-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-list: append($visibility-table-list, unquote(
|
||||
'table.hide-for-#{$visibility-comparison-breakpoint}, table.hide-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-header-group-list: append($visibility-table-header-group-list, unquote(
|
||||
'thead.hide-for-#{$visibility-comparison-breakpoint}, thead.hide-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-row-group-list: append($visibility-table-row-group-list, unquote(
|
||||
'tbody.hide-for-#{$visibility-comparison-breakpoint}, tbody.hide-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-row-list: append($visibility-table-row-list, unquote(
|
||||
'tr.hide-for-#{$visibility-comparison-breakpoint}, tr.hide-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-cell-list: append($visibility-table-cell-list, unquote(
|
||||
'th.hide-for-#{$visibility-comparison-breakpoint}, td.hide-for-#{$visibility-comparison-breakpoint}, th.hide-for-#{$visibility-comparison-breakpoint}-down, td.hide-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
}
|
||||
|
||||
} @else if index($visibility-breakpoint-sizes, $visibility-comparison-breakpoint) > index($visibility-breakpoint-sizes, $current-visibility-breakpoint) {
|
||||
// Larger than current breakpoint
|
||||
|
||||
$visibility-inherit-list: append($visibility-inherit-list, unquote(
|
||||
'.hide-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-none-list: append($visibility-none-list, unquote(
|
||||
'.show-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-visible-list: append($visibility-visible-list, unquote(
|
||||
'.hidden-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-hidden-list: append($visibility-hidden-list, unquote(
|
||||
'.visible-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-list: append($visibility-table-list, unquote(
|
||||
'table.hide-for-#{$visibility-comparison-breakpoint}-only, table.hide-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-header-group-list: append($visibility-table-header-group-list, unquote(
|
||||
'thead.hide-for-#{$visibility-comparison-breakpoint}-only, thead.hide-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-row-group-list: append($visibility-table-row-group-list, unquote(
|
||||
'tbody.hide-for-#{$visibility-comparison-breakpoint}-only, tbody.hide-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-row-list: append($visibility-table-row-list, unquote(
|
||||
'tr.hide-for-#{$visibility-comparison-breakpoint}-only, tr.hide-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-cell-list: append($visibility-table-cell-list, unquote(
|
||||
'th.hide-for-#{$visibility-comparison-breakpoint}-only, td.hide-for-#{$visibility-comparison-breakpoint}-only, th.hide-for-#{$visibility-comparison-breakpoint}-up, td.hide-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
|
||||
// Foundation 4 compatibility:
|
||||
// Include .show/hide-for-[size] and .show/hide-for-[size]-down classes
|
||||
// for small, medium, and large breakpoints only
|
||||
@if $include-legacy-visibility-classes and index((small, medium, large), $visibility-comparison-breakpoint) != false {
|
||||
$visibility-inherit-list: append($visibility-inherit-list, unquote(
|
||||
'.hide-for-#{$visibility-comparison-breakpoint}, .show-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-none-list: append($visibility-none-list, unquote(
|
||||
'.show-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-visible-list: append($visibility-visible-list, unquote(
|
||||
'.hidden-for-#{$visibility-comparison-breakpoint}, .visible-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-hidden-list: append($visibility-hidden-list, unquote(
|
||||
'.visible-for-#{$visibility-comparison-breakpoint}, .hidden-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-list: append($visibility-table-list, unquote(
|
||||
'table.hide-for-#{$visibility-comparison-breakpoint}, table.show-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-header-group-list: append($visibility-table-header-group-list, unquote(
|
||||
'thead.hide-for-#{$visibility-comparison-breakpoint}, thead.show-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-row-group-list: append($visibility-table-row-group-list, unquote(
|
||||
'tbody.hide-for-#{$visibility-comparison-breakpoint}, tbody.show-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-row-list: append($visibility-table-row-list, unquote(
|
||||
'tr.hide-for-#{$visibility-comparison-breakpoint}, tr.show-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-cell-list: append($visibility-table-cell-list, unquote(
|
||||
'th.hide-for-#{$visibility-comparison-breakpoint}, td.hide-for-#{$visibility-comparison-breakpoint}, th.show-for-#{$visibility-comparison-breakpoint}-down, td.show-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
}
|
||||
|
||||
} @else {
|
||||
// Current breakpoint
|
||||
|
||||
$visibility-inherit-list: append($visibility-inherit-list, unquote(
|
||||
'.show-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-none-list: append($visibility-none-list, unquote(
|
||||
'.hide-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-visible-list: append($visibility-visible-list, unquote(
|
||||
'.visible-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-hidden-list: append($visibility-hidden-list, unquote(
|
||||
'.hidden-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-list: append($visibility-table-list, unquote(
|
||||
'table.show-for-#{$visibility-comparison-breakpoint}-only, table.show-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-header-group-list: append($visibility-table-header-group-list, unquote(
|
||||
'thead.show-for-#{$visibility-comparison-breakpoint}-only, thead.show-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-row-group-list: append($visibility-table-row-group-list, unquote(
|
||||
'tbody.show-for-#{$visibility-comparison-breakpoint}-only, tbody.show-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-row-list: append($visibility-table-row-list, unquote(
|
||||
'tr.show-for-#{$visibility-comparison-breakpoint}-only, tr.show-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
$visibility-table-cell-list: append($visibility-table-cell-list, unquote(
|
||||
'th.show-for-#{$visibility-comparison-breakpoint}-only, td.show-for-#{$visibility-comparison-breakpoint}-only, th.show-for-#{$visibility-comparison-breakpoint}-up, td.show-for-#{$visibility-comparison-breakpoint}-up'
|
||||
), comma);
|
||||
|
||||
// Foundation 4 compatibility:
|
||||
// Include .show/hide-for-[size] and .show/hide-for-[size]-down classes
|
||||
// for small, medium, and large breakpoints only
|
||||
@if $include-legacy-visibility-classes and index((small, medium, large), $visibility-comparison-breakpoint) != false {
|
||||
$visibility-inherit-list: append($visibility-inherit-list, unquote(
|
||||
'.show-for-#{$visibility-comparison-breakpoint}, .show-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-none-list: append($visibility-none-list, unquote(
|
||||
'.hide-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-visible-list: append($visibility-visible-list, unquote(
|
||||
'.visible-for-#{$visibility-comparison-breakpoint}, .visible-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-hidden-list: append($visibility-hidden-list, unquote(
|
||||
'.hidden-for-#{$visibility-comparison-breakpoint}, .hidden-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-list: append($visibility-table-list, unquote(
|
||||
'table.show-for-#{$visibility-comparison-breakpoint}, table.show-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-header-group-list: append($visibility-table-header-group-list, unquote(
|
||||
'thead.show-for-#{$visibility-comparison-breakpoint}, thead.show-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-row-group-list: append($visibility-table-row-group-list, unquote(
|
||||
'tbody.show-for-#{$visibility-comparison-breakpoint}, tbody.show-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-row-list: append($visibility-table-row-list, unquote(
|
||||
'tr.show-for-#{$visibility-comparison-breakpoint}, tr.show-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
$visibility-table-cell-list: append($visibility-table-cell-list, unquote(
|
||||
'th.show-for-#{$visibility-comparison-breakpoint}, td.show-for-#{$visibility-comparison-breakpoint}, th.show-for-#{$visibility-comparison-breakpoint}-down, td.show-for-#{$visibility-comparison-breakpoint}-down'
|
||||
), comma);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* #{$current-visibility-breakpoint} displays */
|
||||
@media #{nth($visibility-breakpoint-queries, index($visibility-breakpoint-sizes, $current-visibility-breakpoint))} {
|
||||
#{$visibility-inherit-list} {
|
||||
display: inherit !important;
|
||||
}
|
||||
#{$visibility-none-list} {
|
||||
display: none !important;
|
||||
}
|
||||
@if $include-accessibility-classes != false {
|
||||
#{$visibility-visible-list} {
|
||||
@include element-invisible-off;
|
||||
}
|
||||
#{$visibility-hidden-list} {
|
||||
@include element-invisible;
|
||||
}
|
||||
}
|
||||
@if $include-table-visibility-classes != false {
|
||||
#{$visibility-table-list} {
|
||||
display: table !important;
|
||||
}
|
||||
#{$visibility-table-header-group-list} {
|
||||
display: table-header-group !important;
|
||||
}
|
||||
#{$visibility-table-row-group-list} {
|
||||
display: table-row-group !important;
|
||||
}
|
||||
#{$visibility-table-row-list} {
|
||||
display: table-row !important;
|
||||
}
|
||||
#{$visibility-table-cell-list} {
|
||||
display: table-cell !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-visibility-classes != false {
|
||||
|
||||
@include visibility-loop;
|
||||
|
||||
/* Orientation targeting */
|
||||
.show-for-landscape,
|
||||
.hide-for-portrait { display: inherit !important; }
|
||||
.hide-for-landscape,
|
||||
.show-for-portrait { display: none !important; }
|
||||
|
||||
/* Specific visibility for tables */
|
||||
table {
|
||||
&.hide-for-landscape,
|
||||
&.show-for-portrait { display: table !important; }
|
||||
}
|
||||
thead {
|
||||
&.hide-for-landscape,
|
||||
&.show-for-portrait { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.hide-for-landscape,
|
||||
&.show-for-portrait { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.hide-for-landscape,
|
||||
&.show-for-portrait { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.hide-for-landscape,
|
||||
&.show-for-portrait { display: table-cell !important; }
|
||||
}
|
||||
|
||||
@media #{$landscape} {
|
||||
.show-for-landscape,
|
||||
.hide-for-portrait { display: inherit !important; }
|
||||
.hide-for-landscape,
|
||||
.show-for-portrait { display: none !important; }
|
||||
|
||||
/* Specific visibility for tables */
|
||||
table {
|
||||
&.show-for-landscape,
|
||||
&.hide-for-portrait { display: table !important; }
|
||||
}
|
||||
thead {
|
||||
&.show-for-landscape,
|
||||
&.hide-for-portrait { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.show-for-landscape,
|
||||
&.hide-for-portrait { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.show-for-landscape,
|
||||
&.hide-for-portrait { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.show-for-landscape,
|
||||
&.hide-for-portrait { display: table-cell !important; }
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$portrait} {
|
||||
.show-for-portrait,
|
||||
.hide-for-landscape { display: inherit !important; }
|
||||
.hide-for-portrait,
|
||||
.show-for-landscape { display: none !important; }
|
||||
|
||||
/* Specific visibility for tables */
|
||||
table {
|
||||
&.show-for-portrait,
|
||||
&.hide-for-landscape { display: table !important; }
|
||||
}
|
||||
thead {
|
||||
&.show-for-portrait,
|
||||
&.hide-for-landscape { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.show-for-portrait,
|
||||
&.hide-for-landscape { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.show-for-portrait,
|
||||
&.hide-for-landscape { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.show-for-portrait,
|
||||
&.hide-for-landscape { display: table-cell !important; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-enabled device targeting */
|
||||
.show-for-touch { display: none !important; }
|
||||
.hide-for-touch { display: inherit !important; }
|
||||
.touch .show-for-touch { display: inherit !important; }
|
||||
.touch .hide-for-touch { display: none !important; }
|
||||
|
||||
/* Specific visibility for tables */
|
||||
table.hide-for-touch { display: table !important; }
|
||||
.touch table.show-for-touch { display: table !important; }
|
||||
thead.hide-for-touch { display: table-header-group !important; }
|
||||
.touch thead.show-for-touch { display: table-header-group !important; }
|
||||
tbody.hide-for-touch { display: table-row-group !important; }
|
||||
.touch tbody.show-for-touch { display: table-row-group !important; }
|
||||
tr.hide-for-touch { display: table-row !important; }
|
||||
.touch tr.show-for-touch { display: table-row !important; }
|
||||
td.hide-for-touch { display: table-cell !important; }
|
||||
.touch td.show-for-touch { display: table-cell !important; }
|
||||
th.hide-for-touch { display: table-cell !important; }
|
||||
.touch th.show-for-touch { display: table-cell !important; }
|
||||
|
||||
|
||||
/* Print visibility */
|
||||
@media print {
|
||||
.show-for-print { display: block; }
|
||||
.hide-for-print { display: none; }
|
||||
|
||||
table.show-for-print { display: table !important; }
|
||||
thead.show-for-print { display: table-header-group !important; }
|
||||
tbody.show-for-print { display: table-row-group !important; }
|
||||
tr.show-for-print { display: table-row !important; }
|
||||
td.show-for-print { display: table-cell !important; }
|
||||
th.show-for-print { display: table-cell !important; }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Reference in a new issue