Sha256: f4ab92b698d33a5ec50c286141288176d78f251f80ecacf32c15a03c9eb6f17b
Contents?: true
Size: 1.25 KB
Versions: 3
Compression:
Stored size: 1.25 KB
Contents
@mixin visible-on($size, $display: inherit) {
@if $size == large {
&.show-for-large,
&.hide-for-small { display: $display !important; }
} @else if $size == small {
&.show-for-small,
&.hide-for-large { display: $display !important; }
}
}
// Elements that need special `display`
@mixin special-display($size) {
table {
@include visible-on($size, table);
}
thead {
@include visible-on($size, table-header-group);
}
tbody {
@include visible-on($size, table-row-group);
}
tr {
@include visible-on($size, table-row);
}
td, th {
@include visible-on($size, table-cell);
}
span, b, em, strong, .bold, .italic, code {
@include visible-on($size, inline-block);
}
}
@if $include-visibility {
/* ---------------
EDGE Visibility
--------------- */
/* Above small breakpoint (>$small-screen) */
.show-for-small,
.hide-for-large { display: none !important; }
.show-for-large,
.hide-for-small { display: inherit !important; }
@include special-display(large);
/* Below small breakpoint (<=$small-screen) */
@include small {
.show-for-large,
.hide-for-small { display: none !important; }
.show-for-small,
.hide-for-large { display: inherit !important; }
@include special-display(small);
}
}
Version data entries
3 entries across 3 versions & 1 rubygems