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

[improvement] Sku: use currentColor in the background style of price tag and sku item (#3946)

Browse Source
This commit is contained in:
codpoe 2019-07-24 15:17:04 +08:00 committed by neverland
parent 42afafac2b
commit 43e0bd0123
2 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/sku/index.less
View File

@ -79,15 +79,27 @@
} }
&__price-tag { &__price-tag {
position: relative;
display: inline-block; display: inline-block;
margin-left: @padding-xs; margin-left: @padding-xs;
padding: 0 5px; padding: 0 5px;
overflow: hidden;
color: @red; color: @red;
font-size: @font-size-sm; font-size: @font-size-sm;
line-height: 16px; line-height: 16px;
vertical-align: middle; vertical-align: middle;
background-color: @sku-price-tag-color;
border-radius: 8px; border-radius: 8px;
&::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: currentColor;
opacity: .1;
content: '';
}
} }
&__close-icon { &__close-icon {
@ -123,19 +135,31 @@
} }
&__item { &__item {
position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 40px; min-width: 40px;
margin: 0 @padding-sm @padding-sm 0; margin: 0 @padding-sm @padding-sm 0;
overflow: hidden;
color: @text-color; color: @text-color;
font-size: 13px; font-size: 13px;
line-height: 16px; line-height: 16px;
vertical-align: middle; vertical-align: middle;
background: @sku-item-background-color;
border-radius: 4px; border-radius: 4px;
&::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: @sku-item-background-color;
content: '';
}
&-img { &-img {
z-index: 1;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin: 4px 0 4px 4px; margin: 4px 0 4px 4px;
@ -144,12 +168,17 @@
} }
&-name { &-name {
z-index: 1;
padding: @padding-xs; padding: @padding-xs;
} }
&--active { &--active {
color: @red; color: @red;
background: @sku-item-active-background-color;
&::before {
background: currentColor;
opacity: .1;
}
} }
&--disabled { &--disabled {

2
src/style/var.less
View File

@ -653,8 +653,6 @@
@uploader-file-name-text-color: @gray-darker; @uploader-file-name-text-color: @gray-darker;
// Sku // Sku
@sku-price-tag-color: rgba(227, 20, 54, .1);
@sku-item-background-color: #f7f8fa; @sku-item-background-color: #f7f8fa;
@sku-item-active-background-color: rgba(227, 20, 54, .1);
@sku-icon-gray-color: #dcdde0; @sku-icon-gray-color: #dcdde0;
@sku-upload-mask-color: rgba(50, 50, 51, .8); @sku-upload-mask-color: rgba(50, 50, 51, .8);