@scx-js/scx-ui 0.0.1 → 0.0.2
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/index.js +44 -44
- package/package.json +29 -29
- package/scx-context-menu/index.css +50 -50
- package/scx-context-menu/index.js +65 -65
- package/scx-context-menu/index.vue +86 -86
- package/scx-drag/index.js +30 -30
- package/scx-group/index.css +65 -65
- package/scx-group/index.vue +154 -154
- package/scx-icon/index.css +3 -3
- package/scx-icon/index.vue +20 -20
- package/scx-input/index.css +39 -39
- package/scx-input/index.vue +44 -44
- package/scx-panel/index.css +47 -47
- package/scx-panel/index.vue +28 -28
- package/scx-panel/scx-panel-item.css +36 -36
- package/scx-panel/scx-panel-item.vue +22 -22
- package/scx-progress/index.css +33 -33
- package/scx-progress/index.vue +29 -29
- package/scx-switch/index.css +109 -109
- package/scx-switch/index.vue +31 -31
- package/scx-upload/helper.js +177 -177
- package/scx-upload/index.css +204 -204
- package/scx-upload/index.vue +235 -235
- package/scx-upload-list/index.css +89 -89
- package/scx-upload-list/index.vue +228 -228
- package/style/changeTheme.js +13 -13
- package/style/dark.css +59 -59
- package/style/default.css +98 -98
- package/style/normalize.css +35 -35
package/style/default.css
CHANGED
|
@@ -1,98 +1,98 @@
|
|
|
1
|
-
/* 定义项目中最基础的 css 变量 */
|
|
2
|
-
:root {
|
|
3
|
-
|
|
4
|
-
/* 主要强调色 */
|
|
5
|
-
--scx-theme: rgb(24, 144, 255);
|
|
6
|
-
/* 用于背景强调色 或 hover 背景色 */
|
|
7
|
-
--scx-theme-bg: rgba(24, 144, 255, 0.15);
|
|
8
|
-
/* 次要强调色 */
|
|
9
|
-
--scx-theme-secondary: rgba(24, 144, 255, 0.4);
|
|
10
|
-
/* 主要背景 (也可以为图片) */
|
|
11
|
-
--scx-bg: #f2f2f2;
|
|
12
|
-
/* 主要文字颜色 */
|
|
13
|
-
--scx-text-color: #333333;
|
|
14
|
-
/* 次要文字颜色 */
|
|
15
|
-
--scx-text-secondary-color: #909399;
|
|
16
|
-
/* 占位文字颜色 */
|
|
17
|
-
--scx-text-placeholder-color: rgba(114, 114, 114, 0.5);
|
|
18
|
-
|
|
19
|
-
/* 滚动条背景 */
|
|
20
|
-
--scx-scrollbar-bg: transparent;
|
|
21
|
-
/* 滚动条拖动滑块背景 */
|
|
22
|
-
--scx-scrollbar-thumb-bg: rgb(192, 222, 250);
|
|
23
|
-
/* 滚动条拖动滑块背景 (hover) */
|
|
24
|
-
--scx-scrollbar-thumb-hover-bg: rgb(136, 196, 252);
|
|
25
|
-
|
|
26
|
-
/* 强调内容背景 */
|
|
27
|
-
--scx-overlay-bg: #ffffff;
|
|
28
|
-
|
|
29
|
-
/* 磨砂玻璃背景 */
|
|
30
|
-
--scx-glass-bg: rgba(255, 255, 255, 0.4);
|
|
31
|
-
/* 背景滤镜 */
|
|
32
|
-
--scx-glass-bg-filter: blur(8px);
|
|
33
|
-
|
|
34
|
-
/* 通用的阴影 分别是 [颜色, X 偏移量, Y 偏移量, 模糊, 扩张] */
|
|
35
|
-
--scx-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 3px 0px;
|
|
36
|
-
/* 没有偏移量的阴影 */
|
|
37
|
-
--scx-box-shadow-center: rgba(0, 0, 0, 0.2) 0 0 3px 1px;
|
|
38
|
-
/* 只需要上方有阴影 */
|
|
39
|
-
--scx-box-shadow-top: rgba(0, 0, 0, 0.2) 0 -1px 3px 0px;
|
|
40
|
-
/* 只需要左边有阴影 */
|
|
41
|
-
--scx-box-shadow-left: rgba(0, 0, 0, 0.2) -1px 0 3px 0px;
|
|
42
|
-
/* 只需要下方有阴影 */
|
|
43
|
-
--scx-box-shadow-bottom: rgba(0, 0, 0, 0.2) 0 1px 3px 0px;
|
|
44
|
-
/* 只需要右边有阴影 */
|
|
45
|
-
--scx-box-shadow-right: rgba(0, 0, 0, 0.2) 1px 0 3px 0px;
|
|
46
|
-
|
|
47
|
-
/* 输入框 */
|
|
48
|
-
--scx-input_bg: rgba(250, 250, 250, 0.1);
|
|
49
|
-
--scx-input_box-shadow: rgba(150, 150, 150, 0.6) 0 0 1px 1px;
|
|
50
|
-
--scx-input-hover_box-shadow: rgba(24, 144, 255, 0.6) 0 0 2px 2px;
|
|
51
|
-
|
|
52
|
-
/* scx-panel 组件 */
|
|
53
|
-
--scx-panel-item_bg: rgba(255, 255, 255, 0.3);
|
|
54
|
-
--scx-panel-item_border-color: rgba(150, 150, 150, 0.6);
|
|
55
|
-
--scx-panel-item_hover-bg: rgba(187, 217, 247, 0.6);
|
|
56
|
-
--scx-panel-item_hover-border-color: rgba(24, 144, 255, 1);
|
|
57
|
-
--scx-panel-item_hover-color: rgba(24, 144, 255, 1);
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
/* 去除浏览器默认样式 */
|
|
62
|
-
body {
|
|
63
|
-
margin: 0;
|
|
64
|
-
padding: 0;
|
|
65
|
-
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
|
|
66
|
-
background: var(--scx-bg);
|
|
67
|
-
color: var(--scx-text-color);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/* 浏览器 选中字体 颜色 */
|
|
71
|
-
::selection {
|
|
72
|
-
background-color: var(--scx-theme);
|
|
73
|
-
color: var(--scx-bg);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
/* 整个滚动条 */
|
|
77
|
-
::-webkit-scrollbar {
|
|
78
|
-
height: 6px;
|
|
79
|
-
width: 6px;
|
|
80
|
-
border-radius: 2px;
|
|
81
|
-
background-color: var(--scx-scrollbar-bg);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
/* 可拖动的滚动手柄 */
|
|
85
|
-
::-webkit-scrollbar-thumb {
|
|
86
|
-
border-radius: 2px;
|
|
87
|
-
background-color: var(--scx-scrollbar-thumb-bg);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
/* 鼠标移入时 */
|
|
91
|
-
::-webkit-scrollbar-thumb:hover {
|
|
92
|
-
background-color: var(--scx-scrollbar-thumb-hover-bg);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
/* 设置默认图标的颜色 */
|
|
96
|
-
.scx-icon {
|
|
97
|
-
fill: var(--scx-text-color);
|
|
98
|
-
}
|
|
1
|
+
/* 定义项目中最基础的 css 变量 */
|
|
2
|
+
:root {
|
|
3
|
+
|
|
4
|
+
/* 主要强调色 */
|
|
5
|
+
--scx-theme: rgb(24, 144, 255);
|
|
6
|
+
/* 用于背景强调色 或 hover 背景色 */
|
|
7
|
+
--scx-theme-bg: rgba(24, 144, 255, 0.15);
|
|
8
|
+
/* 次要强调色 */
|
|
9
|
+
--scx-theme-secondary: rgba(24, 144, 255, 0.4);
|
|
10
|
+
/* 主要背景 (也可以为图片) */
|
|
11
|
+
--scx-bg: #f2f2f2;
|
|
12
|
+
/* 主要文字颜色 */
|
|
13
|
+
--scx-text-color: #333333;
|
|
14
|
+
/* 次要文字颜色 */
|
|
15
|
+
--scx-text-secondary-color: #909399;
|
|
16
|
+
/* 占位文字颜色 */
|
|
17
|
+
--scx-text-placeholder-color: rgba(114, 114, 114, 0.5);
|
|
18
|
+
|
|
19
|
+
/* 滚动条背景 */
|
|
20
|
+
--scx-scrollbar-bg: transparent;
|
|
21
|
+
/* 滚动条拖动滑块背景 */
|
|
22
|
+
--scx-scrollbar-thumb-bg: rgb(192, 222, 250);
|
|
23
|
+
/* 滚动条拖动滑块背景 (hover) */
|
|
24
|
+
--scx-scrollbar-thumb-hover-bg: rgb(136, 196, 252);
|
|
25
|
+
|
|
26
|
+
/* 强调内容背景 */
|
|
27
|
+
--scx-overlay-bg: #ffffff;
|
|
28
|
+
|
|
29
|
+
/* 磨砂玻璃背景 */
|
|
30
|
+
--scx-glass-bg: rgba(255, 255, 255, 0.4);
|
|
31
|
+
/* 背景滤镜 */
|
|
32
|
+
--scx-glass-bg-filter: blur(8px);
|
|
33
|
+
|
|
34
|
+
/* 通用的阴影 分别是 [颜色, X 偏移量, Y 偏移量, 模糊, 扩张] */
|
|
35
|
+
--scx-box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 3px 0px;
|
|
36
|
+
/* 没有偏移量的阴影 */
|
|
37
|
+
--scx-box-shadow-center: rgba(0, 0, 0, 0.2) 0 0 3px 1px;
|
|
38
|
+
/* 只需要上方有阴影 */
|
|
39
|
+
--scx-box-shadow-top: rgba(0, 0, 0, 0.2) 0 -1px 3px 0px;
|
|
40
|
+
/* 只需要左边有阴影 */
|
|
41
|
+
--scx-box-shadow-left: rgba(0, 0, 0, 0.2) -1px 0 3px 0px;
|
|
42
|
+
/* 只需要下方有阴影 */
|
|
43
|
+
--scx-box-shadow-bottom: rgba(0, 0, 0, 0.2) 0 1px 3px 0px;
|
|
44
|
+
/* 只需要右边有阴影 */
|
|
45
|
+
--scx-box-shadow-right: rgba(0, 0, 0, 0.2) 1px 0 3px 0px;
|
|
46
|
+
|
|
47
|
+
/* 输入框 */
|
|
48
|
+
--scx-input_bg: rgba(250, 250, 250, 0.1);
|
|
49
|
+
--scx-input_box-shadow: rgba(150, 150, 150, 0.6) 0 0 1px 1px;
|
|
50
|
+
--scx-input-hover_box-shadow: rgba(24, 144, 255, 0.6) 0 0 2px 2px;
|
|
51
|
+
|
|
52
|
+
/* scx-panel 组件 */
|
|
53
|
+
--scx-panel-item_bg: rgba(255, 255, 255, 0.3);
|
|
54
|
+
--scx-panel-item_border-color: rgba(150, 150, 150, 0.6);
|
|
55
|
+
--scx-panel-item_hover-bg: rgba(187, 217, 247, 0.6);
|
|
56
|
+
--scx-panel-item_hover-border-color: rgba(24, 144, 255, 1);
|
|
57
|
+
--scx-panel-item_hover-color: rgba(24, 144, 255, 1);
|
|
58
|
+
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* 去除浏览器默认样式 */
|
|
62
|
+
body {
|
|
63
|
+
margin: 0;
|
|
64
|
+
padding: 0;
|
|
65
|
+
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
|
|
66
|
+
background: var(--scx-bg);
|
|
67
|
+
color: var(--scx-text-color);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* 浏览器 选中字体 颜色 */
|
|
71
|
+
::selection {
|
|
72
|
+
background-color: var(--scx-theme);
|
|
73
|
+
color: var(--scx-bg);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* 整个滚动条 */
|
|
77
|
+
::-webkit-scrollbar {
|
|
78
|
+
height: 6px;
|
|
79
|
+
width: 6px;
|
|
80
|
+
border-radius: 2px;
|
|
81
|
+
background-color: var(--scx-scrollbar-bg);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* 可拖动的滚动手柄 */
|
|
85
|
+
::-webkit-scrollbar-thumb {
|
|
86
|
+
border-radius: 2px;
|
|
87
|
+
background-color: var(--scx-scrollbar-thumb-bg);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* 鼠标移入时 */
|
|
91
|
+
::-webkit-scrollbar-thumb:hover {
|
|
92
|
+
background-color: var(--scx-scrollbar-thumb-hover-bg);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* 设置默认图标的颜色 */
|
|
96
|
+
.scx-icon {
|
|
97
|
+
fill: var(--scx-text-color);
|
|
98
|
+
}
|
package/style/normalize.css
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
/*
|
|
2
|
-
移除默认的 margin
|
|
3
|
-
*/
|
|
4
|
-
body {
|
|
5
|
-
margin: 0;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
/*
|
|
9
|
-
在多数浏览器的盒子模型中 box-sizing 默认为 content-box (这应该是一种 "错误的设计")
|
|
10
|
-
但这会在实际开发中导致很多让人意想不到的 "错误" , 尤其是在为元素设置高度或宽度的时候
|
|
11
|
-
这里我们推荐将默认的 box-sizing 设置为 border-box 以便统一, 并减少混淆
|
|
12
|
-
*/
|
|
13
|
-
html {
|
|
14
|
-
box-sizing: border-box;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
/*
|
|
18
|
-
配合上一段 css 实现 box-sizing 的规范化
|
|
19
|
-
*/
|
|
20
|
-
*,
|
|
21
|
-
*:before,
|
|
22
|
-
*:after {
|
|
23
|
-
box-sizing: inherit;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/*
|
|
27
|
-
重置表单元素的字体
|
|
28
|
-
*/
|
|
29
|
-
button,
|
|
30
|
-
input,
|
|
31
|
-
optgroup,
|
|
32
|
-
select,
|
|
33
|
-
textarea {
|
|
34
|
-
font-family: inherit;
|
|
35
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
移除默认的 margin
|
|
3
|
+
*/
|
|
4
|
+
body {
|
|
5
|
+
margin: 0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/*
|
|
9
|
+
在多数浏览器的盒子模型中 box-sizing 默认为 content-box (这应该是一种 "错误的设计")
|
|
10
|
+
但这会在实际开发中导致很多让人意想不到的 "错误" , 尤其是在为元素设置高度或宽度的时候
|
|
11
|
+
这里我们推荐将默认的 box-sizing 设置为 border-box 以便统一, 并减少混淆
|
|
12
|
+
*/
|
|
13
|
+
html {
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/*
|
|
18
|
+
配合上一段 css 实现 box-sizing 的规范化
|
|
19
|
+
*/
|
|
20
|
+
*,
|
|
21
|
+
*:before,
|
|
22
|
+
*:after {
|
|
23
|
+
box-sizing: inherit;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/*
|
|
27
|
+
重置表单元素的字体
|
|
28
|
+
*/
|
|
29
|
+
button,
|
|
30
|
+
input,
|
|
31
|
+
optgroup,
|
|
32
|
+
select,
|
|
33
|
+
textarea {
|
|
34
|
+
font-family: inherit;
|
|
35
|
+
}
|