UX: consistent button hover transitions (#22157)
This commit is contained in:
parent
a2b038ffe7
commit
ffcac7bf5a
|
@ -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 & {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue