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;

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

        @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-flex {
        gap: 0.5rem;
    }

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

    h4 {
        color: $font-color;
        font-weight: 500;
        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;
        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: 1rem;
        max-height: 375px;
        overflow: auto;
        scroll-snap-type: y mandatory;
    }

    .post-item {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        scroll-snap-align: center;

        img {
            aspect-ratio: 2/2.2;
            object-fit: cover;
        }

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

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

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