jiti-meet/css/_reactions-menu.scss

212 lines
3.2 KiB
SCSS
Raw Normal View History

@use 'sass:math';
.reactions-menu {
width: 280px;
background: $menuBG;
box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.6), 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
border-radius: 3px;
padding: 16px;
&.with-gif {
width: 328px;
.reactions-row .toolbox-button:last-of-type {
top: 3px;
& .toolbox-icon.toggled {
background-color: #000000;
}
}
}
&.overflow {
width: 100%;
.toolbox-icon {
width: 48px;
height: 48px;
span.emoji {
width: 48px;
height: 48px;
}
}
.reactions-row {
display: flex;
flex-direction: row;
justify-content: space-around;
.toolbox-button {
margin-right: 0;
}
.toolbox-button:last-of-type {
top: 0;
}
}
}
.toolbox-icon {
width: 40px;
height: 40px;
border-radius: 6px;
span.emoji {
width: 40px;
height: 40px;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
transition: font-size ease .1s;
@for $i from 1 through 12 {
&.increase-#{$i}{
font-size: calc(20px + #{$i}px);
}
}
}
}
.reactions-row {
.toolbox-button {
margin-right: 8px;
touch-action: manipulation;
position: relative;
}
.toolbox-button:last-of-type {
margin-right: 0;
}
}
.raise-hand-row {
margin-top: 16px;
.toolbox-button {
width: 100%;
}
.toolbox-icon {
width: 100%;
flex-direction: row;
align-items: center;
span.text {
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 24px;
margin-left: 8px;
}
}
}
}
.reactions-menu-container {
padding-bottom: 6px;
}
.reactions-animations-container {
position: absolute;
width: 20%;
bottom: 0;
left: 40%;
height: 0;
}
.reactions-menu-popup-container {
display: inline-block;
position: relative;
}
$reactionCount: 20;
@function random($min, $max) {
@return math.random() * ($max - $min) + $min;
}
.reaction-emoji {
position: absolute;
font-size: 24px;
line-height: 32px;
width: 32px;
height: 32px;
top: 0;
left: 20px;
opacity: 0;
z-index: 1;
&.reaction-0 {
animation: flowToRight 5s forwards ease-in-out;
}
@for $i from 1 through $reactionCount {
&.reaction-#{$i} {
animation: animation-#{$i} 5s forwards ease-in-out;
top: #{random(-40, 10)}px;
left: #{random(0, 30)}px;
}
}
}
@keyframes flowToRight {
0% {
transform: translate(0px, 0px) scale(0.6);
opacity: 1;
}
70% {
transform: translate(40px, -70vh) scale(1.5);
opacity: 1;
}
75% {
transform: translate(40px, -70vh) scale(1.5);
opacity: 1;
}
100% {
transform: translate(140px, -50vh) scale(1);
opacity: 0;
}
}
@mixin animation-list {
@for $i from 1 through $reactionCount {
$topX: random(-100, 100);
$topY: random(65, 75);
$bottomX: random(150, 200);
$bottomY: random(40, 50);
@if $topX < 0 {
$bottomX: -$bottomX;
}
@keyframes animation-#{$i} {
0% {
transform: translate(0, 0) scale(0.6);
opacity: 1;
}
70% {
transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
opacity: 1;
}
75% {
transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
opacity: 1;
}
100% {
transform: translate(#{$bottomX}px, -#{$bottomY}vh) scale(1);
opacity: 0;
}
}
}
}
@include animation-list;