From 3bc0e982c27748fc1cf2551dffbd1c9112feb141 Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Thu, 2 May 2024 13:25:03 -0300 Subject: [PATCH] fix(fuselage): `MessageToolbar` missing opacity on hover (#1363) --- .changeset/proud-queens-yawn.md | 5 +++++ .../Message/MessageToolbar/MessageToolbar.styles.scss | 2 -- packages/fuselage/src/components/Message/mixins.scss | 9 ++++++++- 3 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 .changeset/proud-queens-yawn.md diff --git a/.changeset/proud-queens-yawn.md b/.changeset/proud-queens-yawn.md new file mode 100644 index 0000000000..7197e19e62 --- /dev/null +++ b/.changeset/proud-queens-yawn.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": patch +--- + +fix(fuselage): MessageToolbar missing opacity on hover diff --git a/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.styles.scss b/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.styles.scss index 58de61d441..6948630544 100644 --- a/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.styles.scss +++ b/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.styles.scss @@ -7,8 +7,6 @@ margin-inline: lengths.margin(20); padding: lengths.padding(2); - opacity: 0; - border: lengths.border-width(default) solid colors.stroke(extra-light); border-radius: theme( 'message-toolbar-border-radius', diff --git a/packages/fuselage/src/components/Message/mixins.scss b/packages/fuselage/src/components/Message/mixins.scss index 7aa6e6f320..4e9141cc8e 100644 --- a/packages/fuselage/src/components/Message/mixins.scss +++ b/packages/fuselage/src/components/Message/mixins.scss @@ -42,8 +42,15 @@ opacity: 0; .rcx-message:hover &, - .rcx-message:has(:focus-visible) &, .rcx-message:focus-visible & { opacity: 1; } + + /** + ** This is a hack to get focus within only for keyboard. + ** :has pseudo class are not stable on some Firefox versions + **/ + .rcx-message:has(:focus-visible) & { + opacity: 1; + } }