loginPage.scss

TLDR

This file (loginPage.scss) contains the styling for the login page. It defines the layout, fonts, and colors for the login form.

Classes

LoginPage

The LoginPage class represents the styling for the login page. It sets the border, border radius, width, height, margin, display, alignment, and box shadow properties for the login form. It also defines media queries for responsive design. Inside the LoginPage class, there are additional styling defined for the form, title, username and password fields, error messages, and submit button.

END

.LoginPage {
    border: 1px solid #ccc;
    border-radius: 15px;
    width: 450px;
    height: 400px;
    margin: 150px auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px,
        rgba(var(--center-channel-color-rgb), 0.3) 0 4px 8px;

    form {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin: 50px auto;
    }

    @media screen and (max-width: 430px) {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        margin: auto;
        padding-top: 10px;
    }

    .title {
        font-size: 16px;
        font-weight: 500;
    }

    .username,
    .password {
        margin-bottom: 10px;

        label {
            display: inline-block;
            width: 140px;
        }

        input {
            display: inline-block;
            width: 250px;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 7px;
            min-height: 44px;
        }
    }

    form > .Button {
        margin-top: 10px;
        margin-bottom: 20px;
        min-height: 38px;
        min-width: 250px;
    }

    .error {
        color: #900000;
    }
}