changePasswordPage.scss

TLDR

The changePasswordPage.scss is a SCSS file that defines the styling for the ChangePasswordPage component in the Demo Projects project.

Classes

.ChangePasswordPage

This class represents the container for the ChangePasswordPage component. It sets the styling properties such as borders, width, height, margin, padding, and box shadow. It also configures the display and alignment of its children.

.ChangePasswordPage contains the following nested elements:

• form: Defines the styling for the form within the ChangePasswordPage component.
• .title: Defines the styling for the title element within the ChangePasswordPage component.
• .oldPassword and .newPassword: Defines the styling for the old password and new password fields within the ChangePasswordPage component.
• .error: Defines the styling for error messages within the ChangePasswordPage component.
• .succeeded: Defines the styling for success messages within the ChangePasswordPage component.

Media Query

The SCSS file includes a media query that applies different styles when the screen width is below 430px. In this case, the .ChangePasswordPage class is positioned fixed and covers the entire viewport.

.ChangePasswordPage {
    border: 1px solid #ccc;
    border-radius: 15px;
    width: 450px;
    height: 400px;
    margin: 150px auto;
    padding: 40px;
    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;
    }

    @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;
    }

    .oldPassword,
    .newPassword {
        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;
    }

    .succeeded {
        background-color: #cfc;
        padding: 5px;
    }
}