@veltra/styles 1.5.0 → 1.6.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.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./shine.css";
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
.u-shine {
|
|
2
|
+
background: linear-gradient(100deg, var(--u-text-color-assist) 30%, var(--u-text-color-title) 50%, var(--u-text-color-assist) 70%);
|
|
3
|
+
background-size: 200% 100%;
|
|
4
|
+
background-clip: text;
|
|
5
|
+
-webkit-background-clip: text;
|
|
6
|
+
-webkit-text-fill-color: transparent;
|
|
7
|
+
animation: u-shine var(--u-shine-duration, 2.4s) linear infinite;
|
|
8
|
+
}
|
|
9
|
+
@media (prefers-reduced-motion: reduce) {
|
|
10
|
+
.u-shine {
|
|
11
|
+
animation: none;
|
|
12
|
+
background: none;
|
|
13
|
+
-webkit-text-fill-color: currentColor;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@keyframes u-shine {
|
|
18
|
+
from {
|
|
19
|
+
background-position: 200% 0;
|
|
20
|
+
}
|
|
21
|
+
to {
|
|
22
|
+
background-position: -200% 0;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
// 全局文字扫光效果：背景渐变扫过文字（background-clip: text，纯 CSS + GPU 合成）。
|
|
2
|
+
// 任意元素添加 `u-shine` 类即可使用；通过 `--u-shine-duration` 覆盖动画时长。
|
|
3
|
+
.u-shine {
|
|
4
|
+
background: linear-gradient(
|
|
5
|
+
100deg,
|
|
6
|
+
var(--u-text-color-assist) 30%,
|
|
7
|
+
var(--u-text-color-title) 50%,
|
|
8
|
+
var(--u-text-color-assist) 70%
|
|
9
|
+
);
|
|
10
|
+
background-size: 200% 100%;
|
|
11
|
+
background-clip: text;
|
|
12
|
+
-webkit-background-clip: text;
|
|
13
|
+
-webkit-text-fill-color: transparent;
|
|
14
|
+
animation: u-shine var(--u-shine-duration, 2.4s) linear infinite;
|
|
15
|
+
|
|
16
|
+
@media (prefers-reduced-motion: reduce) {
|
|
17
|
+
animation: none;
|
|
18
|
+
background: none;
|
|
19
|
+
-webkit-text-fill-color: currentColor;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@keyframes u-shine {
|
|
24
|
+
from {
|
|
25
|
+
background-position: 200% 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
to {
|
|
29
|
+
background-position: -200% 0;
|
|
30
|
+
}
|
|
31
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veltra/styles",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"src"
|
|
@@ -9,12 +9,18 @@
|
|
|
9
9
|
"sideEffects": [
|
|
10
10
|
"**/*.css",
|
|
11
11
|
"**/*.scss",
|
|
12
|
+
"src/animations/index.ts",
|
|
13
|
+
"dist/animations/index.js",
|
|
12
14
|
"src/normalize/index.ts",
|
|
13
15
|
"dist/normalize/index.js",
|
|
14
16
|
"src/transitions/index.ts",
|
|
15
17
|
"dist/transitions/index.js"
|
|
16
18
|
],
|
|
17
19
|
"exports": {
|
|
20
|
+
"./animations": {
|
|
21
|
+
"import": "./dist/animations/index.js",
|
|
22
|
+
"default": "./dist/animations/index.js"
|
|
23
|
+
},
|
|
18
24
|
"./transitions": {
|
|
19
25
|
"import": "./dist/transitions/index.js",
|
|
20
26
|
"default": "./dist/transitions/index.js"
|
|
@@ -36,8 +42,8 @@
|
|
|
36
42
|
},
|
|
37
43
|
"peerDependencies": {
|
|
38
44
|
"@cat-kit/core": ">=1.1.8",
|
|
39
|
-
"@veltra/compositions": "^1.
|
|
40
|
-
"@veltra/utils": "^1.
|
|
45
|
+
"@veltra/compositions": "^1.6.0",
|
|
46
|
+
"@veltra/utils": "^1.6.0",
|
|
41
47
|
"vue": ">=3.5.41"
|
|
42
48
|
}
|
|
43
49
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './shine.scss'
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
// 全局文字扫光效果：背景渐变扫过文字（background-clip: text，纯 CSS + GPU 合成）。
|
|
2
|
+
// 任意元素添加 `u-shine` 类即可使用；通过 `--u-shine-duration` 覆盖动画时长。
|
|
3
|
+
.u-shine {
|
|
4
|
+
background: linear-gradient(
|
|
5
|
+
100deg,
|
|
6
|
+
var(--u-text-color-assist) 30%,
|
|
7
|
+
var(--u-text-color-title) 50%,
|
|
8
|
+
var(--u-text-color-assist) 70%
|
|
9
|
+
);
|
|
10
|
+
background-size: 200% 100%;
|
|
11
|
+
background-clip: text;
|
|
12
|
+
-webkit-background-clip: text;
|
|
13
|
+
-webkit-text-fill-color: transparent;
|
|
14
|
+
animation: u-shine var(--u-shine-duration, 2.4s) linear infinite;
|
|
15
|
+
|
|
16
|
+
@media (prefers-reduced-motion: reduce) {
|
|
17
|
+
animation: none;
|
|
18
|
+
background: none;
|
|
19
|
+
-webkit-text-fill-color: currentColor;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@keyframes u-shine {
|
|
24
|
+
from {
|
|
25
|
+
background-position: 200% 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
to {
|
|
29
|
+
background-position: -200% 0;
|
|
30
|
+
}
|
|
31
|
+
}
|