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

сделал модальные окна без форм

Browse Source
This commit is contained in:
Kirill Pet
2024-10-23 22:53:45 +03:00
parent 7979a4da6c
commit bc0c849ccd
10 changed files with 1375 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -929,6 +929,8 @@ button{
top: 0;
left: 0;
padding: 20px;
width: 100%;
height: 100%;
@@ -939,6 +941,10 @@ button{
opacity: 0;
transition: opacity .2s ease-out;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}
.modal.active{
opacity: 1;
@@ -1205,6 +1211,101 @@ button{
background-color: var(--background-black);
border-radius: 2px;
}
.notification{
padding: 24px;
border-radius: 20px;
position: relative;
}
.notification--white{
border: 1px solid var(--background-black);
background: var(--background-white);
}
.notification--green-gradient{
background: var(--gradient-blue);
}
.notification--width-584{
width: 584px;
}
.notification__close{
position: absolute;
top: 24px;
right: 24px;
width: 24px;
aspect-ratio: 1;
border: none;
background: none;
background-image: url(../img/svg/main/black-x.svg);
background-repeat: no-repeat;
background-size: 24px;
background-position: center;
transition: opacity .2s ease-out;
}
.notification__close--white{
background-image: url(../img/svg/main/white-x.svg);
}
.notification__close:hover{
opacity: .8;
}
.notification__title{
padding-right: 50px;
font-family: var(--font-family);
font-weight: 700;
font-size: 26px;
line-height: 123%;
text-transform: uppercase;
color: var(--text-dark);
}
.notification__text--center{
text-align: center;
}
.notification__text--center-pc{
text-align: center;
}
.notification__title--green-gradient{
background: var(--gradient-blue);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.notification__title--white{
color: var(--text-white);
}
.notification__element{
margin-top: 24px;
}
.notification__element--center{
display: flex;
justify-content: center;
}
.notification__element--top-40{
margin-top: 40px;
}
.notification__text{
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.notification__text--weight-500{
font-weight: 500;
}
.notification__text--white{
color: var(--text-white);
}
.notification__img{
width: 100%;
height: 360px;
object-fit: contain;
}
/* modal */
/* toggle */

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

@@ -1691,7 +1691,10 @@ main{
.cabinet-card-order-status__pointer--red{
color: var(--text-red);
}
.cabinet-card-order__block-detail{}
.cabinet-card-order__block-detail{
height: 0;
overflow: hidden;
}
.cabinet-card-order__detail{
padding-top: 24px;
}
@@ -1837,6 +1840,15 @@ main{
width: 106px;
height: 96px;
}
.cabinet-card__download{
margin-top: 32px;
}
.cabinet-card__order.active .cabinet-card-order__detail-short{
opacity: 0;
}
.cabinet-card__order.active .cabinet-card-order__open-detail::after{
transform: rotate(180deg);
}
/* .cabinet-card-no-orders__ */
/* cabinet */

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

@@ -53,6 +53,21 @@
.modal-basket__item--return .modal-basket-item__title{
margin-right: auto;
}
.notification--width-584{
width: 100%;
}
.notification__title{
font-size: 20px;
}
.notification__text--center-pc{
text-align: start;
}
.notification__img{
height: 360px;
}
.notification__title{
padding-right: 96px;
}
/* modal */
/* footer */

BIN
assets/img/modal/about_slider.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

3
assets/img/svg/main/white-x.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.62404 2.77566C3.38807 2.54301 3.00683 2.54436 2.77252 2.77867C2.53821 3.01299 2.53954 3.39154 2.77551 3.62419L6.90259 7.6933L2.77551 11.7624C2.53954 11.9951 2.53821 12.3736 2.77252 12.6079C3.00684 12.8422 3.38807 12.8436 3.62404 12.6109L7.75716 8.53587L11.8903 12.6109C12.1262 12.8436 12.5075 12.8422 12.7418 12.6079C12.9761 12.3736 12.9748 11.995 12.7388 11.7624L8.61173 7.6933L12.7388 3.62421C12.9748 3.39156 12.9761 3.01301 12.7418 2.77869C12.5075 2.54438 12.1262 2.54303 11.8903 2.77568L7.75716 6.85073L3.62404 2.77566Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 695 B

325
new.html Normal file
View File

File diff suppressed because one or more lines are too long

254
notification-decorated.html Normal file
View File

File diff suppressed because one or more lines are too long

250
notification-sub.html Normal file
View File

File diff suppressed because one or more lines are too long

325
notification.html Normal file
View File

File diff suppressed because one or more lines are too long

89
registration.html
View File

@@ -454,6 +454,89 @@
</div>
</div>
<div class="cabinet-card cabinet-card--grey">
<div class="cabinet-card__content">
<div class="cabinet-card__order active">
<div class="cabinet-card-order__header">
<div class="cabinet-card-order__main">
<p class="cabinet-card-order-main__date">Заказ от 06.09.2024</p>
<p class="cabinet-card-order-main__number">763276427364</p>
</div>
<div class="cabinet-card-order__payment">
<p class="cabinet-card-order-payment__title">Оплачено:</p>
<p class="cabinet-card-order-payment__price">8960</p>
</div>
</div>
<div class="cabinet-card-order__content">
<div class="cabinet-card-order__status">
<p class="cabinet-card-order-status__title">Статус:</p>
<p class="cabinet-card-order-status__pointer cabinet-card-order-status__pointer--grey">Доставлен</p>
</div>
<div class="cabinet-card-order__block-detail" style="height: 308px;">
<div class="cabinet-card-order__detail">
<div class="cabinet-card-order-detail__address">
<p class="cabinet-card-order-detail-address__title">Адрес доставки: </p>
<p class="cabinet-card-order-detail-address__text">Постомат: г.Москва, Каланчевская набережная, д.16</p>
</div>
<div class="cabinet-card-order-detail__main">
<div class="cabinet-card-order-detail-main__products">
<div class="cabinet-card-order-detail-main__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__content">
<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>
<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 class="cabinet-card-order-detail-main__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__content">
<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>
<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__links">
<a href="#" class="cabinet-card__button cabinet-card-order-detail-main__link">
Электронный чек
</a>
<button class="cabinet-card__button cabinet-card-order-detail-main__link">
Отследить заказ
</button>
</div>
</div>
</div>
</div>
<button class="cabinet-card-order__open-detail">Детали заказа</button>
</div>
<div class="cabinet-card-order__detail-short">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
</div>
</div>
</div>
</div>
<div class="cabinet-card__no-orders">
<div class="cabinet-card-no-orders__element">
<p class="cabinet-card-no-orders__title">Пока нет заказов</p>
@@ -464,6 +547,12 @@
</button>
</div>
</div>
<div class="cabinet-card__download">
<button class="cabinet-card__button">
Показать ещё
</button>
</div>
</div>
</div>
</main>