diff --git a/examples/components/Form/Full.jsx b/examples/components/Form/Full.jsx index 95217cb7..63851403 100644 --- a/examples/components/Form/Full.jsx +++ b/examples/components/Form/Full.jsx @@ -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: [ { diff --git a/scss/_variables.scss b/scss/_variables.scss index b59fc382..8589bdcd 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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; diff --git a/scss/components/_button.scss b/scss/components/_button.scss index 024e8a2a..c65cd5be 100644 --- a/scss/components/_button.scss +++ b/scss/components/_button.scss @@ -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; diff --git a/scss/components/_card.scss b/scss/components/_card.scss index 4218a271..599ebc10 100644 --- a/scss/components/_card.scss +++ b/scss/components/_card.scss @@ -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%); } } diff --git a/scss/components/_pagination.scss b/scss/components/_pagination.scss index 97fbb8e8..c5d700fb 100644 --- a/scss/components/_pagination.scss +++ b/scss/components/_pagination.scss @@ -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; } } diff --git a/scss/components/_wizard.scss b/scss/components/_wizard.scss index 27afb41d..8f219130 100644 --- a/scss/components/_wizard.scss +++ b/scss/components/_wizard.scss @@ -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; } } -} +} \ No newline at end of file diff --git a/scss/components/form/_color.scss b/scss/components/form/_color.scss index 058e1d08..c4824990 100644 --- a/scss/components/form/_color.scss +++ b/scss/components/form/_color.scss @@ -14,6 +14,7 @@ &:hover { background-color: $ColorPicker-onHover-bg; + border-color: $ColorPicker-onHover-borderColor; } } diff --git a/scss/components/form/_date-range.scss b/scss/components/form/_date-range.scss index 7d948a45..5ff5e708 100644 --- a/scss/components/form/_date-range.scss +++ b/scss/components/form/_date-range.scss @@ -18,6 +18,11 @@ &:hover { background-color: $DatePicker-onHover-bg; + border-color: $DatePicker-onHover-borderColor; + + .#{$ns}DateRangePicker-toggler { + color: $DatePicker-onHover-iconColor; + } } } diff --git a/scss/components/form/_date.scss b/scss/components/form/_date.scss index 3fe0da83..dfeb9837 100644 --- a/scss/components/form/_date.scss +++ b/scss/components/form/_date.scss @@ -17,6 +17,11 @@ &:hover { background-color: $DatePicker-onHover-bg; + border-color: $DatePicker-onHover-borderColor; + + .#{$ns}DatePicker-toggler:before { + color: $DatePicker-onHover-iconColor; + } } } diff --git a/scss/components/form/_input-group.scss b/scss/components/form/_input-group.scss index ee58e112..151785fe 100644 --- a/scss/components/form/_input-group.scss +++ b/scss/components/form/_input-group.scss @@ -163,6 +163,10 @@ color: $InputGroup-select-onFocused-arrowColor; } } + + .#{$ns}InputGroup-addOn { + color: $primary; + } } } diff --git a/scss/components/form/_list.scss b/scss/components/form/_list.scss index a9bfa43b..3521d142 100644 --- a/scss/components/form/_list.scss +++ b/scss/components/form/_list.scss @@ -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); diff --git a/scss/components/form/_nested-select.scss b/scss/components/form/_nested-select.scss index b6b65e2e..4f867f20 100644 --- a/scss/components/form/_nested-select.scss +++ b/scss/components/form/_nested-select.scss @@ -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 { diff --git a/scss/components/form/_number.scss b/scss/components/form/_number.scss index 30b238ea..b94b4e90 100644 --- a/scss/components/form/_number.scss +++ b/scss/components/form/_number.scss @@ -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; diff --git a/scss/components/form/_select.scss b/scss/components/form/_select.scss index eba38e30..946983e7 100644 --- a/scss/components/form/_select.scss +++ b/scss/components/form/_select.scss @@ -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; } diff --git a/scss/components/form/_switch.scss b/scss/components/form/_switch.scss index 6bab8409..86f1c48f 100644 --- a/scss/components/form/_switch.scss +++ b/scss/components/form/_switch.scss @@ -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; } diff --git a/scss/components/form/_text.scss b/scss/components/form/_text.scss index e47fbb33..308fc19c 100644 --- a/scss/components/form/_text.scss +++ b/scss/components/form/_text.scss @@ -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; } diff --git a/scss/themes/cxd.scss b/scss/themes/cxd.scss index 48334183..a43b2169 100644 --- a/scss/themes/cxd.scss +++ b/scss/themes/cxd.scss @@ -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"; diff --git a/src/renderers/Wizard.tsx b/src/renderers/Wizard.tsx index d29ceeae..1a6a3c81 100644 --- a/src/renderers/Wizard.tsx +++ b/src/renderers/Wizard.tsx @@ -421,7 +421,7 @@ export default class Wizard extends React.Component {