@neatui/css 3.3.8 → 3.3.10

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.
Files changed (6) hide show
  1. package/core/basic.scss +5 -3
  2. package/core/grid.scss +84 -238
  3. package/core/media.scss +221 -66
  4. package/core/trim.scss +4 -4
  5. package/package.json +1 -1
  6. package/core/media-v2.scss +0 -100
package/core/basic.scss CHANGED
@@ -492,14 +492,16 @@ code,
492
492
 
493
493
  // 省略号
494
494
  [ui-omit] {
495
- display: -webkit-box;
496
495
  overflow: hidden;
497
496
  text-overflow: ellipsis;
498
- -webkit-box-orient: vertical;
499
497
  -webkit-text-size-adjust: 100%;
500
498
  }
499
+ [ui-omit]:not([ui-omit~='1']) {
500
+ display: -webkit-box;
501
+ -webkit-box-orient: vertical;
502
+ }
501
503
  [ui-omit~='1'] {
502
- -webkit-line-clamp: 1;
504
+ white-space: nowrap;
503
505
  }
504
506
  [ui-omit~='2'] {
505
507
  -webkit-line-clamp: 2;
package/core/grid.scss CHANGED
@@ -1,251 +1,97 @@
1
+ @use './media' as *;
2
+
1
3
  [ui-grid] {
2
4
  display: grid;
3
5
  gap: var(--gap);
4
6
  justify-content: start;
5
7
  grid-template-columns: repeat(auto-fill, minmax(calc((100% - (var(--col) - 1) * 1em) / var(--col)), 1fr));
6
8
  --col: 12;
7
- --gap: 12;
8
- }
9
- // 默认断点
10
- .n-no { --gap: 0; }
11
- .n-xs { --gap: 1px; }
12
- .n-ss { --gap: 0.25em; }
13
- .n-sm { --gap: 0.5em; }
14
- .n-sl { --gap: 0.75em; }
15
- .n-ms { --gap: 1em; }
16
- .n-mm { --gap: 1.5em; }
17
- .n-ml { --gap: 2em; }
18
- .n-ls { --gap: 2.5em; }
19
- .n-lm { --gap: 3em; }
20
- .n-ll { --gap: 4em; }
21
- .n-xl { --gap: 5em; }
22
- [ui-grid~='mob:1'],[ui-grid~='mob-s:1'] { --col: 1; }
23
- [ui-grid~='mob:2'],[ui-grid~='mob-s:2'] { --col: 2; }
24
- [ui-grid~='mob:3'],[ui-grid~='mob-s:3'] { --col: 3; }
25
- [ui-grid~='mob:4'],[ui-grid~='mob-s:4'] { --col: 4; }
26
- [ui-grid~='mob:5'],[ui-grid~='mob-s:5'] { --col: 5; }
27
- [ui-grid~='mob:6'],[ui-grid~='mob-s:6'] { --col: 6; }
28
- [ui-grid~='mob:7'],[ui-grid~='mob-s:7'] { --col: 7; }
29
- [ui-grid~='mob:8'],[ui-grid~='mob-s:8'] { --col: 8; }
30
- [ui-grid~='mob:9'],[ui-grid~='mob-s:9'] { --col: 9; }
31
- [ui-grid~='mob:10'],[ui-grid~='mob-s:10'] { --col: 10; }
32
- [ui-grid~='mob:11'],[ui-grid~='mob-s:11'] { --col: 11; }
33
- [ui-grid~='mob:12'],[ui-grid~='mob-s:12'] { --col: 12; }
34
-
35
- @media (min-width: 480px) {
36
- .n-no, .mob\:n-no, .mob-s\:n-no { --gap: 0; }
37
- .n-xs, .mob\:n-xs, .mob-s\:n-xs { --gap: 1px; }
38
- .n-ss, .mob\:n-ss, .mob-s\:n-ss { --gap: 0.25em; }
39
- .n-sm, .mob\:n-sm, .mob-s\:n-sm { --gap: 0.5em; }
40
- .n-sl, .mob\:n-sl, .mob-s\:n-sl { --gap: 0.75em; }
41
- .n-ms, .mob\:n-ms, .mob-s\:n-ms { --gap: 1em; }
42
- .n-mm, .mob\:n-mm, .mob-s\:n-mm { --gap: 1.5em; }
43
- .n-ml, .mob\:n-ml, .mob-s\:n-ml { --gap: 2em; }
44
- .n-ls, .mob\:n-ls, .mob-s\:n-ls { --gap: 2.5em; }
45
- .n-lm, .mob\:n-lm, .mob-s\:n-lm { --gap: 3em; }
46
- .n-ll, .mob\:n-ll, .mob-s\:n-ll { --gap: 4em; }
47
- .n-xl, .mob\:n-xl, .mob-s\:n-xl { --gap: 5em; }
48
-
49
- [ui-grid~='mob-m:1'] { --col: 1; }
50
- [ui-grid~='mob-m:2'] { --col: 2; }
51
- [ui-grid~='mob-m:3'] { --col: 3; }
52
- [ui-grid~='mob-m:4'] { --col: 4; }
53
- [ui-grid~='mob-m:5'] { --col: 5; }
54
- [ui-grid~='mob-m:6'] { --col: 6; }
55
- [ui-grid~='mob-m:7'] { --col: 7; }
56
- [ui-grid~='mob-m:8'] { --col: 8; }
57
- [ui-grid~='mob-m:9'] { --col: 9; }
58
- [ui-grid~='mob-m:10'] { --col: 10; }
59
- [ui-grid~='mob-m:11'] { --col: 11; }
60
- [ui-grid~='mob-m:12'] { --col: 12; }
61
-
62
- }
63
- @media (min-width: 640px) {
64
- // .mob\:n-no,.mob-l\:n-no { --gap: 0; }
65
- // .mob\:n-xs,.mob-l\:n-xs { --gap: 1px; }
66
- // .mob\:n-ss,.mob-l\:n-ss { --gap: 0.25em; }
67
- // .mob\:n-sm,.mob-l\:n-sm { --gap: 0.5em; }
68
- // .mob\:n-sl,.mob-l\:n-sl { --gap: 0.75em; }
69
- // .mob\:n-ms,.mob-l\:n-ms { --gap: 1em; }
70
- // .mob\:n-mm,.mob-l\:n-mm { --gap: 1.5em; }
71
- // .mob\:n-ml,.mob-l\:n-ml { --gap: 2em; }
72
- // .mob\:n-ls,.mob-l\:n-ls { --gap: 2.5em; }
73
- // .mob\:n-lm,.mob-l\:n-lm { --gap: 3em; }
74
- // .mob\:n-ll,.mob-l\:n-ll { --gap: 4em; }
75
- // .mob\:n-xl,.mob-l\:n-xl { --gap: 5em; }
76
-
77
- [ui-grid~='mob-l:1'] { --col: 1; }
78
- [ui-grid~='mob-l:2'] { --col: 2; }
79
- [ui-grid~='mob-l:3'] { --col: 3; }
80
- [ui-grid~='mob-l:4'] { --col: 4; }
81
- [ui-grid~='mob-l:5'] { --col: 5; }
82
- [ui-grid~='mob-l:6'] { --col: 6; }
83
- [ui-grid~='mob-l:7'] { --col: 7; }
84
- [ui-grid~='mob-l:8'] { --col: 8; }
85
- [ui-grid~='mob-l:9'] { --col: 9; }
86
- [ui-grid~='mob-l:10'] { --col: 10; }
87
- [ui-grid~='mob-l:11'] { --col: 11; }
88
- [ui-grid~='mob-l:12'] { --col: 12; }
9
+ --gap: 0;
89
10
  }
90
- @media (min-width: 800px) {
91
- // .n-no { --gap: 0; }
92
- // .n-xs { --gap: 1px; }
93
- // .n-ss { --gap: 0.25em; }
94
- // .n-sm { --gap: 0.5em; }
95
- // .n-sl { --gap: 0.75em; }
96
- // .n-ms { --gap: 1em; }
97
- // .n-mm { --gap: 1.5em; }
98
- // .n-ml { --gap: 2em; }
99
- // .n-ls { --gap: 2.5em; }
100
- // .n-lm { --gap: 3em; }
101
- // .n-ll { --gap: 4em; }
102
- // .n-xl { --gap: 5em; }
103
11
 
104
- [ui-grid~='pad:1'],[ui-grid~='pad-s:1'] { --col: 1; }
105
- [ui-grid~='pad:2'],[ui-grid~='pad-s:2'] { --col: 2; }
106
- [ui-grid~='pad:3'],[ui-grid~='pad-s:3'] { --col: 3; }
107
- [ui-grid~='pad:4'],[ui-grid~='pad-s:4'] { --col: 4; }
108
- [ui-grid~='pad:5'],[ui-grid~='pad-s:5'] { --col: 5; }
109
- [ui-grid~='pad:6'],[ui-grid~='pad-s:6'] { --col: 6; }
110
- [ui-grid~='pad:7'],[ui-grid~='pad-s:7'] { --col: 7; }
111
- [ui-grid~='pad:8'],[ui-grid~='pad-s:8'] { --col: 8; }
112
- [ui-grid~='pad:9'],[ui-grid~='pad-s:9'] { --col: 9; }
113
- [ui-grid~='pad:10'],[ui-grid~='pad-s:10'] { --col: 10; }
114
- [ui-grid~='pad:11'],[ui-grid~='pad-s:11'] { --col: 11; }
115
- [ui-grid~='pad:12'],[ui-grid~='pad-s:12'] { --col: 12; }
116
- }
117
- @media (min-width: 960px) {
118
- // .n-no { --gap: 0; }
119
- // .n-xs { --gap: 1px; }
120
- // .n-ss { --gap: 0.25em; }
121
- // .n-sm { --gap: 0.5em; }
122
- // .n-sl { --gap: 0.75em; }
123
- // .n-ms { --gap: 1em; }
124
- // .n-mm { --gap: 1.5em; }
125
- // .n-ml { --gap: 2em; }
126
- // .n-ls { --gap: 2.5em; }
127
- // .n-lm { --gap: 3em; }
128
- // .n-ll { --gap: 4em; }
129
- // .n-xl { --gap: 5em; }
130
-
131
- [ui-grid~='pad-m:1'] { --col: 1; }
132
- [ui-grid~='pad-m:2'] { --col: 2; }
133
- [ui-grid~='pad-m:3'] { --col: 3; }
134
- [ui-grid~='pad-m:4'] { --col: 4; }
135
- [ui-grid~='pad-m:5'] { --col: 5; }
136
- [ui-grid~='pad-m:6'] { --col: 6; }
137
- [ui-grid~='pad-m:7'] { --col: 7; }
138
- [ui-grid~='pad-m:8'] { --col: 8; }
139
- [ui-grid~='pad-m:9'] { --col: 9; }
140
- [ui-grid~='pad-m:10'] { --col: 10; }
141
- [ui-grid~='pad-m:11'] { --col: 11; }
142
- [ui-grid~='pad-m:12'] { --col: 12; }
143
- }
144
- @media (min-width: 1120px) {
145
- // .n-no { --gap: 0; }
146
- // .n-xs { --gap: 1px; }
147
- // .n-ss { --gap: 0.25em; }
148
- // .n-sm { --gap: 0.5em; }
149
- // .n-sl { --gap: 0.75em; }
150
- // .n-ms { --gap: 1em; }
151
- // .n-mm { --gap: 1.5em; }
152
- // .n-ml { --gap: 2em; }
153
- // .n-ls { --gap: 2.5em; }
154
- // .n-lm { --gap: 3em; }
155
- // .n-ll { --gap: 4em; }
156
- // .n-xl { --gap: 5em; }
12
+ @mixin _grid($med: '') {
13
+ // 栅格
14
+ [ui-grid~='#{$med}col-1'] {
15
+ --col: 1;
16
+ }
17
+ [ui-grid~='#{$med}col-2'] {
18
+ --col: 2;
19
+ }
20
+ [ui-grid~='#{$med}col-3'] {
21
+ --col: 3;
22
+ }
23
+ [ui-grid~='#{$med}col-4'] {
24
+ --col: 4;
25
+ }
26
+ [ui-grid~='#{$med}col-5'] {
27
+ --col: 5;
28
+ }
29
+ [ui-grid~='#{$med}col-6'] {
30
+ --col: 6;
31
+ }
32
+ [ui-grid~='#{$med}col-7'] {
33
+ --col: 7;
34
+ }
35
+ [ui-grid~='#{$med}col-8'] {
36
+ --col: 8;
37
+ }
38
+ [ui-grid~='#{$med}col-9'] {
39
+ --col: 9;
40
+ }
41
+ [ui-grid~='#{$med}col-10'] {
42
+ --col: 10;
43
+ }
44
+ [ui-grid~='#{$med}col-11'] {
45
+ --col: 11;
46
+ }
47
+ [ui-grid~='#{$med}col-12'] {
48
+ --col: 12;
49
+ }
157
50
 
158
- [ui-grid~='pad-l:1'] { --col: 1; }
159
- [ui-grid~='pad-l:2'] { --col: 2; }
160
- [ui-grid~='pad-l:3'] { --col: 3; }
161
- [ui-grid~='pad-l:4'] { --col: 4; }
162
- [ui-grid~='pad-l:5'] { --col: 5; }
163
- [ui-grid~='pad-l:6'] { --col: 6; }
164
- [ui-grid~='pad-l:7'] { --col: 7; }
165
- [ui-grid~='pad-l:8'] { --col: 8; }
166
- [ui-grid~='pad-l:9'] { --col: 9; }
167
- [ui-grid~='pad-l:10'] { --col: 10; }
168
- [ui-grid~='pad-l:11'] { --col: 11; }
169
- [ui-grid~='pad-l:12'] { --col: 12; }
51
+ // 间距
52
+ [ui-grid~='#{$med}gap-no'] {
53
+ --gap: 0;
54
+ }
55
+ [ui-grid~='#{$med}gap-xs'] {
56
+ --gap: 1px;
57
+ }
58
+ [ui-grid~='#{$med}gap-ss'] {
59
+ --gap: 0.25em;
60
+ }
61
+ [ui-grid~='#{$med}gap-sm'] {
62
+ --gap: 0.5em;
63
+ }
64
+ [ui-grid~='#{$med}gap-sl'] {
65
+ --gap: 0.75em;
66
+ }
67
+ [ui-grid~='#{$med}gap-ms'] {
68
+ --gap: 1em;
69
+ }
70
+ [ui-grid~='#{$med}gap-mm'] {
71
+ --gap: 1.5em;
72
+ }
73
+ [ui-grid~='#{$med}gap-ml'] {
74
+ --gap: 2em;
75
+ }
76
+ [ui-grid~='#{$med}gap-ls'] {
77
+ --gap: 2.5em;
78
+ }
79
+ [ui-grid~='#{$med}gap-lm'] {
80
+ --gap: 3em;
81
+ }
82
+ [ui-grid~='#{$med}gap-ll'] {
83
+ --gap: 4em;
84
+ }
85
+ [ui-grid~='#{$med}gap-xl'] {
86
+ --gap: 5em;
87
+ }
170
88
  }
171
- @media (min-width: 1280px) {
172
- // .n-no { --gap: 0; }
173
- // .n-xs { --gap: 1px; }
174
- // .n-ss { --gap: 0.25em; }
175
- // .n-sm { --gap: 0.5em; }
176
- // .n-sl { --gap: 0.75em; }
177
- // .n-ms { --gap: 1em; }
178
- // .n-mm { --gap: 1.5em; }
179
- // .n-ml { --gap: 2em; }
180
- // .n-ls { --gap: 2.5em; }
181
- // .n-lm { --gap: 3em; }
182
- // .n-ll { --gap: 4em; }
183
- // .n-xl { --gap: 5em; }
184
89
 
185
- [ui-grid~='dpc:1'],[ui-grid~='dpc-s:1'] { --col: 1; }
186
- [ui-grid~='dpc:2'],[ui-grid~='dpc-s:2'] { --col: 2; }
187
- [ui-grid~='dpc:3'],[ui-grid~='dpc-s:3'] { --col: 3; }
188
- [ui-grid~='dpc:4'],[ui-grid~='dpc-s:4'] { --col: 4; }
189
- [ui-grid~='dpc:5'],[ui-grid~='dpc-s:5'] { --col: 5; }
190
- [ui-grid~='dpc:6'],[ui-grid~='dpc-s:6'] { --col: 6; }
191
- [ui-grid~='dpc:7'],[ui-grid~='dpc-s:7'] { --col: 7; }
192
- [ui-grid~='dpc:8'],[ui-grid~='dpc-s:8'] { --col: 8; }
193
- [ui-grid~='dpc:9'],[ui-grid~='dpc-s:9'] { --col: 9; }
194
- [ui-grid~='dpc:10'],[ui-grid~='dpc-s:10'] { --col: 10; }
195
- [ui-grid~='dpc:11'],[ui-grid~='dpc-s:11'] { --col: 11; }
196
- [ui-grid~='dpc:12'],[ui-grid~='dpc-s:12'] { --col: 12; }
90
+ @include _grid('');
91
+ @include _grid('mob:');
92
+ @include med('>mob') {
93
+ @include _grid('pad:');
197
94
  }
198
- @media (min-width: 1440px) {
199
- // .n-no { --gap: 0; }
200
- // .n-xs { --gap: 1px; }
201
- // .n-ss { --gap: 0.25em; }
202
- // .n-sm { --gap: 0.5em; }
203
- // .n-sl { --gap: 0.75em; }
204
- // .n-ms { --gap: 1em; }
205
- // .n-mm { --gap: 1.5em; }
206
- // .n-ml { --gap: 2em; }
207
- // .n-ls { --gap: 2.5em; }
208
- // .n-lm { --gap: 3em; }
209
- // .n-ll { --gap: 4em; }
210
- // .n-xl { --gap: 5em; }
211
-
212
- [ui-grid~='dpc-m:1'] { --col: 1; }
213
- [ui-grid~='dpc-m:2'] { --col: 2; }
214
- [ui-grid~='dpc-m:3'] { --col: 3; }
215
- [ui-grid~='dpc-m:4'] { --col: 4; }
216
- [ui-grid~='dpc-m:5'] { --col: 5; }
217
- [ui-grid~='dpc-m:6'] { --col: 6; }
218
- [ui-grid~='dpc-m:7'] { --col: 7; }
219
- [ui-grid~='dpc-m:8'] { --col: 8; }
220
- [ui-grid~='dpc-m:9'] { --col: 9; }
221
- [ui-grid~='dpc-m:10'] { --col: 10; }
222
- [ui-grid~='dpc-m:11'] { --col: 11; }
223
- [ui-grid~='dpc-m:12'] { --col: 12; }
224
- }
225
- @media (max-width: 1600px) {
226
- // .n-no { --gap: 0; }
227
- // .n-xs { --gap: 1px; }
228
- // .n-ss { --gap: 0.25em; }
229
- // .n-sm { --gap: 0.5em; }
230
- // .n-sl { --gap: 0.75em; }
231
- // .n-ms { --gap: 1em; }
232
- // .n-mm { --gap: 1.5em; }
233
- // .n-ml { --gap: 2em; }
234
- // .n-ls { --gap: 2.5em; }
235
- // .n-lm { --gap: 3em; }
236
- // .n-ll { --gap: 4em; }
237
- // .n-xl { --gap: 5em; }
238
-
239
- [ui-grid~='dpc-l:1'] { --col: 1; }
240
- [ui-grid~='dpc-l:2'] { --col: 2; }
241
- [ui-grid~='dpc-l:3'] { --col: 3; }
242
- [ui-grid~='dpc-l:4'] { --col: 4; }
243
- [ui-grid~='dpc-l:5'] { --col: 5; }
244
- [ui-grid~='dpc-l:6'] { --col: 6; }
245
- [ui-grid~='dpc-l:7'] { --col: 7; }
246
- [ui-grid~='dpc-l:8'] { --col: 8; }
247
- [ui-grid~='dpc-l:9'] { --col: 9; }
248
- [ui-grid~='dpc-l:10'] { --col: 10; }
249
- [ui-grid~='dpc-l:11'] { --col: 11; }
250
- [ui-grid~='dpc-l:12'] { --col: 12; }
95
+ @include med('>pad') {
96
+ @include _grid('dpc:');
251
97
  }
package/core/media.scss CHANGED
@@ -13,10 +13,10 @@ $level: (
13
13
  dpc-l: 1600px
14
14
  );
15
15
 
16
- // 桌面
17
- @mixin dpc() {
16
+ // 移动
17
+ @mixin mob() {
18
18
  $this: #{list.nth(&, 1)};
19
- @media screen and (min-width: 1120px) {
19
+ @media screen and (max-width: 799px) {
20
20
  @if ($this == '') {
21
21
  @content;
22
22
  } @else {
@@ -26,11 +26,10 @@ $level: (
26
26
  }
27
27
  }
28
28
  }
29
-
30
29
  // 平板
31
30
  @mixin pad() {
32
31
  $this: #{list.nth(&, 1)};
33
- @media screen and (max-width: 1119px) {
32
+ @media screen and (min-width: 800px) and (max-width: 1279px) {
34
33
  @if ($this == '') {
35
34
  @content;
36
35
  } @else {
@@ -40,11 +39,10 @@ $level: (
40
39
  }
41
40
  }
42
41
  }
43
-
44
- // 移动
45
- @mixin mob() {
42
+ // 桌面
43
+ @mixin dpc() {
46
44
  $this: #{list.nth(&, 1)};
47
- @media screen and (max-width: 799px) {
45
+ @media screen and (min-width: 1280px) {
48
46
  @if ($this == '') {
49
47
  @content;
50
48
  } @else {
@@ -64,8 +62,57 @@ $level: (
64
62
 
65
63
  // 大于某节点时
66
64
  @if ($r == '>') {
67
- // 大于平板
68
- @if ($p == '>pad') {
65
+ @if ($p == '>mob' or $p == '>mob-l') {
66
+ @media screen and (min-width: 800px) {
67
+ @if ($this == '') {
68
+ @content;
69
+ } @else {
70
+ & {
71
+ @content;
72
+ }
73
+ }
74
+ }
75
+ } @else if ($p == '>mob-s') {
76
+ @media screen and (min-width: 480px) {
77
+ @if ($this == '') {
78
+ @content;
79
+ } @else {
80
+ & {
81
+ @content;
82
+ }
83
+ }
84
+ }
85
+ } @else if ($p == '>mob-m') {
86
+ @media screen and (min-width: 640px) {
87
+ @if ($this == '') {
88
+ @content;
89
+ } @else {
90
+ & {
91
+ @content;
92
+ }
93
+ }
94
+ }
95
+ } @else if ($p == '>pad' or $p == '>dpc-l') {
96
+ @media screen and (min-width: 1280px) {
97
+ @if ($this == '') {
98
+ @content;
99
+ } @else {
100
+ & {
101
+ @content;
102
+ }
103
+ }
104
+ }
105
+ } @else if ($p == '>pad-s') {
106
+ @media screen and (min-width: 960px) {
107
+ @if ($this == '') {
108
+ @content;
109
+ } @else {
110
+ & {
111
+ @content;
112
+ }
113
+ }
114
+ }
115
+ } @else if ($p == '>pad-m') {
69
116
  @media screen and (min-width: 1120px) {
70
117
  @if ($this == '') {
71
118
  @content;
@@ -75,10 +122,8 @@ $level: (
75
122
  }
76
123
  }
77
124
  }
78
- }
79
- // 大于移动
80
- @if ($p == '>mob') {
81
- @media screen and (min-width: 800px) {
125
+ } @else if ($p == '>dpc-s') {
126
+ @media screen and (min-width: 1440px) {
82
127
  @if ($this == '') {
83
128
  @content;
84
129
  } @else {
@@ -87,27 +132,59 @@ $level: (
87
132
  }
88
133
  }
89
134
  }
90
- }
91
- @each $sz in $level {
92
- $n: #{list.nth($sz, 1)};
93
- $v: #{list.nth($sz, 2)};
94
- @if ($_n == $n) {
95
- @media screen and (min-width: $v) {
96
- @if ($this == '') {
135
+ } @else if ($p == '>dpc-m') {
136
+ @media screen and (min-width: 1600px) {
137
+ @if ($this == '') {
138
+ @content;
139
+ } @else {
140
+ & {
141
+ @content;
142
+ }
143
+ }
144
+ }
145
+ } @else if ($p == '>pad-l') {
146
+ @media screen and (min-width: 1280px) {
147
+ @if ($this == '') {
148
+ @content;
149
+ } @else {
150
+ & {
97
151
  @content;
98
- } @else {
99
- & {
100
- @content;
101
- }
102
152
  }
103
153
  }
104
154
  }
105
155
  }
106
- }
107
- // 小于某节点时
108
- @if ($r == '<') {
109
- // 小于桌面
110
- @if ($p == '<dpc') {
156
+ } @else if ($r == '<') {
157
+ @if ($p == '<dpc-l') {
158
+ @media screen and (max-width: 1599px) {
159
+ @if ($this == '') {
160
+ @content;
161
+ } @else {
162
+ & {
163
+ @content;
164
+ }
165
+ }
166
+ }
167
+ } @else if ($p == '<dpc-m') {
168
+ @media screen and (max-width: 1439px) {
169
+ @if ($this == '') {
170
+ @content;
171
+ } @else {
172
+ & {
173
+ @content;
174
+ }
175
+ }
176
+ }
177
+ } @else if ($p == '<dpc-s' or $p == '<dpc') {
178
+ @media screen and (max-width: 1279px) {
179
+ @if ($this == '') {
180
+ @content;
181
+ } @else {
182
+ & {
183
+ @content;
184
+ }
185
+ }
186
+ }
187
+ } @else if ($p == '<pad-l') {
111
188
  @media screen and (max-width: 1119px) {
112
189
  @if ($this == '') {
113
190
  @content;
@@ -117,9 +194,17 @@ $level: (
117
194
  }
118
195
  }
119
196
  }
120
- }
121
- // 小于平板
122
- @if ($p == '<pad') {
197
+ } @else if ($p == '<pad-m') {
198
+ @media screen and (max-width: 959px) {
199
+ @if ($this == '') {
200
+ @content;
201
+ } @else {
202
+ & {
203
+ @content;
204
+ }
205
+ }
206
+ }
207
+ } @else if ($p == '<pad-s' or $p == '<pad') {
123
208
  @media screen and (max-width: 799px) {
124
209
  @if ($this == '') {
125
210
  @content;
@@ -129,28 +214,30 @@ $level: (
129
214
  }
130
215
  }
131
216
  }
132
- }
133
-
134
- @each $sz in $level {
135
- $n: #{list.nth($sz, 1)};
136
- $v: #{list.nth($sz, 2) - 1};
137
- @if ($_n == $n) {
138
- @media screen and (max-width: $v) {
139
- @if ($this == '') {
217
+ } @else if ($p == '<mob-l') {
218
+ @media screen and (max-width: 639px) {
219
+ @if ($this == '') {
220
+ @content;
221
+ } @else {
222
+ & {
223
+ @content;
224
+ }
225
+ }
226
+ }
227
+ } @else if ($p == '<mob-m') {
228
+ @media screen and (max-width: 479px) {
229
+ @if ($this == '') {
230
+ @content;
231
+ } @else {
232
+ & {
140
233
  @content;
141
- } @else {
142
- & {
143
- @content;
144
- }
145
234
  }
146
235
  }
147
236
  }
148
237
  }
149
- }
150
- // 仅在某节点时
151
- @if ($r == '=') {
238
+ } @else if ($r == '=') {
152
239
  @if ($p == '=dpc') {
153
- @media screen and (min-width: 1120px) {
240
+ @media screen and (min-width: 1280px) {
154
241
  @if ($this == '') {
155
242
  @content;
156
243
  } @else {
@@ -159,9 +246,8 @@ $level: (
159
246
  }
160
247
  }
161
248
  }
162
- }
163
- @if ($p == '=pad') {
164
- @media screen and (min-width: 800px) and (max-width: 1119px) {
249
+ } @else if ($p == '=dpc-l') {
250
+ @media screen and (min-width: 1600px) {
165
251
  @if ($this == '') {
166
252
  @content;
167
253
  } @else {
@@ -170,8 +256,67 @@ $level: (
170
256
  }
171
257
  }
172
258
  }
173
- }
174
- @if ($p == '=mob') {
259
+ } @else if ($p == '=dpc-m') {
260
+ @media screen and (min-width: 1440px) and (max-width: 1599px) {
261
+ @if ($this == '') {
262
+ @content;
263
+ } @else {
264
+ & {
265
+ @content;
266
+ }
267
+ }
268
+ }
269
+ } @else if ($p == '=dpc-s') {
270
+ @media screen and (min-width: 1280px) and (max-width: 1439px) {
271
+ @if ($this == '') {
272
+ @content;
273
+ } @else {
274
+ & {
275
+ @content;
276
+ }
277
+ }
278
+ }
279
+ } @else if ($p == '=pad') {
280
+ @media screen and (min-width: 800px) and (max-width: 1279px) {
281
+ @if ($this == '') {
282
+ @content;
283
+ } @else {
284
+ & {
285
+ @content;
286
+ }
287
+ }
288
+ }
289
+ } @else if ($p == '=pad-l') {
290
+ @media screen and (min-width: 1120px) and (max-width: 1279px) {
291
+ @if ($this == '') {
292
+ @content;
293
+ } @else {
294
+ & {
295
+ @content;
296
+ }
297
+ }
298
+ }
299
+ } @else if ($p == '=pad-m') {
300
+ @media screen and (min-width: 960px) and (max-width: 1119px) {
301
+ @if ($this == '') {
302
+ @content;
303
+ } @else {
304
+ & {
305
+ @content;
306
+ }
307
+ }
308
+ }
309
+ } @else if ($p == '=pad-s') {
310
+ @media screen and (min-width: 800px) and (max-width: 959px) {
311
+ @if ($this == '') {
312
+ @content;
313
+ } @else {
314
+ & {
315
+ @content;
316
+ }
317
+ }
318
+ }
319
+ } @else if ($p == '=mob') {
175
320
  @media screen and (max-width: 799px) {
176
321
  @if ($this == '') {
177
322
  @content;
@@ -181,22 +326,32 @@ $level: (
181
326
  }
182
327
  }
183
328
  }
184
- }
185
- @each $sz in $level {
186
- $n: #{list.nth($sz, 1)};
187
- $v: #{list.nth($sz, 2)};
188
- $m: #{list.nth($sz, 2) + 159};
189
- @if ($_n == $n) {
190
- @if ($_n == 'mob-s') {
191
- @media screen and (max-width: $m) {
329
+ } @else if ($p == '=mob-l') {
330
+ @media screen and (min-width: 640px) and (max-width: 799px) {
331
+ @if ($this == '') {
332
+ @content;
333
+ } @else {
334
+ & {
192
335
  @content;
193
336
  }
194
- } @else if($_n == 'dpc-l') {
195
- @media screen and (min-width: $v) {
337
+ }
338
+ }
339
+ } @else if ($p == '=mob-m') {
340
+ @media screen and (min-width: 480px) and (max-width: 639px) {
341
+ @if ($this == '') {
342
+ @content;
343
+ } @else {
344
+ & {
196
345
  @content;
197
346
  }
347
+ }
348
+ }
349
+ } @else if ($p == '=mob-s') {
350
+ @media screen and (max-width: 479px) {
351
+ @if ($this == '') {
352
+ @content;
198
353
  } @else {
199
- @media screen and (min-width: $v) and (max-width: $m) {
354
+ & {
200
355
  @content;
201
356
  }
202
357
  }
package/core/trim.scss CHANGED
@@ -111,7 +111,7 @@
111
111
  &l-#{$sz} {
112
112
  left: $base + $unit;
113
113
  &\+ {
114
- left: #{$base + .5} + $unit;
114
+ left: #{$base + 0.5} + $unit;
115
115
  }
116
116
  &\* {
117
117
  left: #{$base * 2} + $unit;
@@ -121,7 +121,7 @@
121
121
  &r-#{$sz} {
122
122
  right: $base + $unit;
123
123
  &\+ {
124
- right: #{$base + .5} + $unit;
124
+ right: #{$base + 0.5} + $unit;
125
125
  }
126
126
  &\* {
127
127
  right: #{$base * 2} + $unit;
@@ -131,7 +131,7 @@
131
131
  &t-#{$sz} {
132
132
  top: $base + $unit;
133
133
  &\+ {
134
- top: #{$base + .5} + $unit;
134
+ top: #{$base + 0.5} + $unit;
135
135
  }
136
136
  &\* {
137
137
  top: #{$base * 2} + $unit;
@@ -141,7 +141,7 @@
141
141
  &b-#{$sz} {
142
142
  bottom: $base + $unit;
143
143
  &\+ {
144
- bottom: #{$base + .5} + $unit;
144
+ bottom: #{$base + 0.5} + $unit;
145
145
  }
146
146
  &\* {
147
147
  bottom: #{$base * 2} + $unit;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neatui/css",
3
- "version": "3.3.8",
3
+ "version": "3.3.10",
4
4
  "description": "neatui",
5
5
  "main": "./neatui.scss",
6
6
  "license": "MIT",
package/core/media-v2.scss DELETED
@@ -1,100 +0,0 @@
1
- @use 'sass:list';
2
- @use 'sass:string';
3
- $level: (
4
- mob-s: 320,
5
- mob-m: 480,
6
- mob-l: 640,
7
- pad-s: 800,
8
- pad-m: 960,
9
- pad-l: 1120,
10
- dpc-s: 1280,
11
- dpc-m: 1440,
12
- dpc-l: 1600
13
- );
14
-
15
- // 桌面
16
- @mixin dpc() {
17
- }
18
- // 平板
19
- @mixin pad() {
20
- }
21
- // 手机
22
- @mixin mob() {
23
- }
24
-
25
- // 通用
26
- @mixin med($p) {
27
- $this: #{list.nth(&, 1)};
28
- $sign: string.slice($p, 1, 1);
29
- $size: string.slice($p, 2, -1);
30
-
31
- @each $key, $value in $level {
32
- @if ($sign == '>') {
33
- @media screen and (max-width: 799px) {
34
- @if ($this == '') {
35
- @content;
36
- } @else {
37
- & {
38
- @content;
39
- }
40
- }
41
- }
42
- }
43
- @if ($sign == '<') {
44
- @media screen and (max-width: 799px) {
45
- @if ($this == '') {
46
- @content;
47
- } @else {
48
- & {
49
- @content;
50
- }
51
- }
52
- }
53
- }
54
- @if ($sign == '=') {
55
- @media screen and (max-width: 799px) {
56
- @if ($this == '') {
57
- @content;
58
- } @else {
59
- & {
60
- @content;
61
- }
62
- }
63
- }
64
- }
65
- }
66
-
67
- @if ($p == '=mob') {
68
- @media screen and (max-width: 799px) {
69
- @if ($this == '') {
70
- @content;
71
- } @else {
72
- & {
73
- @content;
74
- }
75
- }
76
- }
77
- }
78
- @if ($p == '=pad') {
79
- @media screen and (min-width: 800px) and (max-width: 1119px) {
80
- @if ($this == '') {
81
- @content;
82
- } @else {
83
- & {
84
- @content;
85
- }
86
- }
87
- }
88
- }
89
- @if ($p == '=dpc') {
90
- @media screen and (min-width: 1120px) {
91
- @if ($this == '') {
92
- @content;
93
- } @else {
94
- & {
95
- @content;
96
- }
97
- }
98
- }
99
- }
100
- }