diff --git a/src/components/auth/CountryCodeInput.scss b/src/components/auth/CountryCodeInput.scss index e76128553..3956adc23 100644 --- a/src/components/auth/CountryCodeInput.scss +++ b/src/components/auth/CountryCodeInput.scss @@ -36,17 +36,12 @@ } .bubble { + --animation-start-scale: 0.95; + transform-origin: top center !important; - transform: scale(0.95); - overflow-y: auto; - width: 100%; max-height: 23.5rem; - - &.open { - transform: scaleY(1); - } } .MenuItem { diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss index c99f97ee0..2aaed2102 100644 --- a/src/components/middle/composer/SymbolMenu.scss +++ b/src/components/middle/composer/SymbolMenu.scss @@ -149,10 +149,6 @@ background: var(--color-background-compact-menu); backdrop-filter: blur(25px); } - - &:not(.open) { - transform: scale(0.85) !important; - } } .StickerButton.custom-emoji, .sticker-set-cover { diff --git a/src/components/middle/message/reactions/ReactionPicker.module.scss b/src/components/middle/message/reactions/ReactionPicker.module.scss index c346868ad..3a107dc0c 100644 --- a/src/components/middle/message/reactions/ReactionPicker.module.scss +++ b/src/components/middle/message/reactions/ReactionPicker.module.scss @@ -11,6 +11,7 @@ .menuContent { --border-radius-default: 1.25rem; + --animation-start-scale: 0.8; transform-origin: 9rem 4.625rem !important; width: calc(var(--symbol-menu-width) + var(--scrollbar-width)); @@ -27,7 +28,7 @@ --offset-x: -0.75rem; --offset-y: calc(100% + 0.625rem); - transform: scale(0.8) !important; + transform: scale(var(--animation-start-scale)) !important; transition: opacity 150ms cubic-bezier(0.2, 0, 0.2, 1), transform 150ms cubic-bezier(0.2, 0, 0.2, 1) !important; } @@ -36,13 +37,15 @@ } @media (max-width: 600px) { + --animation-start-scale: 0.5; + right: auto !important; left: 50% !important; max-width: min(calc(100% - 1rem), 26.25rem); &:global(.bubble) { transform-origin: 0 3.5rem !important; - transform: scale(0.5) translateX(-50%) !important; + transform: scale(var(--animation-start-scale)) translateX(-50%) !important; } &:global(.bubble.open) { diff --git a/src/components/ui/Menu.scss b/src/components/ui/Menu.scss index caf88db99..e9411d5cd 100644 --- a/src/components/ui/Menu.scss +++ b/src/components/ui/Menu.scss @@ -14,13 +14,13 @@ } .bubble { - --offset-y: calc(100% + 0.5rem); --offset-x: 0; + --animation-start-scale: 0.85; position: absolute; z-index: var(--z-menu-bubble); - transform: scale(0.85); + transform: scale(var(--animation-start-scale)); overflow: hidden; overscroll-behavior: contain; @@ -56,7 +56,8 @@ } body.no-context-menu-animations & { - transform: none !important; + --animation-start-scale: 1 !important; + transition: opacity 0.15s !important; }