-
Notifications
You must be signed in to change notification settings - Fork 0
/
_margin.scss
74 lines (63 loc) · 2.26 KB
/
_margin.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
/* ==========================================================================
#MARGIN
========================================================================== */
/*
Base:
m = margin
Modifiers:
b = bottom
r = right
0 = none
1 = tiny
2 = small
3 = medium
4 = large
5 = x-large
Media Query Extensions (mobile-first):
-m = at medium viewports
-l = at large viewports
Docs:
Margins are applied only in one-direction per axis
There are no margin-top or margin-left classes.
https://csswizardry.com/2012/06/single-direction-margin-declarations/
*/
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: $spacing-unit-tiny; }
.mb2 { margin-bottom: $spacing-unit-small; }
.mb3 { margin-bottom: $spacing-unit-medium; }
.mb4 { margin-bottom: $spacing-unit-large; }
.mb5 { margin-bottom: $spacing-unit-x-large; }
.mr0 { margin-right: 0; }
.mr1 { margin-right: $spacing-unit-tiny; }
.mr2 { margin-right: $spacing-unit-small; }
.mr3 { margin-right: $spacing-unit-medium; }
.mr4 { margin-right: $spacing-unit-large; }
.mr5 { margin-right: $spacing-unit-x-large; }
@media (min-width: $breakpoint-small) {
.mb0-m { margin-bottom: 0; }
.mb1-m { margin-bottom: $spacing-unit-tiny; }
.mb2-m { margin-bottom: $spacing-unit-small; }
.mb3-m { margin-bottom: $spacing-unit-medium; }
.mb4-m { margin-bottom: $spacing-unit-large; }
.mb5-m { margin-bottom: $spacing-unit-x-large; }
.mr0-m { margin-right: 0; }
.mr1-m { margin-right: $spacing-unit-tiny; }
.mr2-m { margin-right: $spacing-unit-small; }
.mr3-m { margin-right: $spacing-unit-medium; }
.mr4-m { margin-right: $spacing-unit-large; }
.mr5-m { margin-right: $spacing-unit-x-large; }
}
@media (min-width: $breakpoint-medium) {
.mb0-l { margin-bottom: 0; }
.mb1-l { margin-bottom: $spacing-unit-tiny; }
.mb2-l { margin-bottom: $spacing-unit-small; }
.mb3-l { margin-bottom: $spacing-unit-medium; }
.mb4-l { margin-bottom: $spacing-unit-large; }
.mb5-l { margin-bottom: $spacing-unit-x-large; }
.mr0-l { margin-right: 0; }
.mr1-l { margin-right: $spacing-unit-tiny; }
.mr2-l { margin-right: $spacing-unit-small; }
.mr3-l { margin-right: $spacing-unit-medium; }
.mr4-l { margin-right: $spacing-unit-large; }
.mr5-l { margin-right: $spacing-unit-x-large; }
}