riot-web/res/css/views/user-onboarding/_UserOnboardingList.pcss

/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/

.mx_UserOnboardingList {
    display: flex;
    flex-direction: column;
    margin: 0 $spacing-32;

    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
    animation-name: mx_UserOnboardingList_slideIn;
    animation-fill-mode: backwards;
    will-change: opacity;

    .mx_UserOnboardingList_header {
        display: flex;
        flex-direction: row;
        gap: 12px;
        align-items: center;

        .mx_UserOnboardingList_hint {
            color: $secondary-content;
        }
    }

    .mx_UserOnboardingList_progress {
        display: flex;
        flex-direction: column;
        counter-reset: user-onboarding;

        .mx_ProgressBar {
            width: auto;
            margin-top: $spacing-16;
            height: 16px;

            @mixin ProgressBarBorderRadius 16px;
        }
    }

    .mx_UserOnboardingList_list {
        display: grid;
        grid-template-columns: max-content 1fr max-content;

        appearance: none;
        list-style: none;
        margin: $spacing-32 0 0;
        padding: 0;

        grid-gap: $spacing-24;
    }
}

@keyframes mx_UserOnboardingList_slideIn {
    0% {
        transform: translate(0, 8px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}