|
|
@@ -51,8 +51,6 @@ $utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text"
|
|
|
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
|
|
|
|
|
|
$enable-negative-margins: true;
|
|
|
-$offcanvas-horizontal-width: 200px !important;
|
|
|
-$offcanvas-vertical-height: 100px !important;
|
|
|
|
|
|
|
|
|
/***********************************************************
|
|
|
@@ -60,8 +58,9 @@ $offcanvas-vertical-height: 100px !important;
|
|
|
Dropped (unused in the theme): dropdown, button-group,
|
|
|
accordion, breadcrumb, pagination, badge, alert, progress,
|
|
|
toasts, modal, tooltip, popover, spinners, placeholders.
|
|
|
- Kept: grid + offcanvas + carousel + nav/navbar + forms/
|
|
|
- buttons + tables + list-group + card + the utilities API.
|
|
|
+ Kept: grid + carousel + nav/navbar + forms/buttons + tables
|
|
|
+ + list-group + card + the utilities API. (offcanvas nav is now
|
|
|
+ self-contained CSS via :target — see .dw-offcanvas in Overrides.)
|
|
|
(Was the full ~200 KB framework.)
|
|
|
************************************************************/
|
|
|
|
|
|
@@ -84,7 +83,6 @@ $offcanvas-vertical-height: 100px !important;
|
|
|
@import '../node_modules/bootstrap/scss/list-group';
|
|
|
@import '../node_modules/bootstrap/scss/close';
|
|
|
@import '../node_modules/bootstrap/scss/carousel';
|
|
|
-@import '../node_modules/bootstrap/scss/offcanvas';
|
|
|
@import '../node_modules/bootstrap/scss/helpers';
|
|
|
@import '../node_modules/bootstrap/scss/utilities/api';
|
|
|
|
|
|
@@ -116,3 +114,50 @@ $offcanvas-vertical-height: 100px !important;
|
|
|
height: 2em;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
+
|
|
|
+// Offcanvas top-nav — self-contained, CSS-only (replaces Bootstrap's offcanvas
|
|
|
+// component + JS). The brand link is <a href="#offcanvasNav">, so :target drives
|
|
|
+// the open state; a backdrop <a href="#"> and the × link close it. Tradeoffs vs
|
|
|
+// the BS JS version: no ESC-to-close, no focus-trap, no body-scroll-lock.
|
|
|
+.dw-offcanvas {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 1045; // above .navbar.fixed-top (1030)
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100px;
|
|
|
+ visibility: hidden;
|
|
|
+ transform: translateY(-100%);
|
|
|
+ transition: transform 0.3s ease-in-out, visibility 0.3s;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.dw-offcanvas:target {
|
|
|
+ visibility: visible;
|
|
|
+ transform: none;
|
|
|
+}
|
|
|
+.dw-offcanvas-close {
|
|
|
+ position: absolute;
|
|
|
+ top: 0.25rem;
|
|
|
+ right: 0.75rem;
|
|
|
+ font-size: 1.75rem;
|
|
|
+ line-height: 1;
|
|
|
+ color: inherit;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+.dw-offcanvas-backdrop {
|
|
|
+ display: none;
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ z-index: 1040; // below .dw-offcanvas
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+}
|
|
|
+.dw-offcanvas:target ~ .dw-offcanvas-backdrop {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+@media (prefers-reduced-motion: reduce) {
|
|
|
+ .dw-offcanvas {
|
|
|
+ transition: none;
|
|
|
+ }
|
|
|
+}
|