@zjpcy/simple-design 1.0.8 → 1.0.9
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/variables.css +155 -0
- package/dist/variables.less +29 -0
- package/package.json +1 -1
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
/* 主题颜色变量定义 */
|
|
2
|
+
:root {
|
|
3
|
+
/* 主色调 - 主要用于强调和突出显示 */
|
|
4
|
+
--idp-primary-color: #1890ff; /* 主色调基础色 - 用于按钮、链接等主要交互元素 */
|
|
5
|
+
--idp-primary-hover-color: #40a9ff; /* 主色调悬停色 - 用于鼠标悬停状态 */
|
|
6
|
+
|
|
7
|
+
/* 辅助色 - 用于不同状态和场景 */
|
|
8
|
+
--idp-success-color: #52c41a; /* 成功色 - 用于成功状态、确认操作等 */
|
|
9
|
+
--idp-warning-color: #faad14; /* 警告色 - 用于警告提示、需要注意的操作等 */
|
|
10
|
+
--idp-error-color: #f5222d; /* 错误色 - 用于错误提示、危险操作等 */
|
|
11
|
+
--idp-info-color: #1890ff; /* 信息色 - 用于普通信息提示 */
|
|
12
|
+
--idp-secondary-color: #fff; /* 次要色 - 用于次要按钮、辅助文本等 */
|
|
13
|
+
--idp-secondary-border-color: #d9d9d9; /* 次要边框色 - 用于次要按钮、辅助文本等 */
|
|
14
|
+
--idp-primary-secondary-border-color: #1890ff; /* 主要次要边框色 - 用于主要次要按钮、辅助文本等 */
|
|
15
|
+
|
|
16
|
+
/* 中性色 - 用于文本、边框、背景等基础元素 */
|
|
17
|
+
--idp-text-color: rgba(0, 0, 0, 0.85); /* 主要文本色 - 用于正文、标题等 */
|
|
18
|
+
--idp-text-color-secondary: rgba(0, 0, 0, 0.65); /* 次要文本色 - 用于副标题、辅助说明等 */
|
|
19
|
+
--idp-text-color-tertiary: rgba(0, 0, 0, 0.45); /* tertiary文本色 - 用于次要信息、提示文字等 */
|
|
20
|
+
--idp-text-color-light: #bfbfbf; /* 浅色文本 - 用于禁用状态、占位符等 */
|
|
21
|
+
--idp-border-color: #e8e8e8; /* 基础边框色 - 用于容器、分割线等 */
|
|
22
|
+
--idp-border-color-light: #f0f0f0; /* 浅色边框 - 用于次要分割、卡片边框等 */
|
|
23
|
+
--idp-border-color-extra-light: #d9d9d9; /* 超浅色边框 - 用于输入框、表格边框等 */
|
|
24
|
+
--idp-bg-color: #fafafa; /* 基础背景色 - 用于页面背景、容器背景等 */
|
|
25
|
+
--idp-bg-color-light: #f5f5f5; /* 浅色背景 - 用于卡片、组件背景等 */
|
|
26
|
+
--idp-bg-color-white: #fff; /* 白色背景 - 用于主要内容区域、弹窗等 */
|
|
27
|
+
|
|
28
|
+
/* 阴影效果 - 用于组件的悬浮和层次感 */
|
|
29
|
+
--idp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15); /* 小阴影 - 用于轻微悬浮效果 */
|
|
30
|
+
--idp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15); /* 中阴影 - 用于卡片、弹窗等 */
|
|
31
|
+
--idp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); /* 大阴影 - 用于模态框、下拉菜单等 */
|
|
32
|
+
--idp-shadow-extra-light: 0 2px 8px rgba(0, 0, 0, 0.08); /* 超浅阴影 - 用于轻微凸起效果 */
|
|
33
|
+
|
|
34
|
+
/* 圆角 - 用于组件的边角处理 */
|
|
35
|
+
--idp-border-radius-sm: 4px; /* 小圆角 - 用于按钮、输入框等小组件 */
|
|
36
|
+
--idp-border-radius-md: 6px; /* 中圆角 - 用于卡片、弹窗等中等组件 */
|
|
37
|
+
--idp-border-radius-lg: 8px; /* 大圆角 - 用于模态框、特殊容器等 */
|
|
38
|
+
|
|
39
|
+
/* 动画 - 用于过渡和动效 */
|
|
40
|
+
--idp-transition-duration: 0.2s; /* 过渡动画持续时间 - 控制动画快慢 */
|
|
41
|
+
--idp-transition-timing-function: ease-in-out; /* 过渡动画缓动函数 - 控制动画节奏 */
|
|
42
|
+
|
|
43
|
+
/* 透明度 - 用于元素的显示状态 */
|
|
44
|
+
--idp-opacity-disabled: 0.65; /* 禁用状态透明度 - 用于禁用的按钮、输入框等 */
|
|
45
|
+
|
|
46
|
+
/* z-index - 用于控制元素的堆叠顺序 */
|
|
47
|
+
--idp-z-index-modal: 1000; /* 模态框层级 - 确保模态框在最上层 */
|
|
48
|
+
--idp-z-index-message: 1050; /* 消息提示层级 - 确保消息提示在模态框之上 */
|
|
49
|
+
--idp-z-index-marquee-fixed: 99999; /* 跑马灯固定层级 - 确保跑马灯始终在最顶层 */
|
|
50
|
+
|
|
51
|
+
/* Button 组件 - 按钮相关样式变量 */
|
|
52
|
+
--idp-button-primary-bg: var(--idp-primary-color); /* 主要按钮背景色 */
|
|
53
|
+
--idp-button-primary-border: var(--idp-primary-color); /* 主要按钮边框色 */
|
|
54
|
+
--idp-button-primary-hover-bg: var(--idp-primary-hover-color); /* 主要按钮悬停背景色 */
|
|
55
|
+
--idp-button-primary-hover-border: var(--idp-primary-hover-color); /* 主要按钮悬停边框色 */
|
|
56
|
+
--idp-button-primary-active-shadow: 0 4px 8px rgba(24, 144, 255, 0.4); /* 主要按钮激活阴影 */
|
|
57
|
+
|
|
58
|
+
--idp-button-secondary-bg: var(--idp-secondary-color); /* 次要按钮背景色 */
|
|
59
|
+
--idp-button-secondary-border: var(--idp-secondary-border-color); /* 次要按钮边框色 */
|
|
60
|
+
--idp-button-secondary-hover-bg: var(--idp-secondary-color); /* 次要按钮悬停背景色 */
|
|
61
|
+
--idp-button-secondary-hover-border: var(--idp-primary-secondary-border-color); /* 次要按钮悬停边框色 */
|
|
62
|
+
--idp-button-secondary-active-shadow: 0 4px 8px rgba(108, 117, 125, 0.4); /* 次要按钮激活阴影 */
|
|
63
|
+
|
|
64
|
+
--idp-button-danger-bg: var(--idp-error-color); /* 危险按钮背景色 */
|
|
65
|
+
--idp-button-danger-border: var(--idp-error-color); /* 危险按钮边框色 */
|
|
66
|
+
--idp-button-danger-hover-bg: #e74c3c; /* 危险按钮悬停背景色 */
|
|
67
|
+
--idp-button-danger-hover-border: #e74c3c; /* 危险按钮悬停边框色 */
|
|
68
|
+
--idp-button-danger-active-shadow: 0 4px 8px rgba(220, 53, 69, 0.4); /* 危险按钮激活阴影 */
|
|
69
|
+
|
|
70
|
+
--idp-button-success-bg: var(--idp-success-color); /* 成功按钮背景色 */
|
|
71
|
+
--idp-button-success-border: var(--idp-success-color); /* 成功按钮边框色 */
|
|
72
|
+
--idp-button-success-hover-bg: #67c23a; /* 成功按钮悬停背景色 */
|
|
73
|
+
--idp-button-success-hover-border: #67c23a; /* 成功按钮悬停边框色 */
|
|
74
|
+
--idp-button-success-active-shadow: 0 4px 8px rgba(40, 167, 69, 0.4); /* 成功按钮激活阴影 */
|
|
75
|
+
|
|
76
|
+
--idp-button-warning-bg: var(--idp-warning-color); /* 警告按钮背景色 */
|
|
77
|
+
--idp-button-warning-border: var(--idp-warning-color); /* 警告按钮边框色 */
|
|
78
|
+
--idp-button-warning-hover-bg: #ffc107; /* 警告按钮悬停背景色 */
|
|
79
|
+
--idp-button-warning-hover-border: #ffc107; /* 警告按钮悬停边框色 */
|
|
80
|
+
--idp-button-warning-active-shadow: 0 4px 8px rgba(255, 193, 7, 0.4); /* 警告按钮激活阴影 */
|
|
81
|
+
|
|
82
|
+
--idp-button-text-white: #fff; /* 按钮白色文本色 */
|
|
83
|
+
--idp-button-text-dark: #212529; /* 按钮深色文本色 - 用于浅色背景按钮 */
|
|
84
|
+
--idp-button-height-small: 24px; /* 小尺寸按钮高度 */
|
|
85
|
+
--idp-button-height-medium: 32px; /* 中尺寸按钮高度 */
|
|
86
|
+
--idp-button-height-large: 40px; /* 大尺寸按钮高度 */
|
|
87
|
+
|
|
88
|
+
/* Icon 组件 - 图标相关样式变量 */
|
|
89
|
+
--idp-icon-fill: #339af0; /* 图标填充色 - 用于默认状态图标 */
|
|
90
|
+
--idp-icon-hover-fill: #1890ff; /* 图标悬停填充色 - 用于鼠标悬停状态图标 */
|
|
91
|
+
|
|
92
|
+
/* Input 组件 - 输入框相关样式变量 */
|
|
93
|
+
--idp-input-bg: var(--idp-bg-color-white); /* 输入框背景色 */
|
|
94
|
+
--idp-input-border: var(--idp-border-color-extra-light); /* 输入框边框色 */
|
|
95
|
+
--idp-input-border-hover: var(--idp-primary-color); /* 输入框悬停边框色 */
|
|
96
|
+
--idp-input-border-focus: var(--idp-primary-color); /* 输入框聚焦边框色 */
|
|
97
|
+
--idp-input-box-shadow-hover: 0 0 0 2px rgba(51, 154, 240, 0.2); /* 输入框悬停阴影 */
|
|
98
|
+
--idp-input-box-shadow-focus: 0 0 0 2px rgba(51, 154, 240, 0.2); /* 输入框聚焦阴影 */
|
|
99
|
+
--idp-input-text-color: var(--idp-text-color); /* 输入框文本色 */
|
|
100
|
+
--idp-input-placeholder-color: var(--idp-text-color-light); /* 输入框占位符色 */
|
|
101
|
+
--idp-input-suffix-color: #909399; /* 输入框后缀图标色 */
|
|
102
|
+
--idp-input-clear-color: var(--idp-primary-color); /* 输入框清除按钮色 */
|
|
103
|
+
--idp-input-error-border: var(--idp-error-color); /* 输入框错误边框色 */
|
|
104
|
+
--idp-input-error-box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2); /* 输入框错误阴影 */
|
|
105
|
+
--idp-input-error-text: var(--idp-error-color); /* 输入框错误文本色 */
|
|
106
|
+
--idp-input-disabled-bg: var(--idp-bg-color-light); /* 输入框禁用背景色 */
|
|
107
|
+
--idp-input-disabled-border: var(--idp-border-color-extra-light); /* 输入框禁用边框色 */
|
|
108
|
+
--idp-input-disabled-text: var(--idp-text-color-light); /* 输入框禁用文本色 */
|
|
109
|
+
|
|
110
|
+
/* Divider 组件 - 分割线相关样式变量 */
|
|
111
|
+
--idp-divider-color: #339af0; /* 分割线颜色 */
|
|
112
|
+
|
|
113
|
+
/* Marquee 组件 - 跑马灯相关样式变量 */
|
|
114
|
+
--idp-marquee-bg: var(--idp-bg-color-white); /* 跑马灯背景色 */
|
|
115
|
+
--idp-marquee-text-color: #333; /* 跑马灯文本色 */
|
|
116
|
+
--idp-marquee-shadow: var(--idp-shadow-extra-light); /* 跑马灯阴影 */
|
|
117
|
+
|
|
118
|
+
/* Message 组件 - 消息提示相关样式变量 */
|
|
119
|
+
--idp-message-bg: var(--idp-bg-color-white); /* 消息提示背景色 */
|
|
120
|
+
--idp-message-border-radius: var(--idp-border-radius-sm); /* 消息提示圆角 */
|
|
121
|
+
--idp-message-shadow: var(--idp-shadow-md); /* 消息提示阴影 */
|
|
122
|
+
--idp-message-text-color: #333; /* 消息提示文本色 */
|
|
123
|
+
--idp-message-success-border: #b7eb8f; /* 成功消息边框色 */
|
|
124
|
+
--idp-message-success-text: var(--idp-success-color); /* 成功消息文本色 */
|
|
125
|
+
--idp-message-warning-border: #ffe58f; /* 警告消息边框色 */
|
|
126
|
+
--idp-message-warning-text: var(--idp-warning-color); /* 警告消息文本色 */
|
|
127
|
+
--idp-message-error-border: #ffccc7; /* 错误消息边框色 */
|
|
128
|
+
--idp-message-error-text: var(--idp-error-color); /* 错误消息文本色 */
|
|
129
|
+
|
|
130
|
+
/* Table 组件 - 表格相关样式变量 */
|
|
131
|
+
--idp-table-bg: var(--idp-bg-color-white); /* 表格背景色 */
|
|
132
|
+
--idp-table-text-color: rgba(0, 0, 0, 0.88); /* 表格文本色 */
|
|
133
|
+
--idp-table-border: var(--idp-border-color-extra-light); /* 表格边框色 */
|
|
134
|
+
--idp-table-border-light: var(--idp-border-color-light); /* 表格浅色边框 */
|
|
135
|
+
--idp-table-header-bg: var(--idp-bg-color); /* 表格表头背景色 */
|
|
136
|
+
--idp-table-header-border: var(--idp-border-color-light); /* 表格表头边框色 */
|
|
137
|
+
--idp-table-body-border: var(--idp-border-color-light); /* 表格表体边框色 */
|
|
138
|
+
--idp-table-row-hover-bg: var(--idp-bg-color); /* 表格行悬停背景色 */
|
|
139
|
+
--idp-table-empty-text-color: rgba(0, 0, 0, 0.25); /* 表格空数据文本色 */
|
|
140
|
+
--idp-table-pagination-border: var(--idp-border-color-light); /* 表格分页器边框色 */
|
|
141
|
+
--idp-table-pagination-text: var(--idp-text-color-secondary); /* 表格分页器文本色 */
|
|
142
|
+
--idp-table-pagination-btn-bg: var(--idp-bg-color-white); /* 表格分页器按钮背景色 */
|
|
143
|
+
--idp-table-pagination-btn-border: var(--idp-border-color-extra-light); /* 表格分页器按钮边框色 */
|
|
144
|
+
--idp-table-pagination-btn-hover-text: #1a2980; /* 表格分页器按钮悬停文本色 */
|
|
145
|
+
--idp-table-pagination-btn-hover-border: #1a2980; /* 表格分页器按钮悬停边框色 */
|
|
146
|
+
--idp-table-pagination-page-active-bg: #1a2980; /* 表格分页器激活页背景色 */
|
|
147
|
+
--idp-table-pagination-page-active-border: #1a2980; /* 表格分页器激活页边框色 */
|
|
148
|
+
--idp-table-pagination-page-active-text: var(--idp-bg-color-white); /* 表格分页器激活页文本色 */
|
|
149
|
+
|
|
150
|
+
/* Modal 相关 - 模态框样式变量 */
|
|
151
|
+
--idp-modal-mask-bg: rgba(0, 0, 0, 0.5); /* 模态框遮罩背景色 */
|
|
152
|
+
--idp-modal-container-bg: var(--idp-bg-color-white); /* 模态框容器背景色 */
|
|
153
|
+
--idp-modal-header-bg: var(--idp-bg-color); /* 模态框头部背景色 */
|
|
154
|
+
--idp-modal-footer-bg: var(--idp-bg-color); /* 模态框底部背景色 */
|
|
155
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
// 主题颜色
|
|
2
|
+
@primary-color: #1890ff;
|
|
3
|
+
@success-color: #52c41a;
|
|
4
|
+
@warning-color: #faad14;
|
|
5
|
+
@error-color: #f5222d;
|
|
6
|
+
@info-color: #1890ff;
|
|
7
|
+
|
|
8
|
+
// 中性色
|
|
9
|
+
@text-color: rgba(0, 0, 0, 0.85);
|
|
10
|
+
@text-color-secondary: rgba(0, 0, 0, 0.65);
|
|
11
|
+
@text-color-tertiary: rgba(0, 0, 0, 0.45);
|
|
12
|
+
@border-color: #e8e8e8;
|
|
13
|
+
@border-color-light: #f0f0f0;
|
|
14
|
+
@bg-color: #fafafa;
|
|
15
|
+
@bg-color-light: #f5f5f5;
|
|
16
|
+
|
|
17
|
+
// 阴影
|
|
18
|
+
@shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
19
|
+
@shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
20
|
+
@shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
|
|
21
|
+
|
|
22
|
+
// 圆角
|
|
23
|
+
@border-radius-sm: 4px;
|
|
24
|
+
@border-radius-md: 6px;
|
|
25
|
+
@border-radius-lg: 8px;
|
|
26
|
+
|
|
27
|
+
// 动画
|
|
28
|
+
@transition-duration: 0.2s;
|
|
29
|
+
@transition-timing-function: ease-in-out;
|