@douyinfe/semi-foundation 2.44.0 → 2.44.1-alpha.0
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/anchor/anchor.scss +6 -0
- package/anchor/variables.scss +4 -0
- package/datePicker/datePicker.scss +3 -0
- package/datePicker/variables.scss +1 -0
- package/lib/cjs/anchor/anchor.css +5 -0
- package/lib/cjs/anchor/anchor.scss +6 -0
- package/lib/cjs/anchor/variables.scss +4 -0
- package/lib/cjs/datePicker/datePicker.css +3 -0
- package/lib/cjs/datePicker/datePicker.scss +3 -0
- package/lib/cjs/datePicker/variables.scss +1 -0
- package/lib/es/anchor/anchor.css +5 -0
- package/lib/es/anchor/anchor.scss +6 -0
- package/lib/es/anchor/variables.scss +4 -0
- package/lib/es/datePicker/datePicker.css +3 -0
- package/lib/es/datePicker/datePicker.scss +3 -0
- package/lib/es/datePicker/variables.scss +1 -0
- package/package.json +3 -3
package/anchor/anchor.scss
CHANGED
|
@@ -75,12 +75,18 @@ $module: #{$prefix}-anchor;
|
|
|
75
75
|
border-radius: $width-anchor-outline_border_radius;
|
|
76
76
|
transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
|
|
77
77
|
transform: scale($transform_scale-anchor_title-text);
|
|
78
|
+
background: $color-anchor_title-bg-default;
|
|
78
79
|
&:hover {
|
|
79
80
|
color: $color-anchor_title-text-hover;
|
|
80
81
|
}
|
|
81
82
|
|
|
82
83
|
&-active {
|
|
83
84
|
color: $color-anchor_title-text-active;
|
|
85
|
+
background: $color-anchor_title-bg-active;
|
|
86
|
+
&:hover{
|
|
87
|
+
color: $color-anchor_title_active-text-hover;
|
|
88
|
+
}
|
|
89
|
+
|
|
84
90
|
}
|
|
85
91
|
|
|
86
92
|
&:focus-visible {
|
package/anchor/variables.scss
CHANGED
|
@@ -6,9 +6,13 @@ $color-anchor_slide_muted-bg-active: var(--semi-color-white); // 选中颜色 -
|
|
|
6
6
|
|
|
7
7
|
$color-anchor_title-text-default: var(--semi-color-text-2); // 文字颜色 - 未选中
|
|
8
8
|
$color-anchor_title-text-hover: var(--semi-color-tertiary-hover); // 文字颜色 - 未选中悬浮态
|
|
9
|
+
$color-anchor_title_active-text-hover: $color-anchor_title-text-hover; // 文字颜色 - 选中悬浮态
|
|
9
10
|
$color-anchor_title-text-active: var(--semi-color-text-0); // 文字颜色 - 选中
|
|
10
11
|
$color-anchor_title-text-disabled: var(--semi-color-disabled-text); // 文字颜色 - 禁用
|
|
11
12
|
|
|
13
|
+
$color-anchor_title-bg-default: transparent; // 背景色
|
|
14
|
+
$color-anchor_title-bg-active: transparent; // 背景色 - 选中
|
|
15
|
+
|
|
12
16
|
$color-anchor_title-outline-focus: var(--semi-color-primary-light-active); // 轮廓 - 聚焦
|
|
13
17
|
|
|
14
18
|
// Spacing
|
|
@@ -900,7 +900,10 @@ $module-list: #{$prefix}-scrolllist;
|
|
|
900
900
|
|
|
901
901
|
&:active {
|
|
902
902
|
border-color: $color-datepicker_range_trigger-border-active;
|
|
903
|
+
}
|
|
903
904
|
|
|
905
|
+
&:focus-within{
|
|
906
|
+
border-color: $color-datepicker_range_trigger-border-focus;
|
|
904
907
|
}
|
|
905
908
|
|
|
906
909
|
.#{$module}-monthRange-input {
|
|
@@ -148,6 +148,7 @@ $color-datepicker_insetInput_separator: var(--semi-color-text-3);
|
|
|
148
148
|
$color-datepicker_range_trigger-border: transparent; // 范围日期选择模式触发器边框颜色
|
|
149
149
|
$color-datepicker_range_trigger-border-hover: transparent; // 范围日期选择模式触发器边框颜色 - 悬浮
|
|
150
150
|
$color-datepicker_range_trigger-border-active: transparent; // 范围日期选择模式触发器边框颜色 - 激活
|
|
151
|
+
$color-datepicker_range_trigger-border-focus: transparent; // 范围日期选择模式触发器边框颜色 - 聚焦
|
|
151
152
|
|
|
152
153
|
|
|
153
154
|
|
|
@@ -65,12 +65,17 @@
|
|
|
65
65
|
border-radius: 3px;
|
|
66
66
|
transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
|
|
67
67
|
transform: scale(var(--semi-transform_scale-none));
|
|
68
|
+
background: transparent;
|
|
68
69
|
}
|
|
69
70
|
.semi-anchor-link-title:hover {
|
|
70
71
|
color: var(--semi-color-tertiary-hover);
|
|
71
72
|
}
|
|
72
73
|
.semi-anchor-link-title-active {
|
|
73
74
|
color: var(--semi-color-text-0);
|
|
75
|
+
background: transparent;
|
|
76
|
+
}
|
|
77
|
+
.semi-anchor-link-title-active:hover {
|
|
78
|
+
color: var(--semi-color-tertiary-hover);
|
|
74
79
|
}
|
|
75
80
|
.semi-anchor-link-title:focus-visible {
|
|
76
81
|
outline: 2px solid var(--semi-color-primary-light-active);
|
|
@@ -75,12 +75,18 @@ $module: #{$prefix}-anchor;
|
|
|
75
75
|
border-radius: $width-anchor-outline_border_radius;
|
|
76
76
|
transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
|
|
77
77
|
transform: scale($transform_scale-anchor_title-text);
|
|
78
|
+
background: $color-anchor_title-bg-default;
|
|
78
79
|
&:hover {
|
|
79
80
|
color: $color-anchor_title-text-hover;
|
|
80
81
|
}
|
|
81
82
|
|
|
82
83
|
&-active {
|
|
83
84
|
color: $color-anchor_title-text-active;
|
|
85
|
+
background: $color-anchor_title-bg-active;
|
|
86
|
+
&:hover{
|
|
87
|
+
color: $color-anchor_title_active-text-hover;
|
|
88
|
+
}
|
|
89
|
+
|
|
84
90
|
}
|
|
85
91
|
|
|
86
92
|
&:focus-visible {
|
|
@@ -6,9 +6,13 @@ $color-anchor_slide_muted-bg-active: var(--semi-color-white); // 选中颜色 -
|
|
|
6
6
|
|
|
7
7
|
$color-anchor_title-text-default: var(--semi-color-text-2); // 文字颜色 - 未选中
|
|
8
8
|
$color-anchor_title-text-hover: var(--semi-color-tertiary-hover); // 文字颜色 - 未选中悬浮态
|
|
9
|
+
$color-anchor_title_active-text-hover: $color-anchor_title-text-hover; // 文字颜色 - 选中悬浮态
|
|
9
10
|
$color-anchor_title-text-active: var(--semi-color-text-0); // 文字颜色 - 选中
|
|
10
11
|
$color-anchor_title-text-disabled: var(--semi-color-disabled-text); // 文字颜色 - 禁用
|
|
11
12
|
|
|
13
|
+
$color-anchor_title-bg-default: transparent; // 背景色
|
|
14
|
+
$color-anchor_title-bg-active: transparent; // 背景色 - 选中
|
|
15
|
+
|
|
12
16
|
$color-anchor_title-outline-focus: var(--semi-color-primary-light-active); // 轮廓 - 聚焦
|
|
13
17
|
|
|
14
18
|
// Spacing
|
|
@@ -593,6 +593,9 @@
|
|
|
593
593
|
.semi-datepicker-range-input:active {
|
|
594
594
|
border-color: transparent;
|
|
595
595
|
}
|
|
596
|
+
.semi-datepicker-range-input:focus-within {
|
|
597
|
+
border-color: transparent;
|
|
598
|
+
}
|
|
596
599
|
.semi-datepicker-range-input .semi-datepicker-monthRange-input {
|
|
597
600
|
background-color: transparent;
|
|
598
601
|
}
|
|
@@ -900,7 +900,10 @@ $module-list: #{$prefix}-scrolllist;
|
|
|
900
900
|
|
|
901
901
|
&:active {
|
|
902
902
|
border-color: $color-datepicker_range_trigger-border-active;
|
|
903
|
+
}
|
|
903
904
|
|
|
905
|
+
&:focus-within{
|
|
906
|
+
border-color: $color-datepicker_range_trigger-border-focus;
|
|
904
907
|
}
|
|
905
908
|
|
|
906
909
|
.#{$module}-monthRange-input {
|
|
@@ -148,6 +148,7 @@ $color-datepicker_insetInput_separator: var(--semi-color-text-3);
|
|
|
148
148
|
$color-datepicker_range_trigger-border: transparent; // 范围日期选择模式触发器边框颜色
|
|
149
149
|
$color-datepicker_range_trigger-border-hover: transparent; // 范围日期选择模式触发器边框颜色 - 悬浮
|
|
150
150
|
$color-datepicker_range_trigger-border-active: transparent; // 范围日期选择模式触发器边框颜色 - 激活
|
|
151
|
+
$color-datepicker_range_trigger-border-focus: transparent; // 范围日期选择模式触发器边框颜色 - 聚焦
|
|
151
152
|
|
|
152
153
|
|
|
153
154
|
|
package/lib/es/anchor/anchor.css
CHANGED
|
@@ -65,12 +65,17 @@
|
|
|
65
65
|
border-radius: 3px;
|
|
66
66
|
transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
|
|
67
67
|
transform: scale(var(--semi-transform_scale-none));
|
|
68
|
+
background: transparent;
|
|
68
69
|
}
|
|
69
70
|
.semi-anchor-link-title:hover {
|
|
70
71
|
color: var(--semi-color-tertiary-hover);
|
|
71
72
|
}
|
|
72
73
|
.semi-anchor-link-title-active {
|
|
73
74
|
color: var(--semi-color-text-0);
|
|
75
|
+
background: transparent;
|
|
76
|
+
}
|
|
77
|
+
.semi-anchor-link-title-active:hover {
|
|
78
|
+
color: var(--semi-color-tertiary-hover);
|
|
74
79
|
}
|
|
75
80
|
.semi-anchor-link-title:focus-visible {
|
|
76
81
|
outline: 2px solid var(--semi-color-primary-light-active);
|
|
@@ -75,12 +75,18 @@ $module: #{$prefix}-anchor;
|
|
|
75
75
|
border-radius: $width-anchor-outline_border_radius;
|
|
76
76
|
transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
|
|
77
77
|
transform: scale($transform_scale-anchor_title-text);
|
|
78
|
+
background: $color-anchor_title-bg-default;
|
|
78
79
|
&:hover {
|
|
79
80
|
color: $color-anchor_title-text-hover;
|
|
80
81
|
}
|
|
81
82
|
|
|
82
83
|
&-active {
|
|
83
84
|
color: $color-anchor_title-text-active;
|
|
85
|
+
background: $color-anchor_title-bg-active;
|
|
86
|
+
&:hover{
|
|
87
|
+
color: $color-anchor_title_active-text-hover;
|
|
88
|
+
}
|
|
89
|
+
|
|
84
90
|
}
|
|
85
91
|
|
|
86
92
|
&:focus-visible {
|
|
@@ -6,9 +6,13 @@ $color-anchor_slide_muted-bg-active: var(--semi-color-white); // 选中颜色 -
|
|
|
6
6
|
|
|
7
7
|
$color-anchor_title-text-default: var(--semi-color-text-2); // 文字颜色 - 未选中
|
|
8
8
|
$color-anchor_title-text-hover: var(--semi-color-tertiary-hover); // 文字颜色 - 未选中悬浮态
|
|
9
|
+
$color-anchor_title_active-text-hover: $color-anchor_title-text-hover; // 文字颜色 - 选中悬浮态
|
|
9
10
|
$color-anchor_title-text-active: var(--semi-color-text-0); // 文字颜色 - 选中
|
|
10
11
|
$color-anchor_title-text-disabled: var(--semi-color-disabled-text); // 文字颜色 - 禁用
|
|
11
12
|
|
|
13
|
+
$color-anchor_title-bg-default: transparent; // 背景色
|
|
14
|
+
$color-anchor_title-bg-active: transparent; // 背景色 - 选中
|
|
15
|
+
|
|
12
16
|
$color-anchor_title-outline-focus: var(--semi-color-primary-light-active); // 轮廓 - 聚焦
|
|
13
17
|
|
|
14
18
|
// Spacing
|
|
@@ -593,6 +593,9 @@
|
|
|
593
593
|
.semi-datepicker-range-input:active {
|
|
594
594
|
border-color: transparent;
|
|
595
595
|
}
|
|
596
|
+
.semi-datepicker-range-input:focus-within {
|
|
597
|
+
border-color: transparent;
|
|
598
|
+
}
|
|
596
599
|
.semi-datepicker-range-input .semi-datepicker-monthRange-input {
|
|
597
600
|
background-color: transparent;
|
|
598
601
|
}
|
|
@@ -900,7 +900,10 @@ $module-list: #{$prefix}-scrolllist;
|
|
|
900
900
|
|
|
901
901
|
&:active {
|
|
902
902
|
border-color: $color-datepicker_range_trigger-border-active;
|
|
903
|
+
}
|
|
903
904
|
|
|
905
|
+
&:focus-within{
|
|
906
|
+
border-color: $color-datepicker_range_trigger-border-focus;
|
|
904
907
|
}
|
|
905
908
|
|
|
906
909
|
.#{$module}-monthRange-input {
|
|
@@ -148,6 +148,7 @@ $color-datepicker_insetInput_separator: var(--semi-color-text-3);
|
|
|
148
148
|
$color-datepicker_range_trigger-border: transparent; // 范围日期选择模式触发器边框颜色
|
|
149
149
|
$color-datepicker_range_trigger-border-hover: transparent; // 范围日期选择模式触发器边框颜色 - 悬浮
|
|
150
150
|
$color-datepicker_range_trigger-border-active: transparent; // 范围日期选择模式触发器边框颜色 - 激活
|
|
151
|
+
$color-datepicker_range_trigger-border-focus: transparent; // 范围日期选择模式触发器边框颜色 - 聚焦
|
|
151
152
|
|
|
152
153
|
|
|
153
154
|
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-foundation",
|
|
3
|
-
"version": "2.44.0",
|
|
3
|
+
"version": "2.44.1-alpha.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build:lib": "node ./scripts/compileLib.js",
|
|
7
7
|
"prepublishOnly": "npm run build:lib"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@douyinfe/semi-animation": "2.44.0",
|
|
10
|
+
"@douyinfe/semi-animation": "2.44.1-alpha.0",
|
|
11
11
|
"async-validator": "^3.5.0",
|
|
12
12
|
"classnames": "^2.2.6",
|
|
13
13
|
"date-fns": "^2.29.3",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"*.scss",
|
|
24
24
|
"*.css"
|
|
25
25
|
],
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "f0c79fd2bbab63e4dc2d9b71e03cff03353f3edf",
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@babel/plugin-transform-runtime": "^7.15.8",
|
|
29
29
|
"@babel/preset-env": "^7.15.8",
|