fix: change modal bg to surface

Signed-off-by: Jakob Steiner <[email protected]>
glasskube · Feb 29, 2024 · 13f58a7 · 13f58a7
1 parent 9c22613
commit 13f58a7
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/examples/index.html b/examples/index.html
@@ -132,7 +132,7 @@
     </symbol>
   </svg>
 
-  <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
+  <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle" style="z-index: 1000;">
     <button class="btn btn-accent p-1 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button"
       aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
       <i id="theme-icon" class="bi bi-circle-half me-2 opacity-50"></i>
@@ -183,6 +183,10 @@
   <main>
     <div class="container">
 
+      <!-------------------------------------------------------------------------------
+                                          BUTTONS
+      -------------------------------------------------------------------------------->
+
       <div class="d-flex gap-2 justify-content-center py-5">
         <button class="btn btn-primary rounded-pill px-3" type="button">Primary</button>
         <button class="btn btn-secondary rounded-pill px-3" type="button">Secondary</button>
@@ -266,8 +270,41 @@
         </button>
       </div>
 
+
       <hr>
 
+      <!-------------------------------------------------------------------------------
+                                            MODAL
+      -------------------------------------------------------------------------------->
+
+      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
+        Launch demo modal
+      </button>
+
+      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+              ...
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-primary">Save changes</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <hr>
+
+      <!-------------------------------------------------------------------------------
+                                       CHECKS, RADIOS
+      -------------------------------------------------------------------------------->
+
       <div class="form-check">
         <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
         <label class="form-check-label" for="flexCheckDefault">
@@ -295,6 +332,11 @@
 
       <hr>
 
+
+      <!-------------------------------------------------------------------------------
+                                           NAVBAR
+      -------------------------------------------------------------------------------->
+
       <h1 class="visually-hidden">Headers examples</h1>
 
       <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -70,3 +70,4 @@ $alert-padding-x: 1rem;
 $alert-padding-y: 1rem;
 
 $modal-inner-padding: 1rem;
+$modal-content-bg: var(--bs-secondary-bg);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -70,3 +70,4 @@ $alert-padding-x: 1rem;
		$alert-padding-y: 1rem;

		$modal-inner-padding: 1rem;
		$modal-content-bg: var(--bs-secondary-bg);