responsive-scale-mixins 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/scss/_mixins.scss +41 -21
- package/scss/_variables.scss +5 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "responsive-scale-mixins",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.3",
|
|
4
4
|
"description": "🎨 Revolutionary SCSS mixins for perfect responsive design. Supports ALL CSS units (px, rem, em, vw, vh, %, etc.) with pixel-perfect scaling. Zero manual calculations - just flawless responsive typography, spacing, and dimensions across desktop, tablet, and mobile. Framework-agnostic, modern CSS variables, works everywhere.",
|
|
5
5
|
"main": "index.scss",
|
|
6
6
|
"style": "index.scss",
|
package/scss/_mixins.scss
CHANGED
|
@@ -24,7 +24,15 @@
|
|
|
24
24
|
// Media queries: Desktop (default), Tablet (768-991px), Mobile (≤767px). */
|
|
25
25
|
|
|
26
26
|
@function scaled-value($val, $scale-var, $unit: px) {
|
|
27
|
-
@
|
|
27
|
+
@if $scale-var == "--computed-scale-factor" {
|
|
28
|
+
@return calc(100vw / var(--desktop-width) * #{$val}#{$unit});
|
|
29
|
+
} @else if $scale-var == "--computed-tablet-scale-factor" {
|
|
30
|
+
@return calc(100vw / var(--tablet-width) * #{$val}#{$unit});
|
|
31
|
+
} @else if $scale-var == "--computed-mobile-scale-factor" {
|
|
32
|
+
@return calc(100vw / var(--mobile-width) * #{$val}#{$unit});
|
|
33
|
+
} @else {
|
|
34
|
+
@return calc(var(#{$scale-var}) * #{$val}#{$unit});
|
|
35
|
+
}
|
|
28
36
|
}
|
|
29
37
|
|
|
30
38
|
@function get-scale-factor($unit) {
|
|
@@ -60,24 +68,29 @@
|
|
|
60
68
|
$calc-value: calc(
|
|
61
69
|
#{$desktop-value} /
|
|
62
70
|
100 *
|
|
63
|
-
|
|
71
|
+
100vw /
|
|
72
|
+
var(--desktop-width) *
|
|
73
|
+
#{$desktop-relative} *
|
|
74
|
+
#{$unit}
|
|
64
75
|
);
|
|
65
76
|
#{$property}: #{$calc-value}#{$important};
|
|
66
77
|
}
|
|
67
78
|
|
|
68
79
|
@media screen and (min-width: 768px) and (max-width: 991px) {
|
|
69
|
-
$tablet-scale-factor: get-tablet-scale-factor($unit);
|
|
70
80
|
@if $desktop-relative != null and $mobile-relative != null {
|
|
71
81
|
$calc-value: calc(
|
|
72
82
|
#{$mobile-value} /
|
|
73
83
|
100 *
|
|
74
84
|
(
|
|
75
|
-
|
|
85
|
+
100vw /
|
|
86
|
+
var(--tablet-width) *
|
|
76
87
|
(
|
|
77
|
-
#{$mobile-relative}
|
|
78
|
-
var(--
|
|
79
|
-
(
|
|
80
|
-
|
|
88
|
+
#{$mobile-relative} +
|
|
89
|
+
(100vw - var(--mobile-width)) /
|
|
90
|
+
(var(--desktop-width) - var(--mobile-width)) *
|
|
91
|
+
(#{$desktop-relative} - #{$mobile-relative})
|
|
92
|
+
) *
|
|
93
|
+
#{$unit}
|
|
81
94
|
)
|
|
82
95
|
);
|
|
83
96
|
#{$property}: #{$calc-value}#{$important};
|
|
@@ -85,12 +98,14 @@
|
|
|
85
98
|
}
|
|
86
99
|
|
|
87
100
|
@media screen and (max-width: 767px) {
|
|
88
|
-
$mobile-scale-factor: get-mobile-scale-factor($unit);
|
|
89
101
|
@if $mobile-relative != null {
|
|
90
102
|
$calc-value: calc(
|
|
91
103
|
#{$mobile-value} /
|
|
92
104
|
100 *
|
|
93
|
-
|
|
105
|
+
100vw /
|
|
106
|
+
var(--mobile-width) *
|
|
107
|
+
#{$mobile-relative} *
|
|
108
|
+
#{$unit}
|
|
94
109
|
);
|
|
95
110
|
#{$property}: #{$calc-value}#{$important};
|
|
96
111
|
}
|
|
@@ -112,7 +127,6 @@
|
|
|
112
127
|
}
|
|
113
128
|
|
|
114
129
|
@media screen and (min-width: 768px) and (max-width: 991px) {
|
|
115
|
-
$tablet-scale-factor: get-tablet-scale-factor($unit);
|
|
116
130
|
@if type-of($desktop-value) == list {
|
|
117
131
|
$tablet-scaled: ();
|
|
118
132
|
@for $i from 1 through length($desktop-value) {
|
|
@@ -121,24 +135,30 @@
|
|
|
121
135
|
$tablet-scaled: append(
|
|
122
136
|
$tablet-scaled,
|
|
123
137
|
calc(
|
|
124
|
-
|
|
138
|
+
100vw /
|
|
139
|
+
var(--tablet-width) *
|
|
125
140
|
(
|
|
126
|
-
#{$m-val}
|
|
127
|
-
var(--
|
|
128
|
-
(
|
|
129
|
-
|
|
141
|
+
#{$m-val} +
|
|
142
|
+
(100vw - var(--mobile-width)) /
|
|
143
|
+
(var(--desktop-width) - var(--mobile-width)) *
|
|
144
|
+
(#{$d-val} - #{$m-val})
|
|
145
|
+
) *
|
|
146
|
+
#{$unit}
|
|
130
147
|
)
|
|
131
148
|
);
|
|
132
149
|
}
|
|
133
150
|
#{$property}: #{$tablet-scaled}#{$important};
|
|
134
151
|
} @else {
|
|
135
152
|
$calc-value: calc(
|
|
136
|
-
|
|
153
|
+
100vw /
|
|
154
|
+
var(--tablet-width) *
|
|
137
155
|
(
|
|
138
|
-
#{$mobile-value}
|
|
139
|
-
var(--
|
|
140
|
-
(
|
|
141
|
-
|
|
156
|
+
#{$mobile-value} +
|
|
157
|
+
(100vw - var(--mobile-width)) /
|
|
158
|
+
(var(--desktop-width) - var(--mobile-width)) *
|
|
159
|
+
(#{$desktop-value} - #{$mobile-value})
|
|
160
|
+
) *
|
|
161
|
+
#{$unit}
|
|
142
162
|
);
|
|
143
163
|
#{$property}: #{$calc-value}#{$important};
|
|
144
164
|
}
|
package/scss/_variables.scss
CHANGED
|
@@ -8,6 +8,11 @@
|
|
|
8
8
|
$tablet-width: 768px,
|
|
9
9
|
$mobile-width: 390px
|
|
10
10
|
) {
|
|
11
|
+
// Design widths for direct calc expressions
|
|
12
|
+
--desktop-width: #{$desktop-width};
|
|
13
|
+
--tablet-width: #{$tablet-width};
|
|
14
|
+
--mobile-width: #{$mobile-width};
|
|
15
|
+
|
|
11
16
|
// Desktop scale factor (generic - unit is appended in calc expressions)
|
|
12
17
|
--computed-scale-factor: calc(100vw / #{$desktop-width});
|
|
13
18
|
|