Skip to content

Fix clear button hover effect #3278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

Fix clear button hover effect #3278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
92dd160
Just changed the cdn in code and it sarted working
ujjwaldubey1 Nov 11, 2024
85b834e
Fix Clear button hover effect by giving the backgroundColor
ujjwaldubey1 Nov 17, 2024
e9a7a8c
Merge branch 'develop' into fix-clear-button-hover-effect
ujjwaldubey1 Nov 19, 2024
f91bcf4
removed the scaling of the button background
ujjwaldubey1 Nov 19, 2024
fb34be6
Merge branch 'fix-clear-button-hover-effect' of https://github.com/uj…
ujjwaldubey1 Nov 19, 2024
4958117
Merge branch 'develop' into fix-clear-button-hover-effect
raclim Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions client/styles/components/_console.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,16 +88,24 @@
@include themify() {
@extend %link;
color: getThemifyVariable('secondary-text-color');
&:hover {
color: getThemifyVariable('heavy-text-color');
}

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the update on this! I'm reviewing the code more closely and noticed a few areas that would need more adjustments.

First, I see that you removed the &:hover on line 91, presumably to address the hover styles instead within .light .preview-console__clear:hover on lines 105 - 108. However, the &:hover was already handling the hover styling effectively, so the additional lines on 105-108 don't seem necessary. Additionally, those lines only target the .light theme, which creates a gap for the other themes, dark and contrast.

It seems like these lines were adapted from the attached issue, but that code was intended as a mockup rather than a fully implemented solution. To ensure consistency across all themes, I'd suggest continuing to manage the hover effect styling within &:hover, and to use the themifyVariables to assign color values rather than hardcoding hex codes.

}
background: transparent;
border: none;
padding-right: #{math.div(10, $base-font-size)}rem;
.preview-console--collapsed & {
display: none;
}
transition: background-color 0.3s ease,
color 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s ease,
border-color 0.3s ease;
}
.light .preview-console__clear:hover {
background: #ed225d;
color: white;
border-radius: 2px;
}

.preview-console__body {
Expand Down
Loading
Loading