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; box-sizing: border-box;
min-width: @pagination-item-width; min-width: @pagination-item-width;
height: @pagination-height; height: @pagination-height;
color: @pagination-item-theme-color; color: @pagination-item-default-color;
background-color: @pagination-background-color; background-color: @pagination-background-color;
user-select: none; user-select: none;
&:active { &:active {
color: @white; color: @white;
background-color: @pagination-item-theme-color; background-color: @pagination-item-default-color;
} }
&::after { &::after {
@ -30,14 +30,14 @@
&--disabled, &--disabled,
&--disabled:active { &--disabled:active {
color: @gray-darker; color: @pagination-item-disabled-color;
background-color: @background-color; background-color: @pagination-item-disabled-background-color;
opacity: @pagination-disabled-opacity; opacity: @pagination-disabled-opacity;
} }
&--active { &--active {
color: @white; 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-height: 40px;
@pagination-font-size: 14px; @pagination-font-size: 14px;
@pagination-item-width: 36px; @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-background-color: @white;
@pagination-desc-color: @gray-darker; @pagination-desc-color: @gray-darker;
@pagination-disabled-opacity: 0.6; @pagination-disabled-opacity: 0.6;
@ -500,10 +502,6 @@
@switch-cell-large-padding-top: @cell-large-vertical-padding - 1px; @switch-cell-large-padding-top: @cell-large-vertical-padding - 1px;
@switch-cell-large-padding-bottom: @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
@tabbar-height: 50px; @tabbar-height: 50px;
@tabbar-background-color: @white; @tabbar-background-color: @white;
@ -516,6 +514,20 @@
@tabbar-item-icon-size: 18px; @tabbar-item-icon-size: 18px;
@tabbar-item-margin-bottom: 5px; @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
@tag-padding: .2em .5em; @tag-padding: .2em .5em;
@tag-font-size: 10px; @tag-font-size: 10px;

26
packages/tabs/index.less
View File

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