src/scss/components/_hide.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// Hide element on all screens
.hide {
    display: none;
}

// Hide element on very small screen and down
@media #{$xsmall-and-down} {
    .hide-xs {
        display: none;
    }
}

// Hide element on small screen only
@media #{$small-only} {
    .hide-sm {
        display: none;
    }
}

// Hide element on medium screen only
@media #{$medium-only} {
    .hide-md {
        display: none;
    }
}

// Hide element on large screen and up
@media #{$large-and-up} {
    .hide-lg {
        display: none;
    }
}