feat(website): add offcanvas documentation

2024-12-27 15:54:51 -03:00 · 2024-12-27 15:54:51 -03:00 · c0a20f8993
commit c0a20f8993
parent 8cbd097389
4 changed files with 82 additions and 33 deletions
--- 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;
-}
--- 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;
+}
--- 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
+<body>
+  <aside id="main-offcanvas" class="msp-offcanvas">
+    <div class="msp-offcanvas-backdrop msp-offcanvas-toggle" data-msp-target="#main-offcanvas"></div>
+
+    <div class="msp-offcanvas-content">
+      <div class="msp-offcanvas-body">
+        ...
+      </div>
+    </div>
+  </aside>
+
+  <main>
+    <nav>
+      <button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
+    </nav>
+    <section>...</section>
+  </main>
+</body>
+```
+
+## 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
+<body>
+  <aside id="main-offcanvas" class="msp-offcanvas msp-offcanvas-sm">
+    <div class="msp-offcanvas-backdrop msp-offcanvas-toggle" data-msp-target="#main-offcanvas"></div>
+
+    <div class="msp-offcanvas-content">
+      <div class="msp-offcanvas-body">
+        ...
+      </div>
+    </div>
+  </aside>
+
+  <main>
+    <nav>
+      <button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
+    </nav>
+    <section>...</section>
+  </main>
+</body>
+```
--- 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);
 }