blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-23 15:09:16 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Tab: add less vars

Browse Source
This commit is contained in:
陈嘉涵 2019-05-16 21:08:04 +08:00
parent 6160d4e620
commit 2644689162
3 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/pagination/index.less
View File

@ -11,13 +11,13 @@
box-sizing: border-box;
min-width: @pagination-item-width;
height: @pagination-height;
color: @pagination-item-theme-color;
color: @pagination-item-default-color;
background-color: @pagination-background-color;
user-select: none;
&:active {
color: @white;
background-color: @pagination-item-theme-color;
background-color: @pagination-item-default-color;
}
&::after {
@ -30,14 +30,14 @@
&--disabled,
&--disabled:active {
color: @gray-darker;
background-color: @background-color;
color: @pagination-item-disabled-color;
background-color: @pagination-item-disabled-background-color;
opacity: @pagination-disabled-opacity;
}
&--active {
color: @white;
background-color: @pagination-item-theme-color;
background-color: @pagination-item-default-color;
}
}

22
packages/style/var.less
View File

@ -324,7 +324,9 @@
@pagination-height: 40px;
@pagination-font-size: 14px;
@pagination-item-width: 36px;
@pagination-item-theme-color: @blue;
@pagination-item-default-color: @blue;
@pagination-item-disabled-color: @gray-darker;
@pagination-item-disabled-background-color: @background-color;
@pagination-background-color: @white;
@pagination-desc-color: @gray-darker;
@pagination-disabled-opacity: 0.6;
@ -500,10 +502,6 @@
@switch-cell-large-padding-top: @cell-large-vertical-padding - 1px;
@switch-cell-large-padding-bottom: @cell-large-vertical-padding - 1px;
// Tab
@tabs-line-height: 44px;
@tabs-card-height: 30px;
// Tabbar
@tabbar-height: 50px;
@tabbar-background-color: @white;
@ -516,6 +514,20 @@
@tabbar-item-icon-size: 18px;
@tabbar-item-margin-bottom: 5px;
// Tab
@tab-text-color: @gray-darker;
@tab-active-text-color: @text-color;
@tab-disabled-text-color: @gray;
@tab-font-size: 14px;
// Tabs
@tabs-default-color: @red;
@tabs-line-height: 44px;
@tabs-card-height: 30px;
@tabs-nav-background-color: @white;
@tabs-bottom-bar-height: 3px;
@tabs-bottom-bar-color: @tabs-default-color;
// Tag
@tag-padding: .2em .5em;
@tag-font-size: 10px;

26
packages/tabs/index.less
View File

@ -6,8 +6,8 @@
box-sizing: border-box;
min-width: 0; // hack for flex ellipsis
padding: 0 5px;
color: @gray-darker;
font-size: 14px;
color: @tab-text-color;
font-size: @tab-font-size;
line-height: @tabs-line-height;
text-align: center;
cursor: pointer;
@ -17,12 +17,12 @@
}
&--active {
color: @text-color;
color: @tab-active-text-color;
font-weight: 500;
}
&--disabled {
color: @gray;
color: @tab-disabled-text-color;
}
}
@ -70,7 +70,7 @@
&__nav {
position: relative;
display: flex;
background-color: @white;
background-color: @tabs-nav-background-color;
user-select: none;
&--line {
@ -83,13 +83,13 @@
box-sizing: border-box;
height: @tabs-card-height;
margin: 0 15px;
border: 1px solid @red;
border: 1px solid @tabs-default-color;
border-radius: 2px;
.van-tab {
color: @red;
color: @tabs-default-color;
line-height: @tabs-card-height - 2px;
border-right: 1px solid @red;
border-right: 1px solid @tabs-default-color;
&:last-child {
border-right: none;
@ -97,11 +97,11 @@
&.van-tab--active {
color: @white;
background-color: @red;
background-color: @tabs-default-color;
}
&--disabled {
color: @gray;
color: @tab-disabled-text-color;
}
}
}
@ -112,9 +112,9 @@
bottom: 15px;
left: 0;
z-index: 1;
height: 3px;
background-color: @red;
border-radius: 3px;
height: @tabs-bottom-bar-height;
background-color: @tabs-bottom-bar-color;
border-radius: @tabs-bottom-bar-height;
}
&__track {