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. 112
      subscription-first.html
  5. 194
      subscription-last.html

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

@ -2296,45 +2296,23 @@ button{
.subscription__status--end{
color: var(--text-green);
}
.subscription__toggle{
.subscription__add{
width: 100%;
}
.subscription__toggle-header{
position: relative;
.subscription__add-header{
}
.subscription__toggle-header::after{
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{
.subscription__add-product{
align-items: start;
}
.subscription__toggle-product > *:not(:first-child){
.subscription__add-product > *:not(:first-child){
padding-top: 14px;
}
.subscription__toggle-title{
.subscription__add-title{
font-family: var(--font-family);
font-weight: 600;
line-height: 133%;
}
.subscription__toggle-wrapper{
height: 0;
overflow: hidden;
transition: all .3s;
}
.subscription__toggle-content{
.subscription__add-content{
}

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

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

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

@ -282,37 +282,37 @@
margin-top: 6px;
}
.subscription__toggle-title {
.subscription__add-title {
font-size: 20px;
}
.subscription__toggle-product{
.subscription__add-product{
flex-wrap: wrap;
}
.subscription__toggle-product > *:not(:first-child){
.subscription__add-product > *:not(:first-child){
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;
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;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
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;
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);
}
.subscription__toggle-product .cabinet-card-order-detail-main-product__content{
.subscription__add-product .cabinet-card-order-detail-main-product__content{
position: static;
margin-top: -10px;
margin-left: auto;
@ -322,11 +322,11 @@
justify-content: space-between;
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;
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;
font-size: 16px;
}

112
subscription-first.html
Unescape View File

@ -424,56 +424,54 @@
<p>СБП</p>
</div>
<div class="subscription__item">
<div class="subscription__toggle" data-js-toggle>
<div class="subscription__toggle-header" data-js-toggle-button>
<p class="subscription__toggle-title">Товары:</p>
<div class="subscription__add">
<div class="subscription__add-header">
<p class="subscription__add-title">Товары:</p>
</div>
<div class="subscription__toggle-wrapper" data-js-toggle-wrapper>
<div class="subscription__toggle-content" data-js-toggle-content>
<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">
<div class="subscription__add-content">
<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">
<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__with-what">Индейка, 2 кг</p>
</div>
<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__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>
<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>
<p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div>
<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">
<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">
<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__with-what">Индейка, 2 кг</p>
</div>
<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__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>
<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>
<p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div>
<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">
<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">
<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__with-what">Индейка, 2 кг</p>
</div>
<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__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>
<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>
<p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div>
</div>
@ -492,31 +490,29 @@
<p><span>16420 ₽ <small>/ месяц</small></span></p>
</div>
<div class="subscription__item">
<div class="subscription__toggle" data-js-toggle>
<div class="subscription__toggle-header" data-js-toggle-button>
<p class="subscription__toggle-title">Доставка:</p>
<div class="subscription__add" >
<div class="subscription__add-header">
<p class="subscription__add-title">Доставка:</p>
</div>
<div class="subscription__toggle-wrapper" data-js-toggle-wrapper>
<div class="subscription__toggle-content" data-js-toggle-content data-js-tabs>
<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 class="modal-form-content__line">
<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 class="subscription__add-content" data-js-tabs>
<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 class="modal-form-content__line">
<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>

194
subscription-last.html
Unescape View File

@ -424,56 +424,54 @@
<p>СБП</p>
</div>
<div class="subscription__item">
<div class="subscription__toggle" data-js-toggle>
<div class="subscription__toggle-header" data-js-toggle-button>
<p class="subscription__toggle-title">Товары:</p>
<div class="subscription__add">
<div class="subscription__add-header">
<p class="subscription__add-title">Товары:</p>
</div>
<div class="subscription__toggle-wrapper" data-js-toggle-wrapper>
<div class="subscription__toggle-content" data-js-toggle-content>
<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">
<div class="subscription__add-content">
<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">
<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__with-what">Индейка, 2 кг</p>
</div>
<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__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>
<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>
<p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div>
<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">
<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">
<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__with-what">Индейка, 2 кг</p>
</div>
<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__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>
<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>
<p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div>
<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">
<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">
<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__with-what">Индейка, 2 кг</p>
</div>
<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__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>
<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>
<p class="cabinet-card-order-detail-main-product__price">10280</p>
</div>
</div>
</div>
@ -492,77 +490,75 @@
<p><span>16420 ₽ <small>/ месяц</small></span></p>
</div>
<div class="subscription__item">
<div class="subscription__toggle" data-js-toggle>
<div class="subscription__toggle-header" data-js-toggle-button>
<p class="subscription__toggle-title">Доставка:</p>
<div class="subscription__add">
<div class="subscription__add-header">
<p class="subscription__add-title">Доставка:</p>
</div>
<div class="subscription__toggle-wrapper" data-js-toggle-wrapper>
<div class="subscription__toggle-content" data-js-toggle-content data-js-tabs>
<div class="tabs__buttons">
<button class="modal-map-control__item active" 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">До 2-х дней</p>
<p class="modal-map-control-item__price">Бесплатно</p>
</div>
<div class="subscription__add-content" data-js-tabs>
<div class="tabs__buttons">
<button class="modal-map-control__item active" 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>
</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 class="modal-map-control-item__description">
<p class="modal-map-control-item__time">До 2-х дней</p>
<p class="modal-map-control-item__price">Бесплатно</p>
</div>
</button>
</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 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>
</form>
</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>
</form>
</div>
<div class="tabs__content" 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 class="tabs__content" 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 class="modal-form-content__line">
<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 class="modal-form-content__line">
<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>

Write Preview
Loading…
Cancel
Save