imcore.react/src/styles/transcript/AcknowledgmentPickerPresenter.scss at 3842e7ef49f776f23ee13f26ba635bcb5e4a17c4 · open-imcore/imcore.react · GitHub

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
98
99
100
101
102
@keyframes acknowledgment-picker-expansion {
    0% {
        width: 32px;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50% {
        width: 225px;
    }

    100% {
        width: 215px;
    }
}

$acknowledgment-button-initial: scale(1, 1) translate(75px, -100px);

@keyframes acknowledgment-button-appear {
    0% {
        transform: scale(1, 1) translate(75px, -100px);
    }

    33% {
        transform: scale(1.1, .9) translate(25px, -33px);
    }

    50% {
        transform: scale(.8, 1.3) translate(0px, 0px);
    }

    75% {
        transform: scale(1.05, 0.95);
    }

    100% {
        transform: scale(1, 1);
    }
}

@mixin acknowledgment-delay($name, $delay) {
    &[attr-acknowledgment-name=#{$name}]::after {
        animation-delay: $delay;
    }
}

@mixin from-to-anim($name, $property, $from, $to) {
    @keyframes #{$name} {
        from {
            #{$property}: $from;
        }

        to {
            #{$property}: $to;
        }
    }
}

.acknowledgment-picker-container {
    position: absolute;
    top: 0;
    left: 0;

    background: var(--tapback-background);
    border-radius: 25px;

    width: 100px;

    overflow: hidden;

    animation: acknowledgment-picker-expansion 0.25s cubic-bezier(0.15, 0, 0.3499999, 1);
    animation-fill-mode: forwards;

    .acknowledgment-button {
        @include from-to-anim(acknowledgment-button-opacity, opacity, 0, 1);

        animation: acknowledgment-button-opacity cubic-bezier(0.15, 0, 0.3499999, 1) 0.25s;
        animation-delay: 0.40s;
        animation-fill-mode: forwards;
        opacity: 0;

        $time-scale: 1.0;

        $button-delay-base: $time-scale * 0.15s;

        @include acknowledgment-delay(heart, $button-delay-base + 0.4133s);
        @include acknowledgment-delay(thumbs-up, $button-delay-base + 0.52s);
        @include acknowledgment-delay(thumbs-down, $button-delay-base + 0.5376s);
        @include acknowledgment-delay(emphasize, $button-delay-base + 0.64s);
        @include acknowledgment-delay(question, $button-delay-base + 0.6833s);
        @include acknowledgment-delay(haha-en, $button-delay-base + 0.6133s);

        &::after {
            animation: acknowledgment-button-appear 0.3s steps(60);
            animation-fill-mode: forwards;
            transform: $acknowledgment-button-initial;
        }
    }
}