blob: 2c4efe1c2c98abb7c1464d938e20eeeed3e859cb (
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
55
56
|
<script lang="ts">
import LaurelIcon from '~/sf-symbols/laurel.left.svg';
import { getI18n } from '~/stores/i18n';
const i18n = getI18n();
</script>
<h4>
<span class="icon-container left" aria-hidden="true">
<LaurelIcon />
</span>
{$i18n.t('ASE.Web.AppStore.Review.EditorsChoice')}
<span class="icon-container right" aria-hidden="true">
<LaurelIcon />
</span>
</h4>
<style lang="scss">
@use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
@use 'ac-sasskit/core/locale' as *;
h4 {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-bottom: 10px;
gap: 10px;
font: var(--font, var(--title-1-emphasized));
color: var(--systemSecondary);
}
.icon-container.right {
transform: rotateY(180deg);
@include rtl {
transform: rotateY(0);
}
}
.icon-container.left {
@include rtl {
transform: rotateY(180deg);
}
}
.icon-container :global(svg) {
overflow: visible;
height: 42px;
transform: translateY(3px);
}
.icon-container :global(svg path) {
fill: var(--systemSecondary);
}
</style>
|
