_PromoCard.scss (1673B)
1 .promo-card-wrapper { 2 @include newtab-card-style; 3 4 display: none; // hidden by default 5 box-shadow: var(--box-shadow-card); 6 border-radius: var(--border-radius-large); 7 height: 298px; 8 width: 228px; 9 position: relative; 10 padding: var(--space-large); 11 12 .promo-card-title { 13 display: block; 14 font-size: var(--font-size-medium); 15 font-weight: var(--heading-font-weight); 16 margin-block: var(--space-medium); 17 18 &::before { 19 content: ''; 20 display: inline-block; 21 width: var(--icon-size); 22 height: var(--icon-size); 23 background-image: url('chrome://branding/content/icon32.png'); 24 background-size: contain; 25 background-repeat: no-repeat; 26 margin-inline-end: var(--space-small); 27 vertical-align: middle; 28 } 29 } 30 31 .promo-card-body { 32 display: block; 33 margin-block: 0 var(--space-medium); 34 } 35 36 .promo-card-dismiss-button { 37 position: absolute; 38 inset-block-start: var(--space-small); 39 inset-inline-end: var(--space-small); 40 margin: 0; 41 } 42 43 .promo-card-cta-wrapper { 44 display: flex; 45 width: 100%; 46 justify-content: end; 47 } 48 49 .img-wrapper { 50 height: 132px; 51 width: 196px; 52 } 53 } 54 55 // Card grid and sections have different breakpoints where we move to 3 columns. 56 .ds-card-grid { 57 .promo-card-wrapper { 58 @media (min-width: $break-point-ultra-wide) { 59 display: block; // only visible in 4 column layout 60 } 61 } 62 } 63 64 // Card grid and sections have different breakpoints where we move to 3 columns. 65 .ds-section-wrapper{ 66 .promo-card-wrapper { 67 @media (min-width: $break-point-sections-variant) { 68 display: block; // only visible in 4 column layout 69 } 70 } 71 }