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

[improvement] GoodsAction: update style (#3782)

Browse Source
This commit is contained in:
neverland 2019-07-09 11:15:33 +08:00 committed by GitHub
parent 6bc836beab
commit dac3bd3997
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/goods-action-icon/index.less
View File

@ -6,16 +6,12 @@
justify-content: center;
min-width: @goods-action-icon-width;
height: @goods-action-icon-height;
color: @goods-action-icon-color;
color: @goods-action-icon-text-color;
font-size: @goods-action-icon-font-size;
line-height: 1;
text-align: center;
background-color: @white;
&:not(:first-child)::after {
border-left-width: 1px;
}
&:active {
background-color: @goods-action-icon-active-color;
}
@ -23,6 +19,7 @@
&__icon {
width: 1em;
margin: 0 auto 5px;
color: @goods-action-icon-color;
font-size: @goods-action-icon-size;
}
}

2
src/goods-action-icon/index.tsx
View File

@ -35,7 +35,7 @@ function GoodsActionIcon(
<div
role="button"
tabindex="0"
class={[bem(), 'van-hairline']}
class={bem()}
onClick={onClick}
{...inherit(ctx)}
>

10
src/goods-action/test/__snapshots__/demo.spec.js.snap
View File

@ -4,12 +4,12 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-goods-action">
<div role="button" tabindex="0" class="van-goods-action-icon van-hairline">
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
<!---->
</div>客服
</div>
<div role="button" tabindex="0" class="van-goods-action-icon van-hairline">
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
<!---->
</div>购物车
@ -18,17 +18,17 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-goods-action">
<div role="button" tabindex="0" class="van-goods-action-icon van-hairline">
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
<!---->
</div>客服
</div>
<div role="button" tabindex="0" class="van-goods-action-icon van-hairline">
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
<div class="van-info">5</div>
</div>购物车
</div>
<div role="button" tabindex="0" class="van-goods-action-icon van-hairline">
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
<!---->
</div>店铺

4
src/goods-action/test/__snapshots__/index.spec.js.snap
View File

@ -3,7 +3,7 @@
exports[`Button render default slot 1`] = `<button class="van-button van-button--default van-button--large van-button--square van-goods-action-button"><span class="van-button__text">Default Content</span></button>`;
exports[`Icon render default slot 1`] = `
<div role="button" tabindex="0" class="van-goods-action-icon van-hairline">
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-icon van-icon-undefined van-goods-action-icon__icon">
<!---->
</div>Default Content
@ -11,7 +11,7 @@ exports[`Icon render default slot 1`] = `
`;
exports[`Icon render icon slot 1`] = `
<div role="button" tabindex="0" class="van-goods-action-icon van-hairline">
<div role="button" tabindex="0" class="van-goods-action-icon">
<div class="van-goods-action-icon__icon">Custom Icon</div>Text
</div>
`;

7
src/style/var.less
View File

@ -252,12 +252,13 @@
// GoodsAction
@goods-action-background-color: @white;
@goods-action-icon-width: 15%;
@goods-action-icon-width: 48px;
@goods-action-icon-height: 50px;
@goods-action-icon-color: @gray-darker;
@goods-action-icon-size: 20px;
@goods-action-icon-color: @text-color;
@goods-action-icon-size: 18px;
@goods-action-icon-font-size: 10px;
@goods-action-icon-active-color: @active-color;
@goods-action-icon-text-color: @gray-darker;
// IndexAnchor
@index-anchor-padding: 0 15px;