blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Sku: optimize container height (#3920)

Browse Source
This commit is contained in:
neverland 2019-07-22 14:39:05 +08:00 committed by GitHub
parent 7edffe8c50
commit 9f296de376
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/sku/index.less
View File

@ -6,10 +6,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
height: 70%; height: 80%;
max-height: max-content; /* avoid androiod keyboard cover fields */ max-height: max-content; /* avoid androiod keyboard cover fields */
overflow-y: visible; overflow-y: visible;
font-size: 14px; font-size: @font-size-md;
background: @white; background: @white;
} }
@ -26,14 +26,14 @@
/* sku header */ /* sku header */
&-header { &-header {
margin-left: 15px; margin-left: @padding-md;
&__img-wrap { &__img-wrap {
position: relative; position: relative;
float: left; float: left;
width: 96px; width: 96px;
height: 96px; height: 96px;
margin: 12px 0 12px; margin: @padding-sm 0;
background: @background-color; background: @background-color;
border-radius: 4px; border-radius: 4px;
@ -51,13 +51,13 @@
&__goods-info { &__goods-info {
min-height: 96px; min-height: 96px;
padding: 12px 36px 12px 8px; padding: @padding-sm 36px @padding-sm @padding-xs;
overflow: hidden; overflow: hidden;
} }
} }
&-header-item { &-header-item {
margin-top: 8px; margin-top: @padding-xs;
color: @gray-dark; color: @gray-dark;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@ -80,7 +80,7 @@
&__price-tag { &__price-tag {
display: inline-block; display: inline-block;
margin-left: 8px; margin-left: @padding-xs;
padding: 0 5px; padding: 0 5px;
color: @red; color: @red;
font-size: 12px; font-size: 12px;
@ -92,16 +92,16 @@
&__close-icon { &__close-icon {
position: absolute; position: absolute;
top: 12px; top: @padding-sm;
right: 15px; right: @padding-md;
color: @sku-icon-gray-color; color: @sku-icon-gray-color;
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
} }
&-group-container { &-group-container {
margin-left: 15px; margin-left: @padding-md;
padding: 12px 0 2px; padding: @padding-sm 0 2px;
&--hide-soldout { &--hide-soldout {
.van-sku-row__item--disabled { .van-sku-row__item--disabled {
@ -112,14 +112,14 @@
/* sku row */ /* sku row */
&-row { &-row {
margin: 0 3px 12px 0; margin: 0 3px @padding-sm 0;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&__title { &__title {
padding-bottom: 12px; padding-bottom: @padding-sm;
} }
&__item { &__item {
@ -127,7 +127,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 40px; min-width: 40px;
margin: 0 12px 12px 0; margin: 0 @padding-sm @padding-sm 0;
color: @text-color; color: @text-color;
font-size: 13px; font-size: 13px;
line-height: 16px; line-height: 16px;
@ -144,7 +144,7 @@
} }
&-name { &-name {
padding: 8px; padding: @padding-xs;
} }
&--active { &--active {
@ -166,8 +166,8 @@
/* sku stepper */ /* sku stepper */
&-stepper { &-stepper {
&-stock { &-stock {
margin-left: 15px; margin-left: @padding-md;
padding: 12px 0; padding: @padding-sm 0;
} }
&-container { &-container {
@ -187,7 +187,7 @@
&__stock { &__stock {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: @padding-xs;
color: @gray-dark; color: @gray-dark;
font-size: 12px; font-size: 12px;
} }
@ -199,7 +199,7 @@
} }
&-messages { &-messages {
padding-bottom: 10px; padding-bottom: @padding-xs;
background: @background-color; background: @background-color;
&__image-cell { &__image-cell {
@ -226,7 +226,7 @@
float: left; float: left;
width: 64px; width: 64px;
height: 64px; height: 64px;
margin-right: 8px; margin-right: @padding-xs;
background: @sku-item-background-color; background: @sku-item-background-color;
border-radius: 2px; border-radius: 2px;