сверстал две вариации order

This commit is contained in:
Kirill Pet
2024-11-15 21:01:36 +03:00
parent 2c3f548e83
commit a69899b2be
4 changed files with 212 additions and 13 deletions

View File

@@ -105,6 +105,7 @@
--text-0: #000;
--text-3: #333;
--text-6: #666;
--text-9: #999;
/* background */
--background-white: #fff;
@@ -402,10 +403,19 @@ button{
.form__input::placeholder{
color: var(--text-grey);
}
.form__input--grey{
border-color: var(--background-9);
}
.form__input--textarea{
height: 96px;
resize: none;
}
.form__input--textarea-72{
height: 72px;
resize: none;
overflow: hidden;
}
.form__input--center{
text-align: center;
}
@@ -786,6 +796,18 @@ button{
line-height: 120%;
color: var(--text-dark);
}
.form-input-radio__price{
margin-left: auto;
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.form-input-radio__price::after{
content: ' ₽';
}
.form-input-radio__input{
display: none;
}
@@ -1808,6 +1830,18 @@ button{
.modal-form-content-line__element{
position: relative;
}
.modal-form-content-line__element--arrow::after{
content: '';
position: absolute;
right: 16px;
bottom: 16px;
width: 16px;
height: 16px;
background-image: url(../img/svg/main/arrow-right-input.svg);
}
.modal-form-content__line--two .modal-form-content-line__element{
width: calc(50% - 12px);
}
@@ -1872,6 +1906,9 @@ button{
display: flex;
}
.modal-map__control--delivery{
margin-top: 12px;
}
.modal-map-control__item{
margin: 12px;

View File

@@ -27,11 +27,27 @@
.order-contacts__delivery{
margin-top: 47.5px;
padding-top: 9.5px;
padding-top: 48px;
border-top: 1px solid var(--background-grey);
}
.order-contacts-deliver__item{
margin-top: 24px;
}
.order-contacts-deliver__date{
padding: 8px;
border-radius: 24px;
background: var(--background-grey);
}
.order-contacts-deliver__date .form-input-radio__item{
margin-top: 24px;
}
.order-contacts-deliver__date .form-input-radio__item:first-child{
margin-top: 0;
}
.order__your{
width: calc(50% - 0.5px);
@@ -109,10 +125,63 @@
.order-your__promo{
display: flex;
}
.order-your-promo__input{
border-color: var(--background-9);
}
.order-your-promo__button{
margin-left: 8px;
}
.order-your__
.order-your-calculation__item{
margin-top: 24px;
display: flex;
justify-content: space-between;
}
.order-your-calculation__title{
font-family: var(--font-family);
font-weight: 500;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.order-your-calculation__value{
font-family: var(--font-family);
font-weight: 700;
font-size: 20px;
line-height: 200%;
text-transform: uppercase;
text-align: right;
color: var(--text-black);
}
.order-your-calculation__value--price::after{
content: ' ₽';
}
.order-your-calculation__value--discount{
background: var(--gradient-red);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.order-your-calculation__value--discount::before{
content: '- ';
}
.order-your-calculation__description{
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 133%;
text-align: right;
color: var(--text-9);
}
.order-your-calculation__line{
margin-top: 23px;
border: 1px solid var(--background-9);
}
.order-your-calculation__result{
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
line-height: 117%;
text-transform: uppercase;
color: var(--text-black);
}
.order-your-calculation__submit{
margin-top: 48px;
}

View File

@@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 8.24268H3" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 8.24268L9.75736 12.4853" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 8.24268L9.75736 4.00003" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 458 B