_Card.scss (7506B)
1 @use 'sass:math'; 2 3 /* stylelint-disable max-nesting-depth */ 4 5 .card-outer { 6 @include context-menu-button; 7 8 background: var(--newtab-background-color-secondary); 9 border-radius: var(--border-radius-medium); 10 display: inline-block; 11 height: $card-height; 12 margin-inline-end: var(--space-xxlarge); 13 position: relative; 14 width: 100%; 15 16 &:is(:focus):not(.placeholder) { 17 @include ds-focus; 18 19 transition: none; 20 } 21 22 &:hover { 23 box-shadow: none; 24 transition: none; 25 } 26 27 &.placeholder { 28 background: transparent; 29 30 .card-preview-image-outer, 31 .card-context { 32 display: none; 33 } 34 } 35 36 .card { 37 border-radius: var(--border-radius-medium); 38 box-shadow: $shadow-card; 39 height: 100%; 40 } 41 42 > a { 43 color: inherit; 44 display: block; 45 height: 100%; 46 outline: none; 47 position: absolute; 48 width: 100%; 49 50 &:is(:focus) { 51 .card { 52 @include ds-focus; 53 } 54 } 55 56 &:is(.active, :focus) { 57 .card { 58 @include fade-in-card; 59 } 60 61 .card-title { 62 color: var(--newtab-primary-action-background); 63 } 64 } 65 } 66 67 &:is(:hover, :focus, .active):not(.placeholder) { 68 @include context-menu-button-hover; 69 70 outline: none; 71 72 .card-title { 73 color: var(--newtab-primary-action-background); 74 } 75 76 .alternate ~ .card-host-name { 77 display: none; 78 } 79 80 .card-host-name.alternate { 81 display: block; 82 } 83 } 84 85 .card-preview-image-outer { 86 background-color: var(--newtab-element-secondary-color); 87 border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; 88 height: $card-preview-image-height; 89 overflow: hidden; 90 position: relative; 91 92 &::after { 93 border-block-end: 1px solid var(--newtab-card-hairline-color); 94 inset-block-end: 0; 95 content: ''; 96 position: absolute; 97 width: 100%; 98 } 99 100 .card-preview-image { 101 background-position: center; 102 background-repeat: no-repeat; 103 background-size: cover; 104 height: 100%; 105 opacity: 0; 106 transition: opacity 1s $photon-easing; 107 width: 100%; 108 109 &.loaded { 110 opacity: 1; 111 } 112 } 113 } 114 115 .card-details { 116 padding: var(--space-large) var(--space-large) var(--space-medium); 117 } 118 119 .card-text { 120 max-height: 4 * $card-text-line-height + $card-title-margin; 121 overflow: hidden; 122 123 &.no-host-name, 124 &.no-context { 125 max-height: 5 * $card-text-line-height + $card-title-margin; 126 } 127 128 &.no-host-name.no-context { 129 max-height: 6 * $card-text-line-height + $card-title-margin; 130 } 131 132 &:not(.no-description) .card-title { 133 max-height: 3 * $card-text-line-height; 134 overflow: hidden; 135 } 136 } 137 138 .card-host-name { 139 color: var(--newtab-text-secondary-color); 140 font-size: var(--font-size-small); 141 overflow: hidden; 142 padding-block-end: var(--space-xsmall); 143 text-overflow: ellipsis; 144 text-transform: uppercase; 145 white-space: nowrap; 146 } 147 148 .card-host-name.alternate { display: none; } 149 150 .card-title { 151 font-size: inherit; 152 font-weight: var(--heading-font-weight); 153 line-height: $card-text-line-height; 154 margin: 0 0 var(--space-xxsmall); 155 word-wrap: break-word; 156 } 157 158 .card-description { 159 font-size: var(--font-size-small); 160 line-height: $card-text-line-height; 161 margin: 0; 162 overflow: hidden; 163 word-wrap: break-word; 164 } 165 166 .card-context { 167 inset-block-end: 0; 168 color: var(--newtab-text-secondary-color); 169 display: flex; 170 font-size: var(--font-size-small); 171 inset-inline-start: 0; 172 padding: var(--space-small) var(--space-large); 173 position: absolute; 174 } 175 176 .card-context-icon { 177 fill: var(--newtab-text-secondary-color); 178 height: 22px; 179 margin-inline-end: var(--space-xsmall); 180 } 181 182 .card-context-label { 183 flex-grow: 1; 184 line-height: 22px; 185 overflow: hidden; 186 text-overflow: ellipsis; 187 white-space: nowrap; 188 } 189 } 190 191 .normal-cards { 192 .card-outer { 193 // Wide layout styles 194 @media (min-width: $break-point-widest) { 195 $line-height: 23px; 196 197 height: $card-height-large; 198 199 .card-preview-image-outer { 200 height: $card-preview-image-height-large; 201 } 202 203 .card-details { 204 padding: var(--space-medium) var(--space-large); 205 } 206 207 .card-text { 208 max-height: 6 * $line-height + $card-title-margin; 209 } 210 211 .card-host-name { 212 font-size: var(--font-size-small); 213 padding-block-end: var(--space-xsmall); 214 } 215 216 .card-title { 217 font-size: var(--font-size-large); 218 line-height: $line-height; 219 margin-block-end: 0; 220 } 221 222 .card-text:not(.no-description) { 223 .card-title { 224 max-height: 3 * $line-height; 225 } 226 } 227 228 .card-description { 229 font-size: inherit; 230 line-height: $line-height; 231 } 232 233 .card-context { 234 inset-block-end: var(--space-xsmall); 235 font-size: inherit; 236 line-height: $line-height; 237 } 238 } 239 } 240 } 241 242 .compact-cards { 243 $card-detail-vertical-spacing: 12px; 244 245 .card-outer { 246 height: $card-height-compact; 247 248 .card-preview-image-outer { 249 height: $card-preview-image-height-compact; 250 } 251 252 .card-details { 253 padding: var(--space-medium) var(--space-large); 254 } 255 256 .card-host-name { 257 line-height: 10px; 258 } 259 260 .card-text { 261 .card-title, 262 &:not(.no-description) .card-title { 263 font-size: var(--font-size-small); 264 line-height: calc(var(--font-size-small) + 1px); 265 max-height: calc(var(--font-size-small) + 5px); 266 overflow: hidden; 267 padding: 0 0 var(--space-xsmall); 268 text-overflow: ellipsis; 269 white-space: nowrap; 270 } 271 } 272 273 .card-description { 274 display: none; 275 } 276 277 .card-context { 278 $icon-size: 16px; 279 $container-size: 32px; 280 281 background-color: var(--newtab-background-color-secondary); 282 border-radius: var(--border-radius-medium); 283 clip-path: inset(-1px -1px $container-size - ($card-height-compact - $card-preview-image-height-compact - 2 * $card-detail-vertical-spacing)); 284 height: $container-size; 285 width: $container-size; 286 padding: var(--space-small); 287 // The -1 at the end is so both opacity borders don't overlap, which causes bug 1629483 288 // Bug 1967304 - Large number // 91px 289 inset-block-start: $card-preview-image-height-compact - math.div($container-size, 2) - 1; // stylelint-disable-line declaration-property-value-disallowed-list 290 inset-inline-end: var(--space-medium); 291 inset-inline-start: auto; 292 293 &::after { 294 border: 1px solid var(--newtab-card-hairline-color); 295 border-block-end: 0; 296 border-radius: var(--border-radius-medium); 297 content: ''; 298 position: absolute; 299 height: math.div($container-size + 2, 2); 300 width: $container-size + 2; 301 inset-block-start: calc(var(--space-xxsmall) * -1); 302 inset-inline-start: calc(var(--space-xxsmall) * -1); 303 } 304 305 .card-context-icon { 306 margin-inline-end: 0; 307 height: $icon-size; 308 width: $icon-size; 309 310 &.icon-bookmark-added { 311 fill: $bookmark-icon-fill; 312 } 313 314 &.icon-download { 315 fill: $download-icon-fill; 316 } 317 318 &.icon-pocket { 319 fill: $pocket-icon-fill; 320 } 321 } 322 323 .card-context-label { 324 display: none; 325 } 326 } 327 } 328 329 @media not all and (min-width: $break-point-widest) { 330 .hide-for-narrow { 331 display: none; 332 } 333 } 334 }