_DownloadModalToggle.scss (1986B)
1 .mobileDownloadPromoWrapper { 2 display: none; 3 height: 55px; 4 5 // This class is applied when the weather widget is active and has 6 // a display mode set to "detailed" 7 &.is-tall { 8 @media (min-width: $break-point-widest) { 9 height: 74px; 10 } 11 } 12 13 @media (min-width: $break-point-medium) { 14 display: flex; 15 align-items: center; 16 justify-content: center; 17 position: absolute; 18 inset-inline-start: auto; 19 inset-block-start: var(--space-xxlarge); 20 // On smallest break point visible, make additional room for weather widget 21 inset-inline-end: var(--space-medium); 22 margin-block-start: 0; 23 margin-inline-start: 0; 24 z-index: 1; 25 } 26 27 @media (min-width: $break-point-layout-variant) { 28 // Reset horizontal spacing back to 32px 29 inset-inline-end: var(--space-xxlarge); 30 } 31 32 // No search bar: delay showing the mobile icon until the next breakpoint 33 .no-search & { 34 display: none; 35 36 @media (min-width: $break-point-large) { 37 display: flex; 38 inset-block-start: var(--space-xxlarge); 39 inset-inline-start: auto; 40 inset-inline-end: var(--space-xxlarge); 41 } 42 } 43 } 44 45 .mobile-download-promo { 46 width: 32px; 47 height: 32px; 48 appearance: none; 49 border: 0; 50 border-radius: var(--border-radius-small); 51 padding: 0; 52 cursor: pointer; 53 54 &:hover { 55 background-color: var(--button-background-color-ghost-hover); 56 57 &:active { 58 background-color: var(--button-background-color-ghost-active); 59 } 60 } 61 62 // Active state for the toggle button while the modal is open 63 &.is-active { 64 background-color: var(--button-background-color-ghost-active); 65 } 66 67 // Bug 1908010 - This overwrites the design system color because of a 68 // known transparency issue with color-mix syntax when a wallpaper is set 69 .lightWallpaper &, 70 .darkWallpaper & { 71 background-color: var(--newtab-weather-background-color); 72 73 @media (prefers-contrast) { 74 background-color: var(--background-color-box); 75 } 76 } 77 78 79 }