caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Pull request #2368: KERNEL-9882 控件提less变量1 

Merge in VISUAL/fineui from ~WINDY/fui:master to master

* commit '4b4c1c5b818c2d84226ac11c3def12c64fc0be24':
  KERNEL-9882 控件提less变量1
es6
windy 3 years ago
parent
ff2176e4d2 4b4c1c5b81
commit
75505c5590
7 changed files with 202 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 174
      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
Unescape View File

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

12
src/less/base/single/button/switch.less
Unescape View File

@ -2,26 +2,26 @@
.bi-switch{ .bi-switch{
.border-radius(40px 40px 40px 40px); .border-radius(40px 40px 40px 40px);
background-color: @color-bi-background-dark-gray; background-color: @color-bi-background-switch;
&.active { &.active {
background-color: @color-bi-background-highlight; background-color: @color-bi-background-active-switch;
} }
& .circle-button{ & .circle-button{
.border-radius(9px 9px 9px 9px); .border-radius(9px 9px 9px 9px);
} }
&.disabled { &.disabled {
background-color: @color-bi-background-disabled; background-color: @color-bi-background-disabled-switch;
} }
} }
.bi-theme-dark { .bi-theme-dark {
.bi-switch{ .bi-switch{
background-color: @color-bi-background-dark-gray-theme-dark; background-color: @color-bi-background-switch-theme-dark;
&.active { &.active {
background-color: @color-bi-background-highlight; background-color: @color-bi-background-active-switch-theme-dark;
} }
&.disabled { &.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
Unescape View File

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

30
src/less/base/single/input/radio.less
Unescape View File

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

174
src/less/lib/constant.less
Unescape View File

@ -21,10 +21,24 @@
@opacity-20: 0.2; @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 //green
@color-bi-green-100: #13cd66; @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-80: fade(@color-bi-green-100, 80);
@color-bi-green-60: fade(@color-bi-green-100, 60); @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-40: fade(@color-bi-green-100, 40);
@color-bi-green-30: fade(@color-bi-green-100, 30); @color-bi-green-30: fade(@color-bi-green-100, 30);
@color-bi-green-20: fade(@color-bi-green-100, 20); @color-bi-green-20: fade(@color-bi-green-100, 20);
@ -32,19 +46,23 @@
@color-bi-green-5: fade(@color-bi-green-100, 5); @color-bi-green-5: fade(@color-bi-green-100, 5);
//cyan //cyan
@color-bi-green-100: #13cd66; @color-bi-sea-green-100: #3FB4AB;
@color-bi-green-80: fade(@color-bi-green-100, 80); @color-bi-sea-green-90: fade(@color-bi-sea-green-100, 90);
@color-bi-green-60: fade(@color-bi-green-100, 60); @color-bi-sea-green-80: fade(@color-bi-sea-green-100, 80);
@color-bi-green-40: fade(@color-bi-green-100, 40); @color-bi-sea-green-60: fade(@color-bi-sea-green-100, 60);
@color-bi-green-30: fade(@color-bi-green-100, 30); @color-bi-sea-green-50: fade(@color-bi-sea-green-100, 50);
@color-bi-green-20: fade(@color-bi-green-100, 20); @color-bi-sea-green-40: fade(@color-bi-sea-green-100, 40);
@color-bi-green-10: fade(@color-bi-green-100, 10); @color-bi-sea-green-30: fade(@color-bi-sea-green-100, 30);
@color-bi-green-5: fade(@color-bi-green-100, 5); @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 //blue
@color-bi-blue-100: #3685f2; @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-80: fade(@color-bi-blue-100, 80);
@color-bi-blue-60: fade(@color-bi-blue-100, 60); @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-40: fade(@color-bi-blue-100, 40);
@color-bi-blue-30: fade(@color-bi-blue-100, 30); @color-bi-blue-30: fade(@color-bi-blue-100, 30);
@color-bi-blue-20: fade(@color-bi-blue-100, 20); @color-bi-blue-20: fade(@color-bi-blue-100, 20);
@ -52,19 +70,23 @@
@color-bi-blue-5: fade(@color-bi-blue-100, 5); @color-bi-blue-5: fade(@color-bi-blue-100, 5);
//light-blue //light-blue
@color-bi-light-blue-100: #eaf2fd; @color-bi-sky-blue-100: #eaf2fd;
@color-bi-light-blue-80: fade(@color-bi-light-blue-100, 80); @color-bi-sky-blue-90: fade(@color-bi-sky-blue-100, 90);
@color-bi-light-blue-60: fade(@color-bi-light-blue-100, 60); @color-bi-sky-blue-80: fade(@color-bi-sky-blue-100, 80);
@color-bi-light-blue-40: fade(@color-bi-light-blue-100, 40); @color-bi-sky-blue-60: fade(@color-bi-sky-blue-100, 60);
@color-bi-light-blue-30: fade(@color-bi-light-blue-100, 30); @color-bi-sky-blue-50: fade(@color-bi-sky-blue-100, 50);
@color-bi-light-blue-20: fade(@color-bi-light-blue-100, 20); @color-bi-sky-blue-40: fade(@color-bi-sky-blue-100, 40);
@color-bi-light-blue-10: fade(@color-bi-light-blue-100, 10); @color-bi-sky-blue-30: fade(@color-bi-sky-blue-100, 30);
@color-bi-light-blue-5: fade(@color-bi-light-blue-100, 5); @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 // orange
@color-bi-orange-100: #faaa39; @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-80: fade(@color-bi-orange-100, 80);
@color-bi-orange-60: fade(@color-bi-orange-100, 60); @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-40: fade(@color-bi-orange-100, 40);
@color-bi-orange-30: fade(@color-bi-orange-100, 30); @color-bi-orange-30: fade(@color-bi-orange-100, 30);
@color-bi-orange-20: fade(@color-bi-orange-100, 20); @color-bi-orange-20: fade(@color-bi-orange-100, 20);
@ -73,8 +95,10 @@
// red // red
@color-bi-red-100: #e65251; @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-80: fade(@color-bi-red-100, 80);
@color-bi-red-60: fade(@color-bi-red-100, 60); @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-40: fade(@color-bi-red-100, 40);
@color-bi-red-30: fade(@color-bi-red-100, 30); @color-bi-red-30: fade(@color-bi-red-100, 30);
@color-bi-red-20: fade(@color-bi-red-100, 20); @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-20: fade(@font-color-yellow-100, 20);
@color-bi-yellow-5: fade(@font-color-yellow-100, 5); @color-bi-yellow-5: fade(@font-color-yellow-100, 5);
// 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
@font-color-black: #232e40; @font-color-black: @color-bi-black;
@font-color-normal: #3d4d66; @font-color-normal: #3d4d66;
@font-color-normal-theme-dark: #d6e0dc; @font-color-normal-theme-dark: #d6e0dc;
@font-color-light-gray: #647185; @font-color-light-gray: @color-bi-light-gray;
@font-color-light-gray-theme-dark: #afb7c6; @font-color-light-gray-theme-dark: @color-bi-light-gray-theme-dark;
@font-color-disabled: #9ea6b2; @font-color-disabled: @color-bi-dim-gray;
@font-color-disabled-theme-dark: #878d9f; @font-color-disabled-theme-dark: @color-bi-dim-gray-theme-dark;
@font-color-tips: #9ea6b2; @font-color-tips: @color-bi-dim-gray;
@font-color-tips-theme-dark: #6b7084; @font-color-tips-theme-dark: @color-bi-gray-theme-dark;
@font-color-light-disabled: #d0d4da; @font-color-light-disabled: @color-bi-dark-gray;
@font-color-light-disabled-theme-dark: #606479; @font-color-light-disabled-theme-dark: @color-bi-dark-gray-theme-dark;
@font-color-gray: #999999; @font-color-gray: #999999;
@font-color-white: #ffffff; @font-color-white: @color-bi-white;
@font-color-white-theme-dark: #20263b; @font-color-white-theme-dark: @color-bi-white-theme-dark;
@font-color-light-highlight: @color-bi-light-blue-100; @font-color-light-highlight: @color-bi-sky-blue-100;
@font-color-medium-highlight: #d7e7fc; @font-color-medium-highlight: #d7e7fc;
@font-color-highlight: @color-bi-blue-100; @font-color-highlight: @color-bi-blue-100;
@font-color-blue: #23beef; @font-color-blue: #23beef;
@ -115,15 +185,15 @@
@font-color-yellow: @font-color-yellow-100; @font-color-yellow: @font-color-yellow-100;
//background color //background color
@background-color-black: #232E40; @background-color-black: @color-bi-black;
@background-color-black-theme-dark: #606479; @background-color-black-theme-dark: @color-bi-dark-gray-theme-dark;
@background-color-light-black: #3d4d66; @background-color-light-black: #3d4d66;
@background-color-light-black-theme-dark: #d6e0dc; @background-color-light-black-theme-dark: #d6e0dc;
@background-color-default: #ffffff; @background-color-default: @color-bi-white;
@background-color-default-theme-dark: #20263b; @background-color-default-theme-dark: @color-bi-white-theme-dark;
@background-color-normal: #f7f8fa; @background-color-normal: #f7f8fa;
@background-color-normal-theme-dark: #191b2b; @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-medium-highlight: #d7e7fc;
@background-color-highlight: @color-bi-blue-100; @background-color-highlight: @color-bi-blue-100;
@background-color-blue: #23beef; @background-color-blue: #23beef;
@ -132,13 +202,13 @@
@background-color-light-gray: #f2f4f7; @background-color-light-gray: #f2f4f7;
@background-color-light-gray-theme-dark: #292f45; @background-color-light-gray-theme-dark: #292f45;
@background-color-medium-gray: #e8eaed; @background-color-medium-gray: #e8eaed;
@background-color-medium-gray-theme-dark: #363e55; @background-color-medium-gray-theme-dark: @color-bi-sliver-theme-dark;
@background-color-dark-gray: #d0d4da; @background-color-dark-gray: @color-bi-dark-gray;
@background-color-dark-gray-theme-dark: #606479; @background-color-dark-gray-theme-dark: @color-bi-dark-gray-theme-dark;
@background-color-disabled: #f2f4f7; @background-color-disabled: #f2f4f7;
@background-color-disabled-theme-dark: #292f45; @background-color-disabled-theme-dark: #292f45;
@background-color-light-disabled: #9ea6b2; @background-color-light-disabled: @color-bi-dim-gray;
@background-color-light-disabled-theme-dark: #878d9f; @background-color-light-disabled-theme-dark: @color-bi-dim-gray-theme-dark;
@background-color-yellow: @font-color-yellow-100; @background-color-yellow: @font-color-yellow-100;
@background-color-negative: @color-bi-red-100; @background-color-negative: @color-bi-red-100;
@ -149,33 +219,33 @@
@background-color-dark-success: @color-bi-green-100; @background-color-dark-success: @color-bi-green-100;
@background-color-light-success: #e1f4e7; @background-color-light-success: #e1f4e7;
@background-color-normal-success: #647185; @background-color-normal-success: @color-bi-light-gray;
//border color //border color
@border-color-default: #ffffff; @border-color-default: @color-bi-white;
@border-color-black: #232e40; @border-color-black: @color-bi-black;
@border-color-line: #e8eaed; @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: #f2f4f7;
@border-color-light-line-theme-dark: #292f45; @border-color-light-line-theme-dark: #292f45;
@border-color-dark-gray-line: #d0d4da; @border-color-dark-gray-line: @color-bi-dark-gray;
@border-color-dark-gray-line-theme-dark: #606479; @border-color-dark-gray-line-theme-dark: @color-bi-dark-gray-theme-dark;
@border-color-dark-line: #9ea6b2; @border-color-dark-line: @color-bi-dim-gray;
@border-color-dark-line-theme-dark: #878d9f; @border-color-dark-line-theme-dark: @color-bi-dim-gray-theme-dark;
@border-color-highlight: @color-bi-blue-100; @border-color-highlight: @color-bi-blue-100;
@border-color-success: @color-bi-green-100; @border-color-success: @color-bi-green-100;
@border-color-warning: #fbb03b; @border-color-warning: #fbb03b;
@border-color-negative: @color-bi-red-100; @border-color-negative: @color-bi-red-100;
@border-color-light-negative: #f4cbcb; @border-color-light-negative: #f4cbcb;
@border-color-normal-success: #647185; @border-color-normal-success: @color-bi-light-gray;
//split color //split color
@border-color-disabled: #e8eaed; @border-color-disabled: #e8eaed;
@border-color-disabled-theme-dark: #363e55; @border-color-disabled-theme-dark: @color-bi-sliver-theme-dark;
//scroll color //scroll color
@scroll-color: #232e40; @scroll-color: @color-bi-black;
@scroll-color-theme-dark: #ffffff; @scroll-color-theme-dark: @color-bi-white;
@scroll-thumb-color: #232e40; @scroll-thumb-color: @color-bi-black;
@scroll-thumb-color-theme-dark: #232e40; @scroll-thumb-color-theme-dark: @color-bi-black;

39
src/less/lib/theme.less
Unescape View File

@ -50,3 +50,42 @@
@color-bi-text-card: @color-bi-text-normal; @color-bi-text-card: @color-bi-text-normal;
@color-bi-text-card-theme-dark: @color-bi-text-theme-dark; @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
Unescape View File

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

Write Preview
Loading…
Cancel
Save