Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: consistent button hover transitions (#22157)

This commit is contained in:
Kris 2023-06-16 10:25:58 -04:00 committed by GitHub
parent a2b038ffe7
commit ffcac7bf5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -315,6 +315,11 @@ nav.post-controls {
vertical-align: top;
background: transparent;
border: none;
.d-icon {
// this avoids an issue where hovering off the icon
// removes the .d-hover class from the button prematurely
pointer-events: none;
}
&.d-hover,
&:focus,
&:active {
@ -329,7 +334,7 @@ nav.post-controls {
position: relative;
}
&.delete.d-hover,
&.delete:hover,
&.delete:active,
&.delete:focus {
background: var(--danger);
color: var(--secondary);
@ -982,17 +987,13 @@ aside.quote {
.widget-button {
display: flex;
align-items: center;
.d-button-label {
order: 0;
padding-right: 0.25em;
color: var(--primary-med-or-secondary-med);
transition: color 0.25s;
}
.d-icon {
order: 1;
transition: color 0.25s;
color: var(--primary-med-or-secondary-med);
}
.discourse-no-touch & {

4
app/assets/stylesheets/common/components/buttons.scss
View File

@ -27,6 +27,7 @@
rgba(0, 0, 0, 0)
);
border-radius: var(--d-button-border-radius);
transition: background 0.25s, color 0.25s;
cursor: pointer;
.d-icon {
color: $icon-color;
@ -293,9 +294,10 @@
background: transparent;
border: 0;
line-height: var(--line-height-small);
transition: color 0.25s, background 0.25s;
transition: background 0.25s, color 0.25s;
.d-icon {
color: var(--primary-low-mid);
transition: color 0.25s;
}
@include hover {
background: transparent;