Browse Source

Merge pull request #480 in VISUAL/fineui from ~WINDY/fineui:master to master

* commit '252aedc334fca9a0138afb22467447d24dcfa2c3':
  BI-25416 线型按钮灰化后的颜色不符合视觉文
es6
imp 7 years ago
parent
commit
f40f5129f6
  1. 21
      dist/base.css
  2. 2
      dist/case.js
  3. 47
      dist/core.css
  4. 47
      dist/core_without_normalize.css
  5. 2
      src/case/segment/button.segment.js
  6. 6
      src/css/base/colorchooser/colorchooser.css
  7. 3
      src/css/base/segment/button.css
  8. 12
      src/css/base/segment/segment.css
  9. 47
      src/css/core/utils/common.css
  10. 2
      src/less/base/colorchooser/colorchooser.trigger.less
  11. 1
      src/less/base/segment/button.segment.less
  12. 11
      src/less/base/segment/segment.less
  13. 27
      src/less/core/utils/common.less
  14. 2
      src/less/lib/colors.less

21
dist/base.css vendored

@ -8,9 +8,9 @@
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
box-shadow: 0px 0px 2px 1px #d4dadd inset; box-shadow: 0px 0px 2px 1px #d0d4da inset;
-webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset; -webkit-box-shadow: 0px 0px 2px 1px #d0d4da inset;
-moz-box-shadow: 0px 0px 2px 1px #d4dadd inset; -moz-box-shadow: 0px 0px 2px 1px #d0d4da inset;
} }
.bi-color-picker-button .color-picker-button-mask { .bi-color-picker-button .color-picker-button-mask {
border: 1px solid #232e40; border: 1px solid #232e40;
@ -784,17 +784,20 @@ li.CodeMirror-hint-active {
.bi-rich-editor-text-toolbar .text-toolbar-button { .bi-rich-editor-text-toolbar .text-toolbar-button {
font-size: 16px; font-size: 16px;
} }
.bi-segment-button {
color: #3685f2;
}
.bi-segment > .center-element { .bi-segment > .center-element {
overflow: hidden; overflow: hidden;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
background: #ffffff; background: #ffffff;
border-right: 1px solid #e8eaed; border-right: 1px solid #3685f2;
border-top: 1px solid #e8eaed; border-top: 1px solid #3685f2;
border-bottom: 1px solid #e8eaed; border-bottom: 1px solid #3685f2;
} }
.bi-segment > .first-element { .bi-segment > .first-element {
border-left: 1px solid #e8eaed; border-left: 1px solid #3685f2;
-webkit-border-radius: 6px 0px 0px 6px; -webkit-border-radius: 6px 0px 0px 6px;
-moz-border-radius: 6px 0px 0px 6px; -moz-border-radius: 6px 0px 0px 6px;
border-radius: 6px 0px 0px 6px; border-radius: 6px 0px 0px 6px;
@ -804,6 +807,10 @@ li.CodeMirror-hint-active {
-moz-border-radius: 0px 6px 6px 0px; -moz-border-radius: 0px 6px 6px 0px;
border-radius: 0px 6px 6px 0px; border-radius: 0px 6px 6px 0px;
} }
.bi-segment.disabled > .center-element,
.bi-segment.disabled > .first-element {
border-color: #F0F3F7;
}
.bi-theme-dark .bi-segment > .center-element { .bi-theme-dark .bi-segment > .center-element {
overflow: hidden; overflow: hidden;
overflow-x: hidden; overflow-x: hidden;

2
dist/case.js vendored

@ -11789,7 +11789,7 @@ BI.SegmentButton = BI.inherit(BI.BasicButton, {
_defaultConfig: function () { _defaultConfig: function () {
var conf = BI.SegmentButton.superclass._defaultConfig.apply(this, arguments); var conf = BI.SegmentButton.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, { return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-active", baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-select",
shadow: true, shadow: true,
readonly: true, readonly: true,
hgap: 5 hgap: 5

47
dist/core.css vendored

@ -1081,30 +1081,41 @@ textarea {
.bi-list-item-select.button-warning.active.bi-high-light-border { .bi-list-item-select.button-warning.active.bi-high-light-border {
border-color: #e85050; border-color: #e85050;
} }
.bi-list-item-select.disabled, .bi-list-item-select.disabled {
.bi-list-item-select.disabled:hover,
.bi-list-item-select.disabled:active {
color: #9ea6b2 !important; color: #9ea6b2 !important;
background-color: transparent !important; background-color: transparent !important;
} }
.bi-list-item-select.disabled .bi-input, .bi-list-item-select.disabled .bi-input {
.bi-list-item-select.disabled:hover .bi-input,
.bi-list-item-select.disabled:active .bi-input {
color: #9ea6b2 !important; color: #9ea6b2 !important;
} }
.bi-list-item-select.disabled .bi-textarea, .bi-list-item-select.disabled .bi-textarea {
.bi-list-item-select.disabled:hover .bi-textarea,
.bi-list-item-select.disabled:active .bi-textarea {
color: #9ea6b2 !important; color: #9ea6b2 !important;
} }
.bi-list-item-select.disabled .bi-high-light, .bi-list-item-select.disabled .bi-high-light {
.bi-list-item-select.disabled:hover .bi-high-light,
.bi-list-item-select.disabled:active .bi-high-light {
color: #9ea6b2 !important; color: #9ea6b2 !important;
} }
.bi-list-item-select.disabled.bi-high-light-border, .bi-list-item-select.disabled.bi-high-light-border {
.bi-list-item-select.disabled:hover.bi-high-light-border, border-color: #F0F3F7;
.bi-list-item-select.disabled:active.bi-high-light-border { }
.bi-list-item-select.disabled.hover,
.bi-list-item-select.disabled.active {
color: #ffffff !important;
background-color: #d0d4da !important;
}
.bi-list-item-select.disabled.hover .bi-input,
.bi-list-item-select.disabled.active .bi-input {
color: #ffffff !important;
}
.bi-list-item-select.disabled.hover .bi-textarea,
.bi-list-item-select.disabled.active .bi-textarea {
color: #ffffff !important;
}
.bi-list-item-select.disabled.hover .bi-high-light,
.bi-list-item-select.disabled.active .bi-high-light {
color: #9ea6b2 !important;
}
.bi-list-item-select.disabled.hover.bi-high-light-border,
.bi-list-item-select.disabled.active.bi-high-light-border {
border-color: #F0F3F7; border-color: #F0F3F7;
} }
.bi-list-item-select2:hover, .bi-list-item-select2:hover,
@ -1113,7 +1124,7 @@ textarea {
} }
.bi-list-item-select2:active, .bi-list-item-select2:active,
.bi-list-item-select2.active { .bi-list-item-select2.active {
color: #3685f2; color: #ffffff;
background-color: #f7f8fa; background-color: #f7f8fa;
} }
.bi-list-item-select2:active .bi-input, .bi-list-item-select2:active .bi-input,
@ -1124,6 +1135,10 @@ textarea {
.bi-list-item-select2.active .bi-textarea { .bi-list-item-select2.active .bi-textarea {
color: #3685f2; color: #3685f2;
} }
.bi-list-item-select2:active .bi-high-light,
.bi-list-item-select2.active .bi-high-light {
color: #ffffff;
}
.bi-theme-dark .bi-list-item-select:hover, .bi-theme-dark .bi-list-item-select:hover,
.bi-theme-dark .bi-list-item-select.hover { .bi-theme-dark .bi-list-item-select.hover {
color: #ffffff; color: #ffffff;

47
dist/core_without_normalize.css vendored

@ -803,30 +803,41 @@ textarea {
.bi-list-item-select.button-warning.active.bi-high-light-border { .bi-list-item-select.button-warning.active.bi-high-light-border {
border-color: #e85050; border-color: #e85050;
} }
.bi-list-item-select.disabled, .bi-list-item-select.disabled {
.bi-list-item-select.disabled:hover,
.bi-list-item-select.disabled:active {
color: #9ea6b2 !important; color: #9ea6b2 !important;
background-color: transparent !important; background-color: transparent !important;
} }
.bi-list-item-select.disabled .bi-input, .bi-list-item-select.disabled .bi-input {
.bi-list-item-select.disabled:hover .bi-input,
.bi-list-item-select.disabled:active .bi-input {
color: #9ea6b2 !important; color: #9ea6b2 !important;
} }
.bi-list-item-select.disabled .bi-textarea, .bi-list-item-select.disabled .bi-textarea {
.bi-list-item-select.disabled:hover .bi-textarea,
.bi-list-item-select.disabled:active .bi-textarea {
color: #9ea6b2 !important; color: #9ea6b2 !important;
} }
.bi-list-item-select.disabled .bi-high-light, .bi-list-item-select.disabled .bi-high-light {
.bi-list-item-select.disabled:hover .bi-high-light,
.bi-list-item-select.disabled:active .bi-high-light {
color: #9ea6b2 !important; color: #9ea6b2 !important;
} }
.bi-list-item-select.disabled.bi-high-light-border, .bi-list-item-select.disabled.bi-high-light-border {
.bi-list-item-select.disabled:hover.bi-high-light-border, border-color: #F0F3F7;
.bi-list-item-select.disabled:active.bi-high-light-border { }
.bi-list-item-select.disabled.hover,
.bi-list-item-select.disabled.active {
color: #ffffff !important;
background-color: #d0d4da !important;
}
.bi-list-item-select.disabled.hover .bi-input,
.bi-list-item-select.disabled.active .bi-input {
color: #ffffff !important;
}
.bi-list-item-select.disabled.hover .bi-textarea,
.bi-list-item-select.disabled.active .bi-textarea {
color: #ffffff !important;
}
.bi-list-item-select.disabled.hover .bi-high-light,
.bi-list-item-select.disabled.active .bi-high-light {
color: #9ea6b2 !important;
}
.bi-list-item-select.disabled.hover.bi-high-light-border,
.bi-list-item-select.disabled.active.bi-high-light-border {
border-color: #F0F3F7; border-color: #F0F3F7;
} }
.bi-list-item-select2:hover, .bi-list-item-select2:hover,
@ -835,7 +846,7 @@ textarea {
} }
.bi-list-item-select2:active, .bi-list-item-select2:active,
.bi-list-item-select2.active { .bi-list-item-select2.active {
color: #3685f2; color: #ffffff;
background-color: #f7f8fa; background-color: #f7f8fa;
} }
.bi-list-item-select2:active .bi-input, .bi-list-item-select2:active .bi-input,
@ -846,6 +857,10 @@ textarea {
.bi-list-item-select2.active .bi-textarea { .bi-list-item-select2.active .bi-textarea {
color: #3685f2; color: #3685f2;
} }
.bi-list-item-select2:active .bi-high-light,
.bi-list-item-select2.active .bi-high-light {
color: #ffffff;
}
.bi-theme-dark .bi-list-item-select:hover, .bi-theme-dark .bi-list-item-select:hover,
.bi-theme-dark .bi-list-item-select.hover { .bi-theme-dark .bi-list-item-select.hover {
color: #ffffff; color: #ffffff;

2
src/case/segment/button.segment.js

@ -10,7 +10,7 @@ BI.SegmentButton = BI.inherit(BI.BasicButton, {
_defaultConfig: function () { _defaultConfig: function () {
var conf = BI.SegmentButton.superclass._defaultConfig.apply(this, arguments); var conf = BI.SegmentButton.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, { return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-active", baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-select",
shadow: true, shadow: true,
readonly: true, readonly: true,
hgap: 5 hgap: 5

6
src/css/base/colorchooser/colorchooser.css

@ -8,7 +8,7 @@
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
box-shadow: 0px 0px 2px 1px #d4dadd inset; box-shadow: 0px 0px 2px 1px #d0d4da inset;
-webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset; -webkit-box-shadow: 0px 0px 2px 1px #d0d4da inset;
-moz-box-shadow: 0px 0px 2px 1px #d4dadd inset; -moz-box-shadow: 0px 0px 2px 1px #d0d4da inset;
} }

3
src/css/base/segment/button.css

@ -0,0 +1,3 @@
.bi-segment-button {
color: #3685f2;
}

12
src/css/base/segment/segment.css

@ -3,12 +3,12 @@
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
background: #ffffff; background: #ffffff;
border-right: 1px solid #e8eaed; border-right: 1px solid #3685f2;
border-top: 1px solid #e8eaed; border-top: 1px solid #3685f2;
border-bottom: 1px solid #e8eaed; border-bottom: 1px solid #3685f2;
} }
.bi-segment > .first-element { .bi-segment > .first-element {
border-left: 1px solid #e8eaed; border-left: 1px solid #3685f2;
-webkit-border-radius: 6px 0px 0px 6px; -webkit-border-radius: 6px 0px 0px 6px;
-moz-border-radius: 6px 0px 0px 6px; -moz-border-radius: 6px 0px 0px 6px;
border-radius: 6px 0px 0px 6px; border-radius: 6px 0px 0px 6px;
@ -18,6 +18,10 @@
-moz-border-radius: 0px 6px 6px 0px; -moz-border-radius: 0px 6px 6px 0px;
border-radius: 0px 6px 6px 0px; border-radius: 0px 6px 6px 0px;
} }
.bi-segment.disabled > .center-element,
.bi-segment.disabled > .first-element {
border-color: #F0F3F7;
}
.bi-theme-dark .bi-segment > .center-element { .bi-theme-dark .bi-segment > .center-element {
overflow: hidden; overflow: hidden;
overflow-x: hidden; overflow-x: hidden;

47
src/css/core/utils/common.css

@ -803,30 +803,41 @@ textarea {
.bi-list-item-select.button-warning.active.bi-high-light-border { .bi-list-item-select.button-warning.active.bi-high-light-border {
border-color: #e85050; border-color: #e85050;
} }
.bi-list-item-select.disabled, .bi-list-item-select.disabled {
.bi-list-item-select.disabled:hover,
.bi-list-item-select.disabled:active {
color: #9ea6b2 !important; color: #9ea6b2 !important;
background-color: transparent !important; background-color: transparent !important;
} }
.bi-list-item-select.disabled .bi-input, .bi-list-item-select.disabled .bi-input {
.bi-list-item-select.disabled:hover .bi-input,
.bi-list-item-select.disabled:active .bi-input {
color: #9ea6b2 !important; color: #9ea6b2 !important;
} }
.bi-list-item-select.disabled .bi-textarea, .bi-list-item-select.disabled .bi-textarea {
.bi-list-item-select.disabled:hover .bi-textarea,
.bi-list-item-select.disabled:active .bi-textarea {
color: #9ea6b2 !important; color: #9ea6b2 !important;
} }
.bi-list-item-select.disabled .bi-high-light, .bi-list-item-select.disabled .bi-high-light {
.bi-list-item-select.disabled:hover .bi-high-light,
.bi-list-item-select.disabled:active .bi-high-light {
color: #9ea6b2 !important; color: #9ea6b2 !important;
} }
.bi-list-item-select.disabled.bi-high-light-border, .bi-list-item-select.disabled.bi-high-light-border {
.bi-list-item-select.disabled:hover.bi-high-light-border, border-color: #F0F3F7;
.bi-list-item-select.disabled:active.bi-high-light-border { }
.bi-list-item-select.disabled.hover,
.bi-list-item-select.disabled.active {
color: #ffffff !important;
background-color: #d0d4da !important;
}
.bi-list-item-select.disabled.hover .bi-input,
.bi-list-item-select.disabled.active .bi-input {
color: #ffffff !important;
}
.bi-list-item-select.disabled.hover .bi-textarea,
.bi-list-item-select.disabled.active .bi-textarea {
color: #ffffff !important;
}
.bi-list-item-select.disabled.hover .bi-high-light,
.bi-list-item-select.disabled.active .bi-high-light {
color: #9ea6b2 !important;
}
.bi-list-item-select.disabled.hover.bi-high-light-border,
.bi-list-item-select.disabled.active.bi-high-light-border {
border-color: #F0F3F7; border-color: #F0F3F7;
} }
.bi-list-item-select2:hover, .bi-list-item-select2:hover,
@ -835,7 +846,7 @@ textarea {
} }
.bi-list-item-select2:active, .bi-list-item-select2:active,
.bi-list-item-select2.active { .bi-list-item-select2.active {
color: #3685f2; color: #ffffff;
background-color: #f7f8fa; background-color: #f7f8fa;
} }
.bi-list-item-select2:active .bi-input, .bi-list-item-select2:active .bi-input,
@ -846,6 +857,10 @@ textarea {
.bi-list-item-select2.active .bi-textarea { .bi-list-item-select2.active .bi-textarea {
color: #3685f2; color: #3685f2;
} }
.bi-list-item-select2:active .bi-high-light,
.bi-list-item-select2.active .bi-high-light {
color: #ffffff;
}
.bi-theme-dark .bi-list-item-select:hover, .bi-theme-dark .bi-list-item-select:hover,
.bi-theme-dark .bi-list-item-select.hover { .bi-theme-dark .bi-list-item-select.hover {
color: #ffffff; color: #ffffff;

2
src/less/base/colorchooser/colorchooser.trigger.less

@ -2,5 +2,5 @@
.bi-color-chooser-trigger { .bi-color-chooser-trigger {
.border-radius(2px); .border-radius(2px);
.box-shadow(0px, 0px, 2px, 1px, @color-bi-background-dark, inset); .box-shadow(0px, 0px, 2px, 1px, @color-bi-background-dark-gray, inset);
} }

1
src/less/base/segment/button.segment.less

@ -1,4 +1,5 @@
@import "../../index"; @import "../../index";
.bi-segment-button{ .bi-segment-button{
color: @color-bi-text-highlight;
} }

11
src/less/base/segment/segment.less

@ -4,17 +4,20 @@
& > .center-element{ & > .center-element{
.overflow-hidden(); .overflow-hidden();
background: @color-bi-background-default; background: @color-bi-background-default;
border-right: 1px solid @color-bi-border-line; border-right: 1px solid @color-bi-border-highlight;
border-top: 1px solid @color-bi-border-line; border-top: 1px solid @color-bi-border-highlight;
border-bottom: 1px solid @color-bi-border-line; border-bottom: 1px solid @color-bi-border-highlight;
} }
& > .first-element{ & > .first-element{
border-left: 1px solid @color-bi-border-line; border-left: 1px solid @color-bi-border-highlight;
.border-corner-radius(6px,0px,0px,6px) .border-corner-radius(6px,0px,0px,6px)
} }
& > .last-element{ & > .last-element{
.border-corner-radius(0px,6px,6px,0px) .border-corner-radius(0px,6px,6px,0px)
} }
&.disabled > .center-element, &.disabled > .first-element{
border-color: @color-bi-border-disabled;
}
} }
.bi-theme-dark { .bi-theme-dark {

27
src/less/core/utils/common.less

@ -793,15 +793,29 @@ textarea {
} }
} }
&.disabled { &.disabled {
&, &:hover, &:active { color: @color-bi-text-disabled !important;
& .bi-input {
color: @color-bi-text-disabled !important;
}
& .bi-textarea {
color: @color-bi-text-disabled !important; color: @color-bi-text-disabled !important;
}
background-color: transparent !important;
& .bi-high-light {
color: @color-bi-text-disabled !important;
}
&.bi-high-light-border {
border-color: @color-bi-border-disabled;
}
&.hover, &.active {
color: @color-bi-text !important;
& .bi-input { & .bi-input {
color: @color-bi-text-disabled !important; color: @color-bi-text !important;
} }
& .bi-textarea { & .bi-textarea {
color: @color-bi-text-disabled !important; color: @color-bi-text !important;
} }
background-color: transparent !important; background-color: @color-bi-background-dark-gray !important;
& .bi-high-light { & .bi-high-light {
color: @color-bi-text-disabled !important; color: @color-bi-text-disabled !important;
} }
@ -818,7 +832,7 @@ textarea {
background-color: @color-bi-background-normal; background-color: @color-bi-background-normal;
} }
&:active, &.active { &:active, &.active {
color: @color-bi-text-highlight; color: @color-bi-text;
& .bi-input { & .bi-input {
color: @color-bi-text-highlight; color: @color-bi-text-highlight;
} }
@ -826,6 +840,9 @@ textarea {
color: @color-bi-text-highlight; color: @color-bi-text-highlight;
} }
background-color: @color-bi-background-normal; background-color: @color-bi-background-normal;
& .bi-high-light {
color: @color-bi-text;
}
} }
} }

2
src/less/lib/colors.less

@ -41,7 +41,7 @@
//黑色背景 //黑色背景
@color-bi-background-black: @background-color-black; @color-bi-background-black: @background-color-black;
//深灰色背景 //深灰色背景
@color-bi-background-dark: @background-color-dark; @color-bi-background-dark-gray: @background-color-dark-gray;
//灰色背景(浅) //灰色背景(浅)
@color-bi-background-light-gray: @background-color-light-gray; @color-bi-background-light-gray: @background-color-light-gray;
//灰化背景 //灰化背景

Loading…
Cancel
Save