Browse Source

KERNEL-9882 控件提less变量1

es6
windy 3 years ago
parent
commit
4b4c1c5b81
  1. 4
      src/less/base/single/button/button.less
  2. 12
      src/less/base/single/button/switch.less
  3. 24
      src/less/base/single/input/checkbox.less
  4. 30
      src/less/base/single/input/radio.less
  5. 178
      src/less/lib/constant.less
  6. 39
      src/less/lib/theme.less
  7. 8
      src/less/widget/singleslider/slider/widget.slider.less

4
src/less/base/single/button/button.less

@ -7,8 +7,8 @@ body .bi-button, #body .bi-button {
.border-radius(0px);
}
.border-radius(2px);
border: 1px solid @color-bi-border-highlight;
background-color: @color-bi-background-highlight;
border: 1px solid @color-bi-border-button;
background-color: @color-bi-background-button;
.box-sizing(border-box);
text-align: center;
vertical-align: middle;

12
src/less/base/single/button/switch.less

@ -2,26 +2,26 @@
.bi-switch{
.border-radius(40px 40px 40px 40px);
background-color: @color-bi-background-dark-gray;
background-color: @color-bi-background-switch;
&.active {
background-color: @color-bi-background-highlight;
background-color: @color-bi-background-active-switch;
}
& .circle-button{
.border-radius(9px 9px 9px 9px);
}
&.disabled {
background-color: @color-bi-background-disabled;
background-color: @color-bi-background-disabled-switch;
}
}
.bi-theme-dark {
.bi-switch{
background-color: @color-bi-background-dark-gray-theme-dark;
background-color: @color-bi-background-switch-theme-dark;
&.active {
background-color: @color-bi-background-highlight;
background-color: @color-bi-background-active-switch-theme-dark;
}
&.disabled {
background-color: @color-bi-background-disabled-theme-dark;
background-color: @color-bi-background-disabled-switch-theme-dark;
}
}
}

24
src/less/base/single/input/checkbox.less

@ -3,7 +3,7 @@
.bi-checkbox {
& .checkbox-content, &.checkbox-content {
.border-radius(2px);
border: 1px solid @color-bi-border-dark-line;
border: 1px solid @color-bi-border-checkbox;
box-sizing: border-box;
&:after {
position: absolute;
@ -20,12 +20,12 @@
content: '';
}
&.hover, &:hover {
border-color: @color-bi-border-highlight;
border-color: @color-bi-border-hover-active-checkbox;
}
}
&.active, &:active {
& .checkbox-content, &.checkbox-content{
border-color: @color-bi-border-highlight;
border-color: @color-bi-border-hover-active-checkbox;
&:after {
border-color: @color-bi-border-default;
opacity: 1;
@ -34,15 +34,15 @@
}
&.disabled {
& .checkbox-content, &.checkbox-content {
background-color: @color-bi-background-disabled;
border-color: @color-bi-border-disabled;
background-color: @color-bi-background-disabled-checkbox;
border-color: @color-bi-border-disabled-checkbox;
}
& .checkbox-content:after, &.checkbox-content:after {
opacity: 0;
}
&.active {
& .checkbox-content, &.checkbox-content {
background-color: @color-bi-background-dark-gray;
background-color: @color-bi-background-disabled-active-checkbox;
&:after {
opacity: 1;
}
@ -54,24 +54,24 @@
.bi-theme-dark {
.bi-checkbox {
& .checkbox-content, &.checkbox-content {
border-color: @color-bi-border-dark-line-theme-dark;
border-color: @color-bi-border-checkbox-theme-dark;
&.hover, &:hover {
border-color: @color-bi-border-highlight;
border-color: @color-bi-border-hover-active-checkbox-theme-dark;
}
}
&.active, &:active {
& .checkbox-content, &.checkbox-content {
border-color: @color-bi-border-highlight;
border-color: @color-bi-border-hover-active-checkbox-theme-dark;
}
}
&.disabled {
& .checkbox-content, &.checkbox-content {
background-color: @color-bi-background-disabled-theme-dark;
background-color: @color-bi-background-disabled-checkbox-theme-dark;
}
&.active {
& .checkbox-content, &.checkbox-content {
background-color: @color-bi-background-dark-gray-theme-dark;
border-color: @color-bi-border-disabled-theme-dark;
background-color: @color-bi-background-disabled-active-checkbox-theme-dark;
border-color: @color-bi-border-disabled-checkbox-theme-dark;
}
}
}

30
src/less/base/single/input/radio.less

@ -3,18 +3,18 @@
.bi-radio {
& .radio-content, &.radio-content {
.border-radius(8px);
border: 1px solid @color-bi-border-dark-line;
border: 1px solid @color-bi-border-radio;
.box-sizing(border-box);
&:after {
content: "";
}
&.hover, &:hover {
border-color: @color-bi-border-highlight;
border-color: @color-bi-border-hover-active-radio;
}
}
&:active, &.active {
& .radio-content, &.radio-content {
border-color: @color-bi-border-highlight;
border-color: @color-bi-border-hover-active-radio;
&:after {
width: 6px;
height: 6px;
@ -23,24 +23,24 @@
top: 50%;
left: 50%;
.border-radius(3px);
background-color: @color-bi-background-default;
background-color: @color-bi-background-radio;
.transform(translate(-50%, -50%));
}
}
}
&.disabled {
& .radio-content, &.radio-content {
background-color: @color-bi-background-disabled;
border-color: @color-bi-border-disabled;
background-color: @color-bi-background-disabled-radio;
border-color: @color-bi-border-disabled-radio;
}
& .radio-content:after, &.radio-content:after {
background-color: transparent;
}
&.active {
& .radio-content, &.radio-content {
background-color: @color-bi-background-dark-gray;
background-color: @color-bi-background-disabled-active-radio;
&:after {
background-color: @color-bi-background-default;
background-color: @color-bi-background-radio;
}
}
}
@ -50,27 +50,27 @@
.bi-theme-dark {
.bi-radio {
& .radio-content, &.radio-content {
border-color: @color-bi-border-dark-line-theme-dark;
border-color: @color-bi-border-radio-theme-dark;
&.hover, &:hover {
border-color: @color-bi-border-highlight;
border-color: @color-bi-border-hover-active-radio-theme-dark;
}
}
&.active, &:active {
& .radio-content, &.radio-content {
border-color: @color-bi-border-highlight;
border-color:@color-bi-border-hover-active-radio-theme-dark;
}
}
&.disabled {
& .radio-content, &.radio-content {
background-color: @color-bi-background-disabled-theme-dark;
background-color: @color-bi-background-disabled-radio-theme-dark;
&.hover, &:hover {
border-color: @color-bi-border-dark-line-theme-dark;
border-color: @color-bi-border-radio-theme-dark;
}
}
&.active {
& .radio-content, &.radio-content {
background-color: @color-bi-background-dark-gray-theme-dark;
border-color: @color-bi-border-disabled-theme-dark;
background-color: @color-bi-background-disabled-active-radio-theme-dark;
border-color: @color-bi-border-disabled-radio-theme-dark;
}
}
}

178
src/less/lib/constant.less

@ -20,11 +20,25 @@
@opacity-15: 0.15;
@opacity-20: 0.2;
//色板
// 色板
// 品牌
@color-brand-blue-100: #2C60DB;
@color-brand-blue-90: fade(@color-brand-blue-100, 90);
@color-brand-blue-80: fade(@color-brand-blue-100, 80);
@color-brand-blue-60: fade(@color-brand-blue-100, 60);
@color-brand-blue-50: fade(@color-brand-blue-100, 50);
@color-brand-blue-40: fade(@color-brand-blue-100, 40);
@color-brand-blue-30: fade(@color-brand-blue-100, 30);
@color-brand-blue-20: fade(@color-brand-blue-100, 20);
@color-brand-blue-10: fade(@color-brand-blue-100, 10);
@color-brand-blue-5: fade(@color-brand-blue-100, 5);
//green
@color-bi-green-100: #13cd66;
@color-bi-green-90: fade(@color-bi-green-100, 90);
@color-bi-green-80: fade(@color-bi-green-100, 80);
@color-bi-green-60: fade(@color-bi-green-100, 60);
@color-bi-green-50: fade(@color-bi-green-100, 50);
@color-bi-green-40: fade(@color-bi-green-100, 40);
@color-bi-green-30: fade(@color-bi-green-100, 30);
@color-bi-green-20: fade(@color-bi-green-100, 20);
@ -32,19 +46,23 @@
@color-bi-green-5: fade(@color-bi-green-100, 5);
//cyan
@color-bi-green-100: #13cd66;
@color-bi-green-80: fade(@color-bi-green-100, 80);
@color-bi-green-60: fade(@color-bi-green-100, 60);
@color-bi-green-40: fade(@color-bi-green-100, 40);
@color-bi-green-30: fade(@color-bi-green-100, 30);
@color-bi-green-20: fade(@color-bi-green-100, 20);
@color-bi-green-10: fade(@color-bi-green-100, 10);
@color-bi-green-5: fade(@color-bi-green-100, 5);
@color-bi-sea-green-100: #3FB4AB;
@color-bi-sea-green-90: fade(@color-bi-sea-green-100, 90);
@color-bi-sea-green-80: fade(@color-bi-sea-green-100, 80);
@color-bi-sea-green-60: fade(@color-bi-sea-green-100, 60);
@color-bi-sea-green-50: fade(@color-bi-sea-green-100, 50);
@color-bi-sea-green-40: fade(@color-bi-sea-green-100, 40);
@color-bi-sea-green-30: fade(@color-bi-sea-green-100, 30);
@color-bi-sea-green-20: fade(@color-bi-sea-green-100, 20);
@color-bi-sea-green-10: fade(@color-bi-sea-green-100, 10);
@color-bi-sea-green-5: fade(@color-bi-sea-green-100, 5);
//blue
@color-bi-blue-100: #3685f2;
@color-bi-blue-90: fade(@color-bi-blue-100, 90);
@color-bi-blue-80: fade(@color-bi-blue-100, 80);
@color-bi-blue-60: fade(@color-bi-blue-100, 60);
@color-bi-blue-50: fade(@color-bi-blue-100, 50);
@color-bi-blue-40: fade(@color-bi-blue-100, 40);
@color-bi-blue-30: fade(@color-bi-blue-100, 30);
@color-bi-blue-20: fade(@color-bi-blue-100, 20);
@ -52,19 +70,23 @@
@color-bi-blue-5: fade(@color-bi-blue-100, 5);
//light-blue
@color-bi-light-blue-100: #eaf2fd;
@color-bi-light-blue-80: fade(@color-bi-light-blue-100, 80);
@color-bi-light-blue-60: fade(@color-bi-light-blue-100, 60);
@color-bi-light-blue-40: fade(@color-bi-light-blue-100, 40);
@color-bi-light-blue-30: fade(@color-bi-light-blue-100, 30);
@color-bi-light-blue-20: fade(@color-bi-light-blue-100, 20);
@color-bi-light-blue-10: fade(@color-bi-light-blue-100, 10);
@color-bi-light-blue-5: fade(@color-bi-light-blue-100, 5);
@color-bi-sky-blue-100: #eaf2fd;
@color-bi-sky-blue-90: fade(@color-bi-sky-blue-100, 90);
@color-bi-sky-blue-80: fade(@color-bi-sky-blue-100, 80);
@color-bi-sky-blue-60: fade(@color-bi-sky-blue-100, 60);
@color-bi-sky-blue-50: fade(@color-bi-sky-blue-100, 50);
@color-bi-sky-blue-40: fade(@color-bi-sky-blue-100, 40);
@color-bi-sky-blue-30: fade(@color-bi-sky-blue-100, 30);
@color-bi-sky-blue-20: fade(@color-bi-sky-blue-100, 20);
@color-bi-sky-blue-10: fade(@color-bi-sky-blue-100, 10);
@color-bi-sky-blue-5: fade(@color-bi-sky-blue-100, 5);
// orange
@color-bi-orange-100: #faaa39;
@color-bi-orange-90: fade(@color-bi-orange-100, 90);
@color-bi-orange-80: fade(@color-bi-orange-100, 80);
@color-bi-orange-60: fade(@color-bi-orange-100, 60);
@color-bi-orange-50: fade(@color-bi-orange-100, 50);
@color-bi-orange-40: fade(@color-bi-orange-100, 40);
@color-bi-orange-30: fade(@color-bi-orange-100, 30);
@color-bi-orange-20: fade(@color-bi-orange-100, 20);
@ -73,8 +95,10 @@
// red
@color-bi-red-100: #e65251;
@color-bi-red-90: fade(@color-bi-red-100, 90);
@color-bi-red-80: fade(@color-bi-red-100, 80);
@color-bi-red-60: fade(@color-bi-red-100, 60);
@color-bi-red-50: fade(@color-bi-red-100, 50);
@color-bi-red-40: fade(@color-bi-red-100, 40);
@color-bi-red-30: fade(@color-bi-red-100, 30);
@color-bi-red-20: fade(@color-bi-red-100, 20);
@ -89,22 +113,68 @@
@color-bi-yellow-20: fade(@font-color-yellow-100, 20);
@color-bi-yellow-5: fade(@font-color-yellow-100, 5);
//font color
@font-color-black: #232e40;
// black
@color-bi-black-100: #232e40;
@color-bi-black-90: fade(@color-bi-black-100, 90);
@color-bi-black-80: fade(@color-bi-black-100, 80);
@color-bi-black-60: fade(@color-bi-black-100, 60);
@color-bi-black-50: fade(@color-bi-black-100, 50);
@color-bi-black-40: fade(@color-bi-black-100, 40);
@color-bi-black-30: fade(@color-bi-black-100, 30);
@color-bi-black-20: fade(@color-bi-black-100, 20);
@color-bi-black-10: fade(@color-bi-black-100, 10);
@color-bi-black-5: fade(@color-bi-black-100, 5);
// white
@color-bi-white-100: #FFFFFF;
@color-bi-white-90: fade(@color-bi-white-100, 90);
@color-bi-white-80: fade(@color-bi-white-100, 80);
@color-bi-white-60: fade(@color-bi-white-100, 60);
@color-bi-white-50: fade(@color-bi-white-100, 50);
@color-bi-white-40: fade(@color-bi-white-100, 40);
@color-bi-white-30: fade(@color-bi-white-100, 30);
@color-bi-white-20: fade(@color-bi-white-100, 20);
@color-bi-white-10: fade(@color-bi-white-100, 10);
@color-bi-white-5: fade(@color-bi-white-100, 5);
@color-bi-black: @color-bi-black-100;
@color-bi-black-theme-dark: #F7F9FC;
@color-bi-state-gray: #2E3A4D;
@color-bi-state-gray-theme-dark: #D6E0EC;
@color-bi-light-state-gray: #647185;
@color-bi-light-state-gray-theme-dark: #AFB7C6;
@color-bi-dim-gray: #9EA6B2;
@color-bi-dim-gray-theme-dark: #878d9f;
@color-bi-gray: #C4C9D1;
@color-bi-gray-theme-dark: #6B7084;
@color-bi-dark-gray: #D0D4DA;
@color-bi-dark-gray-theme-dark: #606479;
@color-bi-sliver: #E7E8EB;
@color-bi-sliver-theme-dark: #363E55;
@color-bi-light-gray: #647185;
@color-bi-light-gray-theme-dark: #afb7c6;
@color-bi-gainsboro: #F5F6F9;
@color-bi-gainsboro-theme-dark: #191F35;
@color-bi-white: @color-bi-white-100;
@color-bi-white-theme-dark: #20263B;
//font color
@font-color-black: @color-bi-black;
@font-color-normal: #3d4d66;
@font-color-normal-theme-dark: #d6e0dc;
@font-color-light-gray: #647185;
@font-color-light-gray-theme-dark: #afb7c6;
@font-color-disabled: #9ea6b2;
@font-color-disabled-theme-dark: #878d9f;
@font-color-tips: #9ea6b2;
@font-color-tips-theme-dark: #6b7084;
@font-color-light-disabled: #d0d4da;
@font-color-light-disabled-theme-dark: #606479;
@font-color-light-gray: @color-bi-light-gray;
@font-color-light-gray-theme-dark: @color-bi-light-gray-theme-dark;
@font-color-disabled: @color-bi-dim-gray;
@font-color-disabled-theme-dark: @color-bi-dim-gray-theme-dark;
@font-color-tips: @color-bi-dim-gray;
@font-color-tips-theme-dark: @color-bi-gray-theme-dark;
@font-color-light-disabled: @color-bi-dark-gray;
@font-color-light-disabled-theme-dark: @color-bi-dark-gray-theme-dark;
@font-color-gray: #999999;
@font-color-white: #ffffff;
@font-color-white-theme-dark: #20263b;
@font-color-light-highlight: @color-bi-light-blue-100;
@font-color-white: @color-bi-white;
@font-color-white-theme-dark: @color-bi-white-theme-dark;
@font-color-light-highlight: @color-bi-sky-blue-100;
@font-color-medium-highlight: #d7e7fc;
@font-color-highlight: @color-bi-blue-100;
@font-color-blue: #23beef;
@ -115,15 +185,15 @@
@font-color-yellow: @font-color-yellow-100;
//background color
@background-color-black: #232E40;
@background-color-black-theme-dark: #606479;
@background-color-black: @color-bi-black;
@background-color-black-theme-dark: @color-bi-dark-gray-theme-dark;
@background-color-light-black: #3d4d66;
@background-color-light-black-theme-dark: #d6e0dc;
@background-color-default: #ffffff;
@background-color-default-theme-dark: #20263b;
@background-color-default: @color-bi-white;
@background-color-default-theme-dark: @color-bi-white-theme-dark;
@background-color-normal: #f7f8fa;
@background-color-normal-theme-dark: #191b2b;
@background-color-light-highlight: @color-bi-light-blue-100;
@background-color-light-highlight: @color-bi-sky-blue-100;
@background-color-medium-highlight: #d7e7fc;
@background-color-highlight: @color-bi-blue-100;
@background-color-blue: #23beef;
@ -132,13 +202,13 @@
@background-color-light-gray: #f2f4f7;
@background-color-light-gray-theme-dark: #292f45;
@background-color-medium-gray: #e8eaed;
@background-color-medium-gray-theme-dark: #363e55;
@background-color-dark-gray: #d0d4da;
@background-color-dark-gray-theme-dark: #606479;
@background-color-medium-gray-theme-dark: @color-bi-sliver-theme-dark;
@background-color-dark-gray: @color-bi-dark-gray;
@background-color-dark-gray-theme-dark: @color-bi-dark-gray-theme-dark;
@background-color-disabled: #f2f4f7;
@background-color-disabled-theme-dark: #292f45;
@background-color-light-disabled: #9ea6b2;
@background-color-light-disabled-theme-dark: #878d9f;
@background-color-light-disabled: @color-bi-dim-gray;
@background-color-light-disabled-theme-dark: @color-bi-dim-gray-theme-dark;
@background-color-yellow: @font-color-yellow-100;
@background-color-negative: @color-bi-red-100;
@ -149,33 +219,33 @@
@background-color-dark-success: @color-bi-green-100;
@background-color-light-success: #e1f4e7;
@background-color-normal-success: #647185;
@background-color-normal-success: @color-bi-light-gray;
//border color
@border-color-default: #ffffff;
@border-color-black: #232e40;
@border-color-default: @color-bi-white;
@border-color-black: @color-bi-black;
@border-color-line: #e8eaed;
@border-color-line-theme-dark: #363e55;
@border-color-line-theme-dark: @color-bi-sliver-theme-dark;
@border-color-light-line: #f2f4f7;
@border-color-light-line-theme-dark: #292f45;
@border-color-dark-gray-line: #d0d4da;
@border-color-dark-gray-line-theme-dark: #606479;
@border-color-dark-line: #9ea6b2;
@border-color-dark-line-theme-dark: #878d9f;
@border-color-dark-gray-line: @color-bi-dark-gray;
@border-color-dark-gray-line-theme-dark: @color-bi-dark-gray-theme-dark;
@border-color-dark-line: @color-bi-dim-gray;
@border-color-dark-line-theme-dark: @color-bi-dim-gray-theme-dark;
@border-color-highlight: @color-bi-blue-100;
@border-color-success: @color-bi-green-100;
@border-color-warning: #fbb03b;
@border-color-negative: @color-bi-red-100;
@border-color-light-negative: #f4cbcb;
@border-color-normal-success: #647185;
@border-color-normal-success: @color-bi-light-gray;
//split color
@border-color-disabled: #e8eaed;
@border-color-disabled-theme-dark: #363e55;
@border-color-disabled-theme-dark: @color-bi-sliver-theme-dark;
//scroll color
@scroll-color: #232e40;
@scroll-color-theme-dark: #ffffff;
@scroll-thumb-color: #232e40;
@scroll-thumb-color-theme-dark: #232e40;
@scroll-color: @color-bi-black;
@scroll-color-theme-dark: @color-bi-white;
@scroll-thumb-color: @color-bi-black;
@scroll-thumb-color-theme-dark: @color-bi-black;

39
src/less/lib/theme.less

@ -50,3 +50,42 @@
@color-bi-text-card: @color-bi-text-normal;
@color-bi-text-card-theme-dark: @color-bi-text-theme-dark;
// 控件
// 按钮
@color-bi-border-button: @color-bi-border-highlight;
@color-bi-background-button: @color-bi-background-highlight;
// 单选按钮
@color-bi-border-radio: @color-bi-border-dark-line;
@color-bi-border-radio-theme-dark: @color-bi-border-dark-line-theme-dark;
@color-bi-border-disabled-radio: @color-bi-border-disabled;
@color-bi-border-disabled-radio-theme-dark: @color-bi-border-disabled-theme-dark;
@color-bi-border-hover-active-radio: @color-bi-border-highlight;
@color-bi-border-hover-active-radio-theme-dark: @color-bi-border-highlight;
@color-bi-background-radio: @color-bi-background-default;
@color-bi-background-disabled-radio: @color-bi-background-disabled;
@color-bi-background-disabled-radio-theme-dark: @color-bi-background-disabled-theme-dark;
@color-bi-background-disabled-active-radio: @color-bi-background-dark-gray;
@color-bi-background-disabled-active-radio-theme-dark: @color-bi-background-dark-gray-theme-dark;
// 复选按钮
@color-bi-border-checkbox: @color-bi-border-dark-line;
@color-bi-border-checkbox-theme-dark: @color-bi-border-dark-line-theme-dark;
@color-bi-border-disabled-checkbox: @color-bi-border-disabled;
@color-bi-border-disabled-checkbox-theme-dark: @color-bi-border-disabled-theme-dark;
@color-bi-border-hover-active-checkbox: @color-bi-border-highlight;
@color-bi-border-hover-active-checkbox-theme-dark: @color-bi-border-highlight;
@color-bi-background-disabled-checkbox: @color-bi-background-disabled;
@color-bi-background-disabled-checkbox-theme-dark: @color-bi-background-disabled-theme-dark;
@color-bi-background-disabled-active-checkbox: @color-bi-background-dark-gray;
@color-bi-background-disabled-active-checkbox-theme-dark: @color-bi-background-dark-gray-theme-dark;
// 开关
@color-bi-background-switch: @color-bi-background-dark-gray;
@color-bi-background-switch-theme-dark: @color-bi-background-dark-gray-theme-dark;
@color-bi-background-active-switch: @color-bi-background-highlight;
@color-bi-background-active-switch-theme-dark: @color-bi-background-highlight;
@color-bi-background-disabled-switch: @color-bi-background-disabled;
@color-bi-background-disabled-switch-theme-dark: @color-bi-background-disabled-theme-dark;
// 滑块
@color-bi-background-slider-button: @color-bi-background-default;
@color-bi-background-hover-slider-button: @color-bi-background-normal;
@color-bi-border-disabled-slider-button: @color-bi-border-disabled;
@color-bi-background-hover-disabled-slider-button: @color-bi-background-normal;

8
src/less/widget/singleslider/slider/widget.slider.less

@ -6,23 +6,23 @@
border-width: 2px;
border-style: solid;
.border-radius(8px);
background-color: @color-bi-background-default;
background-color: @color-bi-background-slider-button;
height: 12px;
width: 12px;
top: 6px;
left: -8px;
&:hover, &.hover {
.border-radius(10px);
background-color: @color-bi-background-normal;
background-color: @color-bi-background-hover-slider-button;
width: 16px;
height: 16px;
top: 4px;
left: -10px;
}
&.disabled {
border-color: @color-bi-border-disabled;
border-color: @color-bi-border-disabled-slider-button;
&:hover, &.hover {
background-color: @color-bi-background-normal;
background-color: @color-bi-background-hover-disabled-slider-button;
width: 12px;
height: 12px;
top: 6px;

Loading…
Cancel
Save