Visibility SASS
show-for-XXX
You are on a small screen or larger.
You are on a medium screen or larger.
You are on a large screen or larger.
You are on a xlarge screen or larger.
show-for-XXX-only
You are definitely on a small screen.
You are definitely on a medium screen.
You are definitely on a large screen.
hide-for-XXX
hide-for-XXX-only
hide or invisible
Can’t touch this.
Can sort of touch this.
.hide {
display: none !important;
}
.invisible {
visibility: hidden;
}
@media screen and (max-width: ($breakpoint-medium - 1px)) {
.show-for-medium-up, .show-for-medium {
display: none !important; }
}
@media screen and (max-width: ($breakpoint-large - 1px)) {
.show-for-large-up, .show-for-large {
display: none !important; }
}
@media screen and (max-width: ($breakpoint-xlarge - 1px)) {
.show-for-xlarge-up, .show-for-xlarge {
display: none !important; }
}
@media screen and (max-width: 0), screen and (min-width: $breakpoint-medium) {
.show-for-small-only {
display: none !important; }
}
@media screen and (max-width: ($breakpoint-medium - 1px)), screen and (min-width: $breakpoint-large) {
.show-for-medium-only {
display: none !important; }
}
@media screen and (max-width: ($breakpoint-large - 1px)), screen and (min-width: $breakpoint-xlarge) {
.show-for-large-only {
display: none !important; }
}
@media print, screen and (min-width: $breakpoint-medium) {
.hide-for-medium-up, .hide-for-medium {
display: none !important; }
}
@media print, screen and (min-width: $breakpoint-large) {
.hide-for-large-up, .hide-for-large {
display: none !important; }
}
@media print, screen and (min-width: $breakpoint-xlarge) {
.hide-for-xlarge-up, .hide-for-xlarge {
display: none !important; }
}
@media screen and (max-width: ($breakpoint-medium - 1px)) {
.hide-for-small-only {
display: none !important; }
}
@media screen and (min-width: $breakpoint-medium) and (max-width: ($breakpoint-large - 1px)) {
.hide-for-medium-only {
display: none !important; }
}
@media screen and (min-width: $breakpoint-large) and (max-width: ($breakpoint-xlarge - 1px)) {
.hide-for-large-only {
display: none !important; }
}