From 37a15516998106b005be2898dc32902f0173b385 Mon Sep 17 00:00:00 2001 From: aleidk Date: Fri, 27 Dec 2024 12:54:09 -0300 Subject: [PATCH] feat(components): allow to only hide offcanvas on breakpoint --- packages/components/src/offcanvas/style.scss | 57 +++++++++++++------ packages/core/package.json | 5 +- packages/website/templates/base.html | 34 +++++------ .../website/templates/partials/header.html | 6 +- 4 files changed, 62 insertions(+), 40 deletions(-) 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 @@ -