diff --git a/src/sku/index.less b/src/sku/index.less index ae560b5e9..3def8e83e 100644 --- a/src/sku/index.less +++ b/src/sku/index.less @@ -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 { diff --git a/src/style/var.less b/src/style/var.less index 6757ebde4..13bf614d9 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -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);