UNPKG

uikit/src/scss/components/margin.scss

Version:

1// Name:            Margin
2// Description:     Utilities for margins
3//
4// Component:       `uk-margin-*`
5//                  `uk-margin-small-*`
6//                  `uk-margin-medium-*`
7//                  `uk-margin-large-*`
8//                  `uk-margin-xlarge-*`
9//                  `uk-margin-remove-*`
10//                  `uk-margin-auto-*`
11//
12// ========================================================================
13
14
15// Variables
16// ========================================================================
17
18$margin-margin:                                         $global-margin !default;
19
20$margin-small-margin:                                   $global-small-margin !default;
21
22$margin-medium-margin:                                  $global-medium-margin !default;
23
24$margin-large-margin:                                   $global-medium-margin !default;
25$margin-large-margin-l:                                 $global-large-margin !default;
26
27$margin-xlarge-margin:                                  $global-large-margin !default;
28$margin-xlarge-margin-l:                                $global-xlarge-margin !default;
29
30
31/* ========================================================================
32   Component: Margin
33 ========================================================================== */
34
35/*
36 * Default
37 */
38
39.uk-margin { margin-bottom: $margin-margin; }
40* + .uk-margin { margin-top: $margin-margin !important; }
41
42.uk-margin-top { margin-top: $margin-margin !important; }
43.uk-margin-bottom { margin-bottom: $margin-margin !important; }
44.uk-margin-left { margin-left: $margin-margin !important; }
45.uk-margin-right { margin-right: $margin-margin !important; }
46
47
48/* Small
49 ========================================================================== */
50
51.uk-margin-small { margin-bottom: $margin-small-margin; }
52* + .uk-margin-small { margin-top: $margin-small-margin !important; }
53
54.uk-margin-small-top { margin-top: $margin-small-margin !important; }
55.uk-margin-small-bottom { margin-bottom: $margin-small-margin !important; }
56.uk-margin-small-left { margin-left: $margin-small-margin !important; }
57.uk-margin-small-right { margin-right: $margin-small-margin !important; }
58
59
60/* Medium
61 ========================================================================== */
62
63.uk-margin-medium { margin-bottom: $margin-medium-margin; }
64* + .uk-margin-medium { margin-top: $margin-medium-margin !important; }
65
66.uk-margin-medium-top { margin-top: $margin-medium-margin !important; }
67.uk-margin-medium-bottom { margin-bottom: $margin-medium-margin !important; }
68.uk-margin-medium-left { margin-left: $margin-medium-margin !important; }
69.uk-margin-medium-right { margin-right: $margin-medium-margin !important; }
70
71
72/* Large
73 ========================================================================== */
74
75.uk-margin-large { margin-bottom: $margin-large-margin; }
76* + .uk-margin-large { margin-top: $margin-large-margin !important; }
77
78.uk-margin-large-top { margin-top: $margin-large-margin !important; }
79.uk-margin-large-bottom { margin-bottom: $margin-large-margin !important; }
80.uk-margin-large-left { margin-left: $margin-large-margin !important; }
81.uk-margin-large-right { margin-right: $margin-large-margin !important; }
82
83/* Desktop and bigger */
84@media (min-width: $breakpoint-large) {
85
86    .uk-margin-large { margin-bottom: $margin-large-margin-l; }
87    * + .uk-margin-large { margin-top: $margin-large-margin-l !important; }
88
89    .uk-margin-large-top { margin-top: $margin-large-margin-l !important; }
90    .uk-margin-large-bottom { margin-bottom: $margin-large-margin-l !important; }
91    .uk-margin-large-left { margin-left: $margin-large-margin-l !important; }
92    .uk-margin-large-right { margin-right: $margin-large-margin-l !important; }
93
94}
95
96
97/* XLarge
98 ========================================================================== */
99
100.uk-margin-xlarge { margin-bottom: $margin-xlarge-margin; }
101* + .uk-margin-xlarge { margin-top: $margin-xlarge-margin !important; }
102
103.uk-margin-xlarge-top { margin-top: $margin-xlarge-margin !important; }
104.uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin !important; }
105.uk-margin-xlarge-left { margin-left: $margin-xlarge-margin !important; }
106.uk-margin-xlarge-right { margin-right: $margin-xlarge-margin !important; }
107
108/* Desktop and bigger */
109@media (min-width: $breakpoint-large) {
110
111    .uk-margin-xlarge { margin-bottom: $margin-xlarge-margin-l; }
112    * + .uk-margin-xlarge { margin-top: $margin-xlarge-margin-l !important; }
113
114    .uk-margin-xlarge-top { margin-top: $margin-xlarge-margin-l !important; }
115    .uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin-l !important; }
116    .uk-margin-xlarge-left { margin-left: $margin-xlarge-margin-l !important; }
117    .uk-margin-xlarge-right { margin-right: $margin-xlarge-margin-l !important; }
118
119}
120
121
122/* Auto
123 ========================================================================== */
124
125.uk-margin-auto {
126    margin-left: auto !important;
127    margin-right: auto !important;
128}
129
130.uk-margin-auto-top { margin-top: auto !important; }
131.uk-margin-auto-bottom { margin-bottom: auto !important; }
132.uk-margin-auto-left { margin-left: auto !important; }
133.uk-margin-auto-right { margin-right: auto !important; }
134
135.uk-margin-auto-vertical {
136    margin-top: auto !important;
137    margin-bottom: auto !important;
138}
139
140/* Phone landscape and bigger */
141@media (min-width: $breakpoint-small) {
142
143    .uk-margin-auto\@s {
144        margin-left: auto !important;
145        margin-right: auto !important;
146    }
147
148    .uk-margin-auto-left\@s { margin-left: auto !important; }
149    .uk-margin-auto-right\@s { margin-right: auto !important; }
150
151}
152
153/* Tablet landscape and bigger */
154@media (min-width: $breakpoint-medium) {
155
156    .uk-margin-auto\@m {
157        margin-left: auto !important;
158        margin-right: auto !important;
159    }
160
161    .uk-margin-auto-left\@m { margin-left: auto !important; }
162    .uk-margin-auto-right\@m { margin-right: auto !important; }
163
164}
165
166/* Desktop and bigger */
167@media (min-width: $breakpoint-large) {
168
169    .uk-margin-auto\@l {
170        margin-left: auto !important;
171        margin-right: auto !important;
172    }
173
174    .uk-margin-auto-left\@l { margin-left: auto !important; }
175    .uk-margin-auto-right\@l { margin-right: auto !important; }
176
177}
178
179/* Large screen and bigger */
180@media (min-width: $breakpoint-xlarge) {
181
182    .uk-margin-auto\@xl {
183        margin-left: auto !important;
184        margin-right: auto !important;
185    }
186
187    .uk-margin-auto-left\@xl { margin-left: auto !important; }
188    .uk-margin-auto-right\@xl { margin-right: auto !important; }
189
190}
191
192
193/* Remove
194 ========================================================================== */
195
196 .uk-margin-remove { margin: 0 !important; }
197 .uk-margin-remove-top { margin-top: 0 !important; }
198 .uk-margin-remove-bottom { margin-bottom: 0 !important; }
199 .uk-margin-remove-left { margin-left: 0 !important; }
200 .uk-margin-remove-right { margin-right: 0 !important; }
201 
202 .uk-margin-remove-vertical {
203     margin-top: 0 !important;
204     margin-bottom: 0 !important;
205 }
206 
207 .uk-margin-remove-adjacent + *,
208 .uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }
209 .uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }
210
211/* Phone landscape and bigger */
212@media (min-width: $breakpoint-small) {
213
214    .uk-margin-remove-left\@s { margin-left: 0 !important; }
215    .uk-margin-remove-right\@s { margin-right: 0 !important; }
216
217}
218
219/* Tablet landscape and bigger */
220@media (min-width: $breakpoint-medium) {
221
222    .uk-margin-remove-left\@m { margin-left: 0 !important; }
223    .uk-margin-remove-right\@m { margin-right: 0 !important; }
224
225}
226
227/* Desktop and bigger */
228@media (min-width: $breakpoint-large) {
229
230    .uk-margin-remove-left\@l { margin-left: 0 !important; }
231    .uk-margin-remove-right\@l { margin-right: 0 !important; }
232
233}
234
235/* Large screen and bigger */
236@media (min-width: $breakpoint-xlarge) {
237
238    .uk-margin-remove-left\@xl { margin-left: 0 !important; }
239    .uk-margin-remove-right\@xl { margin-right: 0 !important; }
240
241}
242
243
244
245// Hooks
246// ========================================================================
247
248@if(mixin-exists(hook-margin-misc)) {@include hook-margin-misc();}
249
250// @mixin hook-margin-misc(){}

1	`// Name: Margin`
2	`// Description: Utilities for margins`
3	`//`
4	// Component: `uk-margin-*`
5	// `uk-margin-small-*`
6	// `uk-margin-medium-*`
7	// `uk-margin-large-*`
8	// `uk-margin-xlarge-*`
9	// `uk-margin-remove-*`
10	// `uk-margin-auto-*`
11	`//`
12	`// ========================================================================`
13
14
15	`// Variables`
16	`// ========================================================================`
17
18	`$margin-margin: $global-margin !default;`
19
20	`$margin-small-margin: $global-small-margin !default;`
21
22	`$margin-medium-margin: $global-medium-margin !default;`
23
24	`$margin-large-margin: $global-medium-margin !default;`
25	`$margin-large-margin-l: $global-large-margin !default;`
26
27	`$margin-xlarge-margin: $global-large-margin !default;`
28	`$margin-xlarge-margin-l: $global-xlarge-margin !default;`
29
30
31	`/* ========================================================================`
32	`Component: Margin`
33	`========================================================================== */`
34
35	`/*`
36	`* Default`
37	`*/`
38
39	`.uk-margin { margin-bottom: $margin-margin; }`
40	`* + .uk-margin { margin-top: $margin-margin !important; }`
41
42	`.uk-margin-top { margin-top: $margin-margin !important; }`
43	`.uk-margin-bottom { margin-bottom: $margin-margin !important; }`
44	`.uk-margin-left { margin-left: $margin-margin !important; }`
45	`.uk-margin-right { margin-right: $margin-margin !important; }`
46
47
48	`/* Small`
49	`========================================================================== */`
50
51	`.uk-margin-small { margin-bottom: $margin-small-margin; }`
52	`* + .uk-margin-small { margin-top: $margin-small-margin !important; }`
53
54	`.uk-margin-small-top { margin-top: $margin-small-margin !important; }`
55	`.uk-margin-small-bottom { margin-bottom: $margin-small-margin !important; }`
56	`.uk-margin-small-left { margin-left: $margin-small-margin !important; }`
57	`.uk-margin-small-right { margin-right: $margin-small-margin !important; }`
58
59
60	`/* Medium`
61	`========================================================================== */`
62
63	`.uk-margin-medium { margin-bottom: $margin-medium-margin; }`
64	`* + .uk-margin-medium { margin-top: $margin-medium-margin !important; }`
65
66	`.uk-margin-medium-top { margin-top: $margin-medium-margin !important; }`
67	`.uk-margin-medium-bottom { margin-bottom: $margin-medium-margin !important; }`
68	`.uk-margin-medium-left { margin-left: $margin-medium-margin !important; }`
69	`.uk-margin-medium-right { margin-right: $margin-medium-margin !important; }`
70
71
72	`/* Large`
73	`========================================================================== */`
74
75	`.uk-margin-large { margin-bottom: $margin-large-margin; }`
76	`* + .uk-margin-large { margin-top: $margin-large-margin !important; }`
77
78	`.uk-margin-large-top { margin-top: $margin-large-margin !important; }`
79	`.uk-margin-large-bottom { margin-bottom: $margin-large-margin !important; }`
80	`.uk-margin-large-left { margin-left: $margin-large-margin !important; }`
81	`.uk-margin-large-right { margin-right: $margin-large-margin !important; }`
82
83	`/* Desktop and bigger */`
84	`@media (min-width: $breakpoint-large) {`
85
86	`.uk-margin-large { margin-bottom: $margin-large-margin-l; }`
87	`* + .uk-margin-large { margin-top: $margin-large-margin-l !important; }`
88
89	`.uk-margin-large-top { margin-top: $margin-large-margin-l !important; }`
90	`.uk-margin-large-bottom { margin-bottom: $margin-large-margin-l !important; }`
91	`.uk-margin-large-left { margin-left: $margin-large-margin-l !important; }`
92	`.uk-margin-large-right { margin-right: $margin-large-margin-l !important; }`
93
94	`}`
95
96
97	`/* XLarge`
98	`========================================================================== */`
99
100	`.uk-margin-xlarge { margin-bottom: $margin-xlarge-margin; }`
101	`* + .uk-margin-xlarge { margin-top: $margin-xlarge-margin !important; }`
102
103	`.uk-margin-xlarge-top { margin-top: $margin-xlarge-margin !important; }`
104	`.uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin !important; }`
105	`.uk-margin-xlarge-left { margin-left: $margin-xlarge-margin !important; }`
106	`.uk-margin-xlarge-right { margin-right: $margin-xlarge-margin !important; }`
107
108	`/* Desktop and bigger */`
109	`@media (min-width: $breakpoint-large) {`
110
111	`.uk-margin-xlarge { margin-bottom: $margin-xlarge-margin-l; }`
112	`* + .uk-margin-xlarge { margin-top: $margin-xlarge-margin-l !important; }`
113
114	`.uk-margin-xlarge-top { margin-top: $margin-xlarge-margin-l !important; }`
115	`.uk-margin-xlarge-bottom { margin-bottom: $margin-xlarge-margin-l !important; }`
116	`.uk-margin-xlarge-left { margin-left: $margin-xlarge-margin-l !important; }`
117	`.uk-margin-xlarge-right { margin-right: $margin-xlarge-margin-l !important; }`
118
119	`}`
120
121
122	`/* Auto`
123	`========================================================================== */`
124
125	`.uk-margin-auto {`
126	`margin-left: auto !important;`
127	`margin-right: auto !important;`
128	`}`
129
130	`.uk-margin-auto-top { margin-top: auto !important; }`
131	`.uk-margin-auto-bottom { margin-bottom: auto !important; }`
132	`.uk-margin-auto-left { margin-left: auto !important; }`
133	`.uk-margin-auto-right { margin-right: auto !important; }`
134
135	`.uk-margin-auto-vertical {`
136	`margin-top: auto !important;`
137	`margin-bottom: auto !important;`
138	`}`
139
140	`/* Phone landscape and bigger */`
141	`@media (min-width: $breakpoint-small) {`
142
143	`.uk-margin-auto\@s {`
144	`margin-left: auto !important;`
145	`margin-right: auto !important;`
146	`}`
147
148	`.uk-margin-auto-left\@s { margin-left: auto !important; }`
149	`.uk-margin-auto-right\@s { margin-right: auto !important; }`
150
151	`}`
152
153	`/* Tablet landscape and bigger */`
154	`@media (min-width: $breakpoint-medium) {`
155
156	`.uk-margin-auto\@m {`
157	`margin-left: auto !important;`
158	`margin-right: auto !important;`
159	`}`
160
161	`.uk-margin-auto-left\@m { margin-left: auto !important; }`
162	`.uk-margin-auto-right\@m { margin-right: auto !important; }`
163
164	`}`
165
166	`/* Desktop and bigger */`
167	`@media (min-width: $breakpoint-large) {`
168
169	`.uk-margin-auto\@l {`
170	`margin-left: auto !important;`
171	`margin-right: auto !important;`
172	`}`
173
174	`.uk-margin-auto-left\@l { margin-left: auto !important; }`
175	`.uk-margin-auto-right\@l { margin-right: auto !important; }`
176
177	`}`
178
179	`/* Large screen and bigger */`
180	`@media (min-width: $breakpoint-xlarge) {`
181
182	`.uk-margin-auto\@xl {`
183	`margin-left: auto !important;`
184	`margin-right: auto !important;`
185	`}`
186
187	`.uk-margin-auto-left\@xl { margin-left: auto !important; }`
188	`.uk-margin-auto-right\@xl { margin-right: auto !important; }`
189
190	`}`
191
192
193	`/* Remove`
194	`========================================================================== */`
195
196	`.uk-margin-remove { margin: 0 !important; }`
197	`.uk-margin-remove-top { margin-top: 0 !important; }`
198	`.uk-margin-remove-bottom { margin-bottom: 0 !important; }`
199	`.uk-margin-remove-left { margin-left: 0 !important; }`
200	`.uk-margin-remove-right { margin-right: 0 !important; }`
201
202	`.uk-margin-remove-vertical {`
203	`margin-top: 0 !important;`
204	`margin-bottom: 0 !important;`
205	`}`
206
207	`.uk-margin-remove-adjacent + *,`
208	`.uk-margin-remove-first-child > :first-child { margin-top: 0 !important; }`
209	`.uk-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }`
210
211	`/* Phone landscape and bigger */`
212	`@media (min-width: $breakpoint-small) {`
213
214	`.uk-margin-remove-left\@s { margin-left: 0 !important; }`
215	`.uk-margin-remove-right\@s { margin-right: 0 !important; }`
216
217	`}`
218
219	`/* Tablet landscape and bigger */`
220	`@media (min-width: $breakpoint-medium) {`
221
222	`.uk-margin-remove-left\@m { margin-left: 0 !important; }`
223	`.uk-margin-remove-right\@m { margin-right: 0 !important; }`
224
225	`}`
226
227	`/* Desktop and bigger */`
228	`@media (min-width: $breakpoint-large) {`
229
230	`.uk-margin-remove-left\@l { margin-left: 0 !important; }`
231	`.uk-margin-remove-right\@l { margin-right: 0 !important; }`
232
233	`}`
234
235	`/* Large screen and bigger */`
236	`@media (min-width: $breakpoint-xlarge) {`
237
238	`.uk-margin-remove-left\@xl { margin-left: 0 !important; }`
239	`.uk-margin-remove-right\@xl { margin-right: 0 !important; }`
240
241	`}`
242
243
244
245	`// Hooks`
246	`// ========================================================================`
247
248	`@if(mixin-exists(hook-margin-misc)) {@include hook-margin-misc();}`
249
250	`// @mixin hook-margin-misc(){}`