This repository has been archived by the owner on May 29, 2020. It is now read-only.
/
spacing.scss
107 lines (93 loc) 路 2.25 KB
/
spacing.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
/////////////////////////
// SPACING CLASSES //
/////////////////////////
$spacing-xxs: 4px;
$spacing-xs: 8px;
$spacing-s: 16px;
$spacing-m: 24px;
$spacing-l: 32px;
$spacing-xl: 40px;
$spacing-xxl: 48px;
$spacing-nav: 60px;
$spacing-25: 25px;
$spacing-50: 50px;
$spacing-80: 80px;
$spacing-100: 100px;
$spacing-200: 200px;
$spacing-300: 300px;
// todo - more classes, replace 1 with variables
.pad {
// navbar
&-nav {
padding-bottom: $spacing-nav;
}
// left padding
&-left, &-sides {
&-m { padding-left: $spacing-m; }
&-50 { padding-left: $spacing-50; }
&-100 { padding-left: $spacing-100; }
&-300 { padding-left: $spacing-300; }
}
// right padding
&-right, &-sides {
&-m { padding-right: $spacing-m; }
}
// top margin
&-top, &-ends {
&-xs { padding-top: $spacing-xs; }
&-s { padding-top: $spacing-s; }
&-m { padding-top: $spacing-m; }
&-xxl { padding-top: $spacing-xxl; }
&-25 { padding-top: $spacing-25; }
}
// bottom margin
&-bot, &-ends {
&-xs { padding-bottom: $spacing-xs; }
&-s { padding-bottom: $spacing-s; }
&-m { padding-bottom: $spacing-m; }
&-25 { padding-bottom: $spacing-25; }
}
}
.margin {
// navbar
&-nav {
margin: 0;
}
&-title {
margin-bottom: $spacing-s;
margin-top: $spacing-xxl;
}
// left margin
&-left, &-sides {
&-xs { margin-left: $spacing-xs; }
&-s { margin-left: $spacing-s; }
&-m { margin-left: $spacing-m; }
&-l { margin-left: $spacing-l; }
&-auto { margin-left: auto; }
}
// right margin
&-right, &-sides {
&-xs { margin-right: $spacing-xs; }
&-s { margin-right: $spacing-s; }
&-m { margin-right: $spacing-m; }
&-l { margin-right: $spacing-l; }
&-auto { margin-right: auto; }
}
// top margin
&-top, &-ends {
&-xs { margin-top: $spacing-xs; }
&-s { margin-top: $spacing-s; }
&-m { margin-top: $spacing-m; }
&-l { margin-top: $spacing-l; }
&-50 { margin-top: $spacing-50; }
&-100 { margin-top: $spacing-100; }
&-200 { margin-top: $spacing-200; }
}
// bottom margin
&-bot, &-ends {
&-xs { margin-bottom: $spacing-xs; }
&-s { margin-bottom: $spacing-s; }
&-m { margin-bottom: $spacing-m; }
&-l { margin-bottom: $spacing-l; }
}
}