Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

37
assets/css/gp-style-core.css
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;

79
assets/css/gp-style-order.css
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;
}

5
assets/img/svg/main/arrow-right-input.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 458 B

104
order.html
View File

@@ -326,8 +326,10 @@
</form>
<div class="order-contacts__delivery">
<div class="modal-map__control" data-content="modal-map__address">
<button class="modal-map-control__item">
<p class="order__title">Доставка</p>
<div class="modal-map__control modal-map__control--delivery" data-content="modal-map__address">
<button class="modal-map-control__item active">
<div class="modal-map-control-item__content">
<div class="modal-map-control-item__header">
<div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
@@ -342,7 +344,7 @@
</div>
</button>
<button class="modal-map-control__item active">
<button class="modal-map-control__item ">
<div class="modal-map-control-item__content">
<div class="modal-map-control-item__header">
<div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
@@ -359,11 +361,69 @@
</div>
<div class="modal-map__address">
<div class="remote-control__item">
1
</div>
<div class="remote-control__item active">
2
<div class="order-contacts-deliver__item">
<div class="modal-form-content-line__element modal-form-content-line__element--arrow">
<label for="firstname" class="label-name">Пункт выдачи</label>
<input id="firstname" class="form__input form__input--grey" type="text" name="name" placeholder="Выберите пункт выдачи" required="" readonly>
</div>
</div>
</div>
<div class="remote-control__item">
<div class="order-contacts-deliver__item">
<div class="modal-form-content-line__element modal-form-content-line__element--arrow">
<label for="firstname" class="label-name">Адрес доставки</label>
<input id="firstname" class="form__input form__input--grey" type="text" name="name" placeholder="Выберите адрес доставки" required="" readonly>
</div>
</div>
<div class="order-contacts-deliver__item">
<div class="order-contacts-deliver__date">
<div class="form-input__radio remote-control__item active">
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">2 марта с 10-18 часов</p>
<p class="form-input-radio__price">
350
</p>
</div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">2 марта с 18-22 часов</p>
<p class="form-input-radio__price">
350
</p>
</div>
<div class="form-input-radio__item">
<div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div>
</div>
<p class="form-input-radio__title">3 марта с 10-18 часов</p>
<p class="form-input-radio__price">
350
</p>
</div>
<input type="text" value="Малыш (от 0 до 1 года)" class="form-input-radio__input">
</div>
</div>
</div>
<div class="order-contacts-deliver__item">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Комментарий для доставки</label>
<textarea id="firstname" class="form__input form__input--textarea-72 form__input--grey" type="text" name="name" placeholder="Для служьы доставки" required="" ></textarea>
</div>
</div>
</div>
</div>
</div>
@@ -436,10 +496,38 @@
<div class="order-your__calculation">
<form action="" class="order-your__promo">
<input id="firstname" class="form__input order-your-promo__input" type="text" name="name" placeholder="Промокод" required="">
<input id="firstname" class="form__input form__input--grey" type="text" name="name" placeholder="Промокод" required="">
<input type="submit" value="Применить" class="button button--white button--red-48-px active order-your-promo__button">
</form>
<div class="order-your-calculation__item">
<p class="order-your-calculation__title">Товары</p>
<p class="order-your-calculation__value order-your-calculation__value--price">10560</p>
</div>
<div class="order-your-calculation__item">
<p class="order-your-calculation__title">Скидка</p>
<p class="order-your-calculation__value order-your-calculation__value--price order-your-calculation__value--discount">1280</p>
</div>
<div class="order-your-calculation__item">
<p class="order-your-calculation__title">Доставка</p>
<p class="order-your-calculation__description">Введите адрес доставки</p>
</div>
<hr class="order-your-calculation__line">
<div class="order-your-calculation__item">
<p class="order-your-calculation__result">Итого</p>
<p class="order-your-calculation__result order-your-calculation__value--price">8960</p>
</div>
<div class="order-your-calculation__submit">
<button class="button button--gradient button--high button--100-perc">
Оплатить
</button>
</div>
</div>
</div>
</div>