From 80ca676a17c1cd13db3b29271ac1bec957e6bd12 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Tue, 31 Oct 2023 06:30:00 +0100 Subject: [PATCH] Dark mode: Offcanvas (#2348) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Julien Déramond --- scss/_variables.scss | 4 +- site/content/docs/5.3/dark-mode.md | 147 +++++++++++++++++++++++++++++ 2 files changed, 149 insertions(+), 2 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 1a6a355697..31203ca8f3 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -2229,8 +2229,8 @@ $offcanvas-transition-duration: .3s !default; $offcanvas-border-color: $modal-content-border-color !default; $offcanvas-border-width: $modal-content-border-width !default; $offcanvas-title-line-height: $modal-title-line-height !default; -$offcanvas-bg-color: var(--#{$prefix}body-bg) !default; -$offcanvas-color: null !default; // Boosted mod: instead of `var(--#{$prefix}body-color)` +$offcanvas-bg-color: $modal-content-bg !default; // Boosted mod: instead of `var(--#{$prefix}body-bg)` +$offcanvas-color: $modal-content-color !default; // Boosted mod: instead of `var(--#{$prefix}body-color)` $offcanvas-box-shadow: none !default; // Boosted mod $offcanvas-backdrop-bg: $modal-backdrop-bg !default; $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index 01d075ab80..ed4916db7f 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -2380,6 +2380,153 @@ sitemap_exclude: true +### Offcanvas + +

No theme

+ +
+ +
+
+
Offcanvas
+ +
+
+
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. +
+
+ + +
+
+
+
+ +

Dark theme on container

+ +
+ +
+
+
Offcanvas
+ +
+
+
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. +
+
+ + +
+
+
+
+ +

Light theme on container

+ +
+ +
+
+
Offcanvas
+ +
+
+
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. +
+
+ + +
+
+
+
+ +

Dark theme on component

+ +
+ +
+
+
Offcanvas
+ +
+
+
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. +
+
+ + +
+
+
+
+ +

Light theme on component

+ +
+ +
+
+
Offcanvas
+ +
+
+
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. +
+
+ + +
+
+
+
+ ### Pagination

No theme