blob: 2d2742f194ad31b0670f1be917bae6e9c5971af5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<script lang="ts">
export let element: keyof HTMLElementTagNameMap = 'article';
export let hasChin: boolean = false;
</script>
<svelte:element this={element} class="hover-wrapper" class:has-chin={hasChin}>
<slot />
</svelte:element>
<style lang="scss">
@use '@amp/web-shared-styles/app/core/mixins/scrim-opacity-controller' as *;
@use 'amp/stylekit/core/mixins/hover-style' as *;
.hover-wrapper {
position: relative;
display: var(--display, flex);
overflow: hidden;
align-items: center;
cursor: pointer;
border-radius: var(--global-border-radius-large);
box-shadow: var(--shadow-small);
@include scrim-opacity-controller;
}
.hover-wrapper.has-chin,
.hover-wrapper.has-chin::after {
// For chins, we cannot use `border-raidus` due a Chrome bug with unequal radii
// (e.g. there is no rounding at the bottom) and mask-image. To get around that,
// we use clip-path to the same effect.
// https://issues.chromium.org/issues/40778541.
border-radius: unset;
clip-path: inset(
0 0 0 0 round var(--global-border-radius-large)
var(--global-border-radius-large) 0 0
);
}
/* stylelint-disable order/order */
.hover-wrapper::after {
mix-blend-mode: soft-light;
@include content-container-hover-style;
// These properties are overriding those provided by `content-container-hover-style`
border-radius: var(--global-border-radius-large);
transition: opacity 210ms ease-out;
}
/* stylelint-enable order/order */
.hover-wrapper:hover::after {
@include scrim-opacity;
}
</style>
|
