|
0
|
1 /********************************
|
|
|
2 *********************************
|
|
|
3 HELPER CLASSES
|
|
|
4 *********************************
|
|
|
5 *********************************/
|
|
|
6
|
|
|
7 /* Colors
|
|
|
8 ========================*/
|
|
|
9 @each $col, $val in $theme-colors {
|
|
|
10 .progress-bar-#{$col},
|
|
|
11 .bg-#{$col} {
|
|
|
12 background-color: $val !important;
|
|
|
13 border-color: $val !important;
|
|
|
14 color: #fff;
|
|
|
15 }
|
|
|
16
|
|
|
17 .bg-#{$col}-dark {
|
|
|
18 background-color: darken($val, 10%);
|
|
|
19 border-color: darken($val, 10%);
|
|
|
20 }
|
|
|
21
|
|
|
22 .bg-#{$col}-light {
|
|
|
23 background-color: lighten($val, 15%);
|
|
|
24 border-color: lighten($val, 15%);
|
|
|
25 }
|
|
|
26
|
|
|
27 .bg-#{$col}-contrast {
|
|
|
28 background-color: rgba($val,.1);
|
|
|
29 color: $val;
|
|
|
30 }
|
|
|
31
|
|
|
32 a.bg-#{$col}-contrast:hover {
|
|
|
33 background: $val;
|
|
|
34 }
|
|
|
35
|
|
|
36 %color-#{$col},
|
|
|
37 .color-#{$col},
|
|
|
38 .color-hover-#{$col}:hover,
|
|
|
39 .text-#{$col} {
|
|
|
40 color: $val !important;
|
|
|
41 }
|
|
|
42
|
|
|
43 .border-color-#{$col} {
|
|
|
44 border-color: $val !important;
|
|
|
45 }
|
|
|
46 }
|
|
|
47
|
|
|
48 @each $col, $val in $colors {
|
|
|
49 .badge-#{$col},
|
|
|
50 .progress-bar-#{$col},
|
|
|
51 .bg-#{$col} {
|
|
|
52 background-color: $val !important;
|
|
|
53 border-color: $val;
|
|
|
54 }
|
|
|
55
|
|
|
56 .bg-#{$col}-dark {
|
|
|
57 background-color: darken($val, 10%);
|
|
|
58 border-color: darken($val, 10%);
|
|
|
59 }
|
|
|
60
|
|
|
61 .bg-#{$col}-light {
|
|
|
62 background-color: lighten($val, 15%);
|
|
|
63 border-color: lighten($val, 15%);
|
|
|
64 }
|
|
|
65
|
|
|
66 .color-#{$col},
|
|
|
67 .color-hover-#{$col}:hover,
|
|
|
68 .text-#{$col} {
|
|
|
69 color: $val !important;
|
|
|
70 h1,h2,h3,h4,h5,h6 { color: $val !important; }
|
|
|
71 }
|
|
|
72
|
|
|
73 .border-color-#{$col} {
|
|
|
74 border-color: $val !important;
|
|
|
75 }
|
|
|
76 }
|
|
|
77
|
|
|
78 .bg-none {
|
|
|
79 background: none !important;
|
|
|
80 }
|
|
|
81
|
|
|
82 /* Basic
|
|
|
83 ========================*/
|
|
|
84 @mixin hidden {display: none}
|
|
|
85 %block, .block {display: block}
|
|
|
86 %inline, .inline {display: inline}
|
|
|
87 %inline-block, .inline-block {display: inline-block}
|
|
|
88
|
|
|
89 %overflow-hidden, .overflow-hidden {overflow: hidden}
|
|
|
90 %overflow-scroll, .overflow-scroll {overflow: scroll}
|
|
|
91 %overflow-auto, .overflow-auto {overflow: auto}
|
|
|
92
|
|
|
93 %pre, .pre {white-space: pre}
|
|
|
94 %nowrap, .nowrap {white-space: nowrap}
|
|
|
95 %resize-none, .resize-none {resize: none}
|
|
|
96 %resize-vertical, .resize-vertical {resize: vertical}
|
|
|
97 %resize-horizontal, .resize-horizontal {resize: horizontal}
|
|
|
98 %cursor-pointer, .cursor-pointer {cursor: pointer}
|
|
|
99 %no-pointer-events, .no-pointer-events { pointer-events: none}
|
|
|
100 %border-0, .border-0 {border: 0;}
|
|
|
101 %vertical-middle, .vertical-middle { vertical-align: middle !important }
|
|
|
102
|
|
|
103 %disabled,
|
|
|
104 .disabled {
|
|
|
105 opacity: 0.5;
|
|
|
106 cursor: not-allowed;
|
|
|
107 pointer-events: none;
|
|
|
108 }
|
|
|
109
|
|
|
110 %fullscreen,
|
|
|
111 .fullscreen {
|
|
|
112 min-height: 100vh;
|
|
|
113 min-width: 100%;
|
|
|
114 }
|
|
|
115
|
|
|
116 %scroll-horizontal,
|
|
|
117 .scroll-horizontal {
|
|
|
118 overflow-x: scroll;
|
|
|
119 overflow-y: hidden;
|
|
|
120 }
|
|
|
121
|
|
|
122 %scroll-vertical,
|
|
|
123 .scroll-vertical {
|
|
|
124 overflow-x: hidden;
|
|
|
125 overflow-y: scroll;
|
|
|
126 }
|
|
|
127
|
|
|
128 .no-scrollbar::-webkit-scrollbar {
|
|
|
129 width: 0;
|
|
|
130 height: 0;
|
|
|
131 background: transparent;
|
|
|
132 }
|
|
|
133
|
|
|
134
|
|
|
135 /* Position
|
|
|
136 ========================*/
|
|
|
137 %pos-static, .pos-static {position: static}
|
|
|
138 %pos-fixed, .pos-fixed {position: fixed}
|
|
|
139 %pos-relative, .pos-relative {position: relative}
|
|
|
140 %pos-absolute, .pos-absolute {position: absolute}
|
|
|
141 %pos-top, .pos-top {top: 0}
|
|
|
142 %pos-right, .pos-right {right: 0}
|
|
|
143 %pos-left, .pos-left {left: 0}
|
|
|
144 %pos-bottom, .pos-bottom {bottom: 0}
|
|
|
145 %pos-left, .pos-left {left: 0}
|
|
|
146 %pos-0, .pos-0 {
|
|
|
147 @extend .pos-absolute;
|
|
|
148 @extend .pos-left;
|
|
|
149 @extend .pos-right;
|
|
|
150 @extend .pos-bottom;
|
|
|
151 @extend .pos-top;
|
|
|
152 }
|
|
|
153
|
|
|
154 %horizontal-center,
|
|
|
155 .horizontal-center {
|
|
|
156 position: absolute;
|
|
|
157 left: 50%;
|
|
|
158 transform: translateX(-50%);
|
|
|
159 }
|
|
|
160
|
|
|
161 %vertical-center,
|
|
|
162 .vertical-center {
|
|
|
163 position: absolute;
|
|
|
164 top: 50%;
|
|
|
165 transform: translateY(-50%);
|
|
|
166 }
|
|
|
167
|
|
|
168 %absolute-center,
|
|
|
169 .absolute-center {
|
|
|
170 position: absolute;
|
|
|
171 top: 50%;
|
|
|
172 left: 50%;
|
|
|
173 transform: translate(-50%, -50%);
|
|
|
174 }
|
|
|
175
|
|
|
176 /* Opacity
|
|
|
177 =========================*/
|
|
|
178 %opacity-0 , .opacity-0-hover:hover, .opacity-0 {opacity: 0}
|
|
|
179 %opacity-01, .opacity-01-hover:hover, .opacity-01 {opacity: 0.1}
|
|
|
180 %opacity-02, .opacity-02-hover:hover, .opacity-02 {opacity: 0.2}
|
|
|
181 %opacity-03, .opacity-03-hover:hover, .opacity-03 {opacity: 0.3}
|
|
|
182 %opacity-04, .opacity-04-hover:hover, .opacity-04 {opacity: 0.4}
|
|
|
183 %opacity-05, .opacity-05-hover:hover, .opacity-05 {opacity: 0.5}
|
|
|
184 %opacity-06, .opacity-06-hover:hover, .opacity-06 {opacity: 0.6}
|
|
|
185 %opacity-07, .opacity-07-hover:hover, .opacity-07 {opacity: 0.7}
|
|
|
186 %opacity-08, .opacity-08-hover:hover, .opacity-08 {opacity: 0.8}
|
|
|
187 %opacity-09, .opacity-09-hover:hover, .opacity-09 {opacity: 0.9}
|
|
|
188 %opacity-1 , .opacity-1-hover:hover, .opacity-1 {opacity: 1}
|
|
|
189
|
|
|
190
|
|
|
191 /* Width
|
|
|
192 =========================*/
|
|
|
193 %width-100, .width-100 {width: 100%}
|
|
|
194 %width-80 , .width-80 {width: 80%}
|
|
|
195 %width-75 , .width-75 {width: 75%}
|
|
|
196 %width-67 , .width-67 {width: 66.66666666666667%}
|
|
|
197 %width-50 , .width-50 {width: 50%}
|
|
|
198 %width-33 , .width-33 {width: 33.33333333333333%}
|
|
|
199 %width-25 , .width-25 {width: 25%}
|
|
|
200 %width-20 , .width-20 {width: 20%}
|
|
|
201
|
|
|
202 /* Font Weight
|
|
|
203 ========================*/
|
|
|
204 @for $i from 1 through 9 {
|
|
|
205 %flex-#{$i},
|
|
|
206 .flex-#{$i} { flex: 1 }
|
|
|
207 }
|
|
|
208
|
|
|
209 /* Font Weight
|
|
|
210 ========================*/
|
|
|
211 @for $i from 1 through 9 {
|
|
|
212 %fw-#{$i}00,
|
|
|
213 .fw-#{$i}00 {
|
|
|
214 font-weight: #{$i * 100} !important;
|
|
|
215 }
|
|
|
216 }
|
|
|
217 %fw-normal, .fw-normal {font-weight: $font-weight-normal;}
|
|
|
218 %fw-medium, .fw-medium{font-weight: $font-weight-medium;}
|
|
|
219 %fw-semibold, .fw-semibold{font-weight: $font-weight-semibold;}
|
|
|
220 %fw-bold, .fw-bold{font-weight: $font-weight-bold;}
|
|
|
221 %italic, .italic {font-style: italic;}
|
|
|
222
|
|
|
223 .text-indent-full {
|
|
|
224 text-indent: -9999px;
|
|
|
225 }
|
|
|
226
|
|
|
227 /* Z Index
|
|
|
228 ========================*/
|
|
|
229 @for $i from 1 through 9 {
|
|
|
230 %zi-#{$i},
|
|
|
231 .zi-#{$i} {
|
|
|
232 z-index: #{$i} !important;
|
|
|
233 }
|
|
|
234 }
|
|
|
235 .zi-n-1 {
|
|
|
236 z-index: -1 !important;
|
|
|
237 }
|
|
|
238
|
|
|
239 /* Font Size
|
|
|
240 ========================*/
|
|
|
241 $font-sizes: 10;
|
|
|
242
|
|
|
243 @while $font-sizes <= 60 {
|
|
|
244 %fs-#{$font-sizes},
|
|
|
245 .fs-#{$font-sizes} {
|
|
|
246 font-size: rem($font-sizes) !important;
|
|
|
247 }
|
|
|
248
|
|
|
249 @if $font-sizes < 16 {
|
|
|
250 $font-sizes: $font-sizes + 1;
|
|
|
251 } @else {
|
|
|
252 $font-sizes: $font-sizes + 2;
|
|
|
253 }
|
|
|
254 }
|
|
|
255
|
|
|
256 .fs-base {
|
|
|
257 font-size: $font-size-base !important;
|
|
|
258 }
|
|
|
259
|
|
|
260 /* Letter Spacing
|
|
|
261 ========================*/
|
|
|
262 .letter-spacing-minus {
|
|
|
263 letter-spacing: em(-.8,16px);
|
|
|
264 }
|
|
|
265
|
|
|
266 .letter-spacing-plus {
|
|
|
267 letter-spacing: em(.8,16px);
|
|
|
268 }
|
|
|
269
|
|
|
270 /* Text Helpers
|
|
|
271 ========================*/
|
|
|
272 .text-underline {
|
|
|
273 text-decoration: underline;
|
|
|
274 }
|
|
|
275
|
|
|
276 /* Line Height
|
|
|
277 ========================*/
|
|
|
278 @for $i from 10 through 30 {
|
|
|
279 %lh-#{$i},
|
|
|
280 .lh-#{$i} {
|
|
|
281 line-height: #{$i/10}em;
|
|
|
282 }
|
|
|
283 }
|
|
|
284
|
|
|
285 /* Border Helpers
|
|
|
286 =========================*/
|
|
|
287 %border-left, .border-left { border-left: $border-width solid $theme-border-color }
|
|
|
288 %border-top, .border-top { border-top: $border-width solid $theme-border-color }
|
|
|
289 %border-right, .border-right { border-right: $border-width solid $theme-border-color }
|
|
|
290 %border-bottom, .border-bottom{ border-bottom: $border-width solid $theme-border-color }
|
|
|
291 %border-left-rtl, body.rtl .border-left-rtl { border-left: $border-width solid $theme-border-color }
|
|
|
292 %border-top-rtl, body.rtl .border-top-rtl { border-top: $border-width solid $theme-border-color }
|
|
|
293 %border-right-rtl, body.rtl .border-right-rtl { border-right: $border-width solid $theme-border-color }
|
|
|
294 %border-bottom-rtl, body.rtl .border-bottom-rtl { border-bottom: $border-width solid $theme-border-color }
|
|
|
295 %border-all, .border-all {
|
|
|
296 @extend .border-left;
|
|
|
297 @extend .border-right;
|
|
|
298 @extend .border-top;
|
|
|
299 @extend .border-bottom;
|
|
|
300 }
|
|
|
301
|
|
|
302 %border-left-dotted, .border-left-dotted { border-left-style: dotted }
|
|
|
303 %border-left-dashed, .border-left-dashed { border-left-style: dashed }
|
|
|
304 %border-left-solid, .border-left-solid { border-left-style: solid }
|
|
|
305 %border-left-double, .border-left-double { border-left-style: double }
|
|
|
306 %border-left-groove, .border-left-groove { border-left-style: groove }
|
|
|
307 %border-left-ridge, .border-left-ridge { border-left-style: ridge }
|
|
|
308 %border-left-inset, .border-left-inset { border-left-style: ridge }
|
|
|
309 %border-left-outset, .border-left-outset { border-left-style: outset }
|
|
|
310 %border-left-none, .border-left-none { border-left-style: none }
|
|
|
311 %border-left-hidden, .border-left-hidden { border-left-style: hidden }
|
|
|
312
|
|
|
313 %border-right-dotted, .border-right-dotted { border-right-style: dotted }
|
|
|
314 %border-right-dashed, .border-right-dashed { border-right-style: dashed }
|
|
|
315 %border-right-solid , .border-right-solid { border-right-style: solid }
|
|
|
316 %border-right-double, .border-right-double { border-right-style: double }
|
|
|
317 %border-right-groove, .border-right-groove { border-right-style: groove }
|
|
|
318 %border-right-ridge , .border-right-ridge { border-right-style: ridge }
|
|
|
319 %border-right-inset , .border-right-inset { border-right-style: ridge }
|
|
|
320 %border-right-outset, .border-right-outset { border-right-style: outset }
|
|
|
321 %border-right-none , .border-right-none { border-right-style: none }
|
|
|
322 %border-right-hidden, .border-right-hidden { border-right-style: hidden }
|
|
|
323
|
|
|
324 %border-top-dotted, .border-top-dotted { border-top-style: dotted }
|
|
|
325 %border-top-dashed, .border-top-dashed { border-top-style: dashed }
|
|
|
326 %border-top-solid , .border-top-solid { border-top-style: solid }
|
|
|
327 %border-top-double, .border-top-double { border-top-style: double }
|
|
|
328 %border-top-groove, .border-top-groove { border-top-style: groove }
|
|
|
329 %border-top-ridge , .border-top-ridge { border-top-style: ridge }
|
|
|
330 %border-top-inset , .border-top-inset { border-top-style: ridge }
|
|
|
331 %border-top-outset, .border-top-outset { border-top-style: outset }
|
|
|
332 %border-top-none , .border-top-none { border-top-style: none }
|
|
|
333 %border-top-hidden, .border-top-hidden { border-top-style: hidden }
|
|
|
334
|
|
|
335 %border-bottom-dotted, .border-bottom-dotted { border-bottom-style: dotted }
|
|
|
336 %border-bottom-dashed, .border-bottom-dashed { border-bottom-style: dashed }
|
|
|
337 %border-bottom-solid , .border-bottom-solid { border-bottom-style: solid }
|
|
|
338 %border-bottom-double, .border-bottom-double { border-bottom-style: double }
|
|
|
339 %border-bottom-groove, .border-bottom-groove { border-bottom-style: groove }
|
|
|
340 %border-bottom-ridge , .border-bottom-ridge { border-bottom-style: ridge }
|
|
|
341 %border-bottom-inset , .border-bottom-inset { border-bottom-style: ridge }
|
|
|
342 %border-bottom-outset, .border-bottom-outset { border-bottom-style: outset }
|
|
|
343 %border-bottom-none , .border-bottom-none { border-bottom-style: none }
|
|
|
344 %border-bottom-hidden, .border-bottom-hidden { border-bottom-style: hidden }
|
|
|
345
|
|
|
346 %border-y-dotted, .border-y-dotted { @extend .border-top-dotted; @extend .border-bottom-dotted }
|
|
|
347 %border-y-dashed, .border-y-dashed { @extend .border-top-dashed; @extend .border-bottom-dashed }
|
|
|
348 %border-y-solid , .border-y-solid { @extend .border-top-solid; @extend .border-bottom-solid }
|
|
|
349 %border-y-double, .border-y-double { @extend .border-top-double; @extend .border-bottom-double }
|
|
|
350 %border-y-groove, .border-y-groove { @extend .border-top-groove; @extend .border-bottom-groove }
|
|
|
351 %border-y-ridge , .border-y-ridge { @extend .border-top-ridge; @extend .border-bottom-ridge }
|
|
|
352 %border-y-inset , .border-y-inset { @extend .border-top-inset; @extend .border-bottom-inset }
|
|
|
353 %border-y-outset, .border-y-outset { @extend .border-top-outset; @extend .border-bottom-outset }
|
|
|
354 %border-y-none , .border-y-none { @extend .border-top-none; @extend .border-bottom-none }
|
|
|
355 %border-y-hidden, .border-y-hidden { @extend .border-top-hidden; @extend .border-bottom-hidden }
|
|
|
356
|
|
|
357 %border-x-dotted, .border-x-dotted { @extend .border-right-dotted; @extend .border-left-dotted }
|
|
|
358 %border-x-dashed, .border-x-dashed { @extend .border-right-dashed; @extend .border-left-dashed }
|
|
|
359 %border-x-solid , .border-x-solid { @extend .border-right-solid; @extend .border-left-solid }
|
|
|
360 %border-x-double, .border-x-double { @extend .border-right-double; @extend .border-left-double }
|
|
|
361 %border-x-groove, .border-x-groove { @extend .border-right-groove; @extend .border-left-groove }
|
|
|
362 %border-x-ridge , .border-x-ridge { @extend .border-right-ridge; @extend .border-left-ridge }
|
|
|
363 %border-x-inset , .border-x-inset { @extend .border-right-inset; @extend .border-left-inset }
|
|
|
364 %border-x-outset, .border-x-outset { @extend .border-right-outset; @extend .border-left-outset }
|
|
|
365 %border-x-none , .border-x-none { @extend .border-right-none; @extend .border-left-none }
|
|
|
366 %border-x-hidden, .border-x-hidden { @extend .border-right-hidden; @extend .border-left-hidden }
|
|
|
367
|
|
|
368 %border-dotted, .border-dotted { @extend .border-x-dotted; @extend .border-y-dotted }
|
|
|
369 %border-dashed, .border-dashed { @extend .border-x-dashed; @extend .border-y-dashed }
|
|
|
370 %border-solid , .border-solid { @extend .border-x-solid; @extend .border-y-solid }
|
|
|
371 %border-double, .border-double { @extend .border-x-double; @extend .border-y-double }
|
|
|
372 %border-groove, .border-groove { @extend .border-x-groove; @extend .border-y-groove }
|
|
|
373 %border-ridge , .border-ridge { @extend .border-x-ridge; @extend .border-y-ridge }
|
|
|
374 %border-inset , .border-inset { @extend .border-x-inset; @extend .border-y-inset }
|
|
|
375 %border-outset, .border-outset { @extend .border-x-outset; @extend .border-y-outset }
|
|
|
376 %border-none , .border-none { @extend .border-x-none; @extend .border-y-none }
|
|
|
377 %border-hidden, .border-hidden { @extend .border-x-hidden; @extend .border-y-hidden }
|
|
|
378
|
|
|
379 /* Border Width
|
|
|
380 =========================*/
|
|
|
381 @for $i from 0 through 10 {
|
|
|
382 %bw-y-#{$i},
|
|
|
383 %bw-t-#{$i},
|
|
|
384 .bw-y-#{$i},
|
|
|
385 .bw-t-#{$i},
|
|
|
386 body.rtl .bw-y-#{$i}-rtl,
|
|
|
387 body.rtl .bw-t-#{$i}-rtl {
|
|
|
388 border-top-width: #{$i}px !important;
|
|
|
389 }
|
|
|
390 %bw-y-#{$i},
|
|
|
391 %bw-b-#{$i},
|
|
|
392 .bw-y-#{$i},
|
|
|
393 .bw-b-#{$i},
|
|
|
394 body.rtl .bw-y-#{$i}-rtl,
|
|
|
395 body.rtl .bw-b-#{$i}-rtl {
|
|
|
396 border-bottom-width: #{$i}px !important;
|
|
|
397 }
|
|
|
398 %bw-x-#{$i},
|
|
|
399 %bw-r-#{$i},
|
|
|
400 .bw-x-#{$i},
|
|
|
401 .bw-r-#{$i},
|
|
|
402 body.rtl .bw-x-#{$i}-rtl,
|
|
|
403 body.rtl .bw-r-#{$i}-rtl {
|
|
|
404 border-right-width: #{$i}px !important;
|
|
|
405 }
|
|
|
406 %bw-y-#{$i},
|
|
|
407 %bw-l-#{$i},
|
|
|
408 .bw-y-#{$i},
|
|
|
409 .bw-l-#{$i},
|
|
|
410 body.rtl .bw-y-#{$i}-rtl,
|
|
|
411 body.rtl .bw-l-#{$i}-rtl {
|
|
|
412 border-left-width: #{$i}px !important;
|
|
|
413 }
|
|
|
414 %bw-#{$i},
|
|
|
415 body.rtl .bw-#{$i}-rtl,
|
|
|
416 .bw-#{$i} {
|
|
|
417 @extend .bw-x-#{$i};
|
|
|
418 @extend .bw-y-#{$i};
|
|
|
419 }
|
|
|
420 }
|
|
|
421
|
|
|
422 /* Border Radius
|
|
|
423 =========================*/
|
|
|
424 %radius-0, .radius-0 { border-radius: 0; }
|
|
|
425 %radius-full, .radius-full { border-radius: 100%; }
|
|
|
426 @for $i from 2 through 20 {
|
|
|
427 %radius-#{$i}, .radius-#{$i} {
|
|
|
428 border-radius: #{$i}px !important;
|
|
|
429 overflow: hidden;
|
|
|
430 }
|
|
|
431 }
|
|
|
432
|
|
|
433 /* Padding & Margin
|
|
|
434 =========================*/
|
|
|
435 %padded-reverse, .padded-reverse { margin: 0 -20px}
|
|
|
436
|
|
|
437 %mr-lr-auto, .mr-lr-auto {
|
|
|
438 margin-left: auto;
|
|
|
439 margin-right: auto;
|
|
|
440 }
|
|
|
441
|
|
|
442 $num-list: 0 5 10 20 30 40 50 60 70 80 90 100 150 200;
|
|
|
443 @each $current-num in $num-list {
|
|
|
444
|
|
|
445 body.rtl .pd-t-#{$current-num}-rtl,
|
|
|
446 body.rtl .pd-tb-#{$current-num}-rtl,
|
|
|
447 %pd-t-#{$current-num},
|
|
|
448 %pd-tb-#{$current-num},
|
|
|
449 .pd-t-#{$current-num},
|
|
|
450 .pd-tb-#{$current-num} {
|
|
|
451 padding-top: #{$current-num/16}rem !important;
|
|
|
452 }
|
|
|
453
|
|
|
454 body.rtl .pd-b-#{$current-num}-rtl,
|
|
|
455 body.rtl .pd-tb-#{$current-num}-rtl,
|
|
|
456 %pd-b-#{$current-num},
|
|
|
457 %pd-tb-#{$current-num},
|
|
|
458 .pd-b-#{$current-num},
|
|
|
459 .pd-tb-#{$current-num} {
|
|
|
460 padding-bottom: #{$current-num/16}rem !important;
|
|
|
461 }
|
|
|
462
|
|
|
463 body.rtl .pd-#{$current-num}-rtl,
|
|
|
464 %pd-#{$current-num},
|
|
|
465 .pd-#{$current-num} {
|
|
|
466 padding: #{$current-num/16}rem !important;
|
|
|
467 }
|
|
|
468
|
|
|
469 body.rtl .mr-t-#{$current-num}-rtl,
|
|
|
470 body.rtl .mr-tb-#{$current-num}-rtl,
|
|
|
471 %mr-t-#{$current-num},
|
|
|
472 %mr-tb-#{$current-num},
|
|
|
473 .mr-t-#{$current-num},
|
|
|
474 .mr-tb-#{$current-num} {
|
|
|
475 margin-top: #{$current-num/16}rem !important;
|
|
|
476 }
|
|
|
477
|
|
|
478 body.rtl .mr-b-#{$current-num}-rtl,
|
|
|
479 body.rtl .mr-tb-#{$current-num}-rtl,
|
|
|
480 %mr-b-#{$current-num},
|
|
|
481 %mr-tb-#{$current-num},
|
|
|
482 .mr-b-#{$current-num},
|
|
|
483 .mr-tb-#{$current-num} {
|
|
|
484 margin-bottom: #{$current-num/16}rem !important;
|
|
|
485 }
|
|
|
486
|
|
|
487 body.rtl .mr-#{$current-num}-rtl,
|
|
|
488 %mr-#{$current-num},
|
|
|
489 .mr-#{$current-num} {
|
|
|
490 margin: #{$current-num/16}rem !important;
|
|
|
491 }
|
|
|
492 }
|
|
|
493
|
|
|
494 $num-list: 0 5 10 15 20 30 40 50 60 70 80 90;
|
|
|
495 @each $current-num in $num-list {
|
|
|
496
|
|
|
497 body.rtl .pd-l-#{$current-num}-rtl,
|
|
|
498 body.rtl .pd-lr-#{$current-num}-rtl,
|
|
|
499 %pd-l-#{$current-num},
|
|
|
500 %pd-lr-#{$current-num},
|
|
|
501 .pd-l-#{$current-num},
|
|
|
502 .pd-lr-#{$current-num} {
|
|
|
503 padding-left: #{$current-num/16}rem !important;
|
|
|
504 }
|
|
|
505
|
|
|
506 body.rtl .pd-r-#{$current-num}-rtl,
|
|
|
507 body.rtl .pd-lr-#{$current-num}-rtl,
|
|
|
508 %pd-r-#{$current-num},
|
|
|
509 %pd-lr-#{$current-num},
|
|
|
510 .pd-r-#{$current-num},
|
|
|
511 .pd-lr-#{$current-num} {
|
|
|
512 padding-right: #{$current-num/16}rem !important;
|
|
|
513 }
|
|
|
514
|
|
|
515 body.rtl .mr-l-#{$current-num}-rtl,
|
|
|
516 body.rtl .mr-lr-#{$current-num}-rtl,
|
|
|
517 %mr-l-#{$current-num},
|
|
|
518 %mr-lr-#{$current-num},
|
|
|
519 .mr-l-#{$current-num},
|
|
|
520 .mr-lr-#{$current-num} {
|
|
|
521 margin-left: #{$current-num/16}rem !important;
|
|
|
522 }
|
|
|
523
|
|
|
524 body.rtl .mr-r-#{$current-num}-rtl,
|
|
|
525 body.rtl .mr-lr-#{$current-num}-rtl,
|
|
|
526 %mr-r-#{$current-num},
|
|
|
527 %mr-lr-#{$current-num},
|
|
|
528 .mr-r-#{$current-num},
|
|
|
529 .mr-lr-#{$current-num} {
|
|
|
530 margin-right: #{$current-num/16}rem !important;
|
|
|
531 }
|
|
|
532 }
|
|
|
533
|
|
|
534 /* RTL Margin Helpers
|
|
|
535 =========================*/
|
|
|
536 body.rtl {
|
|
|
537 @each $i,$val in $spacers {
|
|
|
538 .ml-#{$i}-rtl { margin-left: $val !important }
|
|
|
539 .mr-#{$i}-rtl { margin-right: $val !important }
|
|
|
540 .mt-#{$i}-rtl { margin-top: $val !important }
|
|
|
541 .mb-#{$i}-rtl { margin-bottom: $val !important }
|
|
|
542 .mx-#{$i}-rtl {
|
|
|
543 @extend .ml-#{$i}-rtl;
|
|
|
544 @extend .mr-#{$i}-rtl;
|
|
|
545 }
|
|
|
546 .my-#{$i}-rtl {
|
|
|
547 @extend .mt-#{$i}-rtl;
|
|
|
548 @extend .mb-#{$i}-rtl;
|
|
|
549 }
|
|
|
550 .m-#{$i}-rtl {
|
|
|
551 @extend .my-#{$i}-rtl;
|
|
|
552 @extend .mx-#{$i}-rtl;
|
|
|
553 }
|
|
|
554 }
|
|
|
555
|
|
|
556 .mr-auto-rtl { margin-right: auto !important }
|
|
|
557 .ml-auto-rtl { margin-left: auto !important }
|
|
|
558 .mt-auto-rtl { margin-top: auto !important }
|
|
|
559 .mb-auto-rtl { margin-bottom: auto !important }
|
|
|
560 .mx-auto-rtl {
|
|
|
561 @extend .ml-auto-rtl;
|
|
|
562 @extend .mr-auto-rtl;
|
|
|
563 }
|
|
|
564 .my-auto-rtl {
|
|
|
565 @extend .ml-auto-rtl;
|
|
|
566 @extend .mr-auto-rtl;
|
|
|
567 }
|
|
|
568 .m-auto-rtl {
|
|
|
569 @extend .my-auto-rtl;
|
|
|
570 @extend .mx-auto-rtl;
|
|
|
571 }
|
|
|
572 }
|
|
|
573
|
|
|
574 /* RTL Padding Helpers
|
|
|
575 =========================*/
|
|
|
576 body.rtl {
|
|
|
577 @each $i,$val in $spacers {
|
|
|
578 .pl-#{$i}-rtl { padding-left: $val !important }
|
|
|
579 .pr-#{$i}-rtl { padding-right: $val !important }
|
|
|
580 .pt-#{$i}-rtl { padding-top: $val !important }
|
|
|
581 .pb-#{$i}-rtl { padding-bottom: $val !important }
|
|
|
582 .px-#{$i}-rtl {
|
|
|
583 @extend .pl-#{$i}-rtl;
|
|
|
584 @extend .pr-#{$i}-rtl;
|
|
|
585 }
|
|
|
586 .py-#{$i}-rtl {
|
|
|
587 @extend .pt-#{$i}-rtl;
|
|
|
588 @extend .pb-#{$i}-rtl;
|
|
|
589 }
|
|
|
590 .p-#{$i}-rtl {
|
|
|
591 @extend .py-#{$i}-rtl;
|
|
|
592 @extend .px-#{$i}-rtl;
|
|
|
593 }
|
|
|
594 }
|
|
|
595 }
|
|
|
596
|
|
|
597 /* Float RTL Helpers
|
|
|
598 =========================*/
|
|
|
599 body.rtl {
|
|
|
600 .float-right-rtl { float: right !important }
|
|
|
601 .float-left-rtl { float: left !important }
|
|
|
602 .float-none-rtl { float: none !important }
|
|
|
603 @each $i, $val in $grid-breakpoints {
|
|
|
604 .float-#{$i}-right-rtl { float: right !important }
|
|
|
605 .float-#{$i}-left-rtl { float: left !important }
|
|
|
606 }
|
|
|
607 }
|
|
|
608
|
|
|
609
|
|
|
610 /* Width Helpers
|
|
|
611 =========================*/
|
|
|
612 @for $i from 1 through 10 {
|
|
|
613 .w-#{$i * 10} { width: #{ $i * 10 }% !important }
|
|
|
614 }
|
