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. 754
      src/less/core/utils/common.less
  3. 731
      src/less/core/utils/list-item.less
  4. 3
      src/less/core/utils/position.less
  5. 10
      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

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

@ -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;
}
}
}
}
}

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

@ -1,7 +1,9 @@
@import "../../index";
.display-block {
display: block;
}
.display-inline {
.inline-block();
}
@ -14,6 +16,7 @@
.vertical-super {
vertical-align: super;
}
.vertical-top {
vertical-align: top;
}

10
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;
@ -39,7 +40,14 @@
word-break: break-all;
}
.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