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-duration: var(--msp-anim-duration-md);
--msp-offcanvas-anim-curve-in: cubic-bezier(0.22, 0.61, 0.36, 1); --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); --msp-offcanvas-anim-curve-out: cubic-bezier(0.55, 0.06, 0.68, 0.19);
&-content { --msp-offcanvas-width: 15ch;
overflow: hidden; }
.msp-offcanvas {
position: fixed; position: fixed;
width: var(--msp-offcanvas-width);
height: 100vh; height: 100vh;
z-index: 5;
background-color: var(--msp-color-bg);
top: 0; top: 0;
left: -100%; left: -100%;
padding: var(--msp-spacing-3);
transition: left var(--msp-offcanvas-anim-duration) transition: left var(--msp-offcanvas-anim-duration)
var(--msp-offcanvas-anim-curve-out); 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, &-body,
&-header, &-header,
&-footer { &-footer {
@ -28,6 +38,11 @@
} }
&.show { &.show {
left: 0;
transition: left var(--msp-offcanvas-anim-duration)
var(--msp-offcanvas-anim-curve-in);
.msp-offcanvas-backdrop { .msp-offcanvas-backdrop {
opacity: 40%; opacity: 40%;
left: 0; left: 0;
@ -37,13 +52,6 @@
var(--msp-offcanvas-anim-curve-in), var(--msp-offcanvas-anim-curve-in),
left 0s linear; left 0s linear;
} }
.msp-offcanvas-content {
left: 0;
transition: left var(--msp-offcanvas-anim-duration)
var(--msp-offcanvas-anim-curve-in);
}
} }
.msp-offcanvas-backdrop { .msp-offcanvas-backdrop {
@ -64,3 +72,18 @@
left 0s linear var(--msp-offcanvas-anim-duration); 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", "name": "@mini-strap/core",
"version": "0.0.1", "version": "0.0.1",
"module": "src/style.scss",
"type": "module", "type": "module",
"exports": {
".": "./src/style.scss",
"./mixins": "./src/_mixins.scss"
},
"scripts": { "scripts": {
"build": "bun sass --style compressed src/style.scss dist/style.css", "build": "bun sass --style compressed src/style.scss dist/style.css",
"ci:publish": "bun run build && bun publish --production --frozen-lockfile --silent" "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> <title>alecodes.page</title>
<ViewTransitions /> <ViewTransitions />
{% block scripts %} {% block scripts %}<script src="/js/index.js"></script>{% endblock %}
<script src="/js/index.js"></script>{% endblock %}
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
</head> </head>
<body transition:animate="fade"> <body transition:animate="fade">
<header class="msp-py-1 msp-py-lg-3">
{% include "partials/header.html" %} {% include "partials/header.html" %}
</header>
<main> <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 %} {% block content %}{% endblock %}
</main> </main>
</body> </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" <div class="msp-offcanvas-backdrop msp-offcanvas-toggle"
data-msp-target="#main-offcanvas"></div> data-msp-target="#main-offcanvas"></div>
@ -29,7 +29,3 @@
</div> </div>
</div> </div>
</aside> </aside>
<nav class="msp-d-flex msp-justify-content-end">
<button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
</nav>