p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

兼容cxd 3.0

This commit is contained in:
rickcole 2019-08-12 21:14:33 +08:00
parent 18050e6e2d
commit 7f8d0ae482
18 changed files with 287 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/components/Form/Full.jsx
View File

@ -592,7 +592,8 @@ export default {
type: "button-group",
name: "range1",
value: "today",
btnActiveClassName: "btn-info active",
// btnActiveClassName: "btn-primary active",
btnActiveLevel: 'primary',
mode: 'inline',
options: [
{

25
scss/_variables.scss
View File

@ -497,6 +497,9 @@ $Card-borderColor: $borderColor !default;
$Card-borderWidth: $borderWidth !default;
$Card-borderRadius: $borderRadius !default;
$Card-actions-borderColor: lighten($Card-borderColor, 5%) !default;
$Card-actions-onHover-bg: darken($white, 5%) !default;
$Card-actions-onHover-color: darken($text-color, 5%) !default;
$Card-actions-onChecked-onHover-bg: darken(#d9f3fb, 5%) !default;
$Card-onChecked-bg: #d9f3fb !default;
$Card-onChecked-borderColor: darken($Table-onChecked-bg, 10%) !default;
@ -600,7 +603,7 @@ $Form-input-onFocused-borderColor: $info !default;
$Form-input-onFocused-bg: $Form-input-bg !default;
$Form-input-onError-borderColor: $danger !default;
$Form-input-onError-bg: $Form-input-bg !default;
$Form-input-onDisabled-borderColor: $Form-input-borderColor;
$Form-input-onDisabled-borderColor: $Form-input-borderColor !default;
$Form-input-onDisabled-bg: $gray200 !default;
$Form-input-height: px2rem(34px) !default;
$Form-input-placeholderColor: $text--muted-color !default;
@ -619,6 +622,7 @@ $Form-label-paddingTop: (
$Form-input-addOnBg: #edf1f2 !default;
$Form-input-addOnColor: $text-color !default;
$Form-input-onFocus-addOnColor: $primary !default;
$Form-input-addOnDividerBorderWidth: $borderWidth !default;
$Number-bg: $Form-input-bg !default;
@ -626,20 +630,24 @@ $Number-borderColor: $Form-input-borderColor !default;
$Number-borderWidth: $Form-input-borderWidth !default;
$Number-borderRadius: $Form-input-borderRadius !default;
$Number-handler-mode: "vertical" !default;
$Number-handler-borderBottom: px2rem(1px) solid $Form-input-borderColor !default;
$Number-handler-width: px2rem(20px) !default;
$Number-handler-color: $Form-input-color !default;
$Number-handler-onDisabled-color: $text--muted-color !default;
$Number-handler-fontFamily: inherit !default;
$Number-handler-fontSize: $fontSizeBase !default;
$Number-handler--up-content: "+" !default;
$Number-handler--up-transform: none !default;
$Number-handler--down-content: "-" !default;
$Number-handler-bg: $white !default;
$Number-handler-onHover-bg: darken($Number-handler-bg, 5%) !default;
$Number-handler-onHover-color: $text-color !default;
$Number-handler-onActive-bg: $Number-handler-onHover-bg !default;
$Number-handler-onDisabled-bg: $Form-input-onDisabled-bg !default;
$Form-select-bg: $white !default;
$Form-select-onHover-bg: darken($white, 5%) !default;
$Form-select-onHover-borderColor: $Form-input-borderColor !default;
$Form-select-color: $text-color !default;
$Form-select-placeholderColor: $Form-input-placeholderColor !default;
$Form-select-paddingX: $Form-input-paddingX !default;
@ -664,8 +672,10 @@ $Form-select-caret-vender: "FontAwesome" !default;
$Form-select-caret-icon: "\f0d7" !default;
$Form-select-caret-fontSize: $fontSizeBase !default;
$Form-select-caret-iconColor: $Form-input-iconColor !default;
$Form-select-caret-onHover-iconColor: $Form-input-iconColor !default;
$Form-select-outer-borderWidth: px2rem(1px) !default;
$Form-select-outer-boxShadow: none !default;
$Form-select-outer-top: 100% !default;
$Form-select-menu-height: $Form-input-height !default;
$Form-select-menu-bg: $white !default;
$Form-select-menu-color: $Form-select-color !default;
@ -760,6 +770,7 @@ $Button-boxShadow: inset 0 1px 0 rgba($white, 0.15),
$Button-onFocus-boxShadow: none !default;
$Button-onActive-boxShadow: inset 0 3px 5px rgba($black, 0.125) !default;
$Button-onDisabled-opacity: 0.65 !default;
$Button-onDisabled-borderColor: #dee2e6 !default;
$Button--link-onDisabled-color: $gray600 !default;
@ -924,11 +935,13 @@ $Switch-valueColor: $white !default;
$Switch-onActive-bgColor: $info !default;
$Switch-onDisabled-bgColor: #ccc !default;
$Switch-onDisabled-color: #fff !default;
$Switch-onDisabled-circle-BackgroundColor: $white !default;
// color Picker
$ColorPicker-color: $Form-input-color !default;
$ColorPicker-bg: $white !default;
$ColorPicker-onHover-bg: darken($ColorPicker-bg, 5%) !default;
$ColorPicker-onHover-borderColor: $borderColor !default;
$ColorPicker-onDisabled-bg: $gray200 !default;
$ColorPicker-onDisabled-color: $text--muted-color !default;
$ColorPicker-borderWidth: $Form-input-borderWidth !default;
@ -943,6 +956,7 @@ $ColorPicker-paddingY: (
)/2 - $ColorPicker-borderWidth !default;
$ColorPicker-placeholderColor: $Form-input-placeholderColor !default;
$ColorPicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
$DatePicker-onHover-borderColor: $Form-input-borderColor !default;
// datepicker
$DatePicker-color: $Form-input-color !default;
@ -1056,6 +1070,8 @@ $ListControl-item-onActive-borderColor: darken(
10%
) !default;
$ListControl-item-onActive-color: $white !default;
$ListControl-item-onActive-before-bg: $white !default;
$ListControl-item-onActive-after-borderColor: $primary !default;
$ListControl-item-onDisabled-opacity: 0.6 !default;
$ListControl-item-onDisabled-color: $ListControl-item-color !default;
@ -1215,9 +1231,13 @@ $Wizard-steps-padding: 0 !default;
$Wizard-steps-liAfterContent: "" !default;
$Wizard-steps-liVender: "FontAwesome" !default;
$Wizard-steps-liAfterBorder: px2rem(20px) solid transparent !default;
$Wizard-steps-li-onActive-color: $info !default;
$Wizard-stepsContent-padding: px2rem(15px) !default;
$Wizard-badge-bg: $gray400 !default;
$Wizard-badge-color: $white !default;
$Wizard-badge-size: px2rem(20px) !default;
$Wizard-badge-border: 0 !default;
$Wizard-badge-onActive-backgroundColor: $info !default;
$Wizard-badge-borderRadius: px2rem(10px) !default;
$Wizard-badge-fontSize: $fontSizeSm !default;
$Wizard-badge-marginRight: px2rem(4px) !default;
@ -1268,6 +1288,9 @@ $Pagination-arrowVendor: "FontAwesome" !default;
$Pagination-prevArrowContent: "\f053" !default;
$Pagination-nextArrowContent: "\f054" !default;
$Pagination-fontSize: $fontSizeBase !default;
$Pagination-onActive-backgroundColor: $primary !default;
$Pagination-onActive-color: $white !default;
$Pagination-onActive-border: 0 !default;
// Transfer-select
$TransferSelect--table-heading-bg: $white !default;

1
scss/components/_button.scss
View File

@ -38,6 +38,7 @@
opacity: $Button-onDisabled-opacity;
box-shadow: none;
pointer-events: none;
border-color: $Button-onDisabled-borderColor;
@if variable-exists(Button-onDisabled-bg) {
background-color: $Button-onDisabled-bg !important;

6
scss/components/_card.scss
View File

@ -122,8 +122,8 @@
}
&:hover {
background-color: darken($white, 5%);
color: darken($text-color, 5%);
background-color: $Card-actions-onHover-bg;
color: $Card-actions-onHover-color;
text-decoration: none;
}
}
@ -145,7 +145,7 @@
}
.#{$ns}Card-actions > a:hover {
background-color: darken($Card-onChecked-bg, 5%);
background-color: $Card-actions-onChecked-onHover-bg;
color: darken($Card-onChecked-color, 10%);
}
}

5
scss/components/_pagination.scss
View File

@ -57,8 +57,9 @@
> span:hover,
> a:focus,
> span:focus {
background-color: $primary;
color: $white;
background-color: $Pagination-onActive-backgroundColor;
color: $Pagination-onActive-color;
border: $Pagination-onActive-border;
}
}

74
scss/components/_wizard.scss
View File

@ -8,13 +8,12 @@
padding: 0;
.Badge {
display: inline-block; // min-width: px2rem(10px);
// padding: px2rem(3px) px2rem(7px);
display: inline-block;
width: $Wizard-badge-size;
height: $Wizard-badge-size;
font-size: $Wizard-badge-fontSize;
line-height: $Wizard-badge-size;
color: $white;
color: $Wizard-badge-color;
text-align: center;
white-space: nowrap;
vertical-align: middle;
@ -22,37 +21,43 @@
border-radius: $Wizard-badge-borderRadius; // font-weight: 700;
text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2);
margin-right: $Wizard-badge-marginRight;
border: $Wizard-badge-border;
box-sizing: content-box;
&--primary {
background-color: $primary;
}
// &--primary {
// background-color: $primary;
// }
&--secondary {
background-color: $secondary;
}
// &--secondary {
// background-color: $secondary;
// }
&--success {
background-color: $success;
}
// &--success {
// background-color: $success;
// }
&--info {
background-color: $info;
}
// &--info {
// background-color: $info;
// }
&--warning {
background-color: $warning;
}
// &--warning {
// background-color: $warning;
// }
&--danger {
background-color: $danger;
}
// &--danger {
// background-color: $danger;
// }
&--light {
background-color: $light;
}
// &--light {
// background-color: $light;
// }
&--dark {
background-color: $dark;
// &--dark {
// background-color: $dark;
// }
&.is-active {
color: $white;
background-color: $Wizard-badge-onActive-backgroundColor;
}
}
@ -60,12 +65,12 @@
color: $info;
}
.#{$ns}Panel-footer > .#{$ns}Form-group,
.#{$ns}Panel-footer > .btn {
.#{$ns}Panel-footer>.#{$ns}Form-group,
.#{$ns}Panel-footer>.btn {
margin-left: px2rem(5px);
}
> ul.nav {
>ul.nav {
padding: 0;
margin: 0;
border: $borderWidth solid $borderColor;
@ -117,7 +122,7 @@
}
&.is-active {
color: #3a87ad;
color: $Wizard-steps-li-onActive-color;
background: #fff;
}
@ -182,7 +187,7 @@
}
&.is-active {
color: #3a87ad;
color: $Wizard-steps-li-onActive-color;
background: #fff;
}
@ -192,6 +197,7 @@
&.is-complete,
&.is-complete:hover {
color: $Wizard-steps-li-onActive-color;
cursor: pointer;
background: $Wizard-steps-bg--isComplete;
}
@ -228,7 +234,7 @@
height: auto;
}
& + .#{$ns}Wizard-stepContent {
&+.#{$ns}Wizard-stepContent {
zoom: 1;
overflow: hidden;
padding-left: px2rem(40px);
@ -251,8 +257,8 @@
// }
}
& + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer {
&+.#{$ns}Wizard-stepContent+.#{$ns}Panel-footer {
clear: both;
}
}
}
}

1
scss/components/form/_color.scss
View File

@ -14,6 +14,7 @@
&:hover {
background-color: $ColorPicker-onHover-bg;
border-color: $ColorPicker-onHover-borderColor;
}
}

5
scss/components/form/_date-range.scss
View File

@ -18,6 +18,11 @@
&:hover {
background-color: $DatePicker-onHover-bg;
border-color: $DatePicker-onHover-borderColor;
.#{$ns}DateRangePicker-toggler {
color: $DatePicker-onHover-iconColor;
}
}
}

5
scss/components/form/_date.scss
View File

@ -17,6 +17,11 @@
&:hover {
background-color: $DatePicker-onHover-bg;
border-color: $DatePicker-onHover-borderColor;
.#{$ns}DatePicker-toggler:before {
color: $DatePicker-onHover-iconColor;
}
}
}

4
scss/components/form/_input-group.scss
View File

@ -163,6 +163,10 @@
color: $InputGroup-select-onFocused-arrowColor;
}
}
.#{$ns}InputGroup-addOn {
color: $primary;
}
}
}

5
scss/components/form/_list.scss
View File

@ -44,6 +44,7 @@
&.is-disabled {
pointer-events: none;
opacity: $ListControl-item-onDisabled-opacity;
border-color: $ListControl-item-onDisabled-borderColor;
@if variable-exists("ListControl-item-onDisabled-bg") {
background-color: $ListControl-item-onDisabled-bg;
@ -79,7 +80,7 @@
position: absolute;
width: px2rem(14px);
height: px2rem(14px);
background-color: $ListControl-item-bg;
background-color: $ListControl-item-onActive-before-bg;
right: 0;
bottom: 0;
}
@ -89,7 +90,7 @@
position: absolute;
width: px2rem(10px);
height: px2rem(5px);
border-color: $ListControl-item-onActive-bg;
border-color: $ListControl-item-onActive-after-borderColor;
border-style: solid;
border-width: 0 0 px2rem(2px) px2rem(2px);
right: px2rem(1px);

6
scss/components/form/_nested-select.scss
View File

@ -24,7 +24,7 @@
&.is-focused,
&.is-opened {
border-color: $Form-input-onFocused-borderColor;
border-bottom: 0;
// border-bottom: 0;
@if ($Form-select-onFocused-color !=$Form-select-color) {
color: $Form-select-onFocused-color;
@ -99,9 +99,7 @@
position: absolute;
background: $Form-select-menu-bg;
color: $Form-select-menu-color;
border: $Form-select-outer-borderWidth solid
$Form-input-onFocused-borderColor;
z-index: 10;
border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor;
box-shadow: $Form-select-outer-boxShadow;
.#{$ns}NestedSelect-option {

82
scss/components/form/_number.scss
View File

@ -30,6 +30,7 @@
&-handler-down-inner {
user-select: none;
-webkit-user-select: none;
display: inline-block;
}
&:hover {
@ -78,6 +79,7 @@
&:hover {
background-color: $Number-handler-onHover-bg;
color: $Number-handler-onHover-color;
}
&:hover:active {
@ -87,6 +89,8 @@
&-handler-up {
&-inner {
transform: $Number-handler--up-transform;
&:after {
content: $Number-handler--up-content;
}
@ -101,47 +105,47 @@
}
}
@if $Number-handler-mode==vertical {
&-handler-wrap {
float: right;
border-left: px2rem(1px) solid $Form-input-borderColor;
width: $Number-handler-width;
height: 100%;
}
&-handler {
line-height: ($Form-input-height - px2rem(6px)) / 2;
height: ($Form-input-height - $Number-borderWidth * 2) / 2;
}
&-handler-up {
border-bottom: px2rem(1px) solid $Form-input-borderColor;
padding-top: px2rem(1px);
}
} @else {
position: relative;
&-input {
text-align: center;
}
&-handler-up,
&-handler-down {
position: absolute;
width: $Number-handler-width;
height: 100%;
top: 0;
}
&-handler-down {
left: 0;
}
&-handler-up {
right: 0;
}
// @if $Number-handler-mode==vertical {
&-handler-wrap {
float: right;
border-left: px2rem(1px) solid $Form-input-borderColor;
width: $Number-handler-width;
height: 100%;
}
&-handler {
line-height: ($Form-input-height - px2rem(6px)) / 2;
height: ($Form-input-height - $Number-borderWidth * 2) / 2;
}
&-handler-up {
border-bottom: $Number-handler-borderBottom;
padding-top: px2rem(1px);
}
// } @else {
// position: relative;
// &-input {
// text-align: center;
// }
// &-handler-up,
// &-handler-down {
// position: absolute;
// width: $Number-handler-width;
// height: 100%;
// top: 0;
// }
// &-handler-down {
// left: 0;
// }
// &-handler-up {
// right: 0;
// }
// }
&-handler-down-disabled,
&-handler-up-disabled {
background-color: $Number-handler-onDisabled-bg;

7
scss/components/form/_select.scss
View File

@ -18,6 +18,11 @@
&:not(.is-disabled):hover {
background: $Form-select-onHover-bg;
border-color: $Form-select-onHover-borderColor;
.#{$ns}Select-arrow:before {
color: $Form-select-caret-onHover-iconColor;
}
}
&.is-disabled {
@ -148,7 +153,7 @@
left: px2rem(-1px);
right: px2rem(-1px);
min-width: 100%;
top: 100%;
top: $Form-select-outer-top;
z-index: 10;
box-shadow: $Form-select-outer-boxShadow;
}

15
scss/components/form/_switch.scss
View File

@ -17,13 +17,14 @@
i {
&:before {
content: "OFF";
content: "关";
color: $Switch-valueColor;
text-indent: ($Switch-width / 2) - px2rem(2px);
text-indent: ($Switch-width / 2);
text-transform: uppercase;
font-size: $fontSizeSm;
line-height: $Switch-height;
font-style: normal;
font-weight: bold;
position: absolute;
top: px2rem(-1px);
@ -54,7 +55,8 @@
position: absolute;
opacity: 0;
&:disabled {
&:disabled,
&:disabled:checked {
& + i {
&:before {
color: $Switch-onDisabled-color;
@ -62,6 +64,7 @@
}
&:after {
background-color: $Switch-onDisabled-circle-BackgroundColor;
color: $Switch-onDisabled-color;
}
}
@ -77,12 +80,12 @@
&:after {
margin-left: $Switch-width - $Switch-height;
content: "On";
content: "开";
color: $white;
text-indent: px2rem(-20px); // todo
text-indent: px2rem(-18px); // todo
text-transform: uppercase;
font-size: $fontSizeSm;
font-weight: normal;
font-weight: bold;
font-style: normal;
line-height: $Switch-height;
}

5
scss/components/form/_text.scss
View File

@ -66,6 +66,10 @@
}
}
&.is-error.is-focused > &-input {
border-color: $Form-input-onError-borderColor;
}
&.is-disabled > &-input {
color: $text--muted-color;
background: $Form-input-onDisabled-bg;
@ -219,6 +223,7 @@
&--withAddOn.is-focused > &-addOn {
border-color: $Form-input-onFocused-borderColor;
color: $Form-input-onFocus-addOnColor;
box-shadow: $Form-input-boxShadow;
}

201
scss/themes/cxd.scss
View File

@ -1,4 +1,4 @@
// 百度云舍主题：http://v3.yunshe.design/
// 百度云舍主题：http://console.yunshe.design/docs/index
@import "../functions";
$remFactor: 16px;
@ -51,64 +51,76 @@ $Page-header-paddingY: px2rem(18px);
$Form-item-gap: px2rem(20px);
$Form-input-height: px2rem(30px);
$Form-input-onFocused-bg: #f8fbfe;
$Form-input-onFocused-bg: $white;
$Form-input-borderRadius: 0;
$Form-input-borderColor: #ccc;
$Form-input-onFocused-borderColor: #108cee;
$Form-input-onFocused-borderColor: $primary;
$Form-input-onError-borderColor: #d0021b;
$Form-input-paddingX: px2rem(10px);
$Form-fontSize: px2rem(12px);
$Form-description-color: #999;
$Form-input-onError-bg: #fffbfb;
$Form-input-onDisabled-bg: #f7f7f7;
$Form-input-onDisabled-bg: #f5f5f5;
$Form-input-onDisabled-borderColor: #ebebeb;
$Form--horizontal-label-widthBase: px2rem(90px);
$Form--horizontal-label-align: left;
$Form--horizontal-label-widthXs: px2rem(50px);
$Form--horizontal-label-widthSm: px2rem(70px);
$Form--horizontal-label-widthMd: px2rem(140px);
$Form--horizontal-label-widthLg: px2rem(190px);
$Form-input-addOnBg: #eaf6fe;
$Form-input-addOnColor: #108cee;
$Form-input-addOnBg: $white;
$Form-input-addOnColor: #666;
$Form-input-onFocus-addOnColor: $primary;
$Form-input-addOnDividerBorderWidth: 0;
$Form-select-borderWidth: 0;
$Form-select-borderWidth: px2rem(1px);
$Form-select-borderRadius: 0;
$Form-select-bg: #eaf6fe;
$Form-select-onHover-bg: #d2ecfd;
$Form-select-placeholderColor: #108cee;
$Form-select-color: #108cee;
$Form-select-borderColor: #ccc;
$Form-select-bg: $white;
$Form-select-onHover-bg: $white;
$Form-select-onHover-borderColor: $primary;
$Form-select-placeholderColor: #999;
$Form-select-color: #000;
$Form-select-caret-vender: "iconfont";
$Form-select-caret-icon: "\e605";
$Form-select-caret-iconColor: inherit;
$Form-select-caret-iconColor: #999;
$Form-select-caret-onHover-iconColor: $primary;
$Form-select-caret-fontSize: px2rem(12px);
$Form-select-outer-borderWidth: 0;
$Form-select-outer-top: px2rem(32px);
$Form-select-outer-boxShadow: px2rem(2px) px2rem(4px) px2rem(8px)
rgba(0, 0, 0, 0.2);
$Form-select-menu-color: #333;
$Form-select-menu-onHover-color: #000;
$Form-select-menu-onHover-bg: #eaf6fe;
$InputGroup-select-borderWidth: px2rem(1px);
$InputGroup-select-bg: #f6f7fb;
$InputGroup-select-onFocused-bg: #eaf6fe;
$InputGroup-select-color: #333;
$InputGroup-select-onFocused-color: #108cee;
$InputGroup-select-onFocused-color: $primary;
$InputGroup-select-arrowColor: #999;
$InputGroup-select-onFocused-arrowColor: #108cee;
$InputGroup-select-onFocused-arrowColor: $primary;
$InputGroup-button-borderWidth: px2rem(1px);
$InputGroup-button-borderRadius: 0;
$Number-bg: #eaf6fe;
$Number-borderWidth: 0;
// $Number-bg: #eaf6fe;
$Number-borderWidth: px2rem(1px);
$Number-handler-mode: "horizontal";
$Number-handler-width: px2rem(30px);
$Number-handler-color: #fff;
$Number-handler-borderBottom: 0;
$Number-handler-width: px2rem(20px);
$Number-handler-color: #666;
$Number-handler-onDisabled-color: #999;
$Number-handler-bg: #108cee;
$Number-handler-onHover-bg: #209bfd;
$Number-handler-onHover-bg: #047bd8;
$Number-handler-onDisabled-bg: #eceff8;
// $Number-handler-bg: $info;
$Number-handler-onHover-bg: $white;
$Number-handler-onHover-color: $primary;
$Number-handler-onActive-bg: #f3f9fe;
$Number-handler-onDisabled-bg: #f5f5f5;
$Number-handler-fontFamily: "iconfont";
$Number-handler-fontSize: px2rem(16px);
$Number-handler--up-content: "\e600";
$Number-handler--down-content: "\e602";
$Number-handler-fontSize: px2rem(12px);
$Number-handler--up-content: "\e6dd";
$Number-handler--up-transform: rotate(180deg);
$Number-handler--down-content: "\e6dd";
$Checkbox-size: px2rem(14px);
$Checkbox-inner-size: px2rem(8px);
@ -116,30 +128,34 @@ $Checkbox--full-inner-size: px2rem(10px);
$Radio-size: px2rem(16px);
$Radio-inner-size: px2rem(10px);
$Switch-bgColor: $danger;
$Switch-bgColor: #ccc;
$Switch-borderColor: #f0f0f0;
$Switch-onActive-bgColor: $primary;
$Switch-onDisabled-bgColor: #ccc;
$Switch-onDisabled-bgColor: #f5f5f5;
$Switch-onDisabled-color: #ccc;
$Switch-onDisabled-circle-BackgroundColor: #ccc;
$ColorPicker-borderWidth: 0;
$ColorPicker-borderWidth: px2rem(1px);
$ColorPicker-borderRadius: 0;
$ColorPicker-bg: #eaf6fe;
$ColorPicker-onHover-bg: #d2ecfd;
$ColorPicker-color: #108cee;
$ColorPicker-placeholderColor: #108cee;
$ColorPicker-onDisabled-bg: #f6f7fb;
$ColorPicker-bg: $white;
$ColorPicker-onHover-bg: $white;
$ColorPicker-onHover-borderColor: $primary;
$ColorPicker-color: #000;
$ColorPicker-placeholderColor: #999;
$ColorPicker-onDisabled-bg: #f5f5f5;
$ColorPicker-onDisabled-color: #999;
$DatePicker-borderWidth: 0;
$DatePicker-borderWidth: px2rem(1px);
$DatePicker-borderRadius: 0;
$DatePicker-bg: #eaf6fe;
$DatePicker-onHover-bg: #d2ecfd;
$DatePicker-color: #108cee;
$DatePicker-placeholderColor: #108cee;
$DatePicker-onDisabled-bg: #f6f7fb;
$DatePicker-bg: $white;
$DatePicker-onHover-bg: $white;
$DatePicker-color: #000;
$DatePicker-placeholderColor: #999;
$DatePicker-onDisabled-bg: #f5f5f5;
$DatePicker-onDisabled-color: #999;
$DatePicker-iconColor: #108cee;
$DatePicker-onHover-iconColor: #108cee;
$DatePicker-iconColor: #666;
$DatePicker-onHover-iconColor: $primary;
$DatePicker-onHover-borderColor: $primary;
$DatePicker-toggler-vendor: "iconfont";
$DatePicker-toggler-fontSize: px2rem(12px);
$DatePicker-toggler-icon: "\e7b1";
@ -154,29 +170,40 @@ $Calendar-input-borderRadius: 0;
// button
$Button-mimWidth: px2rem(68px);
$Button-borderWidth: 0;
$Button-borderWidth: px2rem(1px);
$Button-boxShadow: none;
$Button-onActive-boxShadow: none;
$Button-borderRadius: 0;
$Button--lg-borderRadius: 0;
$Button--sm-borderRadius: 0;
$Button-onDisabled-opacity: 1;
$Button-onDisabled-bg: #f6f7fb;
$Button-onDisabledActive-bg: #e2e5ec;
$Button-onDisabled-color: #999;
$Button-onDisabled-bg: #f5f5f5;
$Button-onDisabledActive-bg: #f5f5f5;
$Button-onDisabled-borderColor: #ebebeb;
$Button-onDisabled-color: #aaa;
$Button-paddingX: px2rem(10px);
$Button--lg-height: px2rem(40px);
$Button--lg-fontSize: px2rem(14px);
$Button--default-bg: #eaf6fe;
$Button--default-onHover-bg: #d2ecfd;
$Button--default-onActive-bg: #eaf6fe;
$Button--default-color: #108cee;
$Button--default-bg: $white;
$Button--default-border: #cccccc;
$Button--default-color: #000;
$Button--default-onHover-bg: $white;
$Button--default-onHover-border: $primary;
$Button--default-onHover-color: $primary;
$Button--default-onActive-bg: #108cee0d;
$Button--default-onActive-border: $primary;
$Button--default-onActive-color: $primary;
$Button--primary-bg: #108cee;
$Button--primary-bg: $primary;
$Button--primary-border: $primary;
$Button--primary-onHover-bg: #209bfd;
$Button--primary-onActive-bg: #047bd8;
$Button--primary-onHover-border: $primary;
$Button--primary-onHover-color: $white;
$Button--primary-onActive-bg: $white;
$Button--primary-onActive-border: $primary;
$Button--primary-onActive-color: $primary;
$Button--danger-bg: #ea2e2e;
$Button--danger-onHover-bg: #f64545;
@ -185,8 +212,8 @@ $Button--danger-onActive-bg: #d72b2b;
$ButtonGroup-divider-width: px2rem(1px);
$ButtonGroup-divider-color: #fff;
$Button--link-color: $Button--default-color;
$Button--link-onHover-color: $Button--default-color;
$Button--link-color: $primary;
$Button--link-onHover-color: #209bfd;
$Spinner-bg: url("./spinner-cxd.svg");
@ -227,20 +254,27 @@ $TableCell-filterPopOver-dropDownItem-height: px2rem(30px);
$TableCell-filterPopOver-dropDownItem-padding: 0 px2rem(10px);
// listControl
$ListControl-item-borderWidth: 0;
$ListControl-item-borderWidth: px2rem(1px);
$ListControl-item-borderColor: #ccc;
$ListControl-item-paddingX: px2rem(10px);
$ListControl-item-bg: $Button--default-bg;
$ListControl-item-color: $Button--default-color;
$ListControl-item-onHover-color: $ListControl-item-color;
$ListControl-item-onHover-color: $primary;
$ListControl-item-onHover-bg: $Button--default-onHover-bg;
$ListControl-item-onHover-borderColor: $ListControl-item-onHover-color;
$ListControl-item-onActive-bg: #108cee;
$ListControl-item-onActive-onHover-bg: #209bfd;
$ListControl-item-onActive-color: #fff;
$ListControl-item-onHover-borderColor: $primary;
$ListControl-item-onActive-bg: $white;
$ListControl-item-onActive-onHover-bg: $white;
$ListControl-item-onActive-color: $primary;
$ListControl-item-onActive-borderColor: $primary;
$ListControl-item-onActive-before-bg: $primary;
$ListControl-item-onActive-after-borderColor: $white;
$ListControl-item-onDisabled-opacity: 1;
$ListControl-item-onDisabled-bg: #eceff8;
$ListControl-item-onDisabled-bg: #f5f5f5;
$ListControl-item-onDisabled-color: #999;
$ListControl-item-onDisabled-borderColor: #ccc;
$ListControl-item-onDisabled-borderColor: #ebebeb;
// Modal
$Modal-overlay-bg: rgba(0, 0, 0, 0.7);
@ -276,11 +310,15 @@ $Wizard-steps-padding: px2rem(10) 0;
$Wizard-steps-liVender: "iconfont";
$Wizard-steps-liAfterContent: "\e6ee";
$Wizard-steps-liAfterBorder: 0 !important;
$Wizard-steps-li-onActive-color: #333333;
$Wizard-steps-bg--isComplete: #fff;
$Wizard-badge-size: px2rem(26px);
$Wizard-badge-fontSize: px2rem(16px);
$Wizard-badge-color: #999999;
$Wizard-badge-onActive-backgroundColor: #333333;
$Wizard-badge-fontSize: px2rem(14px);
$Wizard-badge-border: px2rem(1px) solid #999999;
$Wizard-badge-borderRadius: 50%;
$Wizard-badge-bg: $text--muted-color;
$Wizard-badge-bg: $white;
$Wizard-badge-marginRight: px2rem(6px);
// Tabs
@ -297,6 +335,9 @@ $Pagination-arrowVendor: "iconfont";
$Pagination-prevArrowContent: "\e759";
$Pagination-nextArrowContent: "\e757";
$Pagination-fontSize: px2rem(12px);
$Pagination-onActive-backgroundColor: $white;
$Pagination-onActive-color: $primary;
$Pagination-onActive-border: px2rem(1px) solid $primary;
// Panel
$Panel-borderRadius: 0;
@ -329,17 +370,21 @@ $Alert-paddingY: $Alert-xs;
$Alert-borderRadius: 0;
$Alert-marginBottom: $Alert-md;
$Alert--danger-color: $danger;
$Alert--danger-borderColor: $danger-bg;
$Alert--danger-color: #333;
$Alert--danger-bg: $danger-bg;
$Alert--danger-borderColor: transparent;
$Alert--info-color: $info;
$Alert--info-borderColor: $info-bg;
$Alert--info-color: #333;
$Alert--info-bg: $info-bg;
$Alert--info-borderColor: transparent;
$Alert--success-color: $success;
$Alert--success-borderColor: $success-bg;
$Alert--success-color: #333;
$Alert--success-bg: $success-bg;
$Alert--success-borderColor: transparent;
$Alert--warning-color: $warning;
$Alert--warning-borderColor: $warning-bg;
$Alert--warning-color: #333;
$Alert--warning-bg: $warning-bg;
$Alert--warning-borderColor: transparent;
// Toast
@ -389,6 +434,20 @@ $Toast--success-icon: "\e6e8";
$TagControl-sugTip-color: $primary;
// Card
$Card-onChecked-bg: $white;
$Card-onChecked-borderColor: $primary;
$Card-onChecked-color: $primary;
$Card-onModified-bg: #108cee0d;
$Card-onModified-borderColor: $primary;
$Card-onModified-color: $primary;
$Card-actions-onHover-bg: white;
$Card-actions-onHover-color: $primary;
$Card-actions-onChecked-onHover-bg: $white;
@import "../variables";
@import "../mixins";
@import "../base/reset";

2
src/renderers/Wizard.tsx
View File

@ -421,7 +421,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
<span
className={cx('Badge', {
// 'Badge--success': canJump && currentStep != key + 1,
'Badge--info':
'is-active':
currentStep === key + 1 || (canJump && currentStep != key + 1),
})}
>