aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-12-30 13:49:48 -0500
committerGitHub <noreply@github.com>2020-12-30 13:49:48 -0500
commit0f3b9ec7fc2b1c7ba1780d7186dc425c3975c099 (patch)
treea7b0bb8b0a9686221e78fb59e7d9036b5ab90ac3 /ext
parent9f2da58bfdb950b448660da2c4ebbcff75d44117 (diff)
Fix overlay panel animations for different action bar locations (#1183)
Diffstat (limited to 'ext')
-rw-r--r--ext/mixed/css/display.css13
1 files changed, 12 insertions, 1 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 8ebdf756..4c06e492 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -77,6 +77,8 @@
--entry-current-indicator-triangle-size-no-units: 6;
--entry-current-indicator-triangle-size: calc(1em * (var(--entry-current-indicator-triangle-size-no-units) / var(--font-size-no-units)));
+ --overlay-panel-translate-distance: 4em;
+
--animation-duration: 0.125s;
--animation-duration2: calc(2 * var(--animation-duration));
@@ -1506,7 +1508,7 @@ button.action-button[data-icon=source-term]::before {
transform var(--animation-duration2) ease-out;
}
.overlay-panel[hidden] {
- transform: translate(4em, 0);
+ transform: translate(var(--overlay-panel-translate-distance), 0);
opacity: 0;
visibility: hidden;
transition:
@@ -1517,6 +1519,15 @@ button.action-button[data-icon=source-term]::before {
.overlay-panel[hidden]:not(.hidden-animating) {
display: none;
}
+:root[data-popup-action-bar-location=left] .overlay-panel[hidden] {
+ transform: translate(calc(-1 * var(--overlay-panel-translate-distance)), 0);
+}
+:root[data-popup-action-bar-location=top] .overlay-panel[hidden] {
+ transform: translate(0, calc(-1 * var(--overlay-panel-translate-distance)));
+}
+:root[data-popup-action-bar-location=bottom] .overlay-panel[hidden] {
+ transform: translate(0, var(--overlay-panel-translate-distance));
+}
.overlay-panel-inner {
padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
}