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

fix: mobile first styling

Browse Source
This commit is contained in:
Chuma McPhoy
2024-07-11 11:25:30 +02:00
parent c17bd782c2
commit 6b42090160
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,20 +1,21 @@
.sidePeek { .sidePeek {
position: fixed; position: fixed;
top: 0; top: 70.047px;
right: auto;
bottom: 0; bottom: 0;
right: 0px; width: 100%;
width: 600px; height: calc(100vh - 70.047px);
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);
} }
.sidePeek[data-entering] { .sidePeek[data-entering] {
animation: slide-in 250ms; animation: slide-up 300ms;
} }
.sidePeek[data-exiting] { .sidePeek[data-exiting] {
animation: slide-in 250ms reverse; animation: slide-up 300ms reverse;
} }
.header { .header {
@@ -76,19 +77,18 @@
} }
} }
@media screen and (max-width: 1024px) { @media screen and (min-width: 1367px) {
.sidePeek { .sidePeek {
right: auto; top: 0;
top: 70.047px; right: 0px;
width: 100%; width: 600px;
height: calc(100vh - 70.047px); height: 100vh;
} }
.sidePeek[data-entering] { .sidePeek[data-entering] {
animation: slide-up 300ms; animation: slide-in 250ms;
} }
.sidePeek[data-exiting] { .sidePeek[data-exiting] {
animation: slide-up 300ms reverse; animation: slide-in 250ms reverse;
} }
} }