mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Sku: use currentColor in the background style of price tag and sku item (#3946)
This commit is contained in:
parent
42afafac2b
commit
43e0bd0123
@ -79,15 +79,27 @@
|
||||
}
|
||||
|
||||
&__price-tag {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: @padding-xs;
|
||||
padding: 0 5px;
|
||||
overflow: hidden;
|
||||
color: @red;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 16px;
|
||||
vertical-align: middle;
|
||||
background-color: @sku-price-tag-color;
|
||||
border-radius: 8px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: currentColor;
|
||||
opacity: .1;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&__close-icon {
|
||||
@ -123,19 +135,31 @@
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
margin: 0 @padding-sm @padding-sm 0;
|
||||
overflow: hidden;
|
||||
color: @text-color;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
vertical-align: middle;
|
||||
background: @sku-item-background-color;
|
||||
border-radius: 4px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: @sku-item-background-color;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&-img {
|
||||
z-index: 1;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 4px 0 4px 4px;
|
||||
@ -144,12 +168,17 @@
|
||||
}
|
||||
|
||||
&-name {
|
||||
z-index: 1;
|
||||
padding: @padding-xs;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: @red;
|
||||
background: @sku-item-active-background-color;
|
||||
|
||||
&::before {
|
||||
background: currentColor;
|
||||
opacity: .1;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
|
@ -653,8 +653,6 @@
|
||||
@uploader-file-name-text-color: @gray-darker;
|
||||
|
||||
// Sku
|
||||
@sku-price-tag-color: rgba(227, 20, 54, .1);
|
||||
@sku-item-background-color: #f7f8fa;
|
||||
@sku-item-active-background-color: rgba(227, 20, 54, .1);
|
||||
@sku-icon-gray-color: #dcdde0;
|
||||
@sku-upload-mask-color: rgba(50, 50, 51, .8);
|
||||
|
Loading…
x
Reference in New Issue
Block a user