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

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

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 3 months ago
parent f3eedee26f
commit 6ead69e180
5 changed files with 175 additions and 208 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 34
      assets/css/gp-style-core.css
  2. 23
      assets/css/gp-style-desktop.css
  3. 20
      assets/css/gp-style-mobile.css
  4. 106
      subscription-first.html
  5. 188
      subscription-last.html

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

106
subscription-first.html
Unescape 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>
<div class="cabinet-card-order-detail-main-product__content"> <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__count">3</p>
<p class="cabinet-card-order-detail-main-product__price">10280</p> <p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div> </div>
</div>
<div class="cabinet-card-order-detail-main__product subscription__toggle-product"> <div class="cabinet-card-order-detail-main__product subscription__add-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>
<div class="cabinet-card-order-detail-main-product__content"> <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__count">3</p>
<p class="cabinet-card-order-detail-main-product__price">10280</p> <p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div> </div>
</div>
<div class="cabinet-card-order-detail-main__product subscription__toggle-product"> <div class="cabinet-card-order-detail-main__product subscription__add-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>
<div class="cabinet-card-order-detail-main-product__content"> <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__count">3</p>
<p class="cabinet-card-order-detail-main-product__price">10280</p> <p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</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>

188
subscription-last.html
Unescape 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>
<div class="cabinet-card-order-detail-main-product__content"> <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__count">3</p>
<p class="cabinet-card-order-detail-main-product__price">10280</p> <p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div> </div>
</div>
<div class="cabinet-card-order-detail-main__product subscription__toggle-product"> <div class="cabinet-card-order-detail-main__product subscription__add-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>
<div class="cabinet-card-order-detail-main-product__content"> <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__count">3</p>
<p class="cabinet-card-order-detail-main-product__price">10280</p> <p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div> </div>
</div>
<div class="cabinet-card-order-detail-main__product subscription__toggle-product"> <div class="cabinet-card-order-detail-main__product subscription__add-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>
<div class="cabinet-card-order-detail-main-product__content"> <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__count">3</p>
<p class="cabinet-card-order-detail-main-product__price">10280</p> <p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</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>
<button class="modal-map-control__item" data-js-tabs-button> <p class="modal-map-control-item__price">Бесплатно</p>
<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>
<p class="modal-map-control-item__title">
Курьером
</p>
</div>
<div class="modal-map-control-item__description">
<p class="modal-map-control-item__time">До 3-х дней</p>
<p class="modal-map-control-item__price">От 159 рублей</p>
</div>
</div> </div>
</button> </div>
</div> </button>
<button class="modal-map-control__item" data-js-tabs-button>
<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>
<p class="modal-map-control-item__title">
Курьером
</p>
</div>
<div class="modal-map-control-item__description">
<p class="modal-map-control-item__time">До 3-х дней</p>
<p class="modal-map-control-item__price">От 159 рублей</p>
</div>
</div>
</button>
</div>
<div class="tabs__content-wrap"> <div class="tabs__content-wrap">
<div class="tabs__content active" 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> </form>
</div>
<div class="tabs__content" data-js-tabs-content> <div class="tabs__content" 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>
</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>

Write Preview
Loading…
Cancel
Save