diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2020-12-30 13:49:48 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-12-30 13:49:48 -0500 |
| commit | 0f3b9ec7fc2b1c7ba1780d7186dc425c3975c099 (patch) | |
| tree | a7b0bb8b0a9686221e78fb59e7d9036b5ab90ac3 /ext | |
| parent | 9f2da58bfdb950b448660da2c4ebbcff75d44117 (diff) | |
Fix overlay panel animations for different action bar locations (#1183)
Diffstat (limited to 'ext')
| -rw-r--r-- | ext/mixed/css/display.css | 13 |
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); } |