Fix store selector transition (#4400)

This commit is contained in:
d11n
2022-12-05 08:47:51 +01:00
committed by GitHub
parent f36df81d9a
commit a1c10b4ea3
2 changed files with 16 additions and 2 deletions

View File

@@ -41,7 +41,7 @@ else
@if (Model.Options.Count > 0)
{
<div id="StoreSelectorDropdown" class="dropdown only-for-js">
<button id="StoreSelectorToggle" class="btn btn-secondary dropdown-toggle rounded-pill px-3 @(Model.CurrentStoreId == null ? "text-secondary" : "")" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<button id="StoreSelectorToggle" class="btn btn-secondary dropdown-toggle rounded-pill px-3 @(Model.CurrentStoreId == null ? "empty-state" : "")" type="button" data-bs-toggle="dropdown" aria-expanded="false">
@if (!string.IsNullOrEmpty(Model.CurrentStoreLogoFileId))
{
<img class="logo" src="@(await FileService.GetFileUrl(Context.Request.GetAbsoluteRootUri(), Model.CurrentStoreLogoFileId))" alt="@Model.CurrentDisplayName" />

View File

@@ -158,15 +158,29 @@
background-color: var(--btcpay-header-bg);
}
#StoreSelectorToggle.empty-state {
color: var(--btcpay-body-text-muted);
}
#StoreSelectorToggle::after {
content: none;
}
#StoreSelectorToggle,
#StoreSelectorToggle .logo,
#StoreSelectorToggle .icon {
transition: unset;
transition-property: color, border-color;
transition-timing-function: ease, ease;
transition-duration: var(--btcpay-transition-duration-fast), var(--btcpay-transition-duration-fast);
}
#StoreSelectorToggle .logo,
#StoreSelectorToggle .icon {
width: 1.5rem;
height: 1.5rem;
transition: color 0.15s ease-in-out;
/* Fixes seemingly delayed icon animation */
-webkit-transition-duration: 0.05s, var(--btcpay-transition-duration-fast);
}
#StoreSelectorToggle .logo,