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-09 23:24:11 +03:00
parent 863ed65646
commit ee5a3d5a7e
14 changed files with 1368 additions and 1736 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -418,6 +418,54 @@ button{
.form__button:hover{
opacity: .8;
}
.label{
padding-bottom: 4px;
display: inline-block;
position: relative;
}
.label::after{
content: '';
position: absolute;
top: 2px;
right: -20px;
width: 16px;
height: 16px;
background-image: url(../img/svg/main/question.svg);
cursor: pointer;
}
.label__title{
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-3);
}
.label__question{
position: absolute;
padding: 8px;
border-radius: 6px;
transition: height .2s ease-out;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
background-color: var(--background-white);
opacity: 0;
transition: opacity .2s ease-out;
pointer-events: none;
}
.label:hover .label__question{
opacity: 1;
pointer-events: auto;
}
/* form */
@@ -446,7 +494,7 @@ button{
/* breadcrumbs */
.breadcrumbs{
margin: 96px 24px 24px;
margin: 24px;
display: flex;
align-items: center;
@@ -638,6 +686,53 @@ button{
.to-know--background-none{
background: none;
}
.back{
margin-top: 16px;
margin-left: 16px;
padding: 8px;
padding-left: 32px;
background: none;
border: none;
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
text-decoration: none;
position: relative;
}
.back::before{
content: '';
position: absolute;
top: 8px;
left: 0;
margin-right: 8px;
width: 24px;
height: 24px;
background-image: url(../img/svg/main/arrow-back.svg);
}
.back::after{
content: '';
position: absolute;
bottom: 6px;
left: 0;
width: calc(100% - 8px);
height: 1px;
background: var(--text-black);
}
/* button */
/* select */
@@ -848,6 +943,9 @@ button{
filter: blur(10px);
transition: filter .2s ease-out;
}
.modal__item--no-title{
padding-top: 72px;
}
.modal__item.active{
display: flex;
flex-direction: column;
@@ -875,6 +973,29 @@ button{
text-transform: uppercase;
color: var(--text-black);
}
.modal__small-title{
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
line-height: 100%;
text-transform: uppercase;
color: var(--text-black);
}
.modal__text{
margin-top: 16px;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-0);
}
.modal__form-sub{
margin-top: 48px;
}
.modal-form-sub__submit{
margin-top: 64px;
}
.modal__block-button{
margin-top: 24px;
}
@@ -921,6 +1042,10 @@ button{
.modal__basket{
width: 600px;
}
.modal__to-know,
.modal__to-know-submit{
width: 412px;
}
.modal-basket__item{
padding-top: 23px;
padding-bottom: 24px;
@@ -952,6 +1077,33 @@ button{
.modal-basket__item:hover .modal-basket__item::before{
opacity: .8;
}
.modal-basket__item--return{
padding-right: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-basket__item--return .modal-basket-item__title{
padding-right: 10px;
}
.modal-basket__item--return::before{
display: none;
}
.modal-basket-item__return{
border-radius: 20px;
padding: 4px 24px;
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-white);
background: var(--background-black);
border: none;
}
.modal-basket-item__block-image{
width: 128px;
aspect-ratio: 1;
@@ -1014,6 +1166,15 @@ button{
.modal__basket .modal__content{
height: calc(100% - 100px);
overflow-x: hidden;
}
.modal__basket .modal__content::-webkit-scrollbar {
width: 7px;
background-color: #f9f9fd;
}
.modal__basket .modal__content::-webkit-scrollbar-thumb {
background-color: var(--background-black);
border-radius: 2px;
}
/* modal */
@@ -1039,11 +1200,14 @@ button{
background-image: url(../img/svg/main/black-x.svg);
transform: rotate(45deg);
transition: transform .2s;
pointer-events: none;
}
.toggle.active::after{
transform: rotate(0deg);
}
.toggle__title{
padding-right: 30px;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
@@ -1093,6 +1257,8 @@ button{
.checkbox{
display: flex;
align-items: center;
cursor: pointer;
}
.checkbox__state{
border-radius: 4px;
@@ -1102,6 +1268,8 @@ button{
border: 2px solid var(--background-black);
background: var(--background-white);
flex-shrink: 0;
}
.checkbox.active .checkbox__state{
background-color: var(--background-black);
@@ -1121,6 +1289,23 @@ button{
font-size: 20px;
line-height: 120%;
color: var(--text-dark);
cursor: pointer;
}
.checkbox__label a{
color: #76ce75;
text-decoration: none;
}
.checkbox--small{
margin-top: 24px;
}
.checkbox--small .checkbox__label{
padding-left: 24px;
font-weight: 500;
font-size: 12px;
line-height: 133%;
}
/* checkbox */
@@ -1134,6 +1319,8 @@ button{
aspect-ratio: 1;
accent-color: var(--background-black);
cursor: pointer;
}
.radio__label{
padding-left: 8px;
@@ -1143,6 +1330,8 @@ button{
font-size: 20px;
line-height: 120%;
color: var(--text-dark);
cursor: pointer;
}
/* radio */

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

@@ -248,7 +248,7 @@
text-decoration: none;
}
.header.white{
/* background-color: thistle; */
background: none;
}
.header.white .header__logo-black{
display: none;
@@ -284,6 +284,10 @@
.header.white .header__open-menu::after{
background: var(--background-white);
}
main{
padding-top: 72px;
}
/* header end */
/* product */
@@ -310,6 +314,7 @@
border-radius: 16px;
background: var(--gradient-blue);
border: none;
}
.product-tag-item__content{
padding: 3px 11px;
@@ -344,6 +349,16 @@
background-repeat: no-repeat;
background-position: center;
}
.product__error{
margin: auto;
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
line-height: 100%;
text-transform: uppercase;
color: var(--text-0);
}
.product__title{
font-family: var(--font-family);
font-weight: 700;
@@ -651,9 +666,9 @@
/* product */
/* modal */
.modal__button .to-know{
/* .modal__button .to-know{
display: none;
}
} */
/* modal */
/* footer */
@@ -704,6 +719,9 @@
.footer-list__item:nth-child(even){
width: 322px;
}
.footer-list__item .button{
border-radius: 24px;
}
.footer-list__title{
font-family: var(--font-family);
font-weight: 700;
@@ -941,14 +959,21 @@
margin-top: 48px;
margin-bottom: 48px;
}
.detail__catalot{
.detail__wrapper-catalot{
margin-top: 64px;
width: 100%;
width: calc(100% + 16px);
overflow: hidden;
position: relative;
}
.detail__catalot{
}
.detail-catalot__header{
padding-right: 16px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -993,6 +1018,9 @@
.detail__images-phone{
display: none;
}
.back-detail{
display: none;
}
.toggle__table{
margin-top: 32px;

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

@@ -13,6 +13,10 @@
.modal__filter{
width: 100%;
}
.modal__to-know,
.modal__to-know-submit{
width: 100%;
}
.modal__button .to-know{
display: flex;
@@ -65,6 +69,11 @@
margin-top: 24px;
}
.footer-about__text{
padding-top: 35px;
display: block;
text-align: left;
}
.footer__list{
margin-top: 20px;
}

51
assets/css/gp-style-tablet.css
View File

@@ -1,6 +1,9 @@
/* Стили для планшетов */
@media only screen and (max-width: 1200px) {
/* header */
main{
padding-top: 64px;
}
.main-menu{
display: none;
}
@@ -12,7 +15,7 @@
}
.header__logo{
width: 136px;
height: 24px;
height: 29px;
}
.header__content{
height: auto;
@@ -41,16 +44,50 @@
/* footer */
.footer{
margin-top: 0;
}
.footer__about{
justify-content: center;
}
.footer-about__text{
display: none;
padding: 24px 16px;
}
/* footer */
/* breadcrumbs */
.breadcrumbs{
display: none;
}
/* breadcrumbs */
/* product */
.product{
padding: 12px;
}
.product__title{
font-weight: 400;
font-size: 26px;
line-height: 123%;
text-transform: uppercase;
}
.to-know p {
font-size: 18px;
}
.toggle-table__title{
font-weight: 700;
font-size: 12px;
line-height: 133%;
}
.toggle-table__item p{
font-weight: 500;
font-size: 12px;
line-height: 133%;
}
.detail{
margin: 24px 16px;
}
.back-detail{
display: inline;
}
.detail-catalot__title{
font-size: 22px;
}
/* product */
}
@media only screen and (max-width: 980px) {

5
assets/img/svg/main/arrow-back.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 12.3643H21" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.5 12.3643L10.864 18.7282" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.5 12.3643L10.864 6.0003" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 459 B

3
assets/img/svg/main/question.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="M8.00005 1.2498C4.27213 1.2498 1.25005 4.27188 1.25005 7.9998C1.25005 11.7277 4.27213 14.7498 8.00005 14.7498C11.728 14.7498 14.75 11.7277 14.75 7.9998C14.75 4.27188 11.728 1.2498 8.00005 1.2498ZM0.0500488 7.9998C0.0500488 3.60914 3.60939 0.0498047 8.00005 0.0498047C12.3907 0.0498047 15.9501 3.60914 15.9501 7.9998C15.9501 12.3905 12.3907 15.9498 8.00005 15.9498C3.60938 15.9498 0.0500488 12.3905 0.0500488 7.9998ZM8.75664 11.8914C8.75664 12.3056 8.42085 12.6414 8.00664 12.6414C7.59243 12.6414 7.25664 12.3056 7.25664 11.8914C7.25664 11.4772 7.59243 11.1414 8.00664 11.1414C8.42085 11.1414 8.75664 11.4772 8.75664 11.8914ZM6.35884 6.22749C6.35879 5.76088 6.51651 5.31995 6.80394 5.00253C7.08243 4.69497 7.51419 4.46749 8.14659 4.46748C9.28878 4.46747 10.0031 5.57665 9.44696 6.64451C9.21979 7.08066 8.93274 7.37811 8.60211 7.7207L8.60206 7.72075C8.49777 7.82881 8.38915 7.94137 8.27671 8.06418C7.82078 8.56216 7.37999 9.17405 7.37999 10.1425C7.37999 10.4738 7.64862 10.7425 7.97999 10.7425C8.31136 10.7425 8.57999 10.4738 8.57999 10.1425C8.57999 9.61088 8.79169 9.27875 9.16178 8.87452C9.23347 8.79622 9.31482 8.71242 9.40228 8.62233C9.75046 8.26368 10.1953 7.80545 10.5113 7.19883C11.4927 5.31454 10.1697 3.26746 8.14658 3.26748C7.19634 3.26749 6.43417 3.62308 5.91442 4.19707C5.4036 4.7612 5.15877 5.5003 5.15884 6.22761C5.15887 6.55898 5.42753 6.82758 5.7589 6.82755C6.09027 6.82752 6.35887 6.55886 6.35884 6.22749Z" fill="#121212"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

57
assets/js/gp-main.js
View File

@@ -10,6 +10,7 @@ singleToggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
modalOpen('.button--filter', '.modal__filter');
modalOpen('.basket-open', '.modal__basket');
modalClose('.modal__close');
modalOpen('.open-to-know', '.modal__to-know');
// media
// toggle
@@ -79,9 +80,10 @@ toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', tr
let selects = document.querySelectorAll('.select');
selects.forEach(e => {
let state = e.querySelector('.select__state'),
buttons = e.querySelectorAll('.state__button');
selects.forEach(select => {
let state = select.querySelector('.select__state'),
content = select.querySelector('.state__block'),
buttons = select.querySelectorAll('.state__button');
buttons.forEach(e => {
let button = e;
@@ -99,6 +101,8 @@ selects.forEach(e => {
state.value = text;
button.classList.add('active');
content.style.height = 0;
select.classList.remove('active');
}
})
})
@@ -300,23 +304,48 @@ function createGalleryPhone(swiper, wrapper, slide, width) {
// resize
window.addEventListener('resize', (e) => {
let width = window.screen.width;
// media
modalOpen('.button--filter', '.modal__filter');
modalOpen('.basket-open', '.modal__basket');
modalClose('.modal__close');
let modalItem = document.querySelectorAll('.modal__item');
// if (width <= 720) {
modalItem.forEach(modal => {
if (modal.classList.contains('active')) {
let aside = document.querySelector('.modal__aside');
if (width <= 720) {
aside.style.width = `${width}px`
}else{
let openAside = document.querySelector('.modal__item.active'),
newWidth = openAside.clientWidth;
aside.style.width = `${newWidth}px`
}
}
})
// }
});
// resize
// scroll
window.addEventListener("scroll", function (e) {
let header = document.querySelector('.header');
let scroll = window.scrollY;
if (scroll >= 75) {
header.classList.remove('white')
}else{
header.classList.add('white')
}
});
if (document.querySelector('.header').classList.contains('white')) {
window.addEventListener("scroll", function (e) {
let header = document.querySelector('.header');
let scroll = window.scrollY;
if (scroll >= 25) {
header.classList.remove('white')
}else{
header.classList.add('white')
}
});
}
// scroll

4
assets/js/gp-product.js
View File

@@ -97,10 +97,10 @@ const detailCatalot = new Swiper('.detail__catalot', {
slidesPerView: 3,
},
780: {
slidesPerView: 2.2,
slidesPerView: 2,
},
100: {
slidesPerView: 1.3,
slidesPerView: 1.1,
spaceBetween: 20
},
}