-
Notifications
You must be signed in to change notification settings - Fork 5
/
_responsive.scss
101 lines (85 loc) · 2.33 KB
/
_responsive.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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
// @page Pattern Library/Utilities
// @name Responsive
//
// @description
// Responsive classes to allow display of elements across devices. You have the option of displaying them as `block`, `inline-block` or `inline` elements.
// You can also hide elements by `.us-{DEVICE}--hidden` and will hide those elements above that breakpoint.
//
// @markup
// <div class='us-lg-desktop--block'><strong>.us-lg-desktop--block</strong> Shows on large desktop and up</div>
// <div class='us-desktop--block'><strong>.us-desktop--block</strong> Shows on desktop and up</div>
// <div class='us-tablet--block'><strong>.us-tablet--block</strong> Shows on tablet and up</div>
// <div class='us-sm-tablet--block'><strong>.us-sm-tablet--block</strong> Shows on small tablet and up</div>
// <div class='us-mobile--block'><strong>.us-mobile--block</strong> Shows on mobile only</div>
// <div class='us-tablet--hidden'><strong>.us-tablet--hidden</strong> Hidden on tablet and up</div>
$display-properties: block, inline-block, inline;
// Mobile
.us-mobile--hidden {
@include respond-to(mobile) {
display: none;
}
}
@each $property in $display-properties {
.us-mobile--#{$property} {
display: none;
@include respond-to(mobile) {
display: $property;
}
}
}
// Small tablet
.us-sm-tablet--hidden {
@include respond-to(small-tablet, true) {
display: none;
}
}
@each $property in $display-properties {
.us-sm-tablet--#{$property} {
display: none;
@include respond-to(small-tablet, true) {
display: $property;
}
}
}
// Tablet
.us-tablet--hidden {
@include respond-to(tablet, true) {
display: none;
}
}
@each $property in $display-properties {
.us-tablet--#{$property} {
display: none;
@include respond-to(tablet, true) {
display: $property;
}
}
}
// Desktop
.us-desktop--hidden {
@include respond-to(desktop, true) {
display: none;
}
}
@each $property in $display-properties {
.us-desktop--#{$property} {
display: none;
@include respond-to(desktop, true) {
display: $property;
}
}
}
// Large desktop
.us-lg-desktop--hidden {
@include respond-to(large-desktop) {
display: none;
}
}
@each $property in $display-properties {
.us-lg-desktop--#{$property} {
display: none;
@include respond-to(large-desktop) {
display: $property;
}
}
}