_CollapsibleSection.scss (3568B)
1 /* stylelint-disable max-nesting-depth */ 2 3 .collapsible-section { 4 // Compact layout padding and spacing from thumbs UI overrides 5 padding: 0 var(--space-xlarge); 6 margin-block-end: var(--space-xxlarge); 7 8 .section-title-container { 9 margin: 0; 10 11 &.has-subtitle { 12 display: flex; 13 flex-direction: column; 14 15 @media (min-width: $break-point-large) { 16 flex-direction: row; 17 align-items: baseline; 18 justify-content: space-between; 19 } 20 } 21 } 22 23 .section-title { 24 font-size: $section-title-font-size; 25 font-weight: var(--heading-font-weight); 26 color: var(--newtab-text-primary-color); 27 28 &.grey-title { 29 color: var(--newtab-text-primary-color); 30 display: inline-block; 31 fill: var(--newtab-text-primary-color); 32 vertical-align: middle; 33 } 34 35 .section-title-contents { 36 // Center "What's Pocket?" for "mobile" viewport 37 @media (max-width: $break-point-medium - 1) { 38 display: block; 39 40 .learn-more-link-wrapper { 41 display: block; 42 text-align: center; 43 44 .learn-more-link { 45 margin-inline-start: 0; 46 } 47 } 48 } 49 50 vertical-align: top; 51 } 52 } 53 54 .section-sub-title { 55 font-size: inherit; 56 color: var(--newtab-text-secondary-color); 57 opacity: 0.3; 58 } 59 60 .section-top-bar { 61 min-height: 19px; 62 margin-block-end: var(--space-medium); 63 position: relative; 64 display: flex; 65 justify-content: space-between; 66 align-items: center; 67 68 @media (max-width: $break-point-medium - 1) { 69 flex-direction: column; 70 gap: var(--space-small); 71 align-items: flex-start; 72 } 73 } 74 75 &.active { 76 background: var(--newtab-element-hover-color); 77 border-radius: var(--border-radius-small); 78 } 79 80 .learn-more-link { 81 font-size: var(--font-size-small); 82 margin-inline-start: var(--space-medium); 83 84 a { 85 color: var(--newtab-primary-action-background); 86 } 87 } 88 89 .section-body-fallback { 90 height: $card-height; 91 } 92 93 .section-body { 94 // This is so the top sites favicon and card dropshadows don't get clipped during animation: 95 margin: 0 calc(var(--space-xsmall) * -1); 96 padding: 0 var(--space-small); 97 98 &.animating { 99 overflow: hidden; 100 pointer-events: none; 101 } 102 } 103 104 &[data-section-id='topsites'] { 105 .section-top-bar { 106 display: none; 107 } 108 } 109 110 // Hide first story card for the medium breakpoint to prevent orphaned third story 111 &[data-section-id='topstories'] .card-outer:first-child { 112 @media (min-width: $break-point-medium) and (max-width: $break-point-large - 1) { 113 display: none; 114 } 115 } 116 117 .button-topic-selection { 118 display: none; 119 120 @media(min-width: $break-point-layout-variant) { 121 display: block; 122 } 123 124 // Note: the 'primary' theme uses a solid color and does not need this override 125 moz-button[type='default'] { 126 // Bug 1908010 - This overwrites the design system color because of a 127 // known transparency issue with color-mix syntax when a wallpaper is set 128 .lightWallpaper &, 129 .darkWallpaper & { 130 &::part(button) { 131 background-color: var(--newtab-weather-background-color); 132 133 &:hover { 134 background-color: var(--newtab-button-static-hover-background); 135 } 136 137 &:hover:active { 138 background-color: var(--newtab-button-static-active-background); 139 } 140 141 @media (prefers-contrast) { 142 background-color: var(--background-color-box); 143 } 144 } 145 146 } 147 } 148 } 149 }