diff --git a/services/web/frontend/stylesheets/components/button.scss b/services/web/frontend/stylesheets/components/button.scss index cdb00dd878..8bdd49256c 100644 --- a/services/web/frontend/stylesheets/components/button.scss +++ b/services/web/frontend/stylesheets/components/button.scss @@ -237,6 +237,16 @@ } } +// Show a not-allowed cursor on natively disabled buttons. Bootstrap sets +// pointer-events: none, which hides the cursor, so re-enable it; clicks are +// still blocked by the native disabled attribute. Excludes .btn.disabled on +// anchors, which rely on pointer-events: none for multi-click protection. +button.btn:disabled, +fieldset:disabled button.btn { + pointer-events: auto; + cursor: not-allowed; +} + // Link buttons // ------------------------- diff --git a/services/web/frontend/stylesheets/components/dropdown-menu.scss b/services/web/frontend/stylesheets/components/dropdown-menu.scss index 72396b7a64..4b7c95b71c 100644 --- a/services/web/frontend/stylesheets/components/dropdown-menu.scss +++ b/services/web/frontend/stylesheets/components/dropdown-menu.scss @@ -219,6 +219,21 @@ $dropdown-item-min-height: 36px; width: 20px; } +// Bootstrap sets pointer-events: none on disabled items, so set the cursor on +// the parent
  • where pointer events still land. +.dropdown-menu li:has(> .dropdown-item.disabled), +.dropdown-menu li:has(> .dropdown-item[aria-disabled='true']) { + cursor: not-allowed; +} + +// When the dropdown item itself is rendered as an
  • (e.g. Dropdown.Item as="li"), +// pointer-events: none is on the
  • itself so re-enable it there. +.dropdown-menu li.dropdown-item.disabled, +.dropdown-menu li.dropdown-item[aria-disabled='true'] { + pointer-events: auto; + cursor: not-allowed; +} + // description text should look disabled when the dropdown item is disabled .dropdown-item.disabled .dropdown-item-description, .dropdown-item[aria-disabled='true'] .dropdown-item-description {