suitcss-utils-space/space.css at master · jaredhanson/suitcss-utils-space · GitHub

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-specific utilities
   ========================================================================== */

/**
 * Used to adjust the default spacing between components
 * Use with great care!
 *
 * u-<type><direction><size>
 *
 * A = all
 * T = top
 * R = right
 * B = bottom
 * L = left
 * H = horizontal
 * V = vertical
 *
 * n = none
 * s = small
 * m = medium
 * l = large
 */

/* All */

.u-paddingAn { padding: 0 !important; }
.u-paddingAs { padding: 5px !important; }
.u-paddingAm { padding: 10px !important; }
.u-paddingAl { padding: 20px !important; }

.u-marginAn { margin: 0 !important; }
.u-marginAs { margin: 5px !important; }
.u-marginAm { margin: 10px !important; }
.u-marginAl { margin: 20px !important; }

/* Vertical */

.u-paddingVn { padding-top: 0 !important; padding-bottom: 0 !important; }
.u-paddingVs { padding-top: 5px !important; padding-bottom: 5px !important; }
.u-paddingVm { padding-top: 10px !important; padding-bottom: 10px !important; }
.u-paddingVl { padding-top: 20px !important; padding-bottom: 20px !important; }

.u-marginVn { margin-top: 0 !important; margin-bottom: 0 !important; }
.u-marginVs { margin-top: 5px !important; margin-bottom: 5px !important; }
.u-marginVm { margin-top: 10px !important; margin-bottom: 10px !important; }
.u-marginVl { margin-top: 20px !important; margin-bottom: 20px !important; }

/* Horizontal */

.u-paddingHn { padding-left: 0 !important; padding-right: 0 !important; }
.u-paddingHs { padding-left: 5px !important; padding-right: 5px !important; }
.u-paddingHm { padding-left: 10px !important; padding-right: 10px !important; }
.u-paddingHl { padding-left: 20px !important; padding-right: 20px !important; }

.u-marginHn { margin-left: 0 !important; margin-right: 0 !important; }
.u-marginHs { margin-left: 5px !important; margin-right: 5px !important; }
.u-marginHm { margin-left: 10px !important; margin-right: 10px !important; }
.u-marginHl { margin-left: 20px !important; margin-right: 20px !important; }

/* Top */

.u-paddingTn { padding-top: 0 !important; }
.u-paddingTs { padding-top: 5px !important; }
.u-paddingTm { padding-top: 10px !important; }
.u-paddingTl { padding-top: 20px !important; }

.u-marginTn { margin-top: 0 !important; }
.u-marginTs { margin-top: 5px !important; }
.u-marginTm { margin-top: 10px !important; }
.u-marginTl { margin-top: 20px !important; }

/* Bottom */

.u-paddingBn { padding-bottom: 0 !important; }
.u-paddingBs { padding-bottom: 5px !important; }
.u-paddingBm { padding-bottom: 10px !important; }
.u-paddingBl { padding-bottom: 20px !important; }

.u-marginBn { margin-bottom: 0 !important; }
.u-marginBs { margin-bottom: 5px !important; }
.u-marginBm { margin-bottom: 10px !important; }
.u-marginBl { margin-bottom: 20px !important; }

/* Left */

.u-paddingLn { padding-left: 0 !important; }
.u-paddingLs { padding-left: 5px !important; }
.u-paddingLm { padding-left: 10px !important; }
.u-paddingLl { padding-left: 20px !important; }

.u-marginLn { margin-left: 0 !important; }
.u-marginLs { margin-left: 5px !important; }
.u-marginLm { margin-left: 10px !important; }
.u-marginLl { margin-left: 20px !important; }

/* Right */

.u-paddingRn { padding-right: 0 !important; }
.u-paddingRs { padding-right: 5px !important; }
.u-paddingRm { padding-right: 10px !important; }
.u-paddingRl { padding-right: 20px !important; }

.u-marginRn { margin-right: 0 !important; }
.u-marginRs { margin-right: 5px !important; }
.u-marginRm { margin-right: 10px !important; }
.u-marginRl { margin-right: 20px !important; }