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

Contact RWD and NEW menu

Browse Source
This commit is contained in:
Roman Pyrih
2025-03-11 12:47:47 +01:00
parent eeda3ccfef
commit 71a343cbf5
11 changed files with 409 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

330
layout/style-scss/style.scss
View File

@@ -585,31 +585,51 @@ p {
}
#main-menu {
@include respond-below(sm) {
height: 100%;
width: 100%;
position: fixed;
z-index: 10;
background: #fff;
display: none;
width: 100%;
height: 100%;
@include respond-below(md) {
position: absolute;
top: 110px;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 0;
overflow: hidden;
// height: 100%;
// width: 100%;
// position: fixed;
// z-index: 10;
// background: #fff;
// display: none;
// width: 100%;
// height: 100%;
// left: 0;
// right: 0;
// top: 0;
// bottom: 0;
transition: all 250ms ease-in-out;
&.visible {
@include flexbox;
// @include flexbox;
height: calc(100dvh - 110px) !important;
overflow: auto;
}
}
div[id^='menu-container-'] {
@include respond-below(sm) {
@include respond-below(md) {
position: relative;
width: 100%;
border-bottom: 1px solid #3f3f3f;
padding: 20px 0;
@include flexbox;
@include align-items(center);
@include justify-content(center);
&::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
}
}
> ul {
@@ -617,11 +637,11 @@ p {
padding: 0;
list-style-type: none;
@include respond-above(sm) {
@include respond-above(md) {
@include flexbox;
}
@include respond-below(sm) {
@include respond-below(md) {
width: 100%;
text-align: center;
}
@@ -635,7 +655,7 @@ p {
&:hover {
> a {
color: $cGrayLightTextMenuHover;
color: #1d1d1e;
@include respond-below(sm) {
color: $cBlackText;
@@ -645,49 +665,49 @@ p {
}
> a {
display: block;
color: #1d1d1e;
font-weight: 700;
text-transform: uppercase;
@include respond-above(lg) {
display: block;
padding: 20px 8px;
font-size: 14px;
color: #fff;
// padding: 20px 8px;
padding: 0px 20px;
font-size: 15px;
}
@include respond-between(md, lg) {
display: block;
padding: 20px 5px;
// padding: 20px 5px;
padding: 0px 15px;
font-size: 13px;
color: #fff;
}
@include respond-between(sm, md) {
display: block;
padding: 20px 6px;
// padding: 20px 6px;
font-size: 14px;
color: #fff;
}
@include respond-below(sm) {
display: block;
@include respond-below(md) {
padding: 5px;
font-size: 17px;
color: $cBlackText;
}
i {
@include respond-below(sm) {
margin-left: 10px;
}
margin-left: 7px;
// @include respond-below(sm) {
// margin-left: 10px;
// }
}
}
&.parent {
> a {
@include respond-above(sm) {
@include respond-above(md) {
pointer-events: none;
i {
display: none;
}
// i {
// display: none;
// }
}
}
}
@@ -695,10 +715,10 @@ p {
&#link-8 {
&.parent {
> a {
@include respond-above(sm) {
i {
display: none;
}
@include respond-above(md) {
// i {
// display: none;
// }
}
}
}
@@ -708,17 +728,17 @@ p {
position: absolute;
display: none;
@include respond-above(sm) {
@include respond-above(md) {
background: #fff;
padding-inline-start: 0;
list-style-type: none;
box-shadow: 0 0 1px 0 #c0c0c0;
}
@include respond-below(sm) {
@include respond-below(md) {
position: static;
@include respond-below(sm) {
@include respond-below(md) {
padding-top: 5px;
padding-bottom: 5px;
}
@@ -734,13 +754,13 @@ p {
display: block;
&:hover {
@include respond-above(sm) {
@include respond-above(md) {
color: #fff;
background: #000;
}
}
@include respond-below(sm) {
@include respond-below(md) {
font-size: 15px;
padding: 0;
}
@@ -748,7 +768,7 @@ p {
}
}
@include respond-above(sm) {
@include respond-above(md) {
&:hover {
ul {
display: block;
@@ -760,7 +780,7 @@ p {
ul {
display: block;
@include respond-below(sm) {
@include respond-below(md) {
list-style-type: none;
padding-inline-start: 0;
}
@@ -768,30 +788,80 @@ p {
}
}
#link-5 {
display: none;
}
// #link-5 {
// display: none;
// }
}
}
}
#main-menu-btn {
height: 50px;
width: 50px;
position: fixed;
bottom: 10px;
right: 10px;
color: #fff;
background: #000;
position: relative;
height: 20px;
width: 33px;
// position: fixed;
// bottom: 10px;
// right: 10px;
// color: #fff;
// background: #000;
display: none;
z-index: 9999;
line-height: 50px;
text-align: center;
font-size: 25px;
// line-height: 50px;
// text-align: center;
// font-size: 25px;
cursor: pointer;
@include border-radius(50%);
// @include border-radius(50%);
overflow: hidden;
@include respond-below(sm) {
&.active {
&::before {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
&::after {
bottom: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
span.line {
transform: translateX(calc(100% + 2px));
}
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #000;
transition: all 250ms ease-in-out;
}
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #000;
transition: all 250ms ease-in-out;
}
span.line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #000;
transition: all 250ms ease-in-out;
}
@include respond-below(md) {
display: block;
}
}
@@ -1063,13 +1133,16 @@ p {
}
.over {
font-size: 14px;
color: #fff;
font-size: 12px;
color: #1d1d1e;
font-family: $font3;
font-weight: 800;
text-transform: uppercase;
img {
width: 10px;
height: 10px;
filter: invert(100%);
}
}
@@ -1147,6 +1220,7 @@ p {
}
.search {
line-height: 0;
margin-left: 10px;
@include respond-below(xs) {
@@ -1155,18 +1229,21 @@ p {
}
img {
width: 14px;
height: 14px;
width: 20px;
height: 20px;
}
}
.search-box {
background: $cGrayDarkBg;
height: 0;
transition: all 0.3s ease;
overflow: hidden;
.search-box-wrapper {
margin-top: 25px;
background: $cGrayDarkBg;
}
.search-close {
margin-left: 10px;
}
@@ -1201,7 +1278,8 @@ p {
}
&.search-open {
height: 43px;
// height: 43px;
height: 61px;
}
}
@@ -1928,11 +2006,11 @@ p {
}
}
#link-5 {
a {
pointer-events: initial;
}
}
// #link-5 {
// a {
// pointer-events: initial;
// }
// }
}
p {
@@ -10636,16 +10714,48 @@ div[class^='col-'] {
}
header#header {
padding-top: 35px;
padding-bottom: 35px;
padding-top: 25px;
padding-bottom: 25px;
background: rgba(255, 255, 255, 0.5);
// backdrop-filter: blur(10px);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 100;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
// width: calc(100% - (30px * 2));
width: 100%;
height: 1px;
background: #3f3f3f;
transform: translateX(-50%);
}
&::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
z-index: -1;
}
@include respond-below(md) {
height: 110px;
}
.container {
@include respond-above(xxl) {
max-width: 1500px;
}
@include respond-above(xxxl) {
max-width: 1780px;
}
// @include respond-above(xxl) {
// max-width: 1500px;
// }
// @include respond-above(xxxl) {
// max-width: 1780px;
// }
}
.header-data {
@@ -10653,36 +10763,60 @@ header#header {
flex-direction: row;
align-items: center;
justify-content: space-between;
column-gap: 100px;
column-gap: 30px;
@include respond-below(lg) {
column-gap: 20px;
}
.header-logo {
width: 100%;
max-width: 93px;
max-width: fit-content;
@include respond-below(md) {
flex: 1;
max-width: unset;
}
img {
width: 100%;
max-width: 93px;
}
}
.header-menu {
#header-nav {
@include respond-below(md) {
order: 3;
}
#main-menu {
// margin-right: 60px;
}
}
.header-action {
display: flex;
flex-direction: row;
align-items: center;
#main-menu {
margin-right: 60px;
}
#header-action-btns {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
gap: 40px;
margin-right: 15px;
> * {
margin: 0;
}
@include respond-below(lg) {
gap: 30px;
}
@include respond-below(sm) {
gap: 20px;
margin-right: 0;
}
}
.btn-popup-oferta {
@@ -10690,15 +10824,14 @@ header#header {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 19px 36px 17px;
padding: 17px 20px 13px 38px;
background: #fff246;
border-radius: 6px;
margin-right: 60px;
color: #1d1d1e;
font-size: 16px;
font-size: 13px;
font-family: $font3;
font-weight: 800;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1;
@@ -10707,6 +10840,15 @@ header#header {
img {
padding-bottom: 6px;
width: 16px;
}
@include respond-between(md, lg) {
padding: 17px 15px 13px 28px;
max-width: 150px;
}
@include respond-below(sm) {
display: none;
}
}