1/**************  rainbow  *****************/
2
3.o_reward {
4    $reward-size: 400px;
5    $reward-size-mobile: 300px;
6    $reward-text-color: #727880;
7    $reward-base-time: 1.4s;
8
9    will-change: transform;
10    z-index: $zindex-modal;
11    padding: 50px;
12    margin: -5% auto 0 (-$reward-size / 2);
13    @include media-breakpoint-down(sm) {
14        margin: -5% auto 0 (-$reward-size-mobile / 2);
15    }
16    background-image: -webkit-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
17    background-image: -o-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
18    background-image: radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
19
20    animation: reward-fading ($reward-base-time * 0.5) ease-in-out 0s 1 normal forwards;
21    @include o-position-absolute(20%, auto, auto, 50%);
22    @include size($reward-size, $reward-size);
23    @include media-breakpoint-down(sm) {
24        @include size($reward-size-mobile, $reward-size-mobile);
25    }
26
27    &.o_reward_fading {
28        display: block;
29        animation: reward-fading-reverse ($reward-base-time * 0.4) ease-in-out 0s 1 normal forwards;
30
31        .o_reward_face_group {
32            animation: reward-jump-reverse ($reward-base-time * 0.4) ease-in-out 0s 1 normal forwards;
33        }
34
35        .o_reward_rainbow {
36            path {
37                animation: reward-rainbow-reverse ($reward-base-time * 0.5) ease-out 0s 1 normal forwards;
38            }
39        }
40
41    }
42
43    .o_reward_face, .o_reward_stars, .o_reward_shadow, .o_reward_thumbup {
44        margin: 0 auto;
45    }
46
47    .o_reward_rainbow {
48        path {
49            stroke-dasharray: 600;
50            stroke-dashoffset: 0;
51            fill: none;
52            stroke-linecap: round;
53            stroke-width: 21px;
54            animation: reward-rainbow $reward-base-time ease-out 0s 1 normal forwards;
55        }
56    }
57
58    .o_reward_face_group {
59        transform-origin: center;
60        animation: reward-jump $reward-base-time * 0.8 ease-in-out 0s 1 normal none running;
61        @include o-position-absolute(6%, 0, 0, 0);
62        @include size(100%, 60%);
63    }
64
65    .o_reward_face {
66        display: block;
67        top: 42%;
68        position: relative;
69        border-radius: 100%;
70        background: center center / contain no-repeat;
71        animation: reward-float $reward-base-time ease-in-out $reward-base-time infinite alternate;
72        @include size(34%, 56.67%);
73    }
74
75    .o_reward_stars {
76        display: block;
77        @include size($reward-size * 0.75, $reward-size / 2);
78        @include media-breakpoint-down(sm) {
79            @include size($reward-size-mobile * 0.75, $reward-size-mobile / 2);
80        }
81        @include o-position-absolute(18%, 7%);
82
83        svg {
84            transform-origin: center center;
85            @include o-position-absolute(28%, $left:3%);
86            animation: reward-stars $reward-base-time ease-in-out 0s infinite alternate-reverse;
87
88            &.star2, &.star4 {
89                animation: reward-stars ($reward-base-time*1.2) ease-in-out 0s infinite alternate;
90            }
91
92            &.star2 {
93                left: 20%;
94                top: 2%;
95            }
96
97            &.star3 {
98                left: 49%;
99                top: 6%;
100            }
101
102            &.star4 {
103                left: 70%;
104                top: 27%;
105            }
106
107        }
108    }
109
110    .o_reward_thumbup {
111        width: 40px;
112        display: block;
113        animation: reward-scale ($reward-base-time * 0.5) ease-in-out 0s infinite alternate;
114        @include o-position-absolute(63%, auto, auto, 65%);
115    }
116
117    .o_reward_msg_container {
118        will-change: transform;
119        padding-top: 11%;
120        width: 70%;
121        margin-left: 15%;
122
123        // Translate before animate
124        transform: translateY(5px);
125
126        animation: reward-float $reward-base-time ease-in-out $reward-base-time infinite alternate-reverse;
127        @include o-position-absolute(85%, auto, auto, 0%);
128
129        .o_reward_thumb_right {
130            height: 40px;
131            z-index: 1;
132            @include o-position-absolute(0, auto, auto, 16%);
133        }
134
135        .o_reward_msg {
136            margin-left: 7%;
137            margin-top: -9.5%;
138            padding: 25px 15px 20px;
139            background: white;
140            border: 1px solid #ecf1ff;
141            border-top-width: 0;
142            display: inline-block;
143
144            // Reset margins for first and penultimate childs (the last one is shadow)
145            *:first-child {
146                margin-top: 0;
147            }
148        }
149
150        .o_reward_msg_content {
151            position: relative;
152            font-family: sans-serif;
153            text-align: left;
154            color: $reward-text-color;
155        }
156
157        .o_reward_shadow_container {
158            transform: translateY(0px) rotateZ(0);
159            animation: reward-float $reward-base-time ease-in-out $reward-base-time infinite alternate;
160        }
161
162        .o_reward_shadow {
163            @include size(100%, 12px);
164            background-color: #e7eaf0;
165            border-radius: 100%;
166            transform: scale(0.8) rotateZ(0);
167            animation: reward-scale $reward-base-time ease-in-out $reward-base-time infinite alternate;
168            @include o-position-absolute(auto, auto, -40px, 0);
169        }
170    }
171}
172
173@keyframes reward-fading {
174    0% {
175        opacity: 0;
176    }
177    100% {
178        opacity: 1;
179    }
180}
181
182@keyframes reward-fading-reverse {
183    100% {
184        opacity: 0;
185    }
186}
187
188@keyframes reward-jump {
189    0% {
190        transform: scale(0.5);
191    }
192    50% {
193        transform: scale(1.05);
194    }
195    to {
196        transform: scale(1);
197    }
198}
199
200@keyframes reward-jump-reverse {
201    0% {
202        transform: scale(1);
203    }
204    50% {
205        transform: scale(1.05);
206    }
207    to {
208        transform: scale(0.5);
209    }
210}
211
212@keyframes reward-rainbow {
213    0% {
214        stroke-dashoffset: -500;
215    }
216    to {
217        stroke-dashoffset: 0;
218    }
219}
220
221@keyframes reward-rainbow-reverse {
222    to {
223        stroke-dashoffset: -500;
224    }
225}
226
227@keyframes reward-float {
228    from {
229        transform: translateY(0px);
230    }
231    to {
232        transform: translateY(5px);
233    }
234}
235
236@keyframes reward-stars {
237    from {
238        transform: scale(0.3) rotate(0deg);
239    }
240    50% {
241        transform: scale(1.0) rotate(20deg);
242    }
243    to {
244        transform: scale(0.3) rotate(80deg);
245    }
246}
247
248@keyframes reward-scale {
249    from {
250        transform: scale(0.8);
251    }
252    to {
253        transform: scale(1.0);
254    }
255}
256