123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425 |
- // 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;
- }
- #{$visibility-table-cell-list} {
- display: table-cell !important;
- }
- }
- }
- }
- }
- @include exports("visibility"){
- @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; }
- /* Screen reader-specific classes */
- .show-for-sr {
- @include element-invisible;
- }
- .show-on-focus {
- @include element-invisible;
- &:focus,
- &:active {
- @include element-invisible-off;
- }
- }
- /* Print visibility */
- @if $include-print-styles {
- .print-only,
- .show-for-print { display: none !important; }
- @media print {
- .print-only,
- .show-for-print { display: block !important; }
- .hide-on-print,
- .hide-for-print { display: none !important; }
- 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; }
- }
- }
- }
- }
|