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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
<style>
:host {
--emoji-background: transparent;
/* Fixed height and width are required for buttons that have variants,
* Otherwise, when showing variants, buttons' positions will be moved.
*/
height: var(--emoji-size);
position: relative;
width: var(--emoji-size);
}
#emoji-button {
background: var(--emoji-background);
border: none;
border-radius: 50%;
cursor: pointer;
display: block;
font-family: 'Noto Color Emoji';
font-size: 19px;
height: 100%;
line-height: var(--emoji-size);
outline: none;
padding: 0;
text-align: center;
user-select: none;
width: 100%;
}
#emoji-button:focus,
#emoji-button:active {
outline-color: var(--emoji-picker-focus-ring-color);
outline-style: solid;
outline-width: 2px;
}
#emoji-button:disabled {
/* chrome makes disabled buttons semitransparent.
* we set a solid colour here to prevent that
* (exactly which colour is not important).
*/
color: red;
cursor: default;
}
#emoji-button:hover {
background-color: var(--emoji-hover-background);
}
/* Implement has-variants as ::after so that it still works with hover
* ripple.
*/
.has-variants::after {
/* 4px grey triangle in bottom-right.
* 315 degrees means starting at bottom-right towards top-left.
* Manual color here because there isn't something easy to use, but fine for
* dark mode since dark mode is the same.
*/
background: linear-gradient(
315deg, var(--google-grey-500) 4px,
var(--emoji-background) 4px, var(--emoji-background));
content: '';
display: block;
height: var(--emoji-size);
position: relative;
top: calc(0 - var(--emoji-size));
width: var(--emoji-size);
}
#tooltip {
--paper-tooltip-background: var(--cros-tooltip-background-color);
--paper-tooltip-delay-in: var(--emoji-tooltip-delay-in);
--paper-tooltip-delay-out: var(--emoji-tooltip-delay-out);
--paper-tooltip-duration-in: 0;
--paper-tooltip-duration-out: 0;
--paper-tooltip-opacity: 1;
--paper-tooltip-text-color: var(--cros-tooltip-label-color);
}
#tooltip::part(tooltip) {
box-shadow: var(--cros-elevation-1-shadow);
font: var(--cros-annotation-1-font);
margin: 4px;
padding: 4px 8px 4px 8px;
white-space: nowrap;
}
</style>
<button id="emoji-button" on-click="onClick"
disabled="[[disabled]]" aria-label="[[getLabel()]]">
[[emoji]]
</button>
<template is="dom-if" if="[[!variant]]">
<paper-tooltip id="tooltip" for="emoji-button" fit-to-visible-bounds
part="tooltip" offset="8">
[[tooltip]]
</paper-tooltip>
</template>
|
