diff --git a/packages/components/src/offcanvas/style.scss b/packages/components/src/offcanvas/style.scss
index fcce939..c782035 100644
--- a/packages/components/src/offcanvas/style.scss
+++ b/packages/components/src/offcanvas/style.scss
@@ -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);
+ --msp-offcanvas-width: 15ch;
+}
+
+.msp-offcanvas {
+ position: fixed;
+ width: var(--msp-offcanvas-width);
+ height: 100vh;
+ top: 0;
+ left: -100%;
+
+ transition: left var(--msp-offcanvas-anim-duration)
+ var(--msp-offcanvas-anim-curve-out);
+
&-content {
+ position: relative;
overflow: hidden;
- position: fixed;
- height: 100vh;
+ width: 100%;
+ height: 100%;
z-index: 5;
- background-color: var(--msp-color-bg);
-
- top: 0;
- left: -100%;
+ background-color: var(--msp-color-bg-surface-1);
padding: var(--msp-spacing-3);
- transition: left var(--msp-offcanvas-anim-duration)
- var(--msp-offcanvas-anim-curve-out);
-
&-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;
+ }
+ }
+}
diff --git a/packages/core/package.json b/packages/core/package.json
index 4c14d3c..751adda 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -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"
diff --git a/packages/website/templates/base.html b/packages/website/templates/base.html
index 32ab91b..727b328 100644
--- a/packages/website/templates/base.html
+++ b/packages/website/templates/base.html
@@ -1,26 +1,26 @@
-
-
-
-
- alecodes.page
-
+
+
+
+
+ alecodes.page
+
- {% block scripts %}
- {% endblock %}
-
+ {% block scripts %}{% endblock %}
+
-
+
-
-
+
{% include "partials/header.html" %}
-
-
- {% block content %}{% endblock %}
-
-
+
+
+ {% block content %}{% endblock %}
+
+
diff --git a/packages/website/templates/partials/header.html b/packages/website/templates/partials/header.html
index 5a0f50d..61f5dba 100644
--- a/packages/website/templates/partials/header.html
+++ b/packages/website/templates/partials/header.html
@@ -1,4 +1,4 @@
-