@neatui/css 2.0.7 → 2.0.8

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 (8) hide show
  1. package/components/btns/base.scss +42 -5
  2. package/components/btns/btns@a.scss +7 -6
  3. package/components/btns/btns@b.scss +2 -0
  4. package/components/btns/btns@c.scss +2 -0
  5. package/components/navs/navs@a.scss +23 -86
  6. package/components/tips/base.scss +12 -12
  7. package/core/ux.scss +16 -5
  8. package/package.json +1 -1
package/components/btns/base.scss CHANGED
@@ -33,11 +33,27 @@ $size: 'xs', 's', 'm', 'l', 'xl';
33
33
  opacity: 0.5;
34
34
  }
35
35
 
36
- &[ui-btn~='am:s']{transform: scale(0.98, 0.95); }
37
- &[ui-btn~='am:t']{ transform: translateY(-1px) }
38
- &[ui-btn~='am:r']{ transform: translateX(1px); }
39
- &[ui-btn~='am:b']{ transform: translateY(1px); }
40
- &[ui-btn~='am:l']{ transform: translateX(-1px); }
36
+ &:active {
37
+ filter: brightness(0.85);
38
+ }
39
+ &[ui-btn~='am:s']:active {
40
+ transform: scale(0.98, 0.95);
41
+ }
42
+ &[ui-btn~='am:s']:active {
43
+ transform: scale(0.98, 0.95);
44
+ }
45
+ &[ui-btn~='am:t']:active {
46
+ transform: translateY(-1px);
47
+ }
48
+ &[ui-btn~='am:r']:active {
49
+ transform: translateX(1px);
50
+ }
51
+ &[ui-btn~='am:b']:active {
52
+ transform: translateY(1px);
53
+ }
54
+ &[ui-btn~='am:l']:active {
55
+ transform: translateX(-1px);
56
+ }
41
57
 
42
58
  // 按钮尺寸
43
59
  $base: 1.5;
@@ -98,6 +114,27 @@ $size: 'xs', 's', 'm', 'l', 'xl';
98
114
  }
99
115
 
100
116
  [ui-btns] {
117
+ & > * {
118
+ &:active {
119
+ filter: brightness(0.85);
120
+ }
121
+ &[ui-btn~='am:s']:active {
122
+ transform: scale(0.98, 0.95);
123
+ }
124
+ &[ui-btn~='am:t']:active {
125
+ transform: translateY(-1px);
126
+ }
127
+ &[ui-btn~='am:r']:active {
128
+ transform: translateX(1px);
129
+ }
130
+ &[ui-btn~='am:b']:active {
131
+ transform: translateY(1px);
132
+ }
133
+ &[ui-btn~='am:l']:active {
134
+ transform: translateX(-1px);
135
+ }
136
+ }
137
+
101
138
  // 按钮尺寸
102
139
  $base: 1.5;
103
140
  @each $i in $size {
package/components/btns/btns@a.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use 'sass:math';
2
+ @import './base.scss';
2
3
  $size: xs, s, m, l, xl;
3
4
  $type: none, main, text, link, read, note, case, line, weak, back, info, well, warn, risk, w, b;
4
5
 
@@ -62,9 +63,9 @@ body [ui-btn~='@a'] {
62
63
  }
63
64
 
64
65
  // 按下状态
65
- &:active {
66
- transform: scale(0.98, 0.95);
67
- }
66
+ // &:active {
67
+ // transform: scale(0.98);
68
+ // }
68
69
 
69
70
  // 正方形按钮
70
71
  &[ui-btn~=':square'] {
@@ -279,9 +280,9 @@ body [ui-btn~='@a'] {
279
280
  }
280
281
 
281
282
  // 按下状态
282
- & > *:active {
283
- transform: scale(0.98, 0.95);
284
- }
283
+ // & > *:active {
284
+ // transform: scale(0.98, 0.95);
285
+ // }
285
286
 
286
287
  // 正方形按钮
287
288
  &[ui-btns~=':square'] > * {
package/components/btns/btns@b.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import './base.scss';
2
+
1
3
  @use 'sass:math';
2
4
  $size: 'xs', 's', 'm', 'l', 'xl';
3
5
  $type: 'none', 'main', 'text', 'read', 'weak', 'back', 'info', 'well', 'warn', 'risk';
package/components/btns/btns@c.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import './base.scss';
2
+
1
3
  @use 'sass:math';
2
4
  $size: 'xs', 's', 'm', 'l', 'xl';
3
5
  $type: 'none', 'main', 'text', 'read', 'weak', 'back', 'info', 'well', 'warn', 'risk';
package/components/navs/navs@a.scss CHANGED
@@ -1,100 +1,37 @@
1
1
  [ui-navs~='@a'] {
2
2
  position: relative;
3
- & > * {
3
+ }
4
+ [ui-navs~='@a'] > *,
5
+ [ui-nav~='@a'] {
6
+ & {
4
7
  position: relative;
5
- display: inline-block;
8
+ display: inline-flex;
9
+ align-items: center;
10
+ justify-content: start;
11
+ padding: 0.25em 0.5em;
12
+ border-radius: 0.25em;
13
+
6
14
  cursor: pointer;
7
15
  user-select: none;
8
16
 
9
17
  &:hover {
10
- & > *:first-child {
11
- text-decoration: underline;
12
- opacity: 0.8;
13
- }
18
+ box-shadow: inset 0 0 0 100em var(--co-text-xs);
14
19
  }
15
20
  &:active {
16
- & > *:first-child {
17
- display: inline-block;
18
- transform: scale3d(0.95, 0.9, 1);
19
- }
20
- }
21
- }
22
-
23
- // 主题
24
- &,
25
- &[ui-navs~='text'] {
26
- & > * {
27
- color: var(--co-text);
28
-
29
- &.active {
30
- & > *:first-child {
31
- color: var(--co-main);
32
- }
33
- }
34
- }
35
- }
36
-
37
- &[ui-navs~='read'] {
38
- & > * {
39
- color: var(--co-read);
40
-
41
- &.active {
42
- & > *:first-child {
43
- color: var(--co-main-text);
44
- }
45
- }
46
- }
47
- }
48
-
49
- &[ui-navs~='note'] {
50
- & > * {
51
- color: var(--co-note);
52
-
53
- &.active {
54
- & > *:first-child {
55
- color: var(--co-main-text);
56
- }
57
- }
21
+ transform: translateX(1px);
58
22
  }
59
- }
60
-
61
- &[ui-navs~='back'] {
62
- & > * {
63
- color: var(--co-back--ll);
64
-
65
- &.active {
66
- & > *:first-child {
67
- color: var(--co-back);
68
- }
69
- }
23
+ &.active {
24
+ box-shadow: inset 0 0 0 100em var(--co-main-ss);
25
+ color: var(--co-main);
26
+ fill: var(--co-main);
70
27
  }
71
28
  }
29
+ }
72
30
 
73
- // 对齐
74
- & {
75
- &,
76
- &[ui-navs~='al'] {
77
- text-align: left;
78
- & > * {
79
- margin-left: 0;
80
- margin-right: 2em;
81
- }
82
- }
83
-
84
- &[ui-navs~='ac'] {
85
- text-align: center;
86
- & > * {
87
- margin-left: 1em;
88
- margin-right: 1em;
89
- }
90
- }
91
-
92
- &[ui-navs~='ar'] {
93
- text-align: right;
94
- & > * {
95
- margin-left: 2em;
96
- margin-right: 0;
97
- }
98
- }
99
- }
31
+ // 块
32
+ [ui-navs~=':block'] > *,
33
+ [ui-nav~=':block'] {
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: start;
100
37
  }
package/components/tips/base.scss CHANGED
@@ -20,7 +20,7 @@
20
20
  right: 0.75em;
21
21
  bottom: -0.25em;
22
22
  left: auto;
23
- box-shadow: 1px 1px 0.2em 0 rgba(0, 0, 0, 0.08);
23
+ box-shadow: 1px 1px 0.2em 0 var(--co-deep);
24
24
  }
25
25
  }
26
26
  [ui-tips-box~='tc'] {
@@ -43,7 +43,7 @@
43
43
  bottom: -0.25em;
44
44
  left: 50%;
45
45
  margin-left: -0.25em;
46
- box-shadow: 1px 1px 0.2em 0 rgba(0, 0, 0, 0.08);
46
+ box-shadow: 1px 1px 0.2em 0 var(--co-deep);
47
47
  }
48
48
  }
49
49
  [ui-tips-box~='tr'] {
@@ -65,7 +65,7 @@
65
65
  right: auto;
66
66
  bottom: -0.25em;
67
67
  left: 0.75em;
68
- box-shadow: 1px 1px 0.2em 0 rgba(0, 0, 0, 0.08);
68
+ box-shadow: 1px 1px 0.2em 0 var(--co-deep);
69
69
  }
70
70
  }
71
71
 
@@ -88,7 +88,7 @@
88
88
  right: -0.25em;
89
89
  bottom: 0.75em;
90
90
  left: auto;
91
- box-shadow: 1px -1px 0.2em 0 rgba(0, 0, 0, 0.08);
91
+ box-shadow: 1px -1px 0.2em 0 var(--co-deep);
92
92
  }
93
93
  }
94
94
  [ui-tips-box~='lm'] {
@@ -110,7 +110,7 @@
110
110
  bottom: auto;
111
111
  left: auto;
112
112
  margin-top: -0.25em;
113
- box-shadow: 1px -1px 0.2em 0 rgba(0, 0, 0, 0.08);
113
+ box-shadow: 1px -1px 0.2em 0 var(--co-deep);
114
114
  }
115
115
  }
116
116
  [ui-tips-box~='lb'] {
@@ -131,7 +131,7 @@
131
131
  right: -0.25em;
132
132
  bottom: auto;
133
133
  left: auto;
134
- box-shadow: 1px -1px 0.2em 0 rgba(0, 0, 0, 0.08);
134
+ box-shadow: 1px -1px 0.2em 0 var(--co-deep);
135
135
  }
136
136
  }
137
137
 
@@ -167,7 +167,7 @@
167
167
  left: -0.25em;
168
168
  bottom: 0.75em;
169
169
  right: auto;
170
- box-shadow: -1px 1px 0.2em 0 rgba(0, 0, 0, 0.08);
170
+ box-shadow: -1px 1px 0.2em 0 var(--co-deep);
171
171
  }
172
172
  }
173
173
  [ui-tips-box~='rm'] {
@@ -190,7 +190,7 @@
190
190
  bottom: auto;
191
191
  right: auto;
192
192
  margin-top: -0.25em;
193
- box-shadow: -1px 1px 0.2em 0 rgba(0, 0, 0, 0.08);
193
+ box-shadow: -1px 1px 0.2em 0 var(--co-deep);
194
194
  }
195
195
  }
196
196
  [ui-tips-box~='rb'] {
@@ -212,7 +212,7 @@
212
212
  left: -0.25em;
213
213
  bottom: auto;
214
214
  right: auto;
215
- box-shadow: -1px 1px 0.2em 0 rgba(0, 0, 0, 0.08);
215
+ box-shadow: -1px 1px 0.2em 0 var(--co-deep);
216
216
  }
217
217
  }
218
218
 
@@ -237,7 +237,7 @@
237
237
  right: 1em;
238
238
  top: -0.25em;
239
239
  left: auto;
240
- box-shadow: -1px -1px 0.2em 0 rgba(0, 0, 0, 0.08);
240
+ box-shadow: -1px -1px 0.2em 0 var(--co-deep);
241
241
  }
242
242
  }
243
243
  [ui-tips-box~='bc'] {
@@ -261,7 +261,7 @@
261
261
  top: -0.25em;
262
262
  left: 50%;
263
263
  margin-left: -0.25em;
264
- box-shadow: -1px -1px 0.2em 0 rgba(0, 0, 0, 0.08);
264
+ box-shadow: -1px -1px 0.2em 0 var(--co-deep);
265
265
  }
266
266
  }
267
267
  [ui-tips-box~='br'] {
@@ -284,7 +284,7 @@
284
284
  right: auto;
285
285
  top: -0.25em;
286
286
  left: 0.75em;
287
- box-shadow: -1px -1px 0.2em 0 rgba(0, 0, 0, 0.08);
287
+ box-shadow: -1px -1px 0.2em 0 var(--co-deep);
288
288
  }
289
289
  }
290
290
 
package/core/ux.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  // 交互
2
- .ux-none {
2
+ .ux-none,
3
+ .ux-none-sub > * {
3
4
  &,
4
5
  * {
5
6
  cursor: pointer;
@@ -7,14 +8,16 @@
7
8
  }
8
9
  }
9
10
 
10
- .ux-disable {
11
+ .ux-disable,
12
+ .ux-disable-sub > * {
11
13
  cursor: not-allowed;
12
14
  pointer-events: none;
13
15
  opacity: 0.35;
14
16
  }
15
17
 
16
18
  // 移入效果
17
- .ux-hover {
19
+ .ux-hover,
20
+ .ux-hover-sub > * {
18
21
  &,
19
22
  * {
20
23
  cursor: pointer;
@@ -25,12 +28,20 @@
25
28
  }
26
29
 
27
30
  // 移入阴影
28
- .ux-shadow:hover {
29
- box-shadow: 0 0.1em 0.5em var(--co-deep);
31
+ .ux-shadow,
32
+ .ux-shadow-sub > * {
33
+ &,
34
+ * {
35
+ cursor: pointer;
36
+ }
37
+ &:hover {
38
+ box-shadow: 0 0.1em 0.5em var(--co-deep);
39
+ }
30
40
  }
31
41
 
32
42
  // 点击效果
33
43
  .ux-click,
44
+ .ux-click-sub > *,
34
45
  .hover-underline,
35
46
  [ui-hover~=':underline'] {
36
47
  &,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neatui/css",
3
- "version": "2.0.7",
3
+ "version": "2.0.8",
4
4
  "description": "neatui",
5
5
  "main": "./neatui.scss",
6
6
  "license": "MIT",