From c0a20f8993404cc1864d9b9cd471a3ca0b50c5b2 Mon Sep 17 00:00:00 2001 From: aleidk Date: Fri, 27 Dec 2024 15:54:51 -0300 Subject: [PATCH] feat(website): add offcanvas documentation --- packages/core/src/_reset.scss | 30 -------- packages/core/src/style.scss | 9 +++ .../website/content/components/offcanvas.md | 72 ++++++++++++++++++- packages/website/sass/style.scss | 4 +- 4 files changed, 82 insertions(+), 33 deletions(-) diff --git a/packages/core/src/_reset.scss b/packages/core/src/_reset.scss index c4e42f8..76092a6 100644 --- a/packages/core/src/_reset.scss +++ b/packages/core/src/_reset.scss @@ -155,33 +155,3 @@ :where(sup) { top: -0.5em; } - -// ── Other ─────────────────────────────────────────────────────────────── - -:where(a) { - background-color: transparent; -} - -:where(abbr[title]) { - text-decoration: underline dotted; -} - -:where(code, kbd, samp, pre) { - font-family: monospace, monospace; - font-size: 1em; -} - -:where(sub, sup) { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -:where(sub) { - bottom: -0.25em; -} - -:where(sup) { - top: -0.5em; -} diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss index 53f7103..e05b1bd 100644 --- a/packages/core/src/style.scss +++ b/packages/core/src/style.scss @@ -95,9 +95,11 @@ ul { /* Make the marker position is inside the container */ list-style-position: inside; margin: 0; + margin-bottom: var(--msp-spacing-2); ul { margin-left: var(--msp-spacing-3); + margin-bottom: 0; } } @@ -126,3 +128,10 @@ video.respect-height { li:not(:last-child) { margin-bottom: var(--msp-spacing-1); } + +:where(code, kbd, samp, pre):not([data-lang]) { + background-color: var(--msp-color-bg-surface-2); + padding: 0 var(--msp-spacing-1); + border-radius: var(--msp-border-radius); + white-space: nowrap; +} diff --git a/packages/website/content/components/offcanvas.md b/packages/website/content/components/offcanvas.md index 1a3f402..1c398f2 100644 --- a/packages/website/content/components/offcanvas.md +++ b/packages/website/content/components/offcanvas.md @@ -3,4 +3,74 @@ section = ["Components"] +++ -# offcanvas.md +# Offcanvas + +## Basic + +The offcanvas component serves as a sidebar that is hidden out of view until is +toggled via an interactive element. The offcanvas is composed of the following +elements: + +- `msp-offcanvas`: the main container. +- `msp-offcanvas-backdrop`: a static backdrop that makes the sidebar stand out more. +- `msp-offcanvas-content`: the container for the content. +- `msp-offcanvas-header`: top section of the content. +- `msp-offcanvas-body`: middle section of the content. +- `msp-offcanvas-footer`: bottom section of the content. + +To toggle the offcanvas you need to give the `msp-offcanvas-toggle` to an +element and attach the `data-msp-target` attribute. + +### Example: + +```html + + + +
+ +
...
+
+ +``` + +## Responsive + +It's possible to have the sidebar always visible and only hide the offcanvas +when the viewport is below the brakepoint. For this add the class +`msp-offcanvas-[breakpoint]`. + +Note that the toggle and backdrop are disabled when the viewport is above the brakepoint. + +### Example + +```html + + + +
+ +
...
+
+ +``` diff --git a/packages/website/sass/style.scss b/packages/website/sass/style.scss index 52c28da..b7c6746 100644 --- a/packages/website/sass/style.scss +++ b/packages/website/sass/style.scss @@ -3,6 +3,6 @@ @use "@mini-strap/components/accordion/accordion.scss"; @use "@mini-strap/components/offcanvas/style.scss"; -html { - // background-color: red; +main { + padding: var(--msp-spacing-3); }