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

удалил toggle на стрицых подписки

Browse Source
This commit is contained in:
Kirill Pet
2025-05-03 20:24:53 +03:00
parent f3eedee26f
commit 6ead69e180
5 changed files with 178 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
assets/css/gp-style-core.css
View File

@@ -2296,45 +2296,23 @@ button{
.subscription__status--end{ .subscription__status--end{
color: var(--text-green); color: var(--text-green);
} }
.subscription__toggle{ .subscription__add{
width: 100%; width: 100%;
} }
.subscription__toggle-header{ .subscription__add-header{
position: relative;
} }
.subscription__toggle-header::after{ .subscription__add-product{
content: '';
position: absolute;
top: 3.5px;
right: 0;
width: 24px;
aspect-ratio: 1;
background-image: url(../img/svg/main/black-x.svg);
transform: rotate(45deg);
transition: transform .2s;
pointer-events: none;
}
.subscription__toggle-header.active::after{
transform: rotate(0deg);
}
.subscription__toggle-product{
align-items: start; align-items: start;
} }
.subscription__toggle-product > *:not(:first-child){ .subscription__add-product > *:not(:first-child){
padding-top: 14px; padding-top: 14px;
} }
.subscription__toggle-title{ .subscription__add-title{
font-family: var(--font-family); font-family: var(--font-family);
font-weight: 600; font-weight: 600;
line-height: 133%; line-height: 133%;
} }
.subscription__toggle-wrapper{ .subscription__add-content{
height: 0;
overflow: hidden;
transition: all .3s;
}
.subscription__toggle-content{
} }

23
assets/css/gp-style-desktop.css
View File

@@ -1955,42 +1955,39 @@ main{
.subscription__item{ .subscription__item{
font-size: 20px; font-size: 20px;
} }
.subscription__toggle{ .subscription__add{
color: var(--text-black); color: var(--text-black);
} }
.subscription__toggle-header{ .subscription__add-header{
} }
.subscription__toggle-title{ .subscription__add-title{
font-size: 24px; font-size: 24px;
} }
.subscription__toggle-wrapper{ .subscription__add-content{
}
.subscription__toggle-content{
padding: 24px 0 12px 0; padding: 24px 0 12px 0;
} }
.subscription__toggle-product{ .subscription__add-product{
align-items: start; align-items: start;
} }
.subscription__toggle-product > *:nth-child(3){ .subscription__add-product > *:nth-child(3){
margin-left: auto; margin-left: auto;
align-items: center; align-items: center;
} }
.subscription__toggle .cabinet-card-order-detail-main-product-description__what { .subscription__add .cabinet-card-order-detail-main-product-description__what {
font-size: 16px; font-size: 16px;
line-height: 125%; line-height: 125%;
} }
.subscription__toggle .cabinet-card-order-detail-main-product-description__with-what { .subscription__add .cabinet-card-order-detail-main-product-description__with-what {
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
} }
.subscription__toggle .cabinet-card-order-detail-main-product__count{ .subscription__add .cabinet-card-order-detail-main-product__count{
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 100%; line-height: 100%;
} }
.subscription__toggle .cabinet-card-order-detail-main-product__price{ .subscription__add .cabinet-card-order-detail-main-product__price{
font-weight: 500; font-weight: 500;
font-size: 20px; font-size: 20px;
line-height: 120%; line-height: 120%;

20
assets/css/gp-style-mobile.css
View File

@@ -282,37 +282,37 @@
margin-top: 6px; margin-top: 6px;
} }
.subscription__toggle-title { .subscription__add-title {
font-size: 20px; font-size: 20px;
} }
.subscription__toggle-product{ .subscription__add-product{
flex-wrap: wrap; flex-wrap: wrap;
} }
.subscription__toggle-product > *:not(:first-child){ .subscription__add-product > *:not(:first-child){
padding-top: 0; padding-top: 0;
} }
.subscription__toggle-product .cabinet-card-order-detail-main-product__img{ .subscription__add-product .cabinet-card-order-detail-main-product__img{
width: 73px; width: 73px;
height: 66px; height: 66px;
} }
.subscription__toggle-product .cabinet-card-order-detail-main-product-description__what{ .subscription__add-product .cabinet-card-order-detail-main-product-description__what{
font-size: 12px; font-size: 12px;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
.subscription__toggle-product .cabinet-card-order-detail-main-product-description__with-what{ .subscription__add-product .cabinet-card-order-detail-main-product-description__with-what{
margin-top: 8px; margin-top: 8px;
font-size: 12px; font-size: 12px;
} }
.subscription__toggle-product .cabinet-card-order-detail-main-product__description { .subscription__add-product .cabinet-card-order-detail-main-product__description {
width: calc(100% - 73px); width: calc(100% - 73px);
} }
.subscription__toggle-product .cabinet-card-order-detail-main-product__content{ .subscription__add-product .cabinet-card-order-detail-main-product__content{
position: static; position: static;
margin-top: -10px; margin-top: -10px;
margin-left: auto; margin-left: auto;
@@ -322,11 +322,11 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.subscription__toggle-product .cabinet-card-order-detail-main-product__count{ .subscription__add-product .cabinet-card-order-detail-main-product__count{
position: static; position: static;
font-size: 12px; font-size: 12px;
} }
.subscription__toggle-product .cabinet-card-order-detail-main-product__price{ .subscription__add-product .cabinet-card-order-detail-main-product__price{
position: static; position: static;
font-size: 16px; font-size: 16px;
} }

110
subscription-first.html
View File

@@ -424,56 +424,54 @@
<p>СБП</p> <p>СБП</p>
</div> </div>
<div class="subscription__item"> <div class="subscription__item">
<div class="subscription__toggle" data-js-toggle> <div class="subscription__add">
<div class="subscription__toggle-header" data-js-toggle-button> <div class="subscription__add-header">
<p class="subscription__toggle-title">Товары:</p> <p class="subscription__add-title">Товары:</p>
</div> </div>
<div class="subscription__toggle-wrapper" data-js-toggle-wrapper> <div class="subscription__add-content">
<div class="subscription__toggle-content" data-js-toggle-content> <div class="cabinet-card-order-detail-main__product subscription__add-product">
<div class="cabinet-card-order-detail-main__product subscription__toggle-product"> <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
<div class="cabinet-card-order-detail-main-product__description"> <div class="cabinet-card-order-detail-main-product__description">
<p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p> <p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p> <p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
</div>
<div class="cabinet-card-order-detail-main-product__content">
<p class="cabinet-card-order-detail-main-product__count">3</p>
<p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div> </div>
<div class="cabinet-card-order-detail-main__product subscription__toggle-product"> <div class="cabinet-card-order-detail-main-product__content">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img"> <p class="cabinet-card-order-detail-main-product__count">3</p>
<div class="cabinet-card-order-detail-main-product__description"> <p class="cabinet-card-order-detail-main-product__price">10280</p>
<p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p> </div>
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p> </div>
</div>
<div class="cabinet-card-order-detail-main-product__content"> <div class="cabinet-card-order-detail-main__product subscription__add-product">
<p class="cabinet-card-order-detail-main-product__count">3</p> <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
<p class="cabinet-card-order-detail-main-product__price">10280</p> <div class="cabinet-card-order-detail-main-product__description">
</div> <p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
</div> </div>
<div class="cabinet-card-order-detail-main__product subscription__toggle-product"> <div class="cabinet-card-order-detail-main-product__content">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img"> <p class="cabinet-card-order-detail-main-product__count">3</p>
<div class="cabinet-card-order-detail-main-product__description"> <p class="cabinet-card-order-detail-main-product__price">10280</p>
<p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p> </div>
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p> </div>
</div>
<div class="cabinet-card-order-detail-main-product__content"> <div class="cabinet-card-order-detail-main__product subscription__add-product">
<p class="cabinet-card-order-detail-main-product__count">3</p> <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
<p class="cabinet-card-order-detail-main-product__price">10280</p> <div class="cabinet-card-order-detail-main-product__description">
</div> <p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
</div>
<div class="cabinet-card-order-detail-main-product__content">
<p class="cabinet-card-order-detail-main-product__count">3</p>
<p class="cabinet-card-order-detail-main-product__price">10280</p>
</div> </div>
</div> </div>
</div> </div>
@@ -492,31 +490,29 @@
<p><span>16420 ₽ <small>/ месяц</small></span></p> <p><span>16420 ₽ <small>/ месяц</small></span></p>
</div> </div>
<div class="subscription__item"> <div class="subscription__item">
<div class="subscription__toggle" data-js-toggle> <div class="subscription__add" >
<div class="subscription__toggle-header" data-js-toggle-button> <div class="subscription__add-header">
<p class="subscription__toggle-title">Доставка:</p> <p class="subscription__add-title">Доставка:</p>
</div> </div>
<div class="subscription__toggle-wrapper" data-js-toggle-wrapper> <div class="subscription__add-content" data-js-tabs>
<div class="subscription__toggle-content" data-js-toggle-content data-js-tabs> <form action="">
<form action=""> <div class="modal-form-content__line">
<div class="modal-form-content__line"> <div class="modal-form-content-line__element">
<div class="modal-form-content-line__element"> <label for="firstname" class="label-name modal-form-content-line__element--arrow">Адрес доставки</label>
<label for="firstname" class="label-name modal-form-content-line__element--arrow">Адрес доставки</label> <input id="firstname" class="form__input form-open" type="text" name="address" placeholder="Начните вводить адрес" required="" data-form="form-data">
<input id="firstname" class="form__input form-open" type="text" name="address" placeholder="Начните вводить адрес" required="" data-form="form-data"> <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div>
</div> </div>
</div>
<div class="modal-form-content__line"> <div class="modal-form-content__line">
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Комментарий для доставки</label> <label for="firstname" class="label-name">Комментарий для доставки</label>
<textarea id="firstname" class="form__input form__input--textarea-72" type="text" name="name" placeholder="Для служьы доставки"></textarea> <textarea id="firstname" class="form__input form__input--textarea-72" type="text" name="name" placeholder="Для служьы доставки"></textarea>
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span> <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div>
</div> </div>
</form> </div>
</div> </form>
</div> </div>
</div> </div>
</div> </div>

190
subscription-last.html
View File

@@ -424,56 +424,54 @@
<p>СБП</p> <p>СБП</p>
</div> </div>
<div class="subscription__item"> <div class="subscription__item">
<div class="subscription__toggle" data-js-toggle> <div class="subscription__add">
<div class="subscription__toggle-header" data-js-toggle-button> <div class="subscription__add-header">
<p class="subscription__toggle-title">Товары:</p> <p class="subscription__add-title">Товары:</p>
</div> </div>
<div class="subscription__toggle-wrapper" data-js-toggle-wrapper> <div class="subscription__add-content">
<div class="subscription__toggle-content" data-js-toggle-content> <div class="cabinet-card-order-detail-main__product subscription__add-product">
<div class="cabinet-card-order-detail-main__product subscription__toggle-product"> <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
<div class="cabinet-card-order-detail-main-product__description"> <div class="cabinet-card-order-detail-main-product__description">
<p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p> <p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p> <p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
</div>
<div class="cabinet-card-order-detail-main-product__content">
<p class="cabinet-card-order-detail-main-product__count">3</p>
<p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div> </div>
<div class="cabinet-card-order-detail-main__product subscription__toggle-product"> <div class="cabinet-card-order-detail-main-product__content">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img"> <p class="cabinet-card-order-detail-main-product__count">3</p>
<div class="cabinet-card-order-detail-main-product__description"> <p class="cabinet-card-order-detail-main-product__price">10280</p>
<p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p> </div>
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p> </div>
</div>
<div class="cabinet-card-order-detail-main-product__content"> <div class="cabinet-card-order-detail-main__product subscription__add-product">
<p class="cabinet-card-order-detail-main-product__count">3</p> <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
<p class="cabinet-card-order-detail-main-product__price">10280</p> <div class="cabinet-card-order-detail-main-product__description">
</div> <p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
</div> </div>
<div class="cabinet-card-order-detail-main__product subscription__toggle-product"> <div class="cabinet-card-order-detail-main-product__content">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img"> <p class="cabinet-card-order-detail-main-product__count">3</p>
<div class="cabinet-card-order-detail-main-product__description"> <p class="cabinet-card-order-detail-main-product__price">10280</p>
<p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p> </div>
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p> </div>
</div>
<div class="cabinet-card-order-detail-main-product__content"> <div class="cabinet-card-order-detail-main__product subscription__add-product">
<p class="cabinet-card-order-detail-main-product__count">3</p> <img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
<p class="cabinet-card-order-detail-main-product__price">10280</p> <div class="cabinet-card-order-detail-main-product__description">
</div> <p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
</div>
<div class="cabinet-card-order-detail-main-product__content">
<p class="cabinet-card-order-detail-main-product__count">3</p>
<p class="cabinet-card-order-detail-main-product__price">10280</p>
</div> </div>
</div> </div>
</div> </div>
@@ -492,77 +490,75 @@
<p><span>16420 ₽ <small>/ месяц</small></span></p> <p><span>16420 ₽ <small>/ месяц</small></span></p>
</div> </div>
<div class="subscription__item"> <div class="subscription__item">
<div class="subscription__toggle" data-js-toggle> <div class="subscription__add">
<div class="subscription__toggle-header" data-js-toggle-button> <div class="subscription__add-header">
<p class="subscription__toggle-title">Доставка:</p> <p class="subscription__add-title">Доставка:</p>
</div> </div>
<div class="subscription__toggle-wrapper" data-js-toggle-wrapper> <div class="subscription__add-content" data-js-tabs>
<div class="subscription__toggle-content" data-js-toggle-content data-js-tabs> <div class="tabs__buttons">
<div class="tabs__buttons"> <button class="modal-map-control__item active" data-js-tabs-button>
<button class="modal-map-control__item active" data-js-tabs-button> <div class="modal-map-control-item__content">
<div class="modal-map-control-item__content"> <div class="modal-map-control-item__header">
<div class="modal-map-control-item__header"> <div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
<div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div> <p class="modal-map-control-item__title">
<p class="modal-map-control-item__title"> Пункт выдачи
Пункт выдачи </p>
</p>
</div>
<div class="modal-map-control-item__description">
<p class="modal-map-control-item__time">До 2-х дней</p>
<p class="modal-map-control-item__price">Бесплатно</p>
</div>
</div> </div>
</button> <div class="modal-map-control-item__description">
<p class="modal-map-control-item__time">До 2-х дней</p>
<p class="modal-map-control-item__price">Бесплатно</p>
</div>
</div>
</button>
<button class="modal-map-control__item" data-js-tabs-button> <button class="modal-map-control__item" data-js-tabs-button>
<div class="modal-map-control-item__content"> <div class="modal-map-control-item__content">
<div class="modal-map-control-item__header"> <div class="modal-map-control-item__header">
<div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div> <div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
<p class="modal-map-control-item__title"> <p class="modal-map-control-item__title">
Курьером Курьером
</p> </p>
</div> </div>
<div class="modal-map-control-item__description"> <div class="modal-map-control-item__description">
<p class="modal-map-control-item__time">До 3-х дней</p> <p class="modal-map-control-item__time">До 3-х дней</p>
<p class="modal-map-control-item__price">От 159 рублей</p> <p class="modal-map-control-item__price">От 159 рублей</p>
</div>
</div>
</button>
</div>
<div class="tabs__content-wrap">
<div class="tabs__content active" data-js-tabs-content>
<form action="">
<div class="modal-form-content__line">
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name modal-form-content-line__element--arrow">Пункт выдачи</label>
<input id="firstname" class="form__input form-open" type="text" name="address" placeholder="Начните вводить адрес" required="" data-form="form-data">
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div> </div>
</div> </div>
</button> </form>
</div> </div>
<div class="tabs__content-wrap"> <div class="tabs__content" data-js-tabs-content>
<div class="tabs__content active" data-js-tabs-content> <form action="">
<form action=""> <div class="modal-form-content__line">
<div class="modal-form-content__line"> <div class="modal-form-content-line__element">
<div class="modal-form-content-line__element"> <label for="firstname" class="label-name modal-form-content-line__element--arrow">Адрес доставки</label>
<label for="firstname" class="label-name modal-form-content-line__element--arrow">Пункт выдачи</label> <input id="firstname" class="form__input form-open" type="text" name="address" placeholder="Начните вводить адрес" required="" data-form="form-data">
<input id="firstname" class="form__input form-open" type="text" name="address" placeholder="Начните вводить адрес" required="" data-form="form-data"> <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div>
</div> </div>
</form> </div>
</div>
<div class="tabs__content" data-js-tabs-content> <div class="modal-form-content__line">
<form action=""> <div class="modal-form-content-line__element">
<div class="modal-form-content__line"> <label for="firstname" class="label-name">Комментарий для доставки</label>
<div class="modal-form-content-line__element"> <textarea id="firstname" class="form__input form__input--textarea-72" type="text" name="name" placeholder="Для служьы доставки"></textarea>
<label for="firstname" class="label-name modal-form-content-line__element--arrow">Адрес доставки</label> <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
<input id="firstname" class="form__input form-open" type="text" name="address" placeholder="Начните вводить адрес" required="" data-form="form-data">
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div>
</div> </div>
</div>
<div class="modal-form-content__line"> </form>
<div class="modal-form-content-line__element">
<label for="firstname" class="label-name">Комментарий для доставки</label>
<textarea id="firstname" class="form__input form__input--textarea-72" type="text" name="name" placeholder="Для служьы доставки"></textarea>
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
</div>
</div>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>