Docs: improve offsetParent ex

Author: jlukic

docs/src/examples/query/dom-traversal/query-offsetparent/page.css

@@ -1,29 +1,38 @@
-.container {
+
+table,
+.target,
+.container,
+.box {
   padding: var(--padding);
-  margin: var(--margin) 0;
-  border: 2px solid var(--standard-30);
-  background: var(--standard-5);
+  border: 2px solid var(--border-color);
+  width: 100%;
+  min-height: 150px;
+  box-sizing: var(--box-sizing);
+  font-size: 12px;
+  font-family: monospace;
+}
+
+.container {
   position: relative;
-  height: 150px;
 }
 
 .box {
-  padding: var(--padding);
-  margin: var(--margin);
-  border: 2px solid var(--blue-30);
-  background: var(--blue-5);
-  height: 100px;
+  border-color: var(--blue-border-color);
+  background: var(--blue-background-color);
+}
+
+table {
+  border-color: var(--red-border-color);
+  background: var(--red-background-color);
 }
 
 .target {
-  position: fixed;
-  top: 20px;
-  left: 20px;
+  position: static;
+  top: 14px;
+  left: 14px;
   padding: var(--padding);
-  background: var(--green-10);
-  border: 2px solid var(--green-30);
-  font-size: 12px;
-  font-family: monospace;
+  border-color: var(--orange-border-color);
+  background: var(--orange-background-color);
 }
 
 ui-button {
@@ -39,6 +48,6 @@ ui-button {
 }
 
 .highlight {
-  outline: 3px solid var(--red-40);
+  outline: 3px solid var(--red-border-color);
   outline-offset: -3px;
 }

docs/src/examples/query/dom-traversal/query-offsetparent/page.html

@@ -1,14 +1,20 @@
 <div class="container">
   <div class="box">
-    <div class="target">
-      position: fixed
-      <br>top: 20px
-    </div>
+    <table>
+      <tr>
+        <td>
+          <div class="target">
+            position: fixed
+            <br>top: 20px
+          </div>
+        </td>
+      </tr>
+    </table>
   </div>
 </div>
 
-<ui-button class="toggle-transform">Toggle Transform</ui-button>
-<ui-button class="toggle-filter">Toggle Filter</ui-button>
-<ui-button class="find">Find Containing Parent</ui-button>
+<ui-button class="toggle position">Toggle Position</ui-button>
+<ui-button class="toggle filter">Toggle Filter</ui-button>
+<ui-button class="find">Find Offset Parent</ui-button>
 
 <div class="log"></div>

docs/src/examples/query/dom-traversal/query-offsetparent/page.js

@@ -11,15 +11,14 @@ const log = (text) => $log.text(text);
 log(`Target offsetTop: ${$target.prop('offsetTop')}px`);
 
 // Toggle transform on box
-$('.toggle-transform').on('click', () => {
-  const currentTransform = $box.css('transform');
-  if (currentTransform === 'none') {
-    $box.css('transform', 'scale(1)');
-    log('Box transform set to: scale(1) - Now box is the offset parent!');
+$('.toggle.position').on('click', () => {
+  if ($target.computedStyle('position') === 'static') {
+    $target.css('position', 'fixed');
+    log('Target set to position: fixed');
   }
   else {
-    $box.css('transform', 'none');
-    log('Box transform set to: none');
+    $target.css('position', 'static');
+    log('Target set to position: static');
   }
 
   // Show how offsetTop is now relative to different element
@@ -29,8 +28,8 @@ $('.toggle-transform').on('click', () => {
 });
 
 // Toggle filter on box
-$('.toggle-filter').on('click', () => {
-  const currentFilter = $box.css('filter');
+$('.toggle.filter').on('click', () => {
+  const currentFilter = $box.computedStyle('filter');
   if (currentFilter === 'none') {
     $box.css('filter', 'brightness(1)');
     log('Box filter set to: brightness(1) - Now box is the offset parent!');