_FollowSectionButtonHighlight.scss (2038B)
1 // Default overrides from Feature Highlight 2 .follow-section-button-highlight { 3 .feature-highlight-modal { 4 padding: var(--space-large); 5 width: auto; 6 7 p { 8 margin: 0; 9 } 10 11 .message-icon { 12 display: none; 13 } 14 15 .icon-dismiss { 16 margin-block-start: 0; 17 margin-inline-end: 0; 18 } 19 20 // The "Dismiss" button in the top right corner of the highlight needs to be in front of the image 21 > moz-button { 22 position: absolute; 23 inset-inline-end: var(--space-large); 24 inset-block-start: var(--space-large); 25 } 26 } 27 28 // Custom override for dismiss-contrast 29 &.is-inverted-dark-dismiss-button { 30 .feature-highlight-modal { 31 @media (prefers-color-scheme: dark) { 32 // override color so that it is visible on the image 33 >moz-button { 34 --button-icon-fill: var(--color-gray-70); 35 } 36 } 37 } 38 } 39 40 .feature-highlight-modal.arrow-inline-start { 41 inset-block-start: calc(100% + var(--space-large)); 42 inset-inline-start: 50%; 43 transform: translateX(-50%); 44 45 &::after { 46 inset-block-start: calc(var(--space-small) * -1); 47 inset-inline-end: 50%; 48 transform: translateX(50%) rotate(135deg); 49 } 50 51 52 @media (min-width: $break-point-layout-variant) { 53 min-width: auto; 54 inset-inline-start: auto; 55 inset-inline-end: calc(100% + var(--space-large)); 56 inset-block-start: 50%; 57 transform: translateY(-50%); 58 59 &::after { 60 inset-block-start: 50%; 61 inset-inline-end: calc(var(--space-small) * -1); 62 transform: translateY(-50%) rotate(225deg); 63 } 64 65 } 66 } 67 68 .inset-block-center { 69 position: absolute; 70 height: 100%; 71 width: 100%; 72 } 73 74 .follow-section-button-highlight-content { 75 display: flex; 76 flex-direction: column; 77 gap: var(--space-medium); 78 } 79 80 .follow-section-button-highlight-copy { 81 font-size: var(--font-size-small); 82 83 .title { 84 font-weight: var(--heading-font-weight); 85 margin-block-end: var(--space-xsmall); 86 } 87 } 88 }