blob: a145f3fa2d15018859436ddddd82f1eabcb61035 (
plain)
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
|
//-------------------common start------------------------
// -------- Colors start-----------
//配置说明：通常primary-color和primary-color-guide相同，某些产品需要有特别引导用户操作的按钮时，可以单独定义primary-color-guide
@primary-color: #108EE9; //主色，用于重点按钮底色，普通按钮文字色、tab页的选中横条色、进度条色、分组标题竖线等， 应用开发需要关注搭配class plx-btn-primary t
@guide-color: #5cb85c; //引导色，搭配class plx-btn-guide
@success-color: #00A854; //搭配class plx-btn-success
@warning-color: #F3B709; //搭配class plx-btn-warning
@error-color: #EA4335; //搭配class plx-btn-error
@common-color: #fff; //搭配class plx-btn
//Colors-hover
@primary-color-hover: #0D75BF;
@primary-color-guide-hover: #00994d;
@success-color-hover: #00994D;
@warning-color-hover: #C99703;
@error-color-hover: #DD1B0A;
@common-color-hover: #fff;
@btn-common-color-text-hover: #108ee9;
@btn-common-color-border-hover: #108ee9;
//colors-click
@primary-color-click: #0C66A7;
@primary-color-guide-click: #008040;
@success-color-click: #008040;
@warning-color-click: #977202;
@error-color-click: #B92113;
@common-color-click: #108ee9;
@btn-common-color-text-click: #fff;
@btn-common-color-border-click: #108ee9;
//opacity-disable
@opacity-disable: 0.5;
//text-color-scenes，在按钮或tab上的文字色
@scene-textcolor: #fff; //用于有底色时的文字颜色，搭配class plx-btn-primary，plx-btn-*
@common-textcolor: @primary-color; //用于普通按钮和链接上的文字颜色，应用关注搭配 class plx-btn
//text color
@text-color: #595959; //普通文字颜色，不需要专用class
@title-text-color: #404040; //用于标题文字颜色
@disabled-text-color: #bfbfbf; //用于禁用状态文字、placeholder文字颜色
@light-text-color: #737373; //较浅色
@unselected-text-color: #999; //用于未选中文字颜色
@form-label:#737373;//用于表单标签颜色
// Background color for `<body>`
@body-bg: #fff;
// Base background color for most components
@component-bg: #fff;
@hover-bg-color: #E7F4FD; //用于菜单 、列表项、树项、表格行的hover背景色
@selected-bg-color: #f5f5f5; //用于菜单 、列表项、树项、表格行的选中背景色
@input-bg-color-disabled: #f5f5f5; //用于输入框禁用状态背景色
//边框
@border-color-base: #d9d9d9; // base border outline a component 搭配class: plx-border
@border-color-split: #e9e9e9; // split border inside a component 搭配class: plx-split
//字体图标
@fonticon-color: #8e8e8e; //字体图标颜色，搭配class: plx-icon-*
@fonticon-bg-color-hover: @hover-bg-color; //一般字体图标hover时背景色变化
@fonticon-color-hover: @primary-color; //当字体图标本身有背景色的时候，使用图标颜色本身加深的hover颜色。
// Shadow
@shadow-color: rgba(0, 0, 0, .2); //阴影颜色，个别组件需要，无需搭配固定class
// -------- Colors end-------------
// -------- font start-------------
@font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Segoe UI, Helvetica, Arial, "san-serif";
@font-size-spacing:20px; //用于间距定义
@font-size: 14px; //正文文字
@font-size-title-level1: @font-size + 6px; //一级标题
@font-size-title-level2: @font-size + 2px; //二级标题
@font-size-title-group: @font-size + 2px;
// -------- font end---------------
// -------- radius start-------------
@radius: 3px; //圆角
@radius-sm: 2px; //小按钮圆角，用于下拉多选框的已选项的圆角
@radius-lg: 20px; //用于标签，搭配class:plx-tag
// -------- radius start-------------
//size
//checkbos
@checkbox-size: @font-size+2px; //复选框高度
//btn
@btn-height: 32px; //按钮高度
@btn-height-sm: 28px; //小尺寸按钮，搭配class:plx-btn-sm
@btn-height-xs: 24px; //加小尺寸按钮，搭配class:plx-btn-xs
// Input
@input-height: 32px; //输入框高度
@input-height-sm: 28px; //小尺寸输入框，搭配class:plx-input-sm
@import "../common.less";
@import "./NIV-theme.less";
|
