Make interaction buttons use focused-style

This commit is contained in:
tusooa 2023-03-02 21:39:39 -05:00
parent 090f4b854e
commit 3a8de1e449
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
5 changed files with 26 additions and 14 deletions

View File

@ -192,11 +192,6 @@
position: static;
padding: 10px;
margin: -10px;
&:hover .svg-inline--fa {
color: $fallback--text;
color: var(--text, $fallback--text);
}
}
.popover-trigger-button {
@ -213,6 +208,11 @@
.focus-marker {
visibility: visible;
}
.svg-inline--fa {
color: $fallback--text;
color: var(--text, $fallback--text);
}
}
}
}

View File

@ -86,7 +86,6 @@
animation-duration: 0.6s;
}
&:hover .svg-inline--fa,
&.-favorited .svg-inline--fa {
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
@ -103,6 +102,11 @@
}
@include focused-style {
.svg-inline--fa {
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
}
.focus-marker {
visibility: visible;
}

View File

@ -121,7 +121,7 @@
line-height: 1.5;
align-content: center;
&:hover {
@include focused-style {
transform: scale(1.25);
}
}
@ -130,11 +130,6 @@
.popover-trigger {
padding: 10px;
margin: -10px;
&:hover .svg-inline--fa {
color: $fallback--text;
color: var(--text, $fallback--text);
}
}
.popover-trigger-button {
@ -151,6 +146,11 @@
.focus-marker {
visibility: visible;
}
.svg-inline--fa {
color: $fallback--text;
color: var(--text, $fallback--text);
}
}
}
}

View File

@ -76,7 +76,6 @@
}
.interactive {
&:hover .svg-inline--fa,
&.-active .svg-inline--fa {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
@ -89,6 +88,11 @@
}
@include focused-style {
.svg-inline--fa {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
.focus-marker {
visibility: visible;
}

View File

@ -105,7 +105,6 @@
animation-duration: 0.6s;
}
&:hover .svg-inline--fa,
&.-repeated .svg-inline--fa {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
@ -122,6 +121,11 @@
}
@include focused-style {
.svg-inline--fa {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
.focus-marker {
visibility: visible;
}