_FeatureHighlight.scss (3829B)
1 .feature-highlight { 2 position: relative; 3 // This is needed because in 1 case this is positioned under a link 4 // and in an element that's not clickable. 5 pointer-events: auto; 6 z-index: 1; 7 8 .feature-highlight-modal { 9 position: absolute; 10 display: flex; 11 opacity: 0; 12 visibility: hidden; 13 cursor: default; 14 justify-content: space-between; 15 border-radius: var(--border-radius-small); 16 background: var(--newtab-background-color-secondary); 17 box-shadow: 0 2px 6px rgba(0, 0, 0, 15%); 18 width: 298px; 19 transition: 20 opacity 0.3s, 21 visibility 0.3s; 22 23 // The "Dismiss" button in the top right corner of the highlight 24 > moz-button { 25 margin-inline-start: var(--space-xsmall); 26 // Make sure the focus outline is not overlapped by the arrow 27 // if the arrow is positioned near the button 28 z-index: 1; 29 } 30 31 .message-icon { 32 margin-block: var(--space-large); 33 margin-inline: var(--space-large) var(--space-medium); 34 } 35 36 &.opened { 37 opacity: 1; 38 visibility: visible; 39 } 40 41 &::after { 42 content: ''; 43 position: absolute; 44 height: 24px; 45 width: 24px; 46 background: var(--newtab-background-color-secondary); 47 box-shadow: 4px 4px 6px -2px rgba(0, 0, 0, 15%); 48 } 49 50 &.inset-block-start { 51 inset-block-end: 100%; 52 margin-block-end: var(--space-xlarge); 53 54 &::after { 55 inset-block-end: calc(var(--space-medium) * -1); 56 transform: rotate(45deg); 57 } 58 59 &:dir(rtl)::after { 60 transform: rotate(225deg); 61 } 62 } 63 64 &.inset-block-end { 65 inset-block-start: 100%; 66 margin-block-start: var(--space-xlarge); 67 68 &::after { 69 inset-block-start: calc(var(--space-medium) * -1); 70 transform: rotate(225deg); 71 } 72 } 73 74 &.inset-inline-start { 75 inset-inline-end: calc(var(--space-xxlarge) * -1); 76 77 &::after { 78 inset-inline-end: calc(var(--space-xxlarge) - var(--space-medium)); 79 } 80 } 81 82 &.inset-inline-center { 83 transform: translateX(-50%); 84 inset-inline-start: 50%; 85 86 &:dir(rtl) { 87 transform: translateX(50%); 88 } 89 } 90 91 &.inset-inline-end { 92 inset-inline-start: calc(var(--space-xxlarge) * -1); 93 94 &::after { 95 inset-inline-start: calc(var(--space-xxlarge) - var(--space-medium)); 96 } 97 } 98 99 // Arrow is pointed on left side of box 100 &.arrow-inline-start { 101 &::after { 102 content: ''; 103 position: absolute; 104 inset-block-start: 50%; 105 inset-inline-end: calc(var(--space-small) * -1); 106 transform: translateY(-50%) rotate(225deg); 107 height: 16px; 108 width: 16px; 109 background: var(--newtab-background-color-secondary); 110 box-shadow: -4px 4px 6px -2px rgba(0, 0, 0, 15%); 111 } 112 } 113 114 // Arrow is pointed on left side of box 115 &.arrow-inline-end { 116 &::after { 117 content: ''; 118 position: absolute; 119 inset-block-start: 50%; 120 inset-inline-start: calc(var(--space-small) * -1); 121 transform: translateY(-50%) rotate(135deg); 122 height: 16px; 123 width: 16px; 124 background: var(--newtab-background-color-secondary); 125 box-shadow: 4px 4px 6px -2px rgba(0, 0, 0, 15%); 126 } 127 } 128 129 // arrow is on the top of the box centered 130 &.arrow-top-center { 131 &::after { 132 inset-block-start: calc(var(--space-small) * -1); 133 inset-inline-start: 50%; 134 transform: translateX(-50%) rotate(225deg); 135 height: 16px; 136 width: 16px; 137 } 138 } 139 140 p { 141 font-size: var(--font-size-small); 142 font-weight: var(--font-weight); 143 margin: var(--space-large) 0; 144 flex-grow: 1; 145 } 146 } 147 148 .toggle-button { 149 border: none; 150 padding: 0; 151 152 &.isHidden { 153 display: none; 154 } 155 } 156 }