feat(website): add offcanvas documentation
This commit is contained in:
parent
8cbd097389
commit
c0a20f8993
4 changed files with 82 additions and 33 deletions
|
|
@ -155,33 +155,3 @@
|
||||||
:where(sup) {
|
:where(sup) {
|
||||||
top: -0.5em;
|
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;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -95,9 +95,11 @@ ul {
|
||||||
/* Make the marker position is inside the container */
|
/* Make the marker position is inside the container */
|
||||||
list-style-position: inside;
|
list-style-position: inside;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
margin-bottom: var(--msp-spacing-2);
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin-left: var(--msp-spacing-3);
|
margin-left: var(--msp-spacing-3);
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -126,3 +128,10 @@ video.respect-height {
|
||||||
li:not(:last-child) {
|
li:not(:last-child) {
|
||||||
margin-bottom: var(--msp-spacing-1);
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,4 +3,74 @@
|
||||||
section = ["Components"]
|
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>
|
||||||
|
```
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,6 @@
|
||||||
@use "@mini-strap/components/accordion/accordion.scss";
|
@use "@mini-strap/components/accordion/accordion.scss";
|
||||||
@use "@mini-strap/components/offcanvas/style.scss";
|
@use "@mini-strap/components/offcanvas/style.scss";
|
||||||
|
|
||||||
html {
|
main {
|
||||||
// background-color: red;
|
padding: var(--msp-spacing-3);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue