ep-craft 0.1.12 → 0.1.13
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/dist/index.css +1 -1
- package/package.json +1 -1
- package/theme-chalk/src/check-tag.scss +44 -62
package/package.json
CHANGED
|
@@ -1,76 +1,33 @@
|
|
|
1
|
+
@use 'sass:color';
|
|
2
|
+
@use 'sass:map';
|
|
1
3
|
@use 'mixins/mixins' as *;
|
|
2
4
|
@use 'common/var' as *;
|
|
3
5
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
padding: 7px 15px;
|
|
13
|
-
transition: getCssVar('transition', 'all');
|
|
14
|
-
font-weight: bold;
|
|
15
|
-
|
|
16
|
-
&:hover {
|
|
17
|
-
background-color: getCssVar('color', 'info', 'light-7');
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@each $type in $types {
|
|
21
|
-
&.#{bem('check-tag', '', $type)} {
|
|
22
|
-
@include when(checked) {
|
|
23
|
-
background-color: getCssVar('color', $type, 'light-8');
|
|
24
|
-
color: getCssVar('color', $type);
|
|
25
|
-
|
|
26
|
-
&:hover {
|
|
27
|
-
background-color: getCssVar('color', $type, 'light-7');
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@include when(disabled) {
|
|
31
|
-
background-color: getCssVar('color', $type, 'light-8');
|
|
32
|
-
color: getCssVar('disabled-text-color');
|
|
33
|
-
cursor: not-allowed;
|
|
34
|
-
|
|
35
|
-
&:hover {
|
|
36
|
-
background-color: getCssVar('color', $type, 'light-8');
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@include when(disabled) {
|
|
42
|
-
@if $type == 'primary' {
|
|
43
|
-
background-color: getCssVar('color', 'info', 'light-9');
|
|
44
|
-
} @else {
|
|
45
|
-
background-color: getCssVar('color', $type, 'light-9');
|
|
46
|
-
}
|
|
47
|
-
color: getCssVar('disabled-text-color');
|
|
48
|
-
cursor: not-allowed;
|
|
49
|
-
|
|
50
|
-
&:hover {
|
|
51
|
-
@if $type == 'primary' {
|
|
52
|
-
background-color: getCssVar('color', 'info', 'light-9');
|
|
53
|
-
} @else {
|
|
54
|
-
background-color: getCssVar('color', $type, 'light-9');
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
6
|
+
// 各类型选中态主色（依据 Figma 实心标签规范）
|
|
7
|
+
$haldur-check-tag-checked: (
|
|
8
|
+
'primary': #1c64fd,
|
|
9
|
+
'success': #12b886,
|
|
10
|
+
'info': #a9acb8,
|
|
11
|
+
'warning': #f57f00,
|
|
12
|
+
'danger': #f14646,
|
|
13
|
+
);
|
|
61
14
|
|
|
62
15
|
// ---------------------------------------------------------------------------
|
|
63
|
-
//
|
|
64
|
-
// 依据 Figma
|
|
16
|
+
// CheckTag 可选标签
|
|
17
|
+
// 依据 Haldur Design System（Figma node 1443-21458 / 21470 / 21471 / 21472）
|
|
18
|
+
// 精确对齐各状态颜色、尺寸与圆角。
|
|
65
19
|
// ---------------------------------------------------------------------------
|
|
66
20
|
@include b(check-tag) {
|
|
67
|
-
// 基础排版：14px / 22px 常规字重，圆角 4px
|
|
21
|
+
// 基础排版：14px / 22px 常规字重，圆角 4px，内边距 1px 8px
|
|
68
22
|
font-family: 'PingFang SC', sans-serif;
|
|
69
23
|
font-size: 14px;
|
|
70
24
|
line-height: 22px;
|
|
71
25
|
font-weight: 400;
|
|
72
26
|
border-radius: 4px;
|
|
73
27
|
padding: 1px 8px;
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
display: inline-block;
|
|
30
|
+
transition: getCssVar('transition', 'all');
|
|
74
31
|
|
|
75
32
|
// 未选中 默认：浅灰底 + 深色字
|
|
76
33
|
background-color: #f2f3f5;
|
|
@@ -92,7 +49,7 @@
|
|
|
92
49
|
}
|
|
93
50
|
}
|
|
94
51
|
|
|
95
|
-
//
|
|
52
|
+
// 选中：实心底 + 白字（默认 primary 蓝）
|
|
96
53
|
@include when(checked) {
|
|
97
54
|
background-color: #1c64fd;
|
|
98
55
|
color: #fff;
|
|
@@ -113,5 +70,30 @@
|
|
|
113
70
|
}
|
|
114
71
|
}
|
|
115
72
|
}
|
|
116
|
-
}
|
|
117
73
|
|
|
74
|
+
// 各类型选中态：实心主色 + 白字
|
|
75
|
+
@each $type, $main in $haldur-check-tag-checked {
|
|
76
|
+
&.#{bem('check-tag', '', $type)} {
|
|
77
|
+
@include when(checked) {
|
|
78
|
+
background-color: $main;
|
|
79
|
+
color: #fff;
|
|
80
|
+
|
|
81
|
+
// 悬停：加深主色
|
|
82
|
+
&:hover {
|
|
83
|
+
background-color: color.adjust($main, $lightness: -6%);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// 禁用：主色浅化
|
|
87
|
+
@include when(disabled) {
|
|
88
|
+
background-color: color.mix(#fff, $main, 72%);
|
|
89
|
+
color: #fff;
|
|
90
|
+
cursor: not-allowed;
|
|
91
|
+
|
|
92
|
+
&:hover {
|
|
93
|
+
background-color: color.mix(#fff, $main, 72%);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|