_DiscoveryStreamBase.scss (1510B)
1 $ds-width: 936px; 2 3 .discovery-stream.ds-layout { 4 $columns: 12; 5 --gridColumnGap: 48px; 6 --gridRowGap: 24px; 7 8 grid-template-columns: repeat($columns, 1fr); 9 grid-column-gap: var(--gridColumnGap); 10 grid-row-gap: var(--gridRowGap); 11 margin: 0 auto; 12 13 @while $columns > 0 { 14 .ds-column-#{$columns} { 15 grid-column-start: auto; 16 grid-column-end: span $columns; 17 } 18 19 $columns: $columns - 1; 20 } 21 22 .ds-column-grid { 23 display: flex; 24 flex-direction: column; 25 grid-row-gap: var(--gridRowGap); 26 27 // We want to completely hide components with no content, 28 // otherwise, it creates grid-row-gap gaps around nothing. 29 > div:empty { 30 display: none; 31 } 32 } 33 } 34 35 .ds-header { 36 margin: var(--space-small) 0; 37 38 .ds-context { 39 font-weight: var(--font-weight); 40 } 41 } 42 43 .ds-header, 44 .ds-layout .section-title span { 45 color: var(--newtab-contextual-text-primary-color); 46 font-size: $section-title-font-size; 47 font-weight: var(--heading-font-weight); 48 49 // Contrast fix for users who have wallpapers set 50 @include wallpaper-contrast-fix; 51 52 .icon { 53 fill: var(--newtab-text-secondary-color); 54 } 55 } 56 57 .collapsible-section.ds-layout { 58 margin: auto; 59 60 .section-top-bar .learn-more-link { 61 // Contrast fix for users who have wallpapers set 62 @include wallpaper-contrast-fix; 63 64 a { 65 color: var(--newtab-primary-action-background); 66 font-weight: var(--font-weight-semibold); 67 68 &:is(:focus, :hover) { 69 text-decoration: none; 70 } 71 } 72 } 73 }