Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-30 16:22:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1815996 - Fix Spotlight dismiss button transitions. r=mviar

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D169398
This commit is contained in:
Shane Hughes 2023-02-14 18:49:59 +00:00
parent 6d2c047619
commit 7abda4200c
2 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
browser/components/newtab/aboutwelcome/content/aboutwelcome.css
View File

@ -1202,6 +1202,7 @@ html {
min-width: 32px;
-moz-context-properties: fill;
fill: currentColor;
transition: var(--transition);
}
.onboardingContainer .dismiss-button:dir(rtl) {
left: 0;
@ -1565,10 +1566,12 @@ html {
translate: 0 var(--translate);
}
.onboardingContainer.transition-in [pos=corner] .attrib-text,
.onboardingContainer.transition-in [pos=corner] .secondary-cta.top {
.onboardingContainer.transition-in [pos=corner] .secondary-cta.top,
.onboardingContainer.transition-in [pos=corner] .dismiss-button {
opacity: 0;
}
.onboardingContainer.transition-in .dialog-initial .main-content {
.onboardingContainer.transition-in .dialog-initial .main-content,
.onboardingContainer.transition-in .dialog-initial .dismiss-button {
translate: 0 calc(-2 * var(--translate));
}
.onboardingContainer.transition-in .dialog-initial .brand-logo,
@ -1579,6 +1582,10 @@ html {
.onboardingContainer.transition-in .screen:not(.dialog-initial):not([pos=corner]) .steps:not(.progress-bar) {
opacity: 0.2;
}
.onboardingContainer.transition-in .screen:not(.dialog-initial):not([pos=corner]) .dismiss-button {
opacity: 0;
translate: 0 calc(-1 * var(--translate));
}
.onboardingContainer.transition-in .screen:not([pos=corner]) .welcome-text,
.onboardingContainer.transition-in .screen:not([pos=corner]) .tiles-theme-section,
.onboardingContainer.transition-in .screen:not([pos=corner]) .colorway-text,
@ -1600,7 +1607,8 @@ html {
opacity: 0;
translate: 0 var(--translate);
}
.onboardingContainer.transition-out [pos=corner] .main-content {
.onboardingContainer.transition-out [pos=corner] .main-content,
.onboardingContainer.transition-out [pos=corner] .dismiss-button {
opacity: 0;
translate: 0 var(--translate);
transition-delay: 0.2s;
@ -1632,7 +1640,8 @@ html {
.onboardingContainer.transition-out .screen:not(.dialog-last):not([pos=corner]) .checkbox-container,
.onboardingContainer.transition-out .screen:not(.dialog-last):not([pos=corner]) .secondary,
.onboardingContainer.transition-out .screen:not(.dialog-last):not([pos=corner]) .secondary-cta:not(.top),
.onboardingContainer.transition-out .screen:not(.dialog-last):not([pos=corner]) .cta-link {
.onboardingContainer.transition-out .screen:not(.dialog-last):not([pos=corner]) .cta-link,
.onboardingContainer.transition-out .screen:not(.dialog-last):not([pos=corner]) .dismiss-button {
opacity: 0;
translate: 0 var(--translate);
transition-delay: 0.3s;
@ -1644,7 +1653,8 @@ html {
.onboardingContainer.transition-out .dialog-last .noodle {
transition-delay: 0s;
}
.onboardingContainer.transition-out .dialog-last .main-content {
.onboardingContainer.transition-out .dialog-last .main-content,
.onboardingContainer.transition-out .dialog-last .dismiss-button {
opacity: 0;
translate: 0 calc(2 * var(--translate));
transition-delay: 0.4s;

21
browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
View File

@ -1200,6 +1200,7 @@ html {
min-width: 32px;
-moz-context-properties: fill;
fill: currentColor;
transition: var(--transition);
&:dir(rtl) {
left: 0;
@ -1645,13 +1646,15 @@ html {
}
.attrib-text,
.secondary-cta.top {
.secondary-cta.top,
.dismiss-button {
opacity: 0;
}
}
.dialog-initial {
.main-content {
.main-content,
.dismiss-button {
translate: 0 calc(-2 * var(--translate));
}
@ -1666,6 +1669,11 @@ html {
.steps:not(.progress-bar) {
opacity: 0.2;
}
.dismiss-button {
opacity: 0;
translate: 0 calc(-1 * var(--translate));
}
}
.screen:not([pos='corner']) {
@ -1697,7 +1705,8 @@ html {
translate: 0 var(--translate);
}
.main-content {
.main-content,
.dismiss-button {
opacity: 0;
translate: 0 var(--translate);
transition-delay: 0.2s;
@ -1738,7 +1747,8 @@ html {
.checkbox-container,
.secondary,
.secondary-cta:not(.top),
.cta-link {
.cta-link,
.dismiss-button {
opacity: 0;
translate: 0 var(--translate);
transition-delay: 0.3s;
@ -1755,7 +1765,8 @@ html {
transition-delay: 0s;
}
.main-content {
.main-content,
.dismiss-button {
opacity: 0;
translate: 0 calc(2 * var(--translate));
transition-delay: 0.4s;