[improvement] Tab: update active style (#2120)

This commit is contained in:
neverland 2018-11-22 20:31:28 +08:00 committed by GitHub
parent 0efdd0865a
commit bef8d5eb73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 30 additions and 31 deletions

View File

@ -23,7 +23,6 @@
@import './steps/index'; @import './steps/index';
@import './step/index'; @import './step/index';
@import './tag/index'; @import './tag/index';
@import './tab/index';
@import './tabs/index'; @import './tabs/index';
@import './tabbar/index'; @import './tabbar/index';
@import './tabbar-item/index'; @import './tabbar-item/index';

View File

@ -9,7 +9,7 @@
@green: #4b0; @green: #4b0;
@gray: #c9c9c9; @gray: #c9c9c9;
@gray-light: #e5e5e5; @gray-light: #e5e5e5;
@gray-darker: #666; @gray-darker: #7d7e80;
@gray-dark: #999; @gray-dark: #999;
// default colors // default colors

View File

@ -1,27 +0,0 @@
@import '../style/var';
.van-tab {
flex: 1;
cursor: pointer;
padding: 0 5px;
font-size: 14px;
position: relative;
color: @text-color;
line-height: @tabs-line-height;
text-align: center;
box-sizing: border-box;
background-color: @white;
min-width: 0; /* hack for flex ellipsis */
span {
display: block;
}
&--active {
color: @red;
}
&--disabled {
color: @gray;
}
}

View File

@ -1,5 +1,32 @@
@import '../style/var'; @import '../style/var';
.van-tab {
flex: 1;
cursor: pointer;
padding: 0 5px;
font-size: 14px;
position: relative;
color: @gray-darker;
line-height: @tabs-line-height;
text-align: center;
box-sizing: border-box;
background-color: @white;
min-width: 0; /* hack for flex ellipsis */
span {
display: block;
}
&--active {
font-weight: 500;
color: @text-color;
}
&--disabled {
color: @gray;
}
}
.van-tabs { .van-tabs {
position: relative; position: relative;
@ -83,7 +110,7 @@
bottom: 15px; bottom: 15px;
height: 2px; height: 2px;
position: absolute; position: absolute;
border-radius: 2px 0; border-radius: 2px;
background-color: @red; background-color: @red;
} }

View File

@ -375,7 +375,7 @@ export default create({
const isCard = this.type === 'card'; const isCard = this.type === 'card';
if (color) { if (color) {
if (!item.disabled && isCard !== active) { if (!item.disabled && isCard && !active) {
style.color = color; style.color = color;
} }
if (!item.disabled && isCard && active) { if (!item.disabled && isCard && active) {