From 2eefbb2ec15a75424a600816c8f40b65a6b652d3 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Wed, 10 Jan 2018 15:40:09 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0light-highlight=E5=92=8Clight?= =?UTF-8?q?-negative?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/base.css | 6 +- dist/bundle.css | 100 +++++++++++++++++++++++- dist/core.css | 94 ++++++++++++++++++++++ dist/core_without_normalize.css | 94 ++++++++++++++++++++++ src/css/base/single/tip/tip.bubble.css | 2 +- src/css/base/single/tip/tip.toast.css | 2 +- src/css/base/single/tip/tip.tooltip.css | 2 +- src/css/core/utils/common.css | 94 ++++++++++++++++++++++ src/less/core/utils/common.less | 78 ++++++++++++++++++ src/less/lib/colors.less | 2 + src/less/lib/constant.less | 3 +- 11 files changed, 467 insertions(+), 10 deletions(-) diff --git a/dist/base.css b/dist/base.css index 2eac6bdab..d1463c042 100644 --- a/dist/base.css +++ b/dist/base.css @@ -997,7 +997,7 @@ body .bi-button.button-ignore.disabled.clear:active, -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; - background: #fddddd; + background: #ffecec; color: #ff4949; } .bi-tip { @@ -1014,7 +1014,7 @@ body .bi-button.button-ignore.disabled.clear:active, color: #5cb75d; } .bi-toast.toast-warning { - background: #fddddd; + background: #ffecec; color: #ff4949; } .bi-tooltip { @@ -1030,7 +1030,7 @@ body .bi-button.button-ignore.disabled.clear:active, color: #1a1a1a; } .bi-tooltip.tooltip-warning { - background: #fddddd; + background: #ffecec; color: #ff4949; border: 1px solid #f4cbcb; } diff --git a/dist/bundle.css b/dist/bundle.css index 59d91b300..e429f9a24 100644 --- a/dist/bundle.css +++ b/dist/bundle.css @@ -900,6 +900,100 @@ i { .bi-theme-dark .bi-list-item-active2.disabled:active .bi-high-light { color: #666666 !important; } +.bi-list-item-active3:hover, +.bi-list-item-active3.hover { + color: #ff4949; + background-color: #ffecec; +} +.bi-list-item-active3:hover .bi-input, +.bi-list-item-active3.hover .bi-input { + color: #ff4949; +} +.bi-list-item-active3:hover .bi-textarea, +.bi-list-item-active3.hover .bi-textarea { + color: #ff4949; +} +.bi-list-item-active3.active, +.bi-list-item-active3:active { + color: #ffffff; + background-color: #ff4949; +} +.bi-list-item-active3.active .bi-input, +.bi-list-item-active3:active .bi-input { + color: #ffffff; +} +.bi-list-item-active3.active .bi-textarea, +.bi-list-item-active3:active .bi-textarea { + color: #ffffff; +} +.bi-list-item-active3.disabled, +.bi-list-item-active3.disabled:hover, +.bi-list-item-active3.disabled:active { + background-color: transparent !important; + color: #9ea6b2 !important; +} +.bi-list-item-active3.disabled .bi-input, +.bi-list-item-active3.disabled:hover .bi-input, +.bi-list-item-active3.disabled:active .bi-input { + color: #9ea6b2 !important; +} +.bi-list-item-active3.disabled .bi-textarea, +.bi-list-item-active3.disabled:hover .bi-textarea, +.bi-list-item-active3.disabled:active .bi-textarea { + color: #9ea6b2 !important; +} +.bi-list-item-active3.disabled .bi-high-light, +.bi-list-item-active3.disabled:hover .bi-high-light, +.bi-list-item-active3.disabled:active .bi-high-light { + color: #9ea6b2 !important; +} +.bi-list-item-active4:hover, +.bi-list-item-active4.hover { + color: #3685f2; + background-color: #eaf2fd; +} +.bi-list-item-active4:hover .bi-input, +.bi-list-item-active4.hover .bi-input { + color: #3685f2; +} +.bi-list-item-active4:hover .bi-textarea, +.bi-list-item-active4.hover .bi-textarea { + color: #3685f2; +} +.bi-list-item-active4.active, +.bi-list-item-active4:active { + color: #ffffff; + background-color: #3f8ce8; +} +.bi-list-item-active4.active .bi-input, +.bi-list-item-active4:active .bi-input { + color: #ffffff; +} +.bi-list-item-active4.active .bi-textarea, +.bi-list-item-active4:active .bi-textarea { + color: #ffffff; +} +.bi-list-item-active4.disabled, +.bi-list-item-active4.disabled:hover, +.bi-list-item-active4.disabled:active { + background-color: transparent !important; + color: #9ea6b2 !important; +} +.bi-list-item-active4.disabled .bi-input, +.bi-list-item-active4.disabled:hover .bi-input, +.bi-list-item-active4.disabled:active .bi-input { + color: #9ea6b2 !important; +} +.bi-list-item-active4.disabled .bi-textarea, +.bi-list-item-active4.disabled:hover .bi-textarea, +.bi-list-item-active4.disabled:active .bi-textarea { + color: #9ea6b2 !important; +} +.bi-list-item-active4.disabled .bi-high-light, +.bi-list-item-active4.disabled:hover .bi-high-light, +.bi-list-item-active4.disabled:active .bi-high-light { + color: #9ea6b2 !important; +} .bi-list-item-select:hover, .bi-list-item-select.hover { color: #1a1a1a; @@ -2610,7 +2704,7 @@ body .bi-button.button-ignore.disabled.clear:active, -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; - background: #fddddd; + background: #ffecec; color: #ff4949; } .bi-tip { @@ -2627,7 +2721,7 @@ body .bi-button.button-ignore.disabled.clear:active, color: #5cb75d; } .bi-toast.toast-warning { - background: #fddddd; + background: #ffecec; color: #ff4949; } .bi-tooltip { @@ -2643,7 +2737,7 @@ body .bi-button.button-ignore.disabled.clear:active, color: #1a1a1a; } .bi-tooltip.tooltip-warning { - background: #fddddd; + background: #ffecec; color: #ff4949; border: 1px solid #f4cbcb; } diff --git a/dist/core.css b/dist/core.css index be7b2155b..eb63dccdf 100644 --- a/dist/core.css +++ b/dist/core.css @@ -900,6 +900,100 @@ i { .bi-theme-dark .bi-list-item-active2.disabled:active .bi-high-light { color: #666666 !important; } +.bi-list-item-active3:hover, +.bi-list-item-active3.hover { + color: #ff4949; + background-color: #ffecec; +} +.bi-list-item-active3:hover .bi-input, +.bi-list-item-active3.hover .bi-input { + color: #ff4949; +} +.bi-list-item-active3:hover .bi-textarea, +.bi-list-item-active3.hover .bi-textarea { + color: #ff4949; +} +.bi-list-item-active3.active, +.bi-list-item-active3:active { + color: #ffffff; + background-color: #ff4949; +} +.bi-list-item-active3.active .bi-input, +.bi-list-item-active3:active .bi-input { + color: #ffffff; +} +.bi-list-item-active3.active .bi-textarea, +.bi-list-item-active3:active .bi-textarea { + color: #ffffff; +} +.bi-list-item-active3.disabled, +.bi-list-item-active3.disabled:hover, +.bi-list-item-active3.disabled:active { + background-color: transparent !important; + color: #9ea6b2 !important; +} +.bi-list-item-active3.disabled .bi-input, +.bi-list-item-active3.disabled:hover .bi-input, +.bi-list-item-active3.disabled:active .bi-input { + color: #9ea6b2 !important; +} +.bi-list-item-active3.disabled .bi-textarea, +.bi-list-item-active3.disabled:hover .bi-textarea, +.bi-list-item-active3.disabled:active .bi-textarea { + color: #9ea6b2 !important; +} +.bi-list-item-active3.disabled .bi-high-light, +.bi-list-item-active3.disabled:hover .bi-high-light, +.bi-list-item-active3.disabled:active .bi-high-light { + color: #9ea6b2 !important; +} +.bi-list-item-active4:hover, +.bi-list-item-active4.hover { + color: #3685f2; + background-color: #eaf2fd; +} +.bi-list-item-active4:hover .bi-input, +.bi-list-item-active4.hover .bi-input { + color: #3685f2; +} +.bi-list-item-active4:hover .bi-textarea, +.bi-list-item-active4.hover .bi-textarea { + color: #3685f2; +} +.bi-list-item-active4.active, +.bi-list-item-active4:active { + color: #ffffff; + background-color: #3f8ce8; +} +.bi-list-item-active4.active .bi-input, +.bi-list-item-active4:active .bi-input { + color: #ffffff; +} +.bi-list-item-active4.active .bi-textarea, +.bi-list-item-active4:active .bi-textarea { + color: #ffffff; +} +.bi-list-item-active4.disabled, +.bi-list-item-active4.disabled:hover, +.bi-list-item-active4.disabled:active { + background-color: transparent !important; + color: #9ea6b2 !important; +} +.bi-list-item-active4.disabled .bi-input, +.bi-list-item-active4.disabled:hover .bi-input, +.bi-list-item-active4.disabled:active .bi-input { + color: #9ea6b2 !important; +} +.bi-list-item-active4.disabled .bi-textarea, +.bi-list-item-active4.disabled:hover .bi-textarea, +.bi-list-item-active4.disabled:active .bi-textarea { + color: #9ea6b2 !important; +} +.bi-list-item-active4.disabled .bi-high-light, +.bi-list-item-active4.disabled:hover .bi-high-light, +.bi-list-item-active4.disabled:active .bi-high-light { + color: #9ea6b2 !important; +} .bi-list-item-select:hover, .bi-list-item-select.hover { color: #1a1a1a; diff --git a/dist/core_without_normalize.css b/dist/core_without_normalize.css index f3cbb564a..f3cec9287 100644 --- a/dist/core_without_normalize.css +++ b/dist/core_without_normalize.css @@ -617,6 +617,100 @@ .bi-theme-dark .bi-list-item-active2.disabled:active .bi-high-light { color: #666666 !important; } +.bi-list-item-active3:hover, +.bi-list-item-active3.hover { + color: #ff4949; + background-color: #ffecec; +} +.bi-list-item-active3:hover .bi-input, +.bi-list-item-active3.hover .bi-input { + color: #ff4949; +} +.bi-list-item-active3:hover .bi-textarea, +.bi-list-item-active3.hover .bi-textarea { + color: #ff4949; +} +.bi-list-item-active3.active, +.bi-list-item-active3:active { + color: #ffffff; + background-color: #ff4949; +} +.bi-list-item-active3.active .bi-input, +.bi-list-item-active3:active .bi-input { + color: #ffffff; +} +.bi-list-item-active3.active .bi-textarea, +.bi-list-item-active3:active .bi-textarea { + color: #ffffff; +} +.bi-list-item-active3.disabled, +.bi-list-item-active3.disabled:hover, +.bi-list-item-active3.disabled:active { + background-color: transparent !important; + color: #9ea6b2 !important; +} +.bi-list-item-active3.disabled .bi-input, +.bi-list-item-active3.disabled:hover .bi-input, +.bi-list-item-active3.disabled:active .bi-input { + color: #9ea6b2 !important; +} +.bi-list-item-active3.disabled .bi-textarea, +.bi-list-item-active3.disabled:hover .bi-textarea, +.bi-list-item-active3.disabled:active .bi-textarea { + color: #9ea6b2 !important; +} +.bi-list-item-active3.disabled .bi-high-light, +.bi-list-item-active3.disabled:hover .bi-high-light, +.bi-list-item-active3.disabled:active .bi-high-light { + color: #9ea6b2 !important; +} +.bi-list-item-active4:hover, +.bi-list-item-active4.hover { + color: #3685f2; + background-color: #eaf2fd; +} +.bi-list-item-active4:hover .bi-input, +.bi-list-item-active4.hover .bi-input { + color: #3685f2; +} +.bi-list-item-active4:hover .bi-textarea, +.bi-list-item-active4.hover .bi-textarea { + color: #3685f2; +} +.bi-list-item-active4.active, +.bi-list-item-active4:active { + color: #ffffff; + background-color: #3f8ce8; +} +.bi-list-item-active4.active .bi-input, +.bi-list-item-active4:active .bi-input { + color: #ffffff; +} +.bi-list-item-active4.active .bi-textarea, +.bi-list-item-active4:active .bi-textarea { + color: #ffffff; +} +.bi-list-item-active4.disabled, +.bi-list-item-active4.disabled:hover, +.bi-list-item-active4.disabled:active { + background-color: transparent !important; + color: #9ea6b2 !important; +} +.bi-list-item-active4.disabled .bi-input, +.bi-list-item-active4.disabled:hover .bi-input, +.bi-list-item-active4.disabled:active .bi-input { + color: #9ea6b2 !important; +} +.bi-list-item-active4.disabled .bi-textarea, +.bi-list-item-active4.disabled:hover .bi-textarea, +.bi-list-item-active4.disabled:active .bi-textarea { + color: #9ea6b2 !important; +} +.bi-list-item-active4.disabled .bi-high-light, +.bi-list-item-active4.disabled:hover .bi-high-light, +.bi-list-item-active4.disabled:active .bi-high-light { + color: #9ea6b2 !important; +} .bi-list-item-select:hover, .bi-list-item-select.hover { color: #1a1a1a; diff --git a/src/css/base/single/tip/tip.bubble.css b/src/css/base/single/tip/tip.bubble.css index 485b184b0..0d18fb6dc 100644 --- a/src/css/base/single/tip/tip.bubble.css +++ b/src/css/base/single/tip/tip.bubble.css @@ -5,6 +5,6 @@ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; - background: #fddddd; + background: #ffecec; color: #ff4949; } diff --git a/src/css/base/single/tip/tip.toast.css b/src/css/base/single/tip/tip.toast.css index a848c0169..714d7e7dd 100644 --- a/src/css/base/single/tip/tip.toast.css +++ b/src/css/base/single/tip/tip.toast.css @@ -9,6 +9,6 @@ color: #5cb75d; } .bi-toast.toast-warning { - background: #fddddd; + background: #ffecec; color: #ff4949; } diff --git a/src/css/base/single/tip/tip.tooltip.css b/src/css/base/single/tip/tip.tooltip.css index e81ff6f78..3f5eaedb3 100644 --- a/src/css/base/single/tip/tip.tooltip.css +++ b/src/css/base/single/tip/tip.tooltip.css @@ -11,7 +11,7 @@ color: #1a1a1a; } .bi-tooltip.tooltip-warning { - background: #fddddd; + background: #ffecec; color: #ff4949; border: 1px solid #f4cbcb; } diff --git a/src/css/core/utils/common.css b/src/css/core/utils/common.css index 0f743d708..6e8127866 100644 --- a/src/css/core/utils/common.css +++ b/src/css/core/utils/common.css @@ -617,6 +617,100 @@ .bi-theme-dark .bi-list-item-active2.disabled:active .bi-high-light { color: #666666 !important; } +.bi-list-item-active3:hover, +.bi-list-item-active3.hover { + color: #ff4949; + background-color: #ffecec; +} +.bi-list-item-active3:hover .bi-input, +.bi-list-item-active3.hover .bi-input { + color: #ff4949; +} +.bi-list-item-active3:hover .bi-textarea, +.bi-list-item-active3.hover .bi-textarea { + color: #ff4949; +} +.bi-list-item-active3.active, +.bi-list-item-active3:active { + color: #ffffff; + background-color: #ff4949; +} +.bi-list-item-active3.active .bi-input, +.bi-list-item-active3:active .bi-input { + color: #ffffff; +} +.bi-list-item-active3.active .bi-textarea, +.bi-list-item-active3:active .bi-textarea { + color: #ffffff; +} +.bi-list-item-active3.disabled, +.bi-list-item-active3.disabled:hover, +.bi-list-item-active3.disabled:active { + background-color: transparent !important; + color: #9ea6b2 !important; +} +.bi-list-item-active3.disabled .bi-input, +.bi-list-item-active3.disabled:hover .bi-input, +.bi-list-item-active3.disabled:active .bi-input { + color: #9ea6b2 !important; +} +.bi-list-item-active3.disabled .bi-textarea, +.bi-list-item-active3.disabled:hover .bi-textarea, +.bi-list-item-active3.disabled:active .bi-textarea { + color: #9ea6b2 !important; +} +.bi-list-item-active3.disabled .bi-high-light, +.bi-list-item-active3.disabled:hover .bi-high-light, +.bi-list-item-active3.disabled:active .bi-high-light { + color: #9ea6b2 !important; +} +.bi-list-item-active4:hover, +.bi-list-item-active4.hover { + color: #3685f2; + background-color: #eaf2fd; +} +.bi-list-item-active4:hover .bi-input, +.bi-list-item-active4.hover .bi-input { + color: #3685f2; +} +.bi-list-item-active4:hover .bi-textarea, +.bi-list-item-active4.hover .bi-textarea { + color: #3685f2; +} +.bi-list-item-active4.active, +.bi-list-item-active4:active { + color: #ffffff; + background-color: #3f8ce8; +} +.bi-list-item-active4.active .bi-input, +.bi-list-item-active4:active .bi-input { + color: #ffffff; +} +.bi-list-item-active4.active .bi-textarea, +.bi-list-item-active4:active .bi-textarea { + color: #ffffff; +} +.bi-list-item-active4.disabled, +.bi-list-item-active4.disabled:hover, +.bi-list-item-active4.disabled:active { + background-color: transparent !important; + color: #9ea6b2 !important; +} +.bi-list-item-active4.disabled .bi-input, +.bi-list-item-active4.disabled:hover .bi-input, +.bi-list-item-active4.disabled:active .bi-input { + color: #9ea6b2 !important; +} +.bi-list-item-active4.disabled .bi-textarea, +.bi-list-item-active4.disabled:hover .bi-textarea, +.bi-list-item-active4.disabled:active .bi-textarea { + color: #9ea6b2 !important; +} +.bi-list-item-active4.disabled .bi-high-light, +.bi-list-item-active4.disabled:hover .bi-high-light, +.bi-list-item-active4.disabled:active .bi-high-light { + color: #9ea6b2 !important; +} .bi-list-item-select:hover, .bi-list-item-select.hover { color: #1a1a1a; diff --git a/src/less/core/utils/common.less b/src/less/core/utils/common.less index e2c8e758c..5a604be9d 100644 --- a/src/less/core/utils/common.less +++ b/src/less/core/utils/common.less @@ -611,6 +611,84 @@ } } +// 文字和背景hover和active时变化(红) +.bi-list-item-active3 { + &:hover, &.hover { + color: @color-bi-text-failure; + & .bi-input { + color: @color-bi-text-failure; + } + & .bi-textarea { + color: @color-bi-text-failure; + } + background-color: @color-bi-background-light-failure; + } + &.active, &:active { + color: @color-bi-text; + & .bi-input { + color: @color-bi-text; + } + & .bi-textarea { + color: @color-bi-text; + } + background-color: @color-bi-background-failure; + } + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled !important; + & .bi-input { + color: @color-bi-text-disabled !important; + } + & .bi-textarea { + color: @color-bi-text-disabled !important; + } + & .bi-high-light { + color: @color-bi-text-disabled !important; + } + } + } +} + +// 文字和背景hover和active时变化 +.bi-list-item-active4 { + &:hover, &.hover { + color: @color-bi-text-highlight; + & .bi-input { + color: @color-bi-text-highlight; + } + & .bi-textarea { + color: @color-bi-text-highlight; + } + background-color: @color-bi-background-light-highlight; + } + &.active, &:active { + color: @color-bi-text; + & .bi-input { + color: @color-bi-text; + } + & .bi-textarea { + color: @color-bi-text; + } + background-color: @color-bi-background-highlight; + } + &.disabled { + &, &:hover, &:active { + background-color: transparent !important; + color: @color-bi-text-disabled !important; + & .bi-input { + color: @color-bi-text-disabled !important; + } + & .bi-textarea { + color: @color-bi-text-disabled !important; + } + & .bi-high-light { + color: @color-bi-text-disabled !important; + } + } + } +} + //有选中效果 .bi-list-item-select { &:hover, &.hover { diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less index 1452d293d..070424d30 100644 --- a/src/less/lib/colors.less +++ b/src/less/lib/colors.less @@ -56,6 +56,8 @@ @color-bi-background-warning: @background-color-warning; //背景提亮色 @color-bi-background-highlight: @background-color-highlight; +//背景提亮色(浅) +@color-bi-background-light-highlight: @background-color-light-highlight; //黑色边框色 @color-bi-border-black: @border-color-black; diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less index 58584bfd5..924e94ae9 100644 --- a/src/less/lib/constant.less +++ b/src/less/lib/constant.less @@ -35,13 +35,14 @@ @background-color-default-theme-dark: #242640;// @background-color-normal: #fafbfc;// @background-color-normal-theme-dark: #191B2B;// +@background-color-light-highlight: #eaf2fd; @background-color-highlight: #3f8ce8; @background-color-dark: #d4dadd; @background-color-gray: #999999; @background-color-disabled: #cccccc; @background-color-negative: #ff4949; -@background-color-light-negative: #fddddd; +@background-color-light-negative: #ffecec; @background-color-warning: #faaa39; @background-color-dark-success: #58cc7d;