alecodes/mini-strap
2
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages 2 Wiki Activity Actions

WIP: offcanvas

Browse source
This commit is contained in:
Alexander Navarro 2024-12-26 19:49:08 -03:00
parent e0ed5a5ddd
commit d3a363c1cc
10 changed files with 137 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

66
packages/components/src/offcanvas/style.scss Normal file
View file

@ -0,0 +1,66 @@
.msp-offcanvas {
&-content {
overflow: hidden;
position: fixed;
height: 100vh;
z-index: 5;
background-color: var(--msp-color-bg);
top: 0;
left: 0;
padding: var(--msp-spacing-3);
transition: left 0.4s ease-in-out;
&.show {
left: 50%;
.msp-offcanvas-backdrop {
width: 100vw;
opacity: 40%;
transition:
opacity 0.8s ease,
left 0s linear;
}
}
&-body,
&-header,
&-footer {
position: relative;
z-index: 5;
}
}
&.show {
left: 50%;
.msp-offcanvas-backdrop {
width: 100vw;
opacity: 40%;
transition:
opacity 0.8s ease,
left 0s linear;
}
}
.msp-offcanvas-backdrop {
position: fixed;
height: 100vh;
width: 0;
z-index: 4;
background-color: rgba(0, 0, 0);
opacity: 0;
top: 0;
left: 0;
// Delay the left transition on remove so it's desn't appear to be sliding or to be not working
transition:
opacity 0.8s ease,
width 0s linear 1s;
}
}