fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

移动端适配

es6
guy 4 years ago
parent
c66bfea816
commit
bb807a4499
6 changed files with 785 additions and 782 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/case/segment/button.segment.js
  2. 766
      src/less/core/utils/common.less
  3. 731
      src/less/core/utils/list-item.less
  4. 13
      src/less/core/utils/position.less
  5. 18
      src/less/core/utils/typographic.less
  6. 37
      src/less/lib/colors.less

2
src/case/segment/button.segment.js
Unescape View File

@ -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-select", baseCls: (conf.baseCls || "") + " bi-segment-button bi-list-item-select2",
shadow: true, shadow: true,
readonly: true, readonly: true,
hgap: 5 hgap: 5

766
src/less/core/utils/common.less
Unescape View File

@ -170,7 +170,7 @@ textarea {
} }
} }
//提示区域, 灰色字体 // 提示区域, 灰色字体
.bi-tips { .bi-tips {
color: @color-bi-text-tips; color: @color-bi-text-tips;
& .bi-input { & .bi-input {
@ -181,7 +181,7 @@ textarea {
} }
} }
//边框 // 边框
.bi-border { .bi-border {
border: 1px solid @color-bi-border-line; border: 1px solid @color-bi-border-line;
&.disabled { &.disabled {
@ -254,7 +254,7 @@ textarea {
} }
} }
//分割线 // 分割线
.bi-split { .bi-split {
border: 1px solid @border-color-light-line; border: 1px solid @border-color-light-line;
} }
@ -334,7 +334,7 @@ textarea {
font-weight: 700; font-weight: 700;
} }
//标红 // 标红
.bi-keyword-red-mark { .bi-keyword-red-mark {
color: @color-bi-text-redmark; color: @color-bi-text-redmark;
& .bi-input { & .bi-input {
@ -345,7 +345,7 @@ textarea {
} }
} }
//高亮 // 高亮
.bi-high-light { .bi-high-light {
color: @color-bi-text-highlight; color: @color-bi-text-highlight;
& .bi-input { & .bi-input {
@ -423,7 +423,7 @@ textarea {
} }
} }
//水印 // 水印
.bi-water-mark { .bi-water-mark {
color: @font-color-tips; color: @font-color-tips;
cursor: text; cursor: text;
@ -448,7 +448,7 @@ textarea {
} }
} }
//resize // resizer
.bi-resizer { .bi-resizer {
background: @color-bi-background-black; background: @color-bi-background-black;
.opacity(0.2); .opacity(0.2);
@ -461,38 +461,33 @@ textarea {
} }
} }
// 蒙板
.bi-mask { .bi-mask {
color: @color-bi-background-default; color: @color-bi-text;
& .bi-input { & .bi-input {
color: @color-bi-background-default; color: @color-bi-text;
} }
& .bi-textarea { & .bi-textarea {
color: @color-bi-background-default; color: @color-bi-text;
} }
.background-color(@color-bi-background-black, 20%); .background-color(@color-bi-background-black, 20%);
} }
.bi-theme-dark { .bi-theme-dark {
.bi-mask { .bi-mask {
color: @color-bi-background-default-theme-dark; color: @color-bi-text-white-theme-dark;
& .bi-input { & .bi-input {
color: @color-bi-background-default-theme-dark; color: @color-bi-text-white-theme-dark;
} }
& .bi-textarea { & .bi-textarea {
color: @color-bi-background-default-theme-dark; color: @color-bi-text-white-theme-dark;
} }
.background-color(@color-bi-background-default, 20%); .background-color(@color-bi-background-default, 20%);
} }
} }
// 遮罩
.bi-z-index-mask { .bi-z-index-mask {
//color: @color-bi-background-default;
//& .bi-input {
// color: @color-bi-background-default;
//}
//& .bi-textarea {
// color: @color-bi-background-default;
//}
.background-color(@color-bi-background-black, 50%); .background-color(@color-bi-background-black, 50%);
} }
@ -508,734 +503,3 @@ textarea {
.background-color(@color-bi-background-black-theme-dark, 50%); .background-color(@color-bi-background-black-theme-dark, 50%);
} }
} }
//只有背景变化
.bi-list-item {
&:hover, &.hover {
color: @color-bi-text-black;
& .bi-input {
color: @color-bi-text-black;
}
& .bi-textarea {
color: @color-bi-text-black;
}
.background-color(@color-bi-background-highlight, 10%);
}
&.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-theme-dark {
.bi-list-item {
&:hover, &.hover {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
.background-color(@color-bi-background-highlight, 10%);
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
}
}
}
.bi-list-item-border {
&:active, &.active {
border: 1px solid @color-bi-border-highlight;
}
}
//极简,hover文字高亮一下
.bi-list-item-simple {
&:hover, &.hover {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
}
&.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;
}
& .bi-high-light {
color: @color-bi-text-disabled !important;
}
}
}
}
// 只有文字在hover和active时变化
.bi-list-item-effect {
&:hover {
color: @color-bi-text-black;
& .bi-input {
color: @color-bi-text-black;
}
& .bi-textarea {
color: @color-bi-text-black;
}
}
&.active, &:active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
}
&.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;
}
& .bi-high-light {
color: @color-bi-text-disabled !important;
}
}
}
}
.bi-theme-dark {
.bi-list-item-effect {
&:hover {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
}
&.active, &:active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
}
}
}
//文字和背景hover和active时变化, hover和点击时文本和背景变化，active后文本变化，背景不变化
.bi-list-item-active {
&:hover, &.hover {
color: @color-bi-text-black;
& .bi-input {
color: @color-bi-text-black;
}
& .bi-textarea {
color: @color-bi-text-black;
}
.background-color(@color-bi-background-highlight, 10%);
}
&:active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
.background-color(@color-bi-background-highlight, 15%);
}
&.active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-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-theme-dark {
.bi-list-item-active {
&:hover, &.hover {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
.background-color(@color-bi-background-default, 5%);
}
&.active, &:active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
.background-color(@color-bi-background-default, 5%);
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
}
}
}
//文字和背景hover和active时变化 hover
.bi-list-item-active2 {
&:hover, &.hover {
color: @color-bi-text-black;
& .bi-input {
color: @color-bi-text-black;
}
& .bi-textarea {
color: @color-bi-text-black;
}
.background-color(@color-bi-background-highlight, 10%);
}
&:active, &.active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
.background-color(@color-bi-background-highlight, 15%);
}
&.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-theme-dark {
.bi-list-item-active2 {
&:hover, &.hover {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
.background-color(@color-bi-background-highlight, 10%);
}
&:active, &.active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
.background-color(@color-bi-background-highlight, 15%);
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
}
}
}
// 激活和选中时背景高亮
.bi-list-item-select {
&:hover, &.hover {
.background-color(@color-bi-background-highlight, 10%);
}
&:active, &.active {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
background-color: @color-bi-background-highlight;
& .bi-high-light {
color: @color-bi-text;
}
}
&.button-success {
&:active, &.active {
color: @color-bi-text;
background-color: @color-bi-background-success;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
& .bi-high-light {
color: @color-bi-text;
}
&.bi-high-light-border {
border-color: @color-bi-border-success;
}
}
}
&.button-warning {
& {
color: @color-bi-text-failure;
& .bi-input {
color: @color-bi-text-failure;
}
& .bi-textarea {
color: @color-bi-text-failure;
}
& .bi-high-light {
color: @color-bi-text-failure;
}
&.bi-high-light-border {
border-color: @color-bi-border-failure;
}
}
&: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;
& .bi-high-light {
color: @color-bi-text-failure;
}
&.bi-high-light-border {
border-color: @color-bi-border-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;
& .bi-high-light {
color: @color-bi-text;
}
&.bi-high-light-border {
border-color: @color-bi-border-failure;
}
}
}
&.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;
}
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 {
color: @color-bi-text !important;
}
& .bi-textarea {
color: @color-bi-text !important;
}
background-color: @color-bi-background-dark-gray !important;
& .bi-high-light {
color: @color-bi-text-disabled !important;
}
&.bi-high-light-border {
border-color: @color-bi-border-disabled;
}
}
}
}
}
.bi-theme-dark {
.bi-list-item-select {
&:hover, &.hover {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
.background-color(@color-bi-background-default, 5%);
}
&:active, &.active {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
background-color: @color-bi-background-highlight;
& .bi-high-light {
color: @color-bi-text;
}
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
&.hover, &.active {
background-color: @background-color-black-theme-dark !important;
}
}
}
}
//文字和背景hover和active时变化 hover和点击时边框变化，active后背景和边框变化
.bi-list-item-select2 {
&:hover, &.hover {
color: @color-bi-text-black;
& .bi-input {
color: @color-bi-text-black;
}
& .bi-textarea {
color: @color-bi-text-black;
}
&.bi-border {
border-color: @color-bi-border-highlight;
}
}
&:active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
&.bi-border {
border-color: @color-bi-border-highlight;
}
}
&.active {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
&.bi-border {
border-color: @color-bi-border-highlight;
}
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-theme-dark {
.bi-list-item-select2 {
&:hover, &.hover {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
}
&.active {
background-color: @color-bi-background-default-theme-dark;
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
&.active {
background-color: @background-color-black-theme-dark !important;
}
}
}
}
//与bi-list-item-select的区别是背景是灰的
.bi-list-item-select3 {
&:hover, &.hover {
background-color: @color-bi-background-normal;
}
&:active, &.active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
background-color: @color-bi-background-normal;
}
&.disabled {
&:hover, &.hover, &:active, &.active {
background-color: @color-bi-background-default !important;
}
}
}
.bi-theme-dark {
.bi-list-item-select3 {
&:hover, &.hover {
background-color: @color-bi-background-normal-theme-dark;
}
&:active, &.active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
background-color: @color-bi-background-normal-theme-dark;
}
&.disabled {
&:hover, &.hover, &:active, &.active {
background-color: @color-bi-background-default-theme-dark !important;
}
}
}
}
//去掉list-item效果
.bi-list-item-none {
&:hover, &.hover {
color: inherit;
& .bi-input {
color: inherit;
}
& .bi-textarea {
color: inherit;
}
background-color: transparent;
}
&:active, &.active {
color: inherit;
& .bi-input {
color: inherit;
}
& .bi-textarea {
color: inherit;
}
background-color: transparent;
& .bi-high-light {
color: inherit;
}
}
&.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;
}
background-color: transparent !important;
& .bi-high-light {
color: @color-bi-text-disabled !important;
}
}
}
}
.bi-theme-dark {
.bi-list-item-none {
&:hover, &.hover {
color: inherit;
& .bi-input {
color: inherit;
}
& .bi-textarea {
color: inherit;
}
background-color: transparent;
}
&:active, &.active {
color: inherit;
& .bi-input {
color: inherit;
}
& .bi-textarea {
color: inherit;
}
background-color: transparent;
& .bi-high-light {
color: inherit;
}
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
}
}
}
.bi-user-select-enable {
.user-select-enable();
}
.bi-user-select-disable {
.user-select-disable();
}

731
src/less/core/utils/list-item.less
Unescape View File

@ -0,0 +1,731 @@
@import "../../index";
// hover的时候背景变化
.bi-list-item {
&:hover, &.hover {
color: @color-bi-text-black;
& .bi-input {
color: @color-bi-text-black;
}
& .bi-textarea {
color: @color-bi-text-black;
}
.background-color(@color-bi-background-highlight, 10%);
}
&.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-theme-dark {
.bi-list-item {
&:hover, &.hover {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
.background-color(@color-bi-background-highlight, 10%);
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
}
}
}
// active的时候边框高亮
.bi-list-item-border {
&:active, &.active {
border: 1px solid @color-bi-border-highlight;
}
}
// 极简,hover的时候文字高亮
.bi-list-item-simple {
&:hover, &.hover {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
}
&.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;
}
& .bi-high-light {
color: @color-bi-text-disabled !important;
}
}
}
}
// active的时候文字高亮
.bi-list-item-effect {
&:hover {
color: @color-bi-text-black;
& .bi-input {
color: @color-bi-text-black;
}
& .bi-textarea {
color: @color-bi-text-black;
}
}
&.active, &:active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
}
&.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;
}
& .bi-high-light {
color: @color-bi-text-disabled !important;
}
}
}
}
.bi-theme-dark {
.bi-list-item-effect {
&:hover {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
}
&.active, &:active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
}
}
}
// hover的时候背景变化,
// :active的时候文字高亮,背景变化
.bi-list-item-active {
&:hover, &.hover {
color: @color-bi-text-black;
& .bi-input {
color: @color-bi-text-black;
}
& .bi-textarea {
color: @color-bi-text-black;
}
.background-color(@color-bi-background-highlight, 10%);
}
&:active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
.background-color(@color-bi-background-highlight, 15%);
}
&.active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-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-theme-dark {
.bi-list-item-active {
&:hover, &.hover {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
.background-color(@color-bi-background-default, 5%);
}
&.active, &:active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
.background-color(@color-bi-background-default, 5%);
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
}
}
}
// hover的时候背景变化
// active的时候文字高亮,背景变化
.bi-list-item-active2 {
&:hover, &.hover {
color: @color-bi-text-black;
& .bi-input {
color: @color-bi-text-black;
}
& .bi-textarea {
color: @color-bi-text-black;
}
.background-color(@color-bi-background-highlight, 10%);
}
&:active, &.active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
.background-color(@color-bi-background-highlight, 15%);
}
&.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-theme-dark {
.bi-list-item-active2 {
&:hover, &.hover {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
.background-color(@color-bi-background-highlight, 10%);
}
&:active, &.active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
.background-color(@color-bi-background-highlight, 15%);
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
}
}
}
// hover的时候背景变化
// active的时候背景高亮
.bi-list-item-select {
&:hover, &.hover {
.background-color(@color-bi-background-highlight, 10%);
}
&:active, &.active {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
background-color: @color-bi-background-highlight;
& .bi-high-light {
color: @color-bi-text;
}
}
&.button-success {
&:active, &.active {
color: @color-bi-text;
background-color: @color-bi-background-success;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
& .bi-high-light {
color: @color-bi-text;
}
&.bi-high-light-border {
border-color: @color-bi-border-success;
}
}
}
&.button-warning {
& {
color: @color-bi-text-failure;
& .bi-input {
color: @color-bi-text-failure;
}
& .bi-textarea {
color: @color-bi-text-failure;
}
& .bi-high-light {
color: @color-bi-text-failure;
}
&.bi-high-light-border {
border-color: @color-bi-border-failure;
}
}
&: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;
& .bi-high-light {
color: @color-bi-text-failure;
}
&.bi-high-light-border {
border-color: @color-bi-border-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;
& .bi-high-light {
color: @color-bi-text;
}
&.bi-high-light-border {
border-color: @color-bi-border-failure;
}
}
}
&.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;
}
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 {
color: @color-bi-text !important;
}
& .bi-textarea {
color: @color-bi-text !important;
}
background-color: @color-bi-background-dark-gray !important;
& .bi-high-light {
color: @color-bi-text-disabled !important;
}
&.bi-high-light-border {
border-color: @color-bi-border-disabled;
}
}
}
}
}
.bi-theme-dark {
.bi-list-item-select {
&:hover, &.hover {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
.background-color(@color-bi-background-default, 5%);
}
&:active, &.active {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
background-color: @color-bi-background-highlight;
& .bi-high-light {
color: @color-bi-text;
}
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
&.hover, &.active {
background-color: @background-color-black-theme-dark !important;
}
}
}
}
// hover的时候边框高亮
// :active的时候文字高亮，边框高亮
// .active的时候背景高亮，边框高亮
.bi-list-item-select2 {
&:hover, &.hover {
color: @color-bi-text-black;
& .bi-input {
color: @color-bi-text-black;
}
& .bi-textarea {
color: @color-bi-text-black;
}
&.bi-border {
border-color: @color-bi-border-highlight;
}
}
&:active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
&.bi-border {
border-color: @color-bi-border-highlight;
}
}
&.active {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
&.bi-border {
border-color: @color-bi-border-highlight;
}
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-theme-dark {
.bi-list-item-select2 {
&:hover, &.hover {
color: @color-bi-text;
& .bi-input {
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-text;
}
}
&.active {
background-color: @color-bi-background-default-theme-dark;
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
&.active {
background-color: @background-color-black-theme-dark !important;
}
}
}
}
// hover的时候背景变化 -- 变灰
// active的时候文字高亮背景变化 -- 变灰
.bi-list-item-select3 {
&:hover, &.hover {
background-color: @color-bi-background-normal;
}
&:active, &.active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
background-color: @color-bi-background-normal;
}
&.disabled {
&:hover, &.hover, &:active, &.active {
background-color: @color-bi-background-default !important;
}
}
}
.bi-theme-dark {
.bi-list-item-select3 {
&:hover, &.hover {
background-color: @color-bi-background-normal-theme-dark;
}
&:active, &.active {
color: @color-bi-text-highlight;
& .bi-input {
color: @color-bi-text-highlight;
}
& .bi-textarea {
color: @color-bi-text-highlight;
}
background-color: @color-bi-background-normal-theme-dark;
}
&.disabled {
&:hover, &.hover, &:active, &.active {
background-color: @color-bi-background-default-theme-dark !important;
}
}
}
}
// 去掉list-item效果
.bi-list-item-none {
&:hover, &.hover {
color: inherit;
& .bi-input {
color: inherit;
}
& .bi-textarea {
color: inherit;
}
background-color: transparent;
}
&:active, &.active {
color: inherit;
& .bi-input {
color: inherit;
}
& .bi-textarea {
color: inherit;
}
background-color: transparent;
& .bi-high-light {
color: inherit;
}
}
&.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;
}
background-color: transparent !important;
& .bi-high-light {
color: @color-bi-text-disabled !important;
}
}
}
}
.bi-theme-dark {
.bi-list-item-none {
&:hover, &.hover {
color: inherit;
& .bi-input {
color: inherit;
}
& .bi-textarea {
color: inherit;
}
background-color: transparent;
}
&:active, &.active {
color: inherit;
& .bi-input {
color: inherit;
}
& .bi-textarea {
color: inherit;
}
background-color: transparent;
& .bi-high-light {
color: inherit;
}
}
&.disabled {
&, &:hover, &:active {
background-color: transparent !important;
color: @color-bi-text-disabled-theme-dark !important;
& .bi-input {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-textarea {
color: @color-bi-text-disabled-theme-dark !important;
}
& .bi-high-light {
color: @color-bi-text-disabled-theme-dark !important;
}
}
}
}
}

13
src/less/core/utils/pos.less → src/less/core/utils/position.less
Unescape View File

@ -1,8 +1,10 @@
@import "../../index"; @import "../../index";
.display-block{
.display-block {
display: block; display: block;
} }
.display-inline{
.display-inline {
.inline-block(); .inline-block();
} }
@ -11,10 +13,11 @@
} }
/**常用于span元素在与combo并列时**/ /**常用于span元素在与combo并列时**/
.vertical-super{ .vertical-super {
vertical-align: super; vertical-align: super;
} }
.vertical-top{
.vertical-top {
vertical-align: top; vertical-align: top;
} }
@ -22,6 +25,6 @@
text-align: center; text-align: center;
} }
.horizon-left{ .horizon-left {
text-align: left; text-align: left;
} }

18
src/less/core/utils/overflow.less → src/less/core/utils/typographic.less
Unescape View File

@ -1,4 +1,5 @@
@import "../../index"; @import "../../index";
.y-overflow-auto { .y-overflow-auto {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@ -19,17 +20,17 @@
overflow-x: scroll; overflow-x: scroll;
} }
.overflow-auto{ .overflow-auto {
overflow-x: auto; overflow-x: auto;
overflow-y: auto; overflow-y: auto;
} }
.overflow-scroll{ .overflow-scroll {
overflow-x: scroll; overflow-x: scroll;
overflow-y: scroll; overflow-y: scroll;
} }
.overflow-hidden{ .overflow-hidden {
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
} }
@ -39,7 +40,14 @@
word-break: break-all; word-break: break-all;
} }
.overflow-dot {
.overflow-dot{
.overflow-dot(); .overflow-dot();
}
.bi-user-select-enable {
.user-select-enable();
}
.bi-user-select-disable {
.user-select-disable();
} }

37
src/less/lib/colors.less
Unescape View File

@ -4,20 +4,24 @@
//默认字体颜色 //默认字体颜色
@color-bi-text-normal: @font-color-normal; @color-bi-text-normal: @font-color-normal;
//默认字体颜色深色系 //深色主题默认字体颜色
@color-bi-text-theme-dark: @font-color-normal-theme-dark;
@color-bi-text-normal-theme-dark: @font-color-normal-theme-dark; @color-bi-text-normal-theme-dark: @font-color-normal-theme-dark;
//黑色字体颜色 //黑色字体颜色
@color-bi-text-black: @font-color-black; @color-bi-text-black: @font-color-black;
//深色主题默认字体颜色 //深色主题黑色字体颜色
@color-bi-text-theme-dark: @font-color-normal-theme-dark; @color-bi-text-black-theme-dark: @font-color-normal-theme-dark;
//灰色字体颜色 //灰色字体颜色
@color-bi-text-gray: @font-color-gray; @color-bi-text-gray: @font-color-gray;
//浅灰色字体 //浅灰色字体
@color-bi-text-light-gray: @font-color-light-gray; @color-bi-text-light-gray: @font-color-light-gray;
//深色浅灰色字体 //深色主题浅灰色字体
@color-bi-text-light-gray-theme-dark: @font-color-light-gray-theme-dark; @color-bi-text-light-gray-theme-dark: @font-color-light-gray-theme-dark;
//白色字体颜色 //白色字体颜色
@color-bi-text: @font-color-white; @color-bi-text: @font-color-white;
@color-bi-text-white: @font-color-white;
//深色主题白色字体颜色
@color-bi-text-white-theme-dark: @font-color-white-theme-dark;
//灰化字体颜色 //灰化字体颜色
@color-bi-text-disabled: @font-color-disabled; @color-bi-text-disabled: @font-color-disabled;
//深色主题灰化字体颜色 //深色主题灰化字体颜色
@ -39,6 +43,7 @@
//普通背景 //普通背景
@color-bi-background-normal: @background-color-normal; @color-bi-background-normal: @background-color-normal;
//深色主题普通背景
@color-bi-background-normal-theme-dark: @background-color-normal-theme-dark; @color-bi-background-normal-theme-dark: @background-color-normal-theme-dark;
//默认背景 //默认背景
@color-bi-background-default: @background-color-default; @color-bi-background-default: @background-color-default;
@ -46,19 +51,19 @@
@color-bi-background-default-theme-dark: @background-color-default-theme-dark; @color-bi-background-default-theme-dark: @background-color-default-theme-dark;
//黑色背景 //黑色背景
@color-bi-background-black: @background-color-black; @color-bi-background-black: @background-color-black;
//深色系黑色背景 //深色主题黑色背景
@color-bi-background-black-theme-dark: @background-color-black-theme-dark; @color-bi-background-black-theme-dark: @background-color-black-theme-dark;
//浅黑色背景 //浅黑色背景
@color-bi-background-light-black: @background-color-light-black; @color-bi-background-light-black: @background-color-light-black;
//深色系浅黑色背景 //深色主题浅黑色背景
@color-bi-background-light-black-theme-dark: @background-color-light-black-theme-dark; @color-bi-background-light-black-theme-dark: @background-color-light-black-theme-dark;
//深灰色背景 //深灰色背景
@color-bi-background-dark-gray: @background-color-dark-gray; @color-bi-background-dark-gray: @background-color-dark-gray;
//深色系深灰色背景 //深色主题深灰色背景
@color-bi-background-dark-gray-theme-dark: @background-color-dark-gray-theme-dark; @color-bi-background-dark-gray-theme-dark: @background-color-dark-gray-theme-dark;
//灰色背景(浅) //灰色背景(浅)
@color-bi-background-light-gray: @background-color-light-gray; @color-bi-background-light-gray: @background-color-light-gray;
//深色主题灰色背景 //深色主题灰色背景(浅)
@color-bi-background-light-gray-theme-dark: @background-color-light-gray-theme-dark; @color-bi-background-light-gray-theme-dark: @background-color-light-gray-theme-dark;
//灰色背景(中) //灰色背景(中)
@color-bi-background-medium-gray: @background-color-medium-gray; @color-bi-background-medium-gray: @background-color-medium-gray;
@ -95,17 +100,17 @@
@color-bi-border-black: @border-color-black; @color-bi-border-black: @border-color-black;
//默认边框色 //默认边框色
@color-bi-border-default: @border-color-default; @color-bi-border-default: @border-color-default;
//边框线颜色 //边框线色
@color-bi-border-line: @border-color-line; @color-bi-border-line: @border-color-line;
//深色系边框线色 //深色主题边框线色
@color-bi-border-line-theme-dark: @border-color-line-theme-dark; @color-bi-border-line-theme-dark: @border-color-line-theme-dark;
//深色边框线 //深色边框线
@color-bi-border-dark-line: @border-color-dark-line; @color-bi-border-dark-line: @border-color-dark-line;
//深色系深色边框线 //深色主题深色边框线
@color-bi-border-dark-line-theme-dark: @border-color-dark-line-theme-dark; @color-bi-border-dark-line-theme-dark: @border-color-dark-line-theme-dark;
//灰化边框 //灰化边框
@color-bi-border-disabled: @border-color-disabled; @color-bi-border-disabled: @border-color-disabled;
//深色系灰化边框 //深色主题灰化边框
@color-bi-border-disabled-theme-dark: @border-color-disabled-theme-dark; @color-bi-border-disabled-theme-dark: @border-color-disabled-theme-dark;
//成功边框色 //成功边框色
@color-bi-border-success: @border-color-success; @color-bi-border-success: @border-color-success;
@ -179,11 +184,3 @@
@color-bi-yellow-40: fade(@font-color-yellow, 40); @color-bi-yellow-40: fade(@font-color-yellow, 40);
@color-bi-yellow-20: fade(@font-color-yellow, 20); @color-bi-yellow-20: fade(@font-color-yellow, 20);
@color-bi-yellow-5: fade(@font-color-yellow, 5); @color-bi-yellow-5: fade(@font-color-yellow, 5);

Write Preview
Loading…
Cancel
Save