aboutsummaryrefslogtreecommitdiff
path: root/ext/mixed/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-25 12:39:09 -0500
committerGitHub <noreply@github.com>2020-11-25 12:39:09 -0500
commitc6c4631817247c44f788b1ffa2bc1d9f644802eb (patch)
treef0b637dd762301386bfdb89476eb3b4826be85be /ext/mixed/css
parentf7d1d2deb52a6b129c71ec139d3e1e74544d3be6 (diff)
Display button improvements (#1065)
* Use hidden and disabled properties instead of custom classes * Enable transitions on buttons
Diffstat (limited to 'ext/mixed/css')
-rw-r--r--ext/mixed/css/display.css32
1 files changed, 25 insertions, 7 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index e84d74c5..f9d5c25e 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -60,6 +60,8 @@
--expression-space-size: 0.5em;
+ --animation-duration: 0.125s;
+
/* Colors */
--background-color: #ffffff;
--glossary-image-background-color: #eeeeee;
@@ -420,17 +422,33 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
/* Action buttons */
-.action-button.disabled {
+.action-button {
+ display: block;
+ opacity: 1;
+ transition:
+ opacity var(--animation-duration) linear,
+ visibility 0s linear 0s,
+ filter var(--animation-duration) linear,
+ -webkit-filter var(--animation-duration) linear;
+}
+.action-button[hidden] {
+ display: block;
+ visibility: hidden;
+ opacity: 0;
+ transition:
+ opacity var(--animation-duration) linear,
+ visibility 0s linear var(--animation-duration),
+ filter var(--animation-duration) linear,
+ -webkit-filter var(--animation-duration) linear;
+}
+.action-button:disabled {
pointer-events: none;
cursor: default;
-}
-.action-button.disabled::before {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
- opacity: 0.25;
}
-.action-button.pending {
- visibility: hidden;
+.action-button:disabled:not([hidden]) {
+ opacity: 0.25;
}
.actions {
display: flex;
@@ -453,7 +471,7 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
button.action-button {
cursor: pointer;
}
-.action-button[data-icon]::before {
+.action-button::before {
content: "";
width: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units)));
height: calc(1em * (var(--action-button-size-no-units) / var(--font-size-no-units)));