UNPKG

8.13 kBCSSView Raw
1/*
2 NEGATIVE MARGINS
3
4 Base:
5 n = negative
6
7 Modifiers:
8 a = all
9 t = top
10 r = right
11 b = bottom
12 l = left
13
14 1 = 1st step in spacing scale
15 2 = 2nd step in spacing scale
16 3 = 3rd step in spacing scale
17 4 = 4th step in spacing scale
18 5 = 5th step in spacing scale
19 6 = 6th step in spacing scale
20 7 = 7th step in spacing scale
21
22 Media Query Extensions:
23 -ns = not-small
24 -m = medium
25 -l = large
26
27*/
28
29
30
31.na1 { margin: -var(--spacing-extra-small); }
32.na2 { margin: -var(--spacing-small); }
33.na3 { margin: -var(--spacing-medium); }
34.na4 { margin: -var(--spacing-large); }
35.na5 { margin: -var(--spacing-extra-large); }
36.na6 { margin: -var(--spacing-extra-extra-large); }
37.na7 { margin: -var(--spacing-extra-extra-extra-large); }
38
39.nl1 { margin-left: -var(--spacing-extra-small); }
40.nl2 { margin-left: -var(--spacing-small); }
41.nl3 { margin-left: -var(--spacing-medium); }
42.nl4 { margin-left: -var(--spacing-large); }
43.nl5 { margin-left: -var(--spacing-extra-large); }
44.nl6 { margin-left: -var(--spacing-extra-extra-large); }
45.nl7 { margin-left: -var(--spacing-extra-extra-extra-large); }
46
47.nr1 { margin-right: -var(--spacing-extra-small); }
48.nr2 { margin-right: -var(--spacing-small); }
49.nr3 { margin-right: -var(--spacing-medium); }
50.nr4 { margin-right: -var(--spacing-large); }
51.nr5 { margin-right: -var(--spacing-extra-large); }
52.nr6 { margin-right: -var(--spacing-extra-extra-large); }
53.nr7 { margin-right: -var(--spacing-extra-extra-extra-large); }
54
55.nb1 { margin-bottom: -var(--spacing-extra-small); }
56.nb2 { margin-bottom: -var(--spacing-small); }
57.nb3 { margin-bottom: -var(--spacing-medium); }
58.nb4 { margin-bottom: -var(--spacing-large); }
59.nb5 { margin-bottom: -var(--spacing-extra-large); }
60.nb6 { margin-bottom: -var(--spacing-extra-extra-large); }
61.nb7 { margin-bottom: -var(--spacing-extra-extra-extra-large); }
62
63.nt1 { margin-top: -var(--spacing-extra-small); }
64.nt2 { margin-top: -var(--spacing-small); }
65.nt3 { margin-top: -var(--spacing-medium); }
66.nt4 { margin-top: -var(--spacing-large); }
67.nt5 { margin-top: -var(--spacing-extra-large); }
68.nt6 { margin-top: -var(--spacing-extra-extra-large); }
69.nt7 { margin-top: -var(--spacing-extra-extra-extra-large); }
70
71@media (--breakpoint-not-small) {
72
73 .na1-ns { margin: -var(--spacing-extra-small); }
74 .na2-ns { margin: -var(--spacing-small); }
75 .na3-ns { margin: -var(--spacing-medium); }
76 .na4-ns { margin: -var(--spacing-large); }
77 .na5-ns { margin: -var(--spacing-extra-large); }
78 .na6-ns { margin: -var(--spacing-extra-extra-large); }
79 .na7-ns { margin: -var(--spacing-extra-extra-extra-large); }
80
81 .nl1-ns { margin-left: -var(--spacing-extra-small); }
82 .nl2-ns { margin-left: -var(--spacing-small); }
83 .nl3-ns { margin-left: -var(--spacing-medium); }
84 .nl4-ns { margin-left: -var(--spacing-large); }
85 .nl5-ns { margin-left: -var(--spacing-extra-large); }
86 .nl6-ns { margin-left: -var(--spacing-extra-extra-large); }
87 .nl7-ns { margin-left: -var(--spacing-extra-extra-extra-large); }
88
89 .nr1-ns { margin-right: -var(--spacing-extra-small); }
90 .nr2-ns { margin-right: -var(--spacing-small); }
91 .nr3-ns { margin-right: -var(--spacing-medium); }
92 .nr4-ns { margin-right: -var(--spacing-large); }
93 .nr5-ns { margin-right: -var(--spacing-extra-large); }
94 .nr6-ns { margin-right: -var(--spacing-extra-extra-large); }
95 .nr7-ns { margin-right: -var(--spacing-extra-extra-extra-large); }
96
97 .nb1-ns { margin-bottom: -var(--spacing-extra-small); }
98 .nb2-ns { margin-bottom: -var(--spacing-small); }
99 .nb3-ns { margin-bottom: -var(--spacing-medium); }
100 .nb4-ns { margin-bottom: -var(--spacing-large); }
101 .nb5-ns { margin-bottom: -var(--spacing-extra-large); }
102 .nb6-ns { margin-bottom: -var(--spacing-extra-extra-large); }
103 .nb7-ns { margin-bottom: -var(--spacing-extra-extra-extra-large); }
104
105 .nt1-ns { margin-top: -var(--spacing-extra-small); }
106 .nt2-ns { margin-top: -var(--spacing-small); }
107 .nt3-ns { margin-top: -var(--spacing-medium); }
108 .nt4-ns { margin-top: -var(--spacing-large); }
109 .nt5-ns { margin-top: -var(--spacing-extra-large); }
110 .nt6-ns { margin-top: -var(--spacing-extra-extra-large); }
111 .nt7-ns { margin-top: -var(--spacing-extra-extra-extra-large); }
112
113}
114
115@media (--breakpoint-medium) {
116 .na1-m { margin: -var(--spacing-extra-small); }
117 .na2-m { margin: -var(--spacing-small); }
118 .na3-m { margin: -var(--spacing-medium); }
119 .na4-m { margin: -var(--spacing-large); }
120 .na5-m { margin: -var(--spacing-extra-large); }
121 .na6-m { margin: -var(--spacing-extra-extra-large); }
122 .na7-m { margin: -var(--spacing-extra-extra-extra-large); }
123
124 .nl1-m { margin-left: -var(--spacing-extra-small); }
125 .nl2-m { margin-left: -var(--spacing-small); }
126 .nl3-m { margin-left: -var(--spacing-medium); }
127 .nl4-m { margin-left: -var(--spacing-large); }
128 .nl5-m { margin-left: -var(--spacing-extra-large); }
129 .nl6-m { margin-left: -var(--spacing-extra-extra-large); }
130 .nl7-m { margin-left: -var(--spacing-extra-extra-extra-large); }
131
132 .nr1-m { margin-right: -var(--spacing-extra-small); }
133 .nr2-m { margin-right: -var(--spacing-small); }
134 .nr3-m { margin-right: -var(--spacing-medium); }
135 .nr4-m { margin-right: -var(--spacing-large); }
136 .nr5-m { margin-right: -var(--spacing-extra-large); }
137 .nr6-m { margin-right: -var(--spacing-extra-extra-large); }
138 .nr7-m { margin-right: -var(--spacing-extra-extra-extra-large); }
139
140 .nb1-m { margin-bottom: -var(--spacing-extra-small); }
141 .nb2-m { margin-bottom: -var(--spacing-small); }
142 .nb3-m { margin-bottom: -var(--spacing-medium); }
143 .nb4-m { margin-bottom: -var(--spacing-large); }
144 .nb5-m { margin-bottom: -var(--spacing-extra-large); }
145 .nb6-m { margin-bottom: -var(--spacing-extra-extra-large); }
146 .nb7-m { margin-bottom: -var(--spacing-extra-extra-extra-large); }
147
148 .nt1-m { margin-top: -var(--spacing-extra-small); }
149 .nt2-m { margin-top: -var(--spacing-small); }
150 .nt3-m { margin-top: -var(--spacing-medium); }
151 .nt4-m { margin-top: -var(--spacing-large); }
152 .nt5-m { margin-top: -var(--spacing-extra-large); }
153 .nt6-m { margin-top: -var(--spacing-extra-extra-large); }
154 .nt7-m { margin-top: -var(--spacing-extra-extra-extra-large); }
155
156}
157
158@media (--breakpoint-large) {
159 .na1-l { margin: -var(--spacing-extra-small); }
160 .na2-l { margin: -var(--spacing-small); }
161 .na3-l { margin: -var(--spacing-medium); }
162 .na4-l { margin: -var(--spacing-large); }
163 .na5-l { margin: -var(--spacing-extra-large); }
164 .na6-l { margin: -var(--spacing-extra-extra-large); }
165 .na7-l { margin: -var(--spacing-extra-extra-extra-large); }
166
167 .nl1-l { margin-left: -var(--spacing-extra-small); }
168 .nl2-l { margin-left: -var(--spacing-small); }
169 .nl3-l { margin-left: -var(--spacing-medium); }
170 .nl4-l { margin-left: -var(--spacing-large); }
171 .nl5-l { margin-left: -var(--spacing-extra-large); }
172 .nl6-l { margin-left: -var(--spacing-extra-extra-large); }
173 .nl7-l { margin-left: -var(--spacing-extra-extra-extra-large); }
174
175 .nr1-l { margin-right: -var(--spacing-extra-small); }
176 .nr2-l { margin-right: -var(--spacing-small); }
177 .nr3-l { margin-right: -var(--spacing-medium); }
178 .nr4-l { margin-right: -var(--spacing-large); }
179 .nr5-l { margin-right: -var(--spacing-extra-large); }
180 .nr6-l { margin-right: -var(--spacing-extra-extra-large); }
181 .nr7-l { margin-right: -var(--spacing-extra-extra-extra-large); }
182
183 .nb1-l { margin-bottom: -var(--spacing-extra-small); }
184 .nb2-l { margin-bottom: -var(--spacing-small); }
185 .nb3-l { margin-bottom: -var(--spacing-medium); }
186 .nb4-l { margin-bottom: -var(--spacing-large); }
187 .nb5-l { margin-bottom: -var(--spacing-extra-large); }
188 .nb6-l { margin-bottom: -var(--spacing-extra-extra-large); }
189 .nb7-l { margin-bottom: -var(--spacing-extra-extra-extra-large); }
190
191 .nt1-l { margin-top: -var(--spacing-extra-small); }
192 .nt2-l { margin-top: -var(--spacing-small); }
193 .nt3-l { margin-top: -var(--spacing-medium); }
194 .nt4-l { margin-top: -var(--spacing-large); }
195 .nt5-l { margin-top: -var(--spacing-extra-large); }
196 .nt6-l { margin-top: -var(--spacing-extra-extra-large); }
197 .nt7-l { margin-top: -var(--spacing-extra-extra-extra-large); }
198}