Add red background toggle button

Orange-OpenSource · Sep 13, 2023 · f2edff6 · f2edff6
1 parent 495a264
commit f2edff6
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/site/content/docs/5.3/examples/fonts/fonts.css b/site/content/docs/5.3/examples/fonts/fonts.css
@@ -79,14 +79,17 @@
 }
 
 .letter-spacing-n0-25 {
-  letter-spacing: -0.25px;
+  letter-spacing: -.25px;
 }
 
 .letter-spacing-n0-5 {
-  letter-spacing: -0.5px;
+  letter-spacing: -.5px;
 }
 
 .bg-light-gray {
-  background-color: rgba(256, 0, 0, 0.4);
+  background-color: rgba(256, 0, 0, .4);
+}
+
+.bg-none {
+  background-color: none;
 }
-
diff --git a/site/content/docs/5.3/examples/fonts/index.html b/site/content/docs/5.3/examples/fonts/index.html
@@ -19,7 +19,10 @@
   <h1 class="visually-hidden">Fonts examples</h1>
 
   <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
-  <label class="btn btn-primary mb-5" for="btn-check" onclick="toggle()">Toggle yellow lines display</label>
+  <label class="btn btn-primary mb-5" for="btn-check" onclick="toggleLines()">Toggle yellow lines display</label>
+
+  <input type="checkbox" class="btn-check" id="btn-bg" autocomplete="off">
+  <label class="btn btn-primary mb-5" for="btn-bg" onclick="toggleBackground()">Toggle red background display</label>
 
   <div class="d-flex flex-column fw-700 text-white lh-40px letter-spacing-n1 fs-40px">
     <hr>
@@ -165,9 +168,20 @@ <h1 class="visually-hidden">Fonts examples</h1>
 </main>
 
 <script>
-  function toggle() {
+  function toggleLines() {
     document.querySelectorAll('.position-absolute').forEach(function(el) {
       el.classList.toggle('d-none');
     });
   }
-</script>
+  function toggleBackground() {
+    document.querySelectorAll('span').forEach(function(el) {
+      if (el.classList.contains('bg-light-gray')) {
+        el.classList.remove('bg-light-gray')
+        el.classList.add('bg-none')
+      } else {
+        el.classList.remove('bg-none')
+        el.classList.add('bg-light-gray')
+      }
+    });
+  }
+</script>