Project-Pro/vidok.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update contact page

Browse Source
This commit is contained in:
Roman Pyrih
2026-01-22 09:37:07 +01:00
parent 11ee273b15
commit b5c2cfca18
4 changed files with 373 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

325
layout/style-scss/kontakt-v7.scss
View File

@@ -759,125 +759,12 @@ strong {
}
}
}
#showroom-popup.showroom-card--popup {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
backdrop-filter: blur(3px);
background: rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
transition: all 50ms ease-in-out;
&.active {
visibility: visible;
opacity: 1;
}
.showroom-card--popup-wrapper {
width: 650px;
margin-top: 120px;
background: $cWhite;
border-radius: 30px;
display: flex;
flex-direction: column;
overflow: hidden;
.popup--head {
display: flex;
flex-direction: row;
background: #1e2832;
padding: 40px 60px 35px 60px;
p {
color: $cWhite;
font-family: $font3;
font-weight: 600;
font-size: 20px;
line-height: 1;
margin: 0;
position: relative;
&:not(:last-child) {
padding-right: 25px;
margin-right: 25px;
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 3px;
width: 1px;
background: $cWhite;
}
}
}
}
.popup--body {
padding: 20px;
.popup--body-info {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
p,
a {
color: $cTxtBlack;
font-family: $font3;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
strong {
font-weight: 700;
}
}
.info-name {
p {
padding-left: 11px;
border-left: 5px solid #000;
}
}
.info-time {
}
.info-products {
img {
max-height: 30px;
}
}
}
.popup--body-map {
margin-top: 20px;
line-height: 0;
border-radius: 10px;
overflow: hidden;
height: 200px;
.popup-map {
height: 100%;
}
}
}
}
}
}
}
}
.box-5 {
margin-bottom: 115px;
margin-bottom: 100px;
background: #161717;
.box-5--wrapper {
@@ -1252,16 +1139,224 @@ strong {
#box-map-showrooms {
display: flex;
height: 800px;
margin-bottom: 100px;
#showrooms-sidebar {
width: 540px;
width: 0;
transition: all 300ms ease-in-out;
opacity: 0;
visibility: hidden;
&.has-results {
width: 540px;
opacity: 1;
visibility: visible;
}
#results-list {
display: flex;
flex-direction: column;
row-gap: 12px;
padding: 12px 12px;
overflow-y: auto;
overflow-x: hidden;
height: 700px;
.sidebar-item {
// &:hover {
// .sidebar-item--wrapper {
// background: #fff;
// }
// }
&.active {
.sidebar-item--wrapper {
background: #fff;
border: 1px solid #b4aaa2;
box-shadow: -2px 2px 4.6px #b6aca3;
}
}
.sidebar-item--wrapper {
display: grid;
grid-template-columns: 200px 1fr;
gap: 16px 32px;
padding: 24px;
// border: 1px solid #b4aaa2;
border-radius: 10px;
width: 500px;
background: #f7f6f5;
transition: all 250ms ease-in-out;
border: 1px solid #f7f6f5;
.item-type {
span {
display: inline-flex;
padding: 8px 22px 7px;
color: $cWhite;
font-family: $font3;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 1;
background: #1e2832;
border-radius: 100px;
}
}
.item-location {
display: inline-flex;
border-left: 5px solid #1e2832;
padding-left: 14px;
height: fit-content;
p {
color: #1d1d1e;
font-family: $font3;
}
}
.item-working-hours {
p {
color: #1d1d1e;
font-family: $font3;
}
}
.item-contact {
ul {
list-style: none;
padding: 0;
margin: 0;
li {
a {
color: #1d1d1e;
font-family: $font3;
}
}
}
}
}
}
}
}
#showroom-popup.showroom-card--popup {
visibility: hidden;
opacity: 0;
transition: all 50ms ease-in-out;
position: absolute;
z-index: 999;
left: calc(50% + 250px);
top: 40%;
transform: translate(-50%, -50%);
&.active {
visibility: visible;
opacity: 1;
}
.showroom-card--popup-wrapper {
width: 650px;
margin-top: 120px;
background: $cWhite;
border-radius: 30px;
display: flex;
flex-direction: column;
overflow: hidden;
.popup--head {
display: flex;
flex-direction: row;
background: #1e2832;
padding: 40px 60px 35px 60px;
p {
color: $cWhite;
font-family: $font3;
font-weight: 600;
font-size: 20px;
line-height: 1;
margin: 0;
position: relative;
&:not(:last-child) {
padding-right: 25px;
margin-right: 25px;
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 3px;
width: 1px;
background: $cWhite;
}
}
}
.close-popup {
cursor: pointer;
margin: 0 0 0 auto;
width: 20px;
height: 20px;
color: #fff;
font-size: 35px;
line-height: 0.7;
}
}
.popup--body {
padding: 20px;
.popup--body-info {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
p,
a {
color: $cTxtBlack;
font-family: $font3;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
strong {
font-weight: 700;
}
}
.info-name {
p {
padding-left: 11px;
border-left: 5px solid #000;
}
}
.info-time {
}
.info-products {
img {
max-height: 30px;
}
}
}
.popup--body-map {
margin-top: 20px;
line-height: 0;
border-radius: 10px;
overflow: hidden;
height: 200px;
.popup-map {
height: 100%;
}
}
}
}