mirror of https://github.com/juliancwirko/abc.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
492 lines
22 KiB
492 lines
22 KiB
// 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; |
|
} |
|
} |
|
|
|
// Only include these styles if you want them. |
|
@if $include-print-styles { |
|
/* |
|
* Print styles. |
|
* |
|
* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ |
|
* Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) |
|
*/ |
|
.print-only { display: none !important; } |
|
@media print { |
|
* { |
|
background: transparent !important; |
|
box-shadow: none !important; |
|
color: $black !important; /* Black prints faster: h5bp.com/s */ |
|
text-shadow: none !important; |
|
} |
|
.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; } |
|
|
|
a, |
|
a:visited { text-decoration: underline;} |
|
a[href]:after { content: " (" attr(href) ")"; } |
|
|
|
abbr[title]:after { content: " (" attr(title) ")"; } |
|
|
|
// Don't show links for images, or javascript/internal links |
|
.ir a:after, |
|
a[href^="javascript:"]:after, |
|
a[href^="#"]:after { content: ""; } |
|
|
|
pre, |
|
blockquote { |
|
border: 1px solid $aluminum; |
|
page-break-inside: avoid; |
|
} |
|
|
|
thead { display: table-header-group; /* h5bp.com/t */ } |
|
|
|
tr, |
|
img { page-break-inside: avoid; } |
|
|
|
img { max-width: 100% !important; } |
|
|
|
@page { margin: .5cm; } |
|
|
|
p, |
|
h2, |
|
h3 { |
|
orphans: 3; |
|
widows: 3; |
|
} |
|
|
|
h2, |
|
h3 { page-break-after: avoid; } |
|
|
|
.hide-on-print { display: none !important; } |
|
.print-only { display: block !important; } |
|
.hide-for-print { display: none !important; } |
|
.show-for-print { display: inherit !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; } |
|
} |
|
|
|
@media not print{ |
|
.show-for-print { display: none !important; } |
|
} |
|
} |
|
}
|
|
|