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