caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects 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
Split 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 () {
var conf = BI.SegmentButton.superclass._defaultConfig.apply(this, arguments);
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,
readonly: true,
hgap: 5

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

@ -170,7 +170,7 @@ textarea {
}
}
//提示区域, 灰色字体
// 提示区域, 灰色字体
.bi-tips {
color: @color-bi-text-tips;
& .bi-input {
@ -181,7 +181,7 @@ textarea {
}
}
//边框
// 边框
.bi-border {
border: 1px solid @color-bi-border-line;
&.disabled {
@ -254,7 +254,7 @@ textarea {
}
}
//分割线
// 分割线
.bi-split {
border: 1px solid @border-color-light-line;
}
@ -334,7 +334,7 @@ textarea {
font-weight: 700;
}
//标红
// 标红
.bi-keyword-red-mark {
color: @color-bi-text-redmark;
& .bi-input {
@ -345,7 +345,7 @@ textarea {
}
}
//高亮
// 高亮
.bi-high-light {
color: @color-bi-text-highlight;
& .bi-input {
@ -423,7 +423,7 @@ textarea {
}
}
//水印
// 水印
.bi-water-mark {
color: @font-color-tips;
cursor: text;
@ -448,7 +448,7 @@ textarea {
}
}
//resize
// resizer
.bi-resizer {
background: @color-bi-background-black;
.opacity(0.2);
@ -461,38 +461,33 @@ textarea {
}
}
// 蒙板
.bi-mask {
color: @color-bi-background-default;
color: @color-bi-text;
& .bi-input {
color: @color-bi-background-default;
color: @color-bi-text;
}
& .bi-textarea {
color: @color-bi-background-default;
color: @color-bi-text;
}
.background-color(@color-bi-background-black, 20%);
}
.bi-theme-dark {
.bi-mask {
color: @color-bi-background-default-theme-dark;
color: @color-bi-text-white-theme-dark;
& .bi-input {
color: @color-bi-background-default-theme-dark;
color: @color-bi-text-white-theme-dark;
}
& .bi-textarea {
color: @color-bi-background-default-theme-dark;
color: @color-bi-text-white-theme-dark;
}
.background-color(@color-bi-background-default, 20%);
}
}
// 遮罩
.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%);
}
@ -508,734 +503,3 @@ textarea {
.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";
.display-block{
.display-block {
display: block;
}
.display-inline{
.display-inline {
.inline-block();
}
@ -11,10 +13,11 @@
}
/**常用于span元素在与combo并列时**/
.vertical-super{
.vertical-super {
vertical-align: super;
}
.vertical-top{
.vertical-top {
vertical-align: top;
}
@ -22,6 +25,6 @@
text-align: center;
}
.horizon-left{
.horizon-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";
.y-overflow-auto {
overflow-y: auto;
overflow-x: hidden;
@ -19,17 +20,17 @@
overflow-x: scroll;
}
.overflow-auto{
.overflow-auto {
overflow-x: auto;
overflow-y: auto;
}
.overflow-scroll{
.overflow-scroll {
overflow-x: scroll;
overflow-y: scroll;
}
.overflow-hidden{
.overflow-hidden {
overflow-x: hidden;
overflow-y: hidden;
}
@ -39,7 +40,14 @@
word-break: break-all;
}
.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-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-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-light-gray: @font-color-light-gray;
//深色浅灰色字体
//深色主题浅灰色字体
@color-bi-text-light-gray-theme-dark: @font-color-light-gray-theme-dark;
//白色字体颜色
@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;
//深色主题灰化字体颜色
@ -39,6 +43,7 @@
//普通背景
@color-bi-background-normal: @background-color-normal;
//深色主题普通背景
@color-bi-background-normal-theme-dark: @background-color-normal-theme-dark;
//默认背景
@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-black: @background-color-black;
//深色系黑色背景
//深色主题黑色背景
@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-theme-dark: @background-color-light-black-theme-dark;
//深灰色背景
@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-light-gray: @background-color-light-gray;
//深色主题灰色背景
//深色主题灰色背景(浅)
@color-bi-background-light-gray-theme-dark: @background-color-light-gray-theme-dark;
//灰色背景(中)
@color-bi-background-medium-gray: @background-color-medium-gray;
@ -95,17 +100,17 @@
@color-bi-border-black: @border-color-black;
//默认边框色
@color-bi-border-default: @border-color-default;
//边框线颜色
//边框线色
@color-bi-border-line: @border-color-line;
//深色系边框线色
//深色主题边框线色
@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-theme-dark: @border-color-dark-line-theme-dark;
//灰化边框
@color-bi-border-disabled: @border-color-disabled;
//深色系灰化边框
//深色主题灰化边框
@color-bi-border-disabled-theme-dark: @border-color-disabled-theme-dark;
//成功边框色
@color-bi-border-success: @border-color-success;
@ -179,11 +184,3 @@
@color-bi-yellow-40: fade(@font-color-yellow, 40);
@color-bi-yellow-20: fade(@font-color-yellow, 20);
@color-bi-yellow-5: fade(@font-color-yellow, 5);

Write Preview
Loading…
Cancel
Save