-
Notifications
You must be signed in to change notification settings - Fork 43
/
_whitespace.scss
125 lines (108 loc) · 3.99 KB
/
_whitespace.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
//====================================================
// Padding
//====================================================
$padding: 1rem !default;
$margin: 1rem !default;
// All
.p0 { padding: 0 !important; }
.p1 { padding: $padding; }
.p2 { padding: $padding * 2; }
.p3 { padding: $padding * 3; }
.p4 { padding: $padding * 4; }
.p5 { padding: $padding * 5; }
// Top
.pt0 { padding-top: 0 !important; }
.pt1 { padding-top: $padding; }
.pt2 { padding-top: $padding * 2; }
.pt3 { padding-top: $padding * 3; }
.pt4 { padding-top: $padding * 4; }
.pt5 { padding-top: $padding * 5; }
// Right
.pr0 { padding-right: 0 !important; }
.pr1 { padding-right: $padding; }
.pr2 { padding-right: $padding * 2; }
.pr3 { padding-right: $padding * 3; }
.pr4 { padding-right: $padding * 4; }
.pr5 { padding-right: $padding * 5; }
// Bottom
.pb0 { padding-bottom: 0 !important; }
.pb1 { padding-bottom: $padding; }
.pb2 { padding-bottom: $padding * 2; }
.pb3 { padding-bottom: $padding * 3; }
.pb4 { padding-bottom: $padding * 4; }
.pb5 { padding-bottom: $padding * 5; }
// Left
.pl0 { padding-left: 0 !important; }
.pl1 { padding-left: $padding; }
.pl2 { padding-left: $padding * 2; }
.pl3 { padding-left: $padding * 3; }
.pl4 { padding-left: $padding * 4; }
.pl5 { padding-left: $padding * 5; }
// Top-Bottom
.ptb0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.ptb1 { padding-top: $padding; padding-bottom: $padding; }
.ptb2 { padding-top: $padding * 2; padding-bottom: $padding * 2; }
.ptb3 { padding-top: $padding * 3; padding-bottom: $padding * 3; }
.ptb4 { padding-top: $padding * 4; padding-bottom: $padding * 4; }
.ptb5 { padding-top: $padding * 5; padding-bottom: $padding * 5; }
// Left-Right
.plr0 { padding-left: 0 !important; padding-right: 0 !important; }
.plr1 { padding-left: $padding; padding-right: $padding; }
.plr2 { padding-left: $padding * 2; padding-right: $padding * 2; }
.plr3 { padding-left: $padding * 3; padding-right: $padding * 3; }
.plr4 { padding-left: $padding * 4; padding-right: $padding * 4; }
.plr5 { padding-left: $padding * 5; padding-right: $padding * 5; }
//====================================================
// Margins
//====================================================
// Auto
.ma { margin: auto; }
// All
.m0 { margin: 0 !important; }
.m1 { margin: $margin; }
.m2 { margin: $margin * 2; }
.m3 { margin: $margin * 3; }
.m4 { margin: $margin * 4; }
.m5 { margin: $margin * 5; }
// Top
.mt0 { margin-top: 0 !important; }
.mt1 { margin-top: $margin; }
.mt2 { margin-top: $margin * 2; }
.mt3 { margin-top: $margin * 3; }
.mt4 { margin-top: $margin * 4; }
.mt5 { margin-top: $margin * 5; }
// Right
.mr0 { margin-right: 0 !important; }
.mr1 { margin-right: $margin; }
.mr2 { margin-right: $margin * 2; }
.mr3 { margin-right: $margin * 3; }
.mr4 { margin-right: $margin * 4; }
.mr5 { margin-right: $margin * 5; }
// Bottom
.mb0 { margin-bottom: 0 !important; }
.mb1 { margin-bottom: $margin; }
.mb2 { margin-bottom: $margin * 2; }
.mb3 { margin-bottom: $margin * 3; }
.mb4 { margin-bottom: $margin * 4; }
.mb5 { margin-bottom: $margin * 5; }
// Left
.ml0 { margin-left: 0 !important; }
.ml1 { margin-left: $margin; }
.ml2 { margin-left: $margin * 2; }
.ml3 { margin-left: $margin * 3; }
.ml4 { margin-left: $margin * 4; }
.ml5 { margin-left: $margin * 5; }
// Top/Bottom
.mtb0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.mtb1 { margin-top: $margin; margin-bottom: $margin; }
.mtb2 { margin-top: $margin * 2; margin-bottom: $margin * 2; }
.mtb3 { margin-top: $margin * 3; margin-bottom: $margin * 3; }
.mtb4 { margin-top: $margin * 4; margin-bottom: $margin * 4; }
.mtb5 { margin-top: $margin * 5; margin-bottom: $margin * 5; }
// Left/Right
.mlr0 { margin-left: 0 !important; margin-right: 0 !important; }
.mlr1 { margin-left: $margin; margin-right: $margin; }
.mlr2 { margin-left: $margin * 2; margin-right: $margin * 2; }
.mlr3 { margin-left: $margin * 3; margin-right: $margin * 3; }
.mlr4 { margin-left: $margin * 4; margin-right: $margin * 4; }
.mlr5 { margin-left: $margin * 5; margin-right: $margin * 5; }