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; vertical-align: top;
background: transparent; background: transparent;
border: none; 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, &.d-hover,
&:focus, &:focus,
&:active { &:active {
@ -329,7 +334,7 @@ nav.post-controls {
position: relative; position: relative;
} }
&.delete.d-hover, &.delete.d-hover,
&.delete:hover, &.delete:active,
&.delete:focus { &.delete:focus {
background: var(--danger); background: var(--danger);
color: var(--secondary); color: var(--secondary);
@ -982,17 +987,13 @@ aside.quote {
.widget-button { .widget-button {
display: flex; display: flex;
align-items: center; align-items: center;
.d-button-label { .d-button-label {
order: 0; order: 0;
padding-right: 0.25em; padding-right: 0.25em;
color: var(--primary-med-or-secondary-med); color: var(--primary-med-or-secondary-med);
transition: color 0.25s;
} }
.d-icon { .d-icon {
order: 1; order: 1;
transition: color 0.25s;
color: var(--primary-med-or-secondary-med); color: var(--primary-med-or-secondary-med);
} }
.discourse-no-touch & { .discourse-no-touch & {

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

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