Mercurial > nebulaweb3

comparison default/assets/scss/base/_helpers.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }