From 2563bd2a22661eb4758c3accd8bc4bdbf9f367d3 Mon Sep 17 00:00:00 2001 From: peterjunpark Date: Fri, 12 Dec 2025 15:20:09 -0500 Subject: [PATCH] [docs/7.10.0] selector: responsive css for narrow viewports (#5769) Fix element overflow on narrow/mobile screens. Fix incorrect warning in matrix.py extension --- docs/extension/rocm_docs_custom/matrix.py | 2 +- .../static/selector/selector.css | 105 +++++++++++++++--- 2 files changed, 93 insertions(+), 14 deletions(-) diff --git a/docs/extension/rocm_docs_custom/matrix.py b/docs/extension/rocm_docs_custom/matrix.py index 08bceb029..c5babd1f5 100644 --- a/docs/extension/rocm_docs_custom/matrix.py +++ b/docs/extension/rocm_docs_custom/matrix.py @@ -164,7 +164,7 @@ class CustomTableRowDirective(SphinxDirective): # Sanity check parent = getattr(self.state, "parent", None) if not parent or not any( - isinstance(p, CustomTable) + isinstance(p, (CustomTable, CustomTableHead)) for p in parent.traverse(include_self=True) ): logger.warning( diff --git a/docs/extension/rocm_docs_custom/static/selector/selector.css b/docs/extension/rocm_docs_custom/static/selector/selector.css index ba07f4174..259d162fd 100644 --- a/docs/extension/rocm_docs_custom/static/selector/selector.css +++ b/docs/extension/rocm_docs_custom/static/selector/selector.css @@ -7,6 +7,11 @@ html { --rocm-docs-selector-option-hover-color: var(--pst-color-link-hover); --rocm-docs-selector-option-selected-color: var(--pst-color-primary); --rocm-docs-selector-tile-padding: 0.2rem; + --rocm-docs-selector-tile-gap: 0.5rem; + --rocm-docs-selector-focus-ring: 2px solid var( + --rocm-docs-selector-accent-color + ); + --rocm-docs-selector-focus-offset: 2px; } html[data-theme="light"] { @@ -21,6 +26,12 @@ html[data-theme="dark"] { --rocm-docs-selector-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.4); } +/* Avoid odd sizing interactions with Bootstrap width utilities */ +.rocm-docs-selector-group, +.rocm-docs-selector-group * { + box-sizing: border-box; +} + /* Hide selectors during initialization to prevent FOUC */ .rocm-docs-selector-group:not(.rocm-docs-selector-initialized) { visibility: hidden; @@ -41,10 +52,11 @@ html[data-theme="dark"] { } } -/* Selector group heading when one of its options is hovered */ -.rocm-docs-selector-group:has(.rocm-docs-selector-option:hover) - .rocm-docs-selector-group-heading { - border-right-color: var(--rocm-docs-selector-option-hover-color); +@supports selector(.x:has(.y)) { + .rocm-docs-selector-group:has(.rocm-docs-selector-option:hover) + .rocm-docs-selector-group-heading { + border-right-color: var(--rocm-docs-selector-option-hover-color); + } } /* Selector group heading box */ @@ -54,7 +66,7 @@ html[data-theme="dark"] { font-weight: 600; border-right: solid 3px var(--rocm-docs-selector-accent-color); border-radius: var(--rocm-docs-selector-border-radius); - transition: border-right-color 0.25s ease; + transition: border-color 0.25s ease; box-shadow: var(--rocm-docs-selector-shadow); } @@ -72,16 +84,25 @@ html[data-theme="dark"] { justify-content: space-between; align-items: center; gap: 0.5rem; + background-color: var(--rocm-docs-selector-bg-color); padding: var(--rocm-docs-selector-tile-padding); border: solid 2px var(--rocm-docs-selector-border-color); - cursor: pointer; - transition: all 0.2 ease; border-radius: var(--rocm-docs-selector-border-radius); box-shadow: var(--rocm-docs-selector-shadow); + + cursor: pointer; + user-select: none; + + transition: + background-color 0.2s ease, + color 0.2s ease, + transform 0.2s ease, + box-shadow 0.2s ease, + border-color 0.2s ease; } -/* Selector option when hovered */ +/* Hover (not disabled) */ .rocm-docs-selector-option:hover:not(.rocm-docs-disabled) { background-color: var(--rocm-docs-selector-option-hover-color); color: var(--rocm-docs-selector-fg-color); @@ -89,27 +110,36 @@ html[data-theme="dark"] { box-shadow: var(--rocm-docs-selector-shadow-hover); } -.rocm-docs-selector-option:focus:not(.rocm-docs-disabled) { - z-index: 69; +/* Accessible keyboard focus */ +.rocm-docs-selector-option:focus-visible:not(.rocm-docs-disabled) { + outline: var(--rocm-docs-selector-focus-ring); + outline-offset: var(--rocm-docs-selector-focus-offset); } -/* Selector option when selected */ +/* Keep it above neighbors if it gets an outline/box-shadow */ +.rocm-docs-selector-option:focus:not(.rocm-docs-disabled) { + position: relative; + z-index: 1; +} + +/* Selected */ .rocm-docs-selector-option.rocm-docs-selected { background-color: var(--rocm-docs-selector-option-selected-color); color: var(--rocm-docs-selector-fg-color); } -/* Prevent hover effect on selected */ +/* Prevent hover lift on selected (keeps it steady) */ .rocm-docs-selector-option.rocm-docs-selected:hover { transform: none; } -/* Selector option when disabled */ +/* Disabled */ .rocm-docs-selector-option.rocm-docs-disabled { background-color: var(--rocm-docs-selector-border-color); color: var(--rocm-docs-selector-fg-color); cursor: not-allowed; pointer-events: none; + opacity: 0.75; } /* Hidden state */ @@ -122,3 +152,52 @@ html[data-theme="dark"] { display: block; padding-left: 1rem; } + +@media (max-width: 768px) { + .rocm-docs-selector-group { + row-gap: var(--rocm-docs-selector-tile-gap); + } +} + +@media (max-width: 576px) { + .rocm-docs-selector-option { + flex: 0 0 100%; + max-width: 100%; + } +} + +@media (max-width: 440px) { + .rocm-docs-selector-group-heading { + flex: 0 0 100%; + max-width: 100%; + + /* When stacked, puth the accent on the bottom */ + border-right: 0; + border-bottom: solid 3px var(--rocm-docs-selector-accent-color); + } + + .rocm-docs-selector-group.row .row { + flex: 0 0 100%; + max-width: 100%; + } + + .rocm-docs-selector-option { + flex: 0 0 100%; + max-width: 100%; + } +} + +/* Motion reduction */ +@media (prefers-reduced-motion: reduce) { + .rocm-docs-selector-group.rocm-docs-selector-initialized { + animation: none; + } + + .rocm-docs-selector-option { + transition: none; + } + + .rocm-docs-selector-option:hover:not(.rocm-docs-disabled) { + transform: none; + } +}