Enhance OUDS Web grid system example

Orange-OpenSource · Oct 23, 2024 · fa8bf0d · fa8bf0d
1 parent 75b0cbe
commit fa8bf0d
Show file tree

Hide file tree

Showing 2 changed files with 221 additions and 247 deletions.
diff --git a/site/content/docs/0.0/examples/grid-system/grid-system.css b/site/content/docs/0.0/examples/grid-system/grid-system.css
@@ -1,27 +1,35 @@
-.padding-color {
+:root {
+  --bs-example-bg-col: #ffe2e2;
+}
+
+.legend {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+
+.bg-example {
+  background-color: #ff9f9f;
+}
+
+.bg-col {
+  background-color: var(--bs-example-bg-col);
+}
+
+.col {
   text-align: center;
-  background-color: #ffe2e2;
+  background-color: var(--bs-example-bg-col);
   background-clip: content-box;
 }
 
-div.row .padding-color {
+div.row .col {
   box-shadow: inset calc(var(--bs-gutter-x) * -.5) 0 0 0 #fff, inset calc(var(--bs-gutter-x) * .5) 0 0 0 #fff;
 }
 
-div.row .padding-color:first-child {
+div.row .col:first-child {
   box-shadow: inset calc(var(--bs-gutter-x) * -.5) 0 0 0 #fff;
 }
 
-div.row .padding-color:last-child {
+div.row .col:last-child {
   box-shadow: inset calc(var(--bs-gutter-x) * .5) 0 0 0 #fff;
 }
-
-.legend {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-}
-
-.column-color {
-  background-color: #ffe2e2;
-}