Proyectos de Subversion LeadersLinked - Antes de SPA

@use "../../settings/mixins.scss";

.suggests_widget {
    @include mixins.widget;
    display: block;

    &-header {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 1rem;
        position: relative;

        h3 {
            color: $title-color;
            font-weight: 600;
            font-size: 1.1rem;
        }

        span {
            color: $subtitle-color;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
        }
    }

    &>.suggest-list {
        max-height: 265px;
        overflow: auto;
        width: 100%;
        display: flex;
        flex-direction: row;

        @include mixins.for-size(tablet-landscape) {
            flex-direction: column;

            &::-webkit-scrollbar-thumb {
                visibility: visible;
            }
        }
    }
}

.user {
    align-items: center;
    display: flex;
    padding: 1rem;
    gap: 0.5rem;
    width: -webkit-fill-available;

    img {
        border-radius: 50%;
        max-width: 3.3rem;
        background: #fff;
    }

    div.d-inline-flex {
        gap: 0.5rem;
    }

    a.btn,
    button.btn {
        padding: 0.2rem 0.6rem;
        white-space: nowrap;
    }

    h4 {
        color: $font-color;
        font-weight: 600;
        line-height: 1.4;
    }

    @include mixins.for-size(phone) {
        border-right: 1px solid $border-primary;

        &:last-child {
            border-right: none;
        }
    }

    @include mixins.for-size(tablet-portrait) {
        border-top: 1px solid $border-primary;
    }
}

.app-widget {
    @include mixins.widget;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    position: relative;

    span {
        font-weight: 600;
        color: $subtitle-color;
        width: fit-content;
    }

    img {
        width: 50px;
        height: 50px;

        &:first {
            border-radius: 100px;
        }
    }
}

.posts-widget {
    @include mixins.widget;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    h3 {
        color: $title-color;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .posts-list {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        max-height: 380px;
        overflow: auto;
    }

    .post-item {
        display: flex;
        gap: .5rem;

        img {
            height: calc(76px - 1rem);
            width: 100px;
            object-fit: cover;
        }

        h4 {
            font-weight: 600;
            font-size: 1.2rem;
            color: $subtitle-color;
        }

        span {
            color: $font-color;
            font-size: .8rem;
        }

        .post-info {
            display: flex;
            flex-direction: column;
        }

        .btn {
            width: fit-content;
        }
    }
}

.daily_pulse-widget {
    @include mixins.widget;
    flex-direction: column;
    display: flex;
    height: fit-content;
    padding: 1rem 0.5rem;
    gap: .5rem;

    h3 {
        color: $title-color;
        font-weight: 700;
        font-size: 1.1rem;
    }

    span {
        color: $subtitle-color;
        font-weight: 600;
    }

    .daily_pulse-quest {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: .5rem;

        h4 {
            font-weight: 600;
            color: $title-color;
        }

        ul {
            display: flex;
            gap: .5rem;

            li {
                transition: all 300ms;

                &:hover {
                    transform: translateY(-10px);
                }
            }

            img {
                width: 32px;
                height: 32px;
                border-radius: 50%;
            }
        }
    }
}

.user-info {
    @include mixins.widget;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    text-align: center;

    img {
        border-radius: 50%;
        border: 2px solid $font-color;
        height: 150px;
        width: 150px;
    }

    p {
        color: $subtitle-color
    }

    a,
    svg {
        color: $font-color;
    }

    ul {
        align-items: start;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        width: 100%;
    }

    .user-status {
        display: flex;
        align-items: center;
        gap: .5rem;
        justify-content: space-around;
    }
}