scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(SW-96): add css variable for use of mobile header height

Browse Source
This commit is contained in:
Chuma McPhoy
2024-08-23 07:24:35 +02:00
parent 7d47994539
commit 7e7a5d2646
5 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/globals.css
View File

@@ -100,6 +100,7 @@
--max-width: 113.5rem; --max-width: 113.5rem;
--max-width-content: 74.75rem; --max-width-content: 74.75rem;
--max-width-text-block: 49.5rem; --max-width-text-block: 49.5rem;
--mobile-site-header-height: 70.047px;
} }
* { * {

2
components/Current/Header/MainMenu/mainMenu.module.css
View File

@@ -8,7 +8,7 @@
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 99999; z-index: 99999;
height: 70.047px; height: var(--mobile-site-header-height);
} }
.container { .container {

2
components/Current/Header/header.module.css
View File

@@ -4,6 +4,6 @@
@media screen and (max-width: 1366px) { @media screen and (max-width: 1366px) {
.header { .header {
height: 70.047px; height: var(--mobile-site-header-height);
} }
} }

4
components/Lightbox/Lightbox.module.css
View File

@@ -3,7 +3,7 @@
} }
.mobileGallery { .mobileGallery {
margin-top: 70.047px; margin-top: var(--mobile-site-header-height);
height: 100%; height: 100%;
position: relative; position: relative;
display: flex; display: flex;
@@ -112,7 +112,7 @@
} }
.fullViewContainer { .fullViewContainer {
margin-top: 70.047px; margin-top: var(--mobile-site-header-height);
background-color: var(--UI-Text-High-contrast); background-color: var(--UI-Text-High-contrast);
height: 100%; height: 100%;
padding: var(--Spacing-x2); padding: var(--Spacing-x2);

8
components/TempDesignSystem/SidePeek/sidePeek.module.css
View File

@@ -1,10 +1,10 @@
.sidePeek { .sidePeek {
position: fixed; position: fixed;
top: 70.047px; top: var(--mobile-site-header-height);
right: auto; right: auto;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: calc(100vh - 70.047px); height: calc(100vh - var(--mobile-site-header-height));
background-color: var(--Base-Background-Primary-Normal); background-color: var(--Base-Background-Primary-Normal);
z-index: 100; z-index: 100;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.85); box-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
@@ -24,7 +24,7 @@
.overlay { .overlay {
position: absolute; position: absolute;
top: 70.047px; top: var(--mobile-site-header-height);
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
@@ -46,7 +46,7 @@
} }
to { to {
top: 70.047px; top: var(--mobile-site-header-height);
} }
} }