blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 10:20:19 +08:00
Code Issues Projects Releases Wiki Activity

style(Sidebar): update border style

Browse Source
This commit is contained in:
chenjiahan 2020-04-22 17:52:45 +08:00 committed by neverland
parent df8f713675
commit a31032e0d6
4 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/sidebar-item/index.less
View File

@ -1,6 +1,7 @@
@import '../style/var'; @import '../style/var';
.van-sidebar-item { .van-sidebar-item {
position: relative;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
padding: @sidebar-padding; padding: @sidebar-padding;
@ -10,19 +11,18 @@
line-height: @sidebar-line-height; line-height: @sidebar-line-height;
word-wrap: break-word; word-wrap: break-word;
background-color: @sidebar-background-color; background-color: @sidebar-background-color;
border-left: 3px solid transparent;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
&:active {
background-color: @sidebar-active-color;
}
&__text { &__text {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
&:active {
background-color: @sidebar-active-color;
}
&:not(:last-child)::after { &:not(:last-child)::after {
border-bottom-width: 1px; border-bottom-width: 1px;
} }
@ -30,16 +30,23 @@
&--select { &--select {
color: @sidebar-selected-text-color; color: @sidebar-selected-text-color;
font-weight: @sidebar-selected-font-weight; font-weight: @sidebar-selected-font-weight;
border-color: @sidebar-selected-border-color;
&::after {
border-right-width: 1px;
}
&, &,
&:active { &:active {
background-color: @sidebar-selected-background-color; background-color: @sidebar-selected-background-color;
} }
&::before {
position: absolute;
top: 50%;
left: 0;
width: 4px;
height: 16px;
background-color: @sidebar-selected-border-color;
border-radius: @border-radius-md;
transform: translateY(-50%);
content: '';
}
} }
&--disabled { &--disabled {

6
src/style/var.less
View File

@ -621,7 +621,7 @@
@sidebar-line-height: 20px; @sidebar-line-height: 20px;
@sidebar-text-color: @text-color; @sidebar-text-color: @text-color;
@sidebar-disabled-text-color: @gray-5; @sidebar-disabled-text-color: @gray-5;
@sidebar-padding: 20px @padding-sm 20px @padding-xs; @sidebar-padding: 20px @padding-sm;
@sidebar-active-color: @active-color; @sidebar-active-color: @active-color;
@sidebar-background-color: @background-color; @sidebar-background-color: @background-color;
@sidebar-selected-font-weight: @font-weight-bold; @sidebar-selected-font-weight: @font-weight-bold;
@ -793,8 +793,8 @@
@tree-select-font-size: @font-size-md; @tree-select-font-size: @font-size-md;
@tree-select-nav-background-color: @background-color; @tree-select-nav-background-color: @background-color;
@tree-select-content-background-color: @white; @tree-select-content-background-color: @white;
@tree-select-nav-item-padding: @padding-sm @padding-xs @padding-sm @padding-sm; @tree-select-nav-item-padding: 14px @padding-sm;
@tree-select-item-height: 44px; @tree-select-item-height: 48px;
@tree-select-item-active-color: @red; @tree-select-item-active-color: @red;
@tree-select-item-disabled-color: @gray-5; @tree-select-item-disabled-color: @gray-5;
@tree-select-item-selected-size: 16px; @tree-select-item-selected-size: 16px;

2
src/tree-select/demo/index.vue
View File

@ -25,10 +25,12 @@
<template slot="content"> <template slot="content">
<van-image <van-image
v-if="activeIndex3 === 0" v-if="activeIndex3 === 0"
:show-loading="false"
src="https://img.yzcdn.cn/vant/apple-1.jpg" src="https://img.yzcdn.cn/vant/apple-1.jpg"
/> />
<van-image <van-image
v-if="activeIndex3 === 1" v-if="activeIndex3 === 1"
:show-loading="false"
src="https://img.yzcdn.cn/vant/apple-2.jpg" src="https://img.yzcdn.cn/vant/apple-2.jpg"
/> />
</template> </template>

5
src/tree-select/test/__snapshots__/demo.spec.js.snap
View File

@ -63,10 +63,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</a></div> </a></div>
<div class="van-tree-select__content"> <div class="van-tree-select__content">
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img"> <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img"></div>
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
<!----></i></div>
</div>
<!----> <!---->
</div> </div>
</div> </div>