blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Tag: add less vars (#3087)

Browse Source
This commit is contained in:
neverland 2019-04-03 20:36:50 +08:00 committed by GitHub
parent 5f49cfc85f
commit 861357c015
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/style/var.less
View File

@ -148,6 +148,15 @@
@tabs-line-height: 44px; @tabs-line-height: 44px;
@tabs-card-height: 30px; @tabs-card-height: 30px;
// Tag
@tag-padding: .2em .5em;
@tag-font-size: 10px;
@tag-medium-font-size: 12px;
@tag-large-font-size: 14px;
@tag-text-color: @white;
@tag-border-radius: .2em;
@tag-round-border-radius: .8em;
// Toast // Toast
@toast-max-width: 70%; @toast-max-width: 70%;
@toast-font-size: 14px; @toast-font-size: 14px;

2
packages/tag/demo/index.vue
View File

@ -139,6 +139,8 @@ export default {
<style lang="less"> <style lang="less">
.demo-tag { .demo-tag {
background-color: #fff;
.van-tag + .van-tag { .van-tag + .van-tag {
margin-left: 10px; margin-left: 10px;
} }

18
packages/tag/index.less
View File

@ -1,16 +1,16 @@
@import '../style/var'; @import '../style/var';
.van-tag { .van-tag {
color: @white; color: @tag-text-color;
font-size: 10px; font-size: @tag-font-size;
padding: .2em .5em; padding: @tag-padding;
line-height: normal; line-height: normal;
border-radius: .2em; border-radius: @tag-border-radius;
display: inline-block; display: inline-block;
&::after { &::after {
border-color: currentColor; border-color: currentColor;
border-radius: .4em; border-radius: @tag-border-radius * 2;
} }
&--mark { &--mark {
@ -23,18 +23,18 @@
} }
&--round { &--round {
border-radius: .8em; border-radius: @tag-round-border-radius;
&::after { &::after {
border-radius: 1.6em; border-radius: @tag-round-border-radius * 2;
} }
} }
&--medium { &--medium {
font-size: 12px; font-size: @tag-medium-font-size;
} }
&--large { &--large {
font-size: 14px; font-size: @tag-large-font-size;
} }
} }