diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 49c9410..6b12ec9 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -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; diff --git a/assets/css/gp-style-order.css b/assets/css/gp-style-order.css index 3a228c7..f834b17 100644 --- a/assets/css/gp-style-order.css +++ b/assets/css/gp-style-order.css @@ -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__ \ No newline at end of file +.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; +} \ No newline at end of file diff --git a/assets/img/svg/main/arrow-right-input.svg b/assets/img/svg/main/arrow-right-input.svg new file mode 100644 index 0000000..a101dd0 --- /dev/null +++ b/assets/img/svg/main/arrow-right-input.svg @@ -0,0 +1,5 @@ + diff --git a/order.html b/order.html index 416895e..77dd201 100644 --- a/order.html +++ b/order.html @@ -326,8 +326,10 @@