comty/packages/app/src/components/PostCard/index.less

.postCard {
    display       : inline-flex;
    flex-direction: column;

    width    : 100%;
    max-width: 40vw;

    filter: drop-shadow(3px 3px 2px #c5c5c5);

    background-color: var(--background-color-accent);
    border-radius   : 8px;

    transition: all 0.2s ease-in-out;

    .wrapper {
        display       : inline-flex;
        flex-direction: column;
        align-items   : center;

        width  : 100%;
        padding: 17px;

        transition: all 0.2s ease-in-out;

        .userInfo {
            display       : inline-flex;
            flex-direction: row;
            align-items   : center;

            margin-bottom: 15px;

            >div {
                margin-right: 10px;
            }

            .info {
                display        : inline-flex;
                flex-direction : column;
                align-items    : center;
                justify-content: start;

                text-align: start;

                width: fit-content;

                h1 {
                    margin     : 0;
                    font-family: "DM Mono", monospace;
                    align-self : start;
                }

                >div {
                    align-self: start;
                }
            }
        }

        .content {
            display       : inline-flex;
            flex-direction: column;
            align-items   : flex-start;

            background-color: var(--background-color-primary);
            padding         : 10px;
            border-radius   : 8px;

            font-size  : 14px;
            font-family: "Poppins", sans-serif;

            overflow   : hidden;
            word-break : break-all;
            user-select: text;
        }

        >div {
            width: 100%;
        }
    }

    .actionsWrapper {
        display        : flex;
        flex-direction : row;
        align-items    : center;
        justify-content: center;

        position: absolute;
        bottom  : 0;
        left    : 0;

        opacity: 0;

        width : 100%;
        height: 50px;

        margin-top: 15px;
        padding   : 10px;

        border-radius: 8px;
        transition   : all 0.2s ease-in-out;

        background-color: var(--background-color-primary);
        filter          : drop-shadow(3px 3px 2px #c5c5c5);
    }

    .actions {
        display        : inline-flex;
        flex-direction : row;
        align-items    : center;
        justify-content: space-between;

        width: 80%;

        transition: all 0.2s ease-in-out;

        #likes {
            transition: all 0.2s ease-in-out;

            color: var(--primaryColor) !important;

            svg {
                transition: all 0.2s ease-in-out;
                color     : var(--background-color-contrast) !important;
            }
        }

        #likes:hover {
            svg {
                color: var(--primaryColor) !important;
            }
        }

        .action {
            cursor    : pointer;
            transition: all 0.2s ease-in-out;

            .value {
                transition: all 0.2s ease-in-out;
                width     : 0;
                opacity   : 0;
            }
        }

        .action:hover {
            .value {
                margin-left: 3px;
                width      : 20px;
                opacity    : 1;
            }
        }

        svg {
            margin: 0 !important;
        }

        >div {
            display        : flex;
            flex-direction : row;
            align-items    : center;
            justify-content: center;

            border-radius: 360px;
            width        : 55px;
            height       : 55px;

            font-size: 20px;
            padding  : 2px;

            background-color: var(--background-color-primary);

            transform: translate(0, -15px);
        }
    }
}

.postCard:hover {
    .wrapper {
        margin-bottom: 55px;
    }

    .actionsWrapper {
        animation: fadeActionsIn 0.2s 0.2s linear forwards;
    }
}

@keyframes fadeActionsIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



@color-heart           : #EA442B;
@likeAnimationDuration : .5s;
@likeAnimationEasing   : cubic-bezier(.7, 0, .3, 1);

.likeButton {
    display: flex;
    align-items: center;
    justify-content: center;
    .ripple,
    .ripple:before,
    .ripple:after {
        position  : relative;
        box-sizing: border-box;
    }

    font-size    : 40px;
    border       : none;
    border-radius: 50%;
    width        : 1em;
    height       : 1em;
    padding      : 0;
    margin       : 0;
    outline      : none;
    z-index      : 2;
    transition   : transform @likeAnimationDuration @likeAnimationEasing;
    cursor       : pointer;

    background-color: transparent;

    &:before {
        z-index      : -1;
        content      : '';
        position     : absolute;
        top          : 0;
        left         : 0;
        width        : 100%;
        height       : 100%;
        border-radius: inherit;
        transition   : inherit;
    }

    &:after {
        content         : '';
        position        : absolute;
        top             : 0;
        left            : 0;
        width           : 100%;
        height          : 100%;
        border-radius   : inherit;
        z-index         : -1;
    }

    .heart {
        position: relative;
        >path {
            stroke      : var(--primaryColor);
            stroke-width: 2;
            transition  : fill @likeAnimationDuration @likeAnimationEasing;
            fill        : var(--primaryColor);
        }

        &.empty {
            >path {
                stroke      : var(--primaryColor);
                stroke-width: 2;
                transition  : fill @likeAnimationDuration @likeAnimationEasing;
                fill        : transparent;
            }
        }

        &.clicked {
            animation: heart-bounce @likeAnimationDuration @likeAnimationEasing;

            @keyframes heart-bounce {
                40% {
                    transform: scale(0.7);
                }

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

        animation: none;
    }

    .ripple {
        position: absolute;
        height       : 1em;
        width        : 1em;
        border-radius: 50%;
        overflow     : hidden;
        z-index      : 1;

        &:before {
            content      : '';
            position     : absolute;
            top          : 0;
            left         : 0;
            width        : 100%;
            height       : 100%;
            border       : .4em solid var(--primaryColor);
            border-radius: inherit;
            transform    : scale(0);
        }

        &.clicked {
            &:before {
                animation: ripple-out @likeAnimationDuration @likeAnimationEasing;
            }
        }
       
    }
}

@keyframes ripple-out {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(5);
    }
}
@keyframes depress {

    from,
    to {
        transform: none;
    }

    50% {
        transform: translateY(5%) scale(0.9);
    }
}

@keyframes depress-shadow {

    from,
    to {
        transform: none;
    }

    50% {
        transform: scale(0.5);
    }
}