mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-23 15:09:16 +08:00
[improvement] Tab: update active style (#2120)
This commit is contained in:
parent
0efdd0865a
commit
bef8d5eb73
@ -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';
|
||||||
|
@ -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
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user