variables.scss
7.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
/* stylelint-disable */
@charset "utf-8";
//框架默认主题色
$base-color-default: #409eff;
//默认层级
$base-z-index: 999;
//横向布局纵向布局时菜单背景色
$base-menu-background: #2f3447;
$base-dark-title-color: #262626;
//菜单文字颜色
$base-menu-color: #939daf;
//菜单选中文字颜色
$base-menu-color-active: hsla(0, 0%, 100%, 0.95);
//菜单选中背景色
$base-menu-background-active: $base-color-default;
//标题颜色
$base-title-color: #fff;
//字体大小配置
$base-font-size-small: 12px;
$base-font-size-default: 14px;
$base-font-size-big: 16px;
$base-font-size-bigger: 18px;
$base-font-size-large: 20px;
$base-font-size-max: 22px;
$base-font-size-xl: 24px;
$base-font-size-xxl: 28px;
$base-font-color: #606266;
$base-color-blue: $base-color-default;
$base-color-white: #fff;
$base-color-black: #000;
$base-color-light-blue: #1890ff;
$base-color-green: #4ba232;
$base-color-yellow: #ffae44;
$base-color-orange: #fa541c;
$base-color-red: #e55555;
$base-color-purple: #722ed1;
$base-color-grey: #a1a1a1;
$base-color-error: #ff0000;
$base-color-gray: rgba(0, 0, 0, 0.65);
$base-main-width: 1279px;
$base-border-radius: 2px;
$base-border-color: #dcdfe6;
$base-background-second: #f7f8fa;
$base-color-second-color: #666666;
$base-light-border-color: #e8e8e8;
$base-color-light-black: #282c34;
$base-container-background-color: #f5f5f5;
$base-button-border: #ebeef5;
$base-table-th-bg-color: #ebeef5;
$base-process-classify-count-bg-color: #eaecee;
$base-color-three: #999999;
//表格表头背景颜色
$base-table-column-bg-color: #f4f4f4;
//表格border颜色
$base-table-border-color: #ebebeb;
//卡片布局背景色
$base-card-view-bg-color: #f9fafc;
//卡片边框颜色
$base-card-border-color: #ebeef5;
//卡片二级标题字体颜色
$base-card-second-color: #888888;
//卡片高
// $base-card-height: 80px;
$base-card-height: 52px;
//卡片最小宽
$base-card-min-width: 240px;
//表单中子表孙表顶部信息背景颜色
$base-form-table-header-bg-color: #f2f2f2;
//表单中子表孙表标题颜色
$base-form-table-header-title-color: #222222;
//流程中心流程分类展开收起图标背景色
$base-process-classify-icon-bg: #f7f9fb;
$base-process-classify-icon-border-color: $base-table-th-bg-color;
//延迟处理任务字体颜色
$base-delay-color: #aaaaaa;
//特别关注图标颜色
$base-gray-icon-color: #dedede;
//基本圆角
$base-radius: 4px;
//100%宽
$base-full-width: 100%;
//100%高度
$base-full-height: 100%;
$base-min-height: 60px;
//输入框高度
$base-input-height: 32px;
//默认padding
$base-padding: 20px;
$base-margin: 20px;
//默认阴影
$base-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
//横向布局时top-bar、logo、一级菜单的高度
$base-top-bar-height: 60px;
//纵向布局时logo的高度
$base-logo-height: 60px;
//纵向布局时logo左边距
$base-logo-padding-left: 0;
//logo图标width
$base-logo-icon-width: 30px;
//logo图标height
$base-logo-icon-height: 34px;
//顶部nav-bar的高度
$base-nav-bar-height: 60px;
//顶部多标签页tabs-bar的高度
$base-tabs-bar-height: 48px;
//顶部多标签页tabs-bar中每一个item的高度
$base-tabs-item-height: 35px;
//纵向布局时一级菜单li高度
$base-menu-height: 56px;
//纵向布局时二级菜单li标签的高度
$base-menu-item-height: 48px;
//菜单li标签左边padding值
$base-menu-item-padding-left: 20px;
//纵向布局时左侧导航折叠时菜单icon左边距
$base-menu-fold-icon-padding-left: 28px;
//菜单li标签前面icon的右边距margin
// $base-menu-item-margin-right: 11px;
$base-menu-item-margin-right: 8px;
//tabs-item选中时背景border-radius
$base-tabs-item-border-radius: $base-radius;
//content内容margin
$base-content-margin: 24px;
//内容border颜色
$base-content-border-color: #e6e6e6;
//app-main的高度
$base-app-main-height: calc(
100vh - #{$base-nav-bar-height} - #{$base-tabs-bar-height} - #{$base-content-margin}*
2
);
//标签页鼠标移入时tabs-item的背景色
$base-tabs-item-hover-bg: #f5f6f8;
//水平导航模式时二级菜单选中背景色
$base-sub-menu-active-bg: #dee2ff;
//菜单背景margin
$base-menu-bg-margin: 10px;
//流程中心 流程分类宽
$base-process-classify-width: 206px;
//纵向布局时左侧导航未折叠时的宽度
$base-left-menu-width: 208px;
//纵向布局时左侧导航未折叠时右侧内容的宽度
$base-right-content-width: calc(100% - #{$base-left-menu-width});
//纵向布局时左侧导航已折叠时的宽度
$base-left-menu-width-min: 70px;
//纵向布局时左侧导航已折叠时右侧内容的宽度
$base-right-content-width-min: calc(100% - #{$base-left-menu-width-min});
//默认动画
$base-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s,
background 0s, color 0s, font-size 0s;
//默认动画长
$base-transition-time: 0.3s;
:export {
//菜单文字颜色变量导出
menu-color: $base-menu-color;
//菜单选中文字颜色变量导出
menu-color-active: $base-menu-color-active;
//菜单背景色变量导出
menu-background: $base-menu-background;
//自定义主题1风格背景色变量导出
custom_theme1-menu-background: #496bf3;
custom_theme1-top-bar-background: #FFFFFF;
custom_theme1-container-background: #F0F2F5;
//自定义主题1风格菜单字体颜色变量导出
custom_theme1-menu-color: #FFFFFF;
//自定义主题1风格tabs字体颜色变量导出
custom_theme1-tab-color: #000000;
//自定义主题1风格顶部右侧登录名和消息字体颜色变量导出
custom_theme1-top-right-color:#000000;
//自定义主题1风格其他门户字体颜色变量导出
custom_theme1-portal-color: #000000;
//浅色主题风格背景色变量导出
light-menu-background: $base-color-white;
light-top-bar-background: $base-color-white;
light-container-background: $base-container-background-color;
//浅色主题风格菜单字体颜色变量导出
light-menu-color: $base-menu-color;
//浅色主题风格tabs字体颜色变量导出
light-tab-color: $base-color-second-color;
//浅色主题风格顶部右侧登录名和消息字体颜色变量导出
light-top-right-color: $base-color-second-color;
//浅色主题风格其他门户字体颜色变量导出
light-portal-color: $base-color-second-color;
//混搭主题风格背景色变量导出
mashup-menu-background: $base-color-light-black;
mashup-top-bar-background: $base-color-white;
mashup-container-background: $base-container-background-color;
//混搭主题风格菜单字体颜色变量导出
mashup-menu-color: $base-color-white;
//混搭主题风格tabs字体颜色变量导出
mashup-tab-color: $base-color-second-color;
//混搭主题风格顶部右侧登录名和消息字体颜色变量导出
mashup-top-right-color: $base-color-second-color;
//混搭主题风格其他门户字体颜色变量导出
mashup-portal-color: $base-color-second-color;
//深色主题风格背景色变量导出
dark-menu-background: $base-color-light-black;
dark-top-bar-background: $base-color-light-black;
dark-container-background: $base-color-black;
//深色主题风格菜单字体颜色变量导出
dark-menu-color: $base-color-white;
//深色主题风格tabs字体颜色变量导出
dark-tab-color: $base-color-white;
//深色主题风格顶部右侧登录名和消息字体颜色变量导出
dark-top-right-color: $base-color-white;
//深色主题风格其他门户字体颜色变量导出
dark-portal-color: $base-color-white;
//默认主题色变量导出
color-default: $base-color-default;
//红色主题变量导出
color-red: $base-color-red;
//橙色主题变量导出
color-orange: $base-color-orange;
//黄色主题变量导出
color-yellow: $base-color-yellow;
//绿色主题变量导出
color-green: $base-color-green;
//浅蓝色主题变量导出
color-light-blue: $base-color-light-blue;
//紫色主题变量导出
color-purple: $base-color-purple;
}