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 18:44:16 +03:00
parent 2e065c9e45
commit 094e94ad7d
5 changed files with 417 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -111,6 +111,7 @@
--background-black: #121212;
--background-grey: #f2f2f2;
--background-green: #2ED15D;
--background-green-white: #f4fff0;
--background-9: #999;
@@ -636,6 +637,13 @@ button{
position: relative;
}
.button--high-46{
padding: 12px 24px;
font-size: 20px;
font-weight: 700;
line-height: 24px;
}
.button--icon{
padding-right: 56px;

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

@@ -1261,56 +1261,65 @@ main{
/* gallery */
/* registration */
.registration{
/* cabinet */
.cabinet{
padding: 24px;
display: flex;
justify-content: space-between;
}
.registration__orders{
.cabinet__orders{
width: calc((100% - 48px) / 3);
}
.registration__profile{
.cabinet__profile{
width: calc(((100% - 48px) / 3) * 2);
}
.registration-card{
.cabinet-card{
margin-top: 32px;
padding: 1px;
border-radius: 20px;
}
.registration-card:first-child{
.cabinet-card:first-child{
margin-top: 0;
}
.registration-card--green{
.cabinet-card--green{
background: var(--background-green);
}
.registration-card--red-blue{
.cabinet-card--green-white{
background: var(--background-green-white);
}
.cabinet-card--green-white .cabinet-card__content{
background: none;
}
.cabinet-card--red-blue{
background: var(--gradient-red);
}
.registration-card__content{
.cabinet-card--grey{
background: var(--background-9);
}
.cabinet-card__content{
padding: 23px;
border-radius: 19px;
background-color: var(--background-white);
}
.registration-card__element{
.cabinet-card__element{
margin-top: 24px;
position: relative;
}
.registration-card__element--margin-top-32{
.cabinet-card__element--margin-top-32{
margin-top: 32px;
}
.registration-card__element:first-child,
.registration-card__element--margin-top-32:first-child{
.cabinet-card__element:first-child,
.cabinet-card__element--margin-top-32:first-child{
margin-top: 0
}
.registration-card__element-change{
.cabinet-card__element-change{
position: absolute;
top: 14px;
right: 0;
@@ -1324,21 +1333,32 @@ main{
transition: opacity .2s ease-out;
}
.registration-card__element-change:hover{
.cabinet-card__element-change:hover{
opacity: .8;
}
.registration-card__text{
.cabinet-card__title{
font-family: var(--font-family);
font-weight: 500;
font-weight: 700;
font-size: 26px;
line-height: 123%;
text-transform: uppercase;
background: var(--gradient-blue);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cabinet-card__text{
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.registration-card__text--grey{
.cabinet-card__text--grey{
color: var(--text-grey);
}
.registration-card__label{
.cabinet-card__label{
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
@@ -1346,7 +1366,7 @@ main{
color: var(--text-3);
}
.registration-card__status{
.cabinet-card__status{
padding-left: 20px;
font-family: var(--font-family);
@@ -1356,10 +1376,10 @@ main{
position: relative;
}
.registration-card__status--chek{
.cabinet-card__status--chek{
color: var(--text-green);
}
.registration-card__status--chek::before{
.cabinet-card__status--chek::before{
content: '';
position: absolute;
@@ -1372,10 +1392,10 @@ main{
background-image: url(../img/svg/main/status-chek.svg);
object-fit: contain;
}
.registration-card__status--cancelled{
.cabinet-card__status--cancelled{
color: var(--text-red);
}
.registration-card__status--cancelled::before{
.cabinet-card__status--cancelled::before{
content: '';
position: absolute;
@@ -1388,10 +1408,10 @@ main{
background-image: url(../img/svg/main/status-cancelled.svg);
object-fit: contain;
}
.registration-card__block-accounts{
.cabinet-card__block-accounts{
display: flex;
}
.registration-card__account{
.cabinet-card__account{
margin-left: 16px;
width: 40px;
@@ -1404,15 +1424,15 @@ main{
background: var(--background-9);
border-radius: 50%;
}
.registration-card__account:first-child{
.cabinet-card__account:first-child{
margin-left: 0;
}
.registration-card__block-buttons{
.cabinet-card__block-buttons{
display: flex;
justify-content: space-between;
align-items: center;
}
.registration-card__button{
.cabinet-card__button{
padding: 8px 8px 6px 0;
font-family: var(--font-family);
@@ -1426,7 +1446,7 @@ main{
position: relative;
}
.registration-card__button::before{
.cabinet-card__button::before{
content: '';
position: absolute;
@@ -1439,16 +1459,16 @@ main{
transition: opacity .2s ease-out;
}
.registration-card__button:hover{
.cabinet-card__button:hover{
opacity: .8;
}
.registration-card__text, .registration-card__label, .registration-card__status, .registration-card__block-accounts, .registration-card__block-buttons{
.cabinet-card__text, .cabinet-card__label, .cabinet-card__status, .cabinet-card__block-accounts, .cabinet-card__block-buttons{
margin-top: 8px;
}
.registration-card__text:first-child, .registration-card__label:first-child, .registration-card__status:first-child, .registration-card__block-accounts:first-child, .registration-card__block-buttons:first-child{
.cabinet-card__text:first-child, .cabinet-card__label:first-child, .cabinet-card__status:first-child, .cabinet-card__block-accounts:first-child, .cabinet-card__block-buttons:first-child{
margin-top: 0px;
}
.registration-card__block-add-pets{
.cabinet-card__block-add-pets{
width: 100%;
display: flex;
@@ -1457,7 +1477,7 @@ main{
background: none;
border: none;
}
.registration-card-add-pets__circle{
.cabinet-card-add-pets__circle{
width: 48px;
aspect-ratio: 1;
@@ -1468,7 +1488,7 @@ main{
border: 1px solid var(--text-6);
border-radius: 50%;
}
.registration-card-add-pets__text{
.cabinet-card-add-pets__text{
margin-left: 16px;
font-family: var(--font-family);
@@ -1480,7 +1500,7 @@ main{
position: relative;
}
.registration-card-add-pets__text::after{
.cabinet-card-add-pets__text::after{
content: '';
position: absolute;
@@ -1492,7 +1512,218 @@ main{
background: var(--text-6);
}
/* registration */
.cabinet-card__discount{
display: flex;
align-items: center;
}
.cabinet-card-discount__title{
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
}
.cabinet-card-discount__percent{
margin-left: 16px;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
}
.cabinet-card-discount__percent::after{
content: '%';
}
.cabinet-card-discount__arrow{
display: inline-block;
margin-left: 6px;
width: 20px;
aspect-ratio: 1;
background-image: url(../img/svg/main/arrow-breadcrumbs-black.svg);
background-position: center;
}
.cabinet-card__no-orders{
margin-top: 32px;
padding: 48px 24px;
}
.cabinet-card-no-orders__element{
margin-top: 26px;
}
.cabinet-card-no-orders__element:first-child{
margin-top: 0;
}
.cabinet-card-no-orders__title{
font-family: var(--font-family);
font-weight: 500;
font-size: 24px;
line-height: 133%;
text-align: center;
color: var(--text-black);
}
.cabinet-card__pet{
display: flex;
align-items: center;
}
.cabinet-card-pet__icon{
width: 48px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--gradient-blue);
}
.cabinet-card-pet-icon__content{
margin: 1px;
width: calc(100% - 2px);
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: var(--background-white);
}
.cabinet-card-pet-icon__content img{
width: 32px;
aspect-ratio: 1;
object-fit: contain;
}
.cabinet-card-pet__name{
margin-left: 24px;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
}
.cabinet-card__order{
}
.cabinet-card-order__header{
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.cabinet-card-order__main{}
.cabinet-card-order-main__date{
font-family: var(--font-family);
font-weight: 500;
font-size: 24px;
line-height: 133%;
color: var(--text-black);
}
.cabinet-card-order-main__number{
margin-top: 8px;
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 133%;
color: var(--text-black);
}
.cabinet-card-order-main__number::before{
content: '№';
}
.cabinet-card-order__payment{
display: flex;
align-items: flex-end;
}
.cabinet-card-order-payment__title{
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 133%;
color: var(--text-black);
}
.cabinet-card-order-payment__price{
margin-left: 8px;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
}
.cabinet-card-order-payment__price::after{
margin-left: 5px;
content: '₽';
}
.cabinet-card-order__content{
margin-top: 24px;
}
.cabinet-card-order__content
.cabinet-card-order__status{
display: flex;
align-items: center;
}
.cabinet-card-order-status__title{
font-family: var(--font-family);
font-weight: 500;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.cabinet-card-order-status__pointer{
margin-left: 12px;
font-family: var(--font-family);
font-weight: 500;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.cabinet-card-order-status__pointer--grey{
color: var(--text-6);
}
.cabinet-card-order-status__pointer--green{
color: var(--text-green);
}
.cabinet-card-order-status__pointer--red{
color: var(--text-red);
}
.cabinet-card-order__block-detail{}
.cabinet-card-order__detail{}
.cabinet-card-order__open-detail{
margin-top: 24px;
padding-right: 24px;
font-family: var(--font-family);
font-weight: 500;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
border: none;
background: none;
position: relative;
}
.cabinet-card-order__open-detail::after{
content: '';
position: absolute;
top: 4px;
right: 0;
width: 16px;
aspect-ratio: 1;
background-image: url(../img/svg/main/arrow-black.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* .cabinet-card-no-orders__ */
/* cabinet */
@media only screen and (max-width: 1600px) {