| 16825 |
efrain |
1 |
//width mixin
|
|
|
2 |
@mixin make-width($num, $viewport: "") {
|
|
|
3 |
$p: $num + "%";
|
|
|
4 |
|
|
|
5 |
@if $viewport == "" {
|
|
|
6 |
$viewport: "-";
|
|
|
7 |
} @else {
|
|
|
8 |
$viewport: "-" + $viewport + "-";
|
|
|
9 |
}
|
|
|
10 |
|
|
|
11 |
.wd#{$viewport}#{$num} { width: #{$num}px; }
|
|
|
12 |
.wd#{$viewport}#{$num}p { width: #{$p}; }
|
|
|
13 |
.mx-wd#{$viewport}#{$num}p { max-width: #{$p}; }
|
|
|
14 |
.mn-wd#{$viewport}#{$num}p { min-width: #{$p}; }
|
|
|
15 |
|
|
|
16 |
.wd#{$viewport}#{$num}-f { width: #{$num}px !important; }
|
|
|
17 |
.wd#{$viewport}#{$num}p-f { width: #{$p} !important; }
|
|
|
18 |
.mx-wd#{$viewport}#{$num}p-f { max-width: #{$p} !important; }
|
|
|
19 |
.mn-wd#{$viewport}#{$num}p-f { min-width: #{$p} !important; }
|
|
|
20 |
}
|
|
|
21 |
|
|
|
22 |
$num: 5;
|
|
|
23 |
@while $num <= 100 {
|
|
|
24 |
@include make-width($num);
|
|
|
25 |
$num: $num + 5;
|
|
|
26 |
}
|
|
|
27 |
|
|
|
28 |
$num: 150;
|
|
|
29 |
@while $num <= 1000 {
|
|
|
30 |
.wd-#{$num} { width: #{$num}px; }
|
|
|
31 |
.wd-#{$num}-f { width: #{$num}px !important; }
|
|
|
32 |
$num: $num + 50;
|
|
|
33 |
}
|
|
|
34 |
|
|
|
35 |
@mixin do-make-width($viewport, $num, $max, $plus) {
|
|
|
36 |
@while $num <= $max {
|
|
|
37 |
@include make-width($num,$viewport);
|
|
|
38 |
$num: $num + $plus;
|
|
|
39 |
}
|
|
|
40 |
}
|
|
|
41 |
|
|
|
42 |
@media (min-width: 480px) {
|
|
|
43 |
@include do-make-width("xs",5,100,5);
|
|
|
44 |
@include do-make-width("xs",150,1000,50);
|
|
|
45 |
|
|
|
46 |
.wd-xs-auto { width: auto; }
|
|
|
47 |
.wd-xs-auto-f { width: auto !important; }
|
|
|
48 |
}
|
|
|
49 |
|
|
|
50 |
@include media-breakpoint-up(sm) {
|
|
|
51 |
@include do-make-width("sm",5,100,5);
|
|
|
52 |
@include do-make-width("sm",150,1000,50);
|
|
|
53 |
|
|
|
54 |
.wd-sm-auto { width: auto; }
|
|
|
55 |
.wd-sm-auto-f { width: auto !important; }
|
|
|
56 |
}
|
|
|
57 |
|
|
|
58 |
@include media-breakpoint-up(md) {
|
|
|
59 |
@include do-make-width("md",5,100,5);
|
|
|
60 |
@include do-make-width("md",150,1000,50);
|
|
|
61 |
|
|
|
62 |
.wd-md-auto { width: auto; }
|
|
|
63 |
.wd-md-auto-f { width: auto !important; }
|
|
|
64 |
|
|
|
65 |
//Custom
|
|
|
66 |
.wd-md-120 { width: 120px; }
|
|
|
67 |
}
|
|
|
68 |
|
|
|
69 |
@include media-breakpoint-up(lg) {
|
|
|
70 |
@include do-make-width("lg",5,100,5);
|
|
|
71 |
@include do-make-width("lg",150,1000,50);
|
|
|
72 |
|
|
|
73 |
.wd-lg-auto { width: auto; }
|
|
|
74 |
.wd-lg-auto-f { width: auto !important; }
|
|
|
75 |
}
|
|
|
76 |
|
|
|
77 |
@include media-breakpoint-up(xl) {
|
|
|
78 |
@include do-make-width("xl",5,100,5);
|
|
|
79 |
@include do-make-width("xl",150,1000,50);
|
|
|
80 |
|
|
|
81 |
.wd-xl-auto { width: auto; }
|
|
|
82 |
.wd-xl-auto { width: auto !important; }
|
|
|
83 |
}
|
|
|
84 |
|
|
|
85 |
@include media-breakpoint-up(xxl) {
|
|
|
86 |
@include do-make-width("xxl",5,100,5);
|
|
|
87 |
@include do-make-width("xxl",150,1000,50);
|
|
|
88 |
|
|
|
89 |
.wd-xxl-auto { width: auto; }
|
|
|
90 |
.wd-xxl-auto { width: auto !important; }
|
|
|
91 |
}
|