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

feat(components): add basic components
Some checks failed
Publish package / build_and_publish (push) Failing after 21s
Details

Browse source
This commit is contained in:
Alexander Navarro 2024-10-25 18:40:50 -03:00
parent ee567abf6b
commit d4a11146aa
11 changed files with 174 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

59
packages/components/src/OffCanvas/style.scss Normal file
View file

@ -0,0 +1,59 @@
.off-canvas {
.off-canvas-content {
overflow: hidden;
position: fixed;
height: 100vh;
z-index: 5;
background-color: var(--prj-bg);
top: 0;
right: 0;
left: 100%;
padding: var(--prj-spacing-3);
transition: left 0.4s ease-in-out;
}
&.active .off-canvas-content {
left: 50%;
}
.off-canvas-backdrop {
position: fixed;
height: 100vh;
z-index: 4;
background-color: rgba(0, 0, 0);
opacity: 0;
top: 0;
right: 0;
left: 100%;
padding: var(--prj-spacing-3);
// 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,
left 0s linear 1s;
}
&.active .off-canvas-backdrop {
left: 0%;
opacity: 40%;
transition:
opacity 0.8s ease,
left 0s linear;
}
}
button.off-canvas-toggle {
width: 40px;
height: 40px;
padding: 0;
border: none;
background: none;
cursor: pointer;
}