jiti-meet/css/_feedback.scss

@-webkit-keyframes shake-rotate {
    0% {
        -webkit-transform:scale(1) rotate(0deg);
        transform:scale(1) rotate(0deg)
    }

    50% {
        -webkit-transform:scale(.8) rotate(-5deg);
        transform:scale(.8) rotate(-5deg)
    }

    to {
        -webkit-transform:scale(1) rotate(3deg);
        transform:scale(1) rotate(3deg)
    }
}

@keyframes shake-rotate {
    0% {
        -webkit-transform:scale(1) rotate(0deg);
        transform:scale(1) rotate(0deg)
    }

    50% {
        -webkit-transform:scale(.8) rotate(-5deg);
        transform:scale(.8) rotate(-5deg)
    }

    to {
        -webkit-transform:scale(1) rotate(3deg);
        transform:scale(1) rotate(3deg)
    }
}

.shake-rotate {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: shake-rotate;
    animation-name: shake-rotate;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

.text-center {
    text-align: center;
}

.feedbackDetails textarea {
    resize: vertical;
    min-height: 100px;
}

.feedback-rating {
    line-height: 1.2;
    padding: 20px 0;

    h2 {
        font-size: 24px;
        line-height: 1.2;
        padding: auto;
        margin: auto;
        border: none;
    }

    .star-label {
        font-size: 16px;
        color: $rateStarLabelColor;
    }

    .star-btn {
        color: $rateStarDefault;
        font-size: 36px;
        position: relative;
        cursor: pointer;
        outline: none;
        text-decoration: none;
        @include transition(all .2s ease);

        &.starHover,
        &.active,
        &:hover {
            color: $rateStarActivity;
            
            .fa {
                top: -6px;
            }
        };

        &.rated:hover .fa {
            top: 0;
        }

        .fa {
            position: relative;
        }
    }
}