Add color mode on Grid example

Orange-OpenSource · Nov 13, 2023 · 2a3ea49 · 2a3ea49
1 parent 5326d71
commit 2a3ea49
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/site/content/docs/5.3/examples/grid/grid.css b/site/content/docs/5.3/examples/grid/grid.css
@@ -1,14 +1,14 @@
 .themed-grid-col {
   padding-top: .75rem;
   padding-bottom: .75rem;
-  background-color: #eee; /* Boosted mod */
-  outline: 1px solid #ddd; /* Boosted mod */
+  background-color: var(--bs-secondary-bg); /* Boosted mod */
+  outline: 1px solid var(--bs-border-color-translucent); /* Boosted mod */
 }
 
 .themed-container {
   padding-top: .75rem; /* Boosted mod */
   padding-bottom: .75rem; /* Boosted mod */
   margin-bottom: 1.5rem;
-  background-color: #b5e8f7;
-  outline: 1px solid #4bb4e6; /* Boosted mod */
+  background-color: var(--bs-border-color-translucent); /* Boosted mod */
+  outline: 1px solid var(--bs-secondary); /* Boosted mod */
 }
diff --git a/site/content/docs/5.3/examples/grid/index.html b/site/content/docs/5.3/examples/grid/index.html
@@ -86,9 +86,10 @@ <h2 class="mt-4">Two columns</h2>
     </div>
 
     <h2 class="mt-4">Full width, single column</h2>
-    <p class="text-warning">
-      No grid classes are necessary for full-width elements.
-    </p>
+    <div class="alert alert-warning">
+      <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
+      <p>No grid classes are necessary for full-width elements.</p>
+    </div>
 
     <hr class="my-4">