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

feat(components): allow to only hide offcanvas on breakpoint

Browse source
This commit is contained in:
Alexander Navarro 2024-12-27 12:54:09 -03:00
parent c47a2eff89
commit 37a1551699
4 changed files with 62 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

55
packages/components/src/offcanvas/style.scss
View file

@ -1,24 +1,34 @@
.msp-offcanvas {
@use "@mini-strap/core/mixins";
:root {
--msp-offcanvas-anim-duration: var(--msp-anim-duration-md);
--msp-offcanvas-anim-curve-in: cubic-bezier(0.22, 0.61, 0.36, 1);
--msp-offcanvas-anim-curve-out: cubic-bezier(0.55, 0.06, 0.68, 0.19);
&-content {
overflow: hidden;
--msp-offcanvas-width: 15ch;
}
.msp-offcanvas {
position: fixed;
width: var(--msp-offcanvas-width);
height: 100vh;
z-index: 5;
background-color: var(--msp-color-bg);
top: 0;
left: -100%;
padding: var(--msp-spacing-3);
transition: left var(--msp-offcanvas-anim-duration)
var(--msp-offcanvas-anim-curve-out);
&-content {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
z-index: 5;
background-color: var(--msp-color-bg-surface-1);
padding: var(--msp-spacing-3);
&-body,
&-header,
&-footer {
@ -28,6 +38,11 @@
}
&.show {
left: 0;
transition: left var(--msp-offcanvas-anim-duration)
var(--msp-offcanvas-anim-curve-in);
.msp-offcanvas-backdrop {
opacity: 40%;
left: 0;
@ -37,13 +52,6 @@
var(--msp-offcanvas-anim-curve-in),
left 0s linear;
}
.msp-offcanvas-content {
left: 0;
transition: left var(--msp-offcanvas-anim-duration)
var(--msp-offcanvas-anim-curve-in);
}
}
.msp-offcanvas-backdrop {
@ -64,3 +72,18 @@
left 0s linear var(--msp-offcanvas-anim-duration);
}
}
@include mixins.responsive using($breakpoint, $size) {
.msp-offcanvas.msp-offcanvas-#{$breakpoint} {
width: var(--msp-offcanvas-width);
left: 0;
& ~ * {
margin-left: var(--msp-offcanvas-width);
}
.msp-offcanvas-backdrop {
display: none !important;
}
}
}

5
packages/core/package.json
View file

@ -1,8 +1,11 @@
{
"name": "@mini-strap/core",
"version": "0.0.1",
"module": "src/style.scss",
"type": "module",
"exports": {
".": "./src/style.scss",
"./mixins": "./src/_mixins.scss"
},
"scripts": {
"build": "bun sass --style compressed src/style.scss dist/style.css",
"ci:publish": "bun run build && bun publish --production --frozen-lockfile --silent"

8
packages/website/templates/base.html
View file

@ -8,17 +8,17 @@
<title>alecodes.page</title>
<ViewTransitions />
{% block scripts %}
<script src="/js/index.js"></script>{% endblock %}
{% block scripts %}<script src="/js/index.js"></script>{% endblock %}
<link rel="stylesheet" href="/css/style.css" />
</head>
<body transition:animate="fade">
<header class="msp-py-1 msp-py-lg-3">
{% include "partials/header.html" %}
</header>
<main>
<nav class="msp-d-flex msp-justify-content-end">
<button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
</nav>
{% block content %}{% endblock %}
</main>
</body>

6
packages/website/templates/partials/header.html
View file

@ -1,4 +1,4 @@
<aside id="main-offcanvas" class="msp-offcanvas">
<aside id="main-offcanvas" class="msp-offcanvas msp-offcanvas-sm">
<div class="msp-offcanvas-backdrop msp-offcanvas-toggle"
data-msp-target="#main-offcanvas"></div>
@ -29,7 +29,3 @@
</div>
</div>
</aside>
<nav class="msp-d-flex msp-justify-content-end">
<button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
</nav>