65 lines
1.2 KiB
SCSS
65 lines
1.2 KiB
SCSS
////////////////////
|
|
// Visibility
|
|
////////////////////
|
|
|
|
// Hide visually and from screen readers
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
// Hide at breakpoint size upward
|
|
.hidden-sm-up {
|
|
@media (min-width: $bp-sm) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.hidden-md-up {
|
|
@media (min-width: $bp-md) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.hidden-lg-up {
|
|
@media (min-width: $bp-lg) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// Hide at breakpoint size downward
|
|
.hidden-sm-down {
|
|
display: none !important;
|
|
|
|
@media (min-width: $bp-md) {
|
|
display: inherit !important;
|
|
}
|
|
}
|
|
|
|
.hidden-md-down {
|
|
display: none !important;
|
|
|
|
@media (min-width: $bp-lg) {
|
|
display: inherit !important;
|
|
}
|
|
}
|
|
|
|
.hidden-lg-down {
|
|
display: none !important;
|
|
|
|
@media (min-width: $bp-xl) {
|
|
display: inherit !important;
|
|
}
|
|
}
|
|
|
|
// Hide only visually, but have it available for screen readers:
|
|
// https://a11yproject.com/posts/how-to-hide-content/
|
|
.visually-hidden:not(:focus):not(:active) {
|
|
position: absolute !important;
|
|
height: 1px;
|
|
width: 1px;
|
|
overflow: hidden;
|
|
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
white-space: nowrap; /* added line */
|
|
}
|