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", type: "button-group",
name: "range1", name: "range1",
value: "today", value: "today",
btnActiveClassName: "btn-info active", // btnActiveClassName: "btn-primary active",
btnActiveLevel: 'primary',
mode: 'inline', mode: 'inline',
options: [ options: [
{ {

25
scss/_variables.scss
View File

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

1
scss/components/_button.scss
View File

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

6
scss/components/_card.scss
View File

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

5
scss/components/_pagination.scss
View File

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

74
scss/components/_wizard.scss
View File

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

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

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

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

@ -18,6 +18,11 @@
&:hover { &:hover {
background-color: $DatePicker-onHover-bg; 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 { &:hover {
background-color: $DatePicker-onHover-bg; 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; color: $InputGroup-select-onFocused-arrowColor;
} }
} }
.#{$ns}InputGroup-addOn {
color: $primary;
}
} }
} }

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

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

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

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

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

@ -30,6 +30,7 @@
&-handler-down-inner { &-handler-down-inner {
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
display: inline-block;
} }
&:hover { &:hover {
@ -78,6 +79,7 @@
&:hover { &:hover {
background-color: $Number-handler-onHover-bg; background-color: $Number-handler-onHover-bg;
color: $Number-handler-onHover-color;
} }
&:hover:active { &:hover:active {
@ -87,6 +89,8 @@
&-handler-up { &-handler-up {
&-inner { &-inner {
transform: $Number-handler--up-transform;
&:after { &:after {
content: $Number-handler--up-content; content: $Number-handler--up-content;
} }
@ -101,47 +105,47 @@
} }
} }
@if $Number-handler-mode==vertical { // @if $Number-handler-mode==vertical {
&-handler-wrap { &-handler-wrap {
float: right; float: right;
border-left: px2rem(1px) solid $Form-input-borderColor; border-left: px2rem(1px) solid $Form-input-borderColor;
width: $Number-handler-width; width: $Number-handler-width;
height: 100%; 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;
}
} }
&-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-down-disabled,
&-handler-up-disabled { &-handler-up-disabled {
background-color: $Number-handler-onDisabled-bg; background-color: $Number-handler-onDisabled-bg;

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

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

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

@ -17,13 +17,14 @@
i { i {
&:before { &:before {
content: "OFF"; content: "关";
color: $Switch-valueColor; color: $Switch-valueColor;
text-indent: ($Switch-width / 2) - px2rem(2px); text-indent: ($Switch-width / 2);
text-transform: uppercase; text-transform: uppercase;
font-size: $fontSizeSm; font-size: $fontSizeSm;
line-height: $Switch-height; line-height: $Switch-height;
font-style: normal; font-style: normal;
font-weight: bold;
position: absolute; position: absolute;
top: px2rem(-1px); top: px2rem(-1px);
@ -54,7 +55,8 @@
position: absolute; position: absolute;
opacity: 0; opacity: 0;
&:disabled { &:disabled,
&:disabled:checked {
& + i { & + i {
&:before { &:before {
color: $Switch-onDisabled-color; color: $Switch-onDisabled-color;
@ -62,6 +64,7 @@
} }
&:after { &:after {
background-color: $Switch-onDisabled-circle-BackgroundColor;
color: $Switch-onDisabled-color; color: $Switch-onDisabled-color;
} }
} }
@ -77,12 +80,12 @@
&:after { &:after {
margin-left: $Switch-width - $Switch-height; margin-left: $Switch-width - $Switch-height;
content: "On"; content: "开";
color: $white; color: $white;
text-indent: px2rem(-20px); // todo text-indent: px2rem(-18px); // todo
text-transform: uppercase; text-transform: uppercase;
font-size: $fontSizeSm; font-size: $fontSizeSm;
font-weight: normal; font-weight: bold;
font-style: normal; font-style: normal;
line-height: $Switch-height; 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 { &.is-disabled > &-input {
color: $text--muted-color; color: $text--muted-color;
background: $Form-input-onDisabled-bg; background: $Form-input-onDisabled-bg;
@ -219,6 +223,7 @@
&--withAddOn.is-focused > &-addOn { &--withAddOn.is-focused > &-addOn {
border-color: $Form-input-onFocused-borderColor; border-color: $Form-input-onFocused-borderColor;
color: $Form-input-onFocus-addOnColor;
box-shadow: $Form-input-boxShadow; 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"; @import "../functions";
$remFactor: 16px; $remFactor: 16px;
@ -51,64 +51,76 @@ $Page-header-paddingY: px2rem(18px);
$Form-item-gap: px2rem(20px); $Form-item-gap: px2rem(20px);
$Form-input-height: px2rem(30px); $Form-input-height: px2rem(30px);
$Form-input-onFocused-bg: #f8fbfe; $Form-input-onFocused-bg: $white;
$Form-input-borderRadius: 0; $Form-input-borderRadius: 0;
$Form-input-borderColor: #ccc; $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-input-paddingX: px2rem(10px);
$Form-fontSize: px2rem(12px); $Form-fontSize: px2rem(12px);
$Form-description-color: #999; $Form-description-color: #999;
$Form-input-onError-bg: #fffbfb; $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-widthBase: px2rem(90px);
$Form--horizontal-label-align: left; $Form--horizontal-label-align: left;
$Form--horizontal-label-widthXs: px2rem(50px); $Form--horizontal-label-widthXs: px2rem(50px);
$Form--horizontal-label-widthSm: px2rem(70px); $Form--horizontal-label-widthSm: px2rem(70px);
$Form--horizontal-label-widthMd: px2rem(140px); $Form--horizontal-label-widthMd: px2rem(140px);
$Form--horizontal-label-widthLg: px2rem(190px); $Form--horizontal-label-widthLg: px2rem(190px);
$Form-input-addOnBg: #eaf6fe; $Form-input-addOnBg: $white;
$Form-input-addOnColor: #108cee; $Form-input-addOnColor: #666;
$Form-input-onFocus-addOnColor: $primary;
$Form-input-addOnDividerBorderWidth: 0; $Form-input-addOnDividerBorderWidth: 0;
$Form-select-borderWidth: 0; $Form-select-borderWidth: px2rem(1px);
$Form-select-borderRadius: 0; $Form-select-borderRadius: 0;
$Form-select-bg: #eaf6fe; $Form-select-borderColor: #ccc;
$Form-select-onHover-bg: #d2ecfd; $Form-select-bg: $white;
$Form-select-placeholderColor: #108cee; $Form-select-onHover-bg: $white;
$Form-select-color: #108cee; $Form-select-onHover-borderColor: $primary;
$Form-select-placeholderColor: #999;
$Form-select-color: #000;
$Form-select-caret-vender: "iconfont"; $Form-select-caret-vender: "iconfont";
$Form-select-caret-icon: "\e605"; $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-caret-fontSize: px2rem(12px);
$Form-select-outer-borderWidth: 0; $Form-select-outer-borderWidth: 0;
$Form-select-outer-top: px2rem(32px);
$Form-select-outer-boxShadow: px2rem(2px) px2rem(4px) px2rem(8px) $Form-select-outer-boxShadow: px2rem(2px) px2rem(4px) px2rem(8px)
rgba(0, 0, 0, 0.2); rgba(0, 0, 0, 0.2);
$Form-select-menu-color: #333; $Form-select-menu-color: #333;
$Form-select-menu-onHover-color: #000;
$Form-select-menu-onHover-bg: #eaf6fe;
$InputGroup-select-borderWidth: px2rem(1px); $InputGroup-select-borderWidth: px2rem(1px);
$InputGroup-select-bg: #f6f7fb; $InputGroup-select-bg: #f6f7fb;
$InputGroup-select-onFocused-bg: #eaf6fe; $InputGroup-select-onFocused-bg: #eaf6fe;
$InputGroup-select-color: #333; $InputGroup-select-color: #333;
$InputGroup-select-onFocused-color: #108cee; $InputGroup-select-onFocused-color: $primary;
$InputGroup-select-arrowColor: #999; $InputGroup-select-arrowColor: #999;
$InputGroup-select-onFocused-arrowColor: #108cee; $InputGroup-select-onFocused-arrowColor: $primary;
$InputGroup-button-borderWidth: px2rem(1px); $InputGroup-button-borderWidth: px2rem(1px);
$InputGroup-button-borderRadius: 0; $InputGroup-button-borderRadius: 0;
$Number-bg: #eaf6fe; // $Number-bg: #eaf6fe;
$Number-borderWidth: 0; $Number-borderWidth: px2rem(1px);
$Number-handler-mode: "horizontal"; $Number-handler-mode: "horizontal";
$Number-handler-width: px2rem(30px); $Number-handler-borderBottom: 0;
$Number-handler-color: #fff; $Number-handler-width: px2rem(20px);
$Number-handler-color: #666;
$Number-handler-onDisabled-color: #999; $Number-handler-onDisabled-color: #999;
$Number-handler-bg: #108cee; // $Number-handler-bg: $info;
$Number-handler-onHover-bg: #209bfd; $Number-handler-onHover-bg: $white;
$Number-handler-onHover-bg: #047bd8; $Number-handler-onHover-color: $primary;
$Number-handler-onDisabled-bg: #eceff8; $Number-handler-onActive-bg: #f3f9fe;
$Number-handler-onDisabled-bg: #f5f5f5;
$Number-handler-fontFamily: "iconfont"; $Number-handler-fontFamily: "iconfont";
$Number-handler-fontSize: px2rem(16px); $Number-handler-fontSize: px2rem(12px);
$Number-handler--up-content: "\e600"; $Number-handler--up-content: "\e6dd";
$Number-handler--down-content: "\e602"; $Number-handler--up-transform: rotate(180deg);
$Number-handler--down-content: "\e6dd";
$Checkbox-size: px2rem(14px); $Checkbox-size: px2rem(14px);
$Checkbox-inner-size: px2rem(8px); $Checkbox-inner-size: px2rem(8px);
@ -116,30 +128,34 @@ $Checkbox--full-inner-size: px2rem(10px);
$Radio-size: px2rem(16px); $Radio-size: px2rem(16px);
$Radio-inner-size: px2rem(10px); $Radio-inner-size: px2rem(10px);
$Switch-bgColor: $danger; $Switch-bgColor: #ccc;
$Switch-borderColor: #f0f0f0; $Switch-borderColor: #f0f0f0;
$Switch-onActive-bgColor: $primary; $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-borderRadius: 0;
$ColorPicker-bg: #eaf6fe; $ColorPicker-bg: $white;
$ColorPicker-onHover-bg: #d2ecfd; $ColorPicker-onHover-bg: $white;
$ColorPicker-color: #108cee; $ColorPicker-onHover-borderColor: $primary;
$ColorPicker-placeholderColor: #108cee; $ColorPicker-color: #000;
$ColorPicker-onDisabled-bg: #f6f7fb; $ColorPicker-placeholderColor: #999;
$ColorPicker-onDisabled-bg: #f5f5f5;
$ColorPicker-onDisabled-color: #999; $ColorPicker-onDisabled-color: #999;
$DatePicker-borderWidth: 0; $DatePicker-borderWidth: px2rem(1px);
$DatePicker-borderRadius: 0; $DatePicker-borderRadius: 0;
$DatePicker-bg: #eaf6fe; $DatePicker-bg: $white;
$DatePicker-onHover-bg: #d2ecfd; $DatePicker-onHover-bg: $white;
$DatePicker-color: #108cee; $DatePicker-color: #000;
$DatePicker-placeholderColor: #108cee; $DatePicker-placeholderColor: #999;
$DatePicker-onDisabled-bg: #f6f7fb; $DatePicker-onDisabled-bg: #f5f5f5;
$DatePicker-onDisabled-color: #999; $DatePicker-onDisabled-color: #999;
$DatePicker-iconColor: #108cee; $DatePicker-iconColor: #666;
$DatePicker-onHover-iconColor: #108cee; $DatePicker-onHover-iconColor: $primary;
$DatePicker-onHover-borderColor: $primary;
$DatePicker-toggler-vendor: "iconfont"; $DatePicker-toggler-vendor: "iconfont";
$DatePicker-toggler-fontSize: px2rem(12px); $DatePicker-toggler-fontSize: px2rem(12px);
$DatePicker-toggler-icon: "\e7b1"; $DatePicker-toggler-icon: "\e7b1";
@ -154,29 +170,40 @@ $Calendar-input-borderRadius: 0;
// button // button
$Button-mimWidth: px2rem(68px); $Button-mimWidth: px2rem(68px);
$Button-borderWidth: 0; $Button-borderWidth: px2rem(1px);
$Button-boxShadow: none; $Button-boxShadow: none;
$Button-onActive-boxShadow: none; $Button-onActive-boxShadow: none;
$Button-borderRadius: 0; $Button-borderRadius: 0;
$Button--lg-borderRadius: 0; $Button--lg-borderRadius: 0;
$Button--sm-borderRadius: 0; $Button--sm-borderRadius: 0;
$Button-onDisabled-opacity: 1; $Button-onDisabled-opacity: 1;
$Button-onDisabled-bg: #f6f7fb; $Button-onDisabled-bg: #f5f5f5;
$Button-onDisabledActive-bg: #e2e5ec; $Button-onDisabledActive-bg: #f5f5f5;
$Button-onDisabled-color: #999; $Button-onDisabled-borderColor: #ebebeb;
$Button-onDisabled-color: #aaa;
$Button-paddingX: px2rem(10px); $Button-paddingX: px2rem(10px);
$Button--lg-height: px2rem(40px); $Button--lg-height: px2rem(40px);
$Button--lg-fontSize: px2rem(14px); $Button--lg-fontSize: px2rem(14px);
$Button--default-bg: #eaf6fe; $Button--default-bg: $white;
$Button--default-onHover-bg: #d2ecfd; $Button--default-border: #cccccc;
$Button--default-onActive-bg: #eaf6fe; $Button--default-color: #000;
$Button--default-color: #108cee; $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-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-bg: #ea2e2e;
$Button--danger-onHover-bg: #f64545; $Button--danger-onHover-bg: #f64545;
@ -185,8 +212,8 @@ $Button--danger-onActive-bg: #d72b2b;
$ButtonGroup-divider-width: px2rem(1px); $ButtonGroup-divider-width: px2rem(1px);
$ButtonGroup-divider-color: #fff; $ButtonGroup-divider-color: #fff;
$Button--link-color: $Button--default-color; $Button--link-color: $primary;
$Button--link-onHover-color: $Button--default-color; $Button--link-onHover-color: #209bfd;
$Spinner-bg: url("./spinner-cxd.svg"); $Spinner-bg: url("./spinner-cxd.svg");
@ -227,20 +254,27 @@ $TableCell-filterPopOver-dropDownItem-height: px2rem(30px);
$TableCell-filterPopOver-dropDownItem-padding: 0 px2rem(10px); $TableCell-filterPopOver-dropDownItem-padding: 0 px2rem(10px);
// listControl // listControl
$ListControl-item-borderWidth: 0; $ListControl-item-borderWidth: px2rem(1px);
$ListControl-item-borderColor: #ccc;
$ListControl-item-paddingX: px2rem(10px); $ListControl-item-paddingX: px2rem(10px);
$ListControl-item-bg: $Button--default-bg; $ListControl-item-bg: $Button--default-bg;
$ListControl-item-color: $Button--default-color; $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-bg: $Button--default-onHover-bg;
$ListControl-item-onHover-borderColor: $ListControl-item-onHover-color; $ListControl-item-onHover-borderColor: $primary;
$ListControl-item-onActive-bg: #108cee;
$ListControl-item-onActive-onHover-bg: #209bfd; $ListControl-item-onActive-bg: $white;
$ListControl-item-onActive-color: #fff; $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-opacity: 1;
$ListControl-item-onDisabled-bg: #eceff8; $ListControl-item-onDisabled-bg: #f5f5f5;
$ListControl-item-onDisabled-color: #999; $ListControl-item-onDisabled-color: #999;
$ListControl-item-onDisabled-borderColor: #ccc; $ListControl-item-onDisabled-borderColor: #ebebeb;
// Modal // Modal
$Modal-overlay-bg: rgba(0, 0, 0, 0.7); $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-liVender: "iconfont";
$Wizard-steps-liAfterContent: "\e6ee"; $Wizard-steps-liAfterContent: "\e6ee";
$Wizard-steps-liAfterBorder: 0 !important; $Wizard-steps-liAfterBorder: 0 !important;
$Wizard-steps-li-onActive-color: #333333;
$Wizard-steps-bg--isComplete: #fff; $Wizard-steps-bg--isComplete: #fff;
$Wizard-badge-size: px2rem(26px); $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-borderRadius: 50%;
$Wizard-badge-bg: $text--muted-color; $Wizard-badge-bg: $white;
$Wizard-badge-marginRight: px2rem(6px); $Wizard-badge-marginRight: px2rem(6px);
// Tabs // Tabs
@ -297,6 +335,9 @@ $Pagination-arrowVendor: "iconfont";
$Pagination-prevArrowContent: "\e759"; $Pagination-prevArrowContent: "\e759";
$Pagination-nextArrowContent: "\e757"; $Pagination-nextArrowContent: "\e757";
$Pagination-fontSize: px2rem(12px); $Pagination-fontSize: px2rem(12px);
$Pagination-onActive-backgroundColor: $white;
$Pagination-onActive-color: $primary;
$Pagination-onActive-border: px2rem(1px) solid $primary;
// Panel // Panel
$Panel-borderRadius: 0; $Panel-borderRadius: 0;
@ -329,17 +370,21 @@ $Alert-paddingY: $Alert-xs;
$Alert-borderRadius: 0; $Alert-borderRadius: 0;
$Alert-marginBottom: $Alert-md; $Alert-marginBottom: $Alert-md;
$Alert--danger-color: $danger; $Alert--danger-color: #333;
$Alert--danger-borderColor: $danger-bg; $Alert--danger-bg: $danger-bg;
$Alert--danger-borderColor: transparent;
$Alert--info-color: $info; $Alert--info-color: #333;
$Alert--info-borderColor: $info-bg; $Alert--info-bg: $info-bg;
$Alert--info-borderColor: transparent;
$Alert--success-color: $success; $Alert--success-color: #333;
$Alert--success-borderColor: $success-bg; $Alert--success-bg: $success-bg;
$Alert--success-borderColor: transparent;
$Alert--warning-color: $warning; $Alert--warning-color: #333;
$Alert--warning-borderColor: $warning-bg; $Alert--warning-bg: $warning-bg;
$Alert--warning-borderColor: transparent;
// Toast // Toast
@ -389,6 +434,20 @@ $Toast--success-icon: "\e6e8";
$TagControl-sugTip-color: $primary; $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 "../variables";
@import "../mixins"; @import "../mixins";
@import "../base/reset"; @import "../base/reset";

2
src/renderers/Wizard.tsx
View File

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