io.parrots/styles/app/component/page/main/AccountPage.less

Parrots.io App

.parrots-page-account-page { 
    >.wrapper-menu-account {
        display: flex; 
        height: @ACCOUNT_PAGE_WRAPPER_MENU_HEGHT; 
        width: 100%; 
        background-color: extract(@CLR_0, 3);
        >.wrapper-rigth-menu {
            display: flex;
            position: absolute;
            right: 0; 
            color: extract(@CLR_1, 9);
            align-items: center;
            >.wrapper-rigth-line-menu {
                display: flex; 
                height: @ACCOUNT_PAGE_WRAPPER_RIGTH_LINE_MENU_HEIGHT; 
                padding-left: @ACCOUNT_PAGE_WRAPPER_RIGTH_LINE_MENU_PADDING_LEFT; 
                padding-right: @ACCOUNT_PAGE_WRAPPER_RIGTH_LINE_MENU_PADDING_RIGHT; 
                justify-content: center; 
                align-items: center;
                >.vertical-lines-menu {
                    display: flex;
                    height: @ACCOUNT_PAGE_WRAPPER_RIGTH_LINE_MENU_VERTICAL_HEIGHT; 
                    width: @ACCOUNT_PAGE_WRAPPER_RIGTH_LINE_MENU_VERTICAL_WIDTH; 
                    background-color: extract(@CLR_0, 5);
                    justify-content: center; 
                    align-items: center; 
                }
            }
            >.wrapper-username-menu {
                display: flex; 
                color: extract(@CLR_1, 9);
                justify-content: center;  
                align-items: center;
                >.img-user-menu {
                    width: @ACCOUNT_PAGE_WRAPPER_USERNAME_MENU_IMG_USER_WIDTH;
                    height: @ACCOUNT_PAGE_WRAPPER_USERNAME_MENU_IMG_USER_HEIGHT; 
                    border-radius: @ACCOUNT_PAGE_WRAPPER_USERNAME_MENU_IMG_USER_BORDER_RADIUS;
                    margin-right: 15px;
                } 
            }
            >.wrapper-logout-menu {
                width: 50px;
            }
            >.icon-signal {
                margin: 15px;
                display: flex; 
                &:before { 
                    cursor: pointer;  
                    content: "Z";
                    font-family: 'PhloxGlyphicons';
                    font-size: 13pt;
                    transform: rotateY(180deg);
                } 
            }
            >.icon-logout {
                margin: 15px;
                display: flex; 
                &:before { 
                    cursor: pointer;  
                    content: "X";
                    font-family: 'PhloxGlyphicons';
                    font-size: 16pt;
                    transform: rotate(180deg);
                } 
            } 
        }
    }
    >.below-line-menu {
        height: @ACCOUNT_PAGE_BELOW_LINE_MENU_HEIGHT; 
        width: 100%;  
        background: -webkit-linear-gradient(left, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1 , @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_2); 
        background: -o-linear-gradient(right, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_2); 
        background: -moz-linear-gradient(right, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_2); 
        background: linear-gradient(to right, @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_1 , @ACCOUNT_AUTHENTICATION_PAGE_BACKGROUND_COLOR_STEP_2);  
    }
    >.wrapper-content-account {
        position: absolute; 
        background-color: extract(@CLR_1, 8); 
        padding-left: @ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_PADDING_LEFT; 
        padding-right: @ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_PADDING_RIGHT; 
        height: 100%; 
        width: 100%; 
        overflow: scroll;
        >.wrapper-content-top {
            display: flex; 
            align-items: center;
            padding-top: @ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_PADDING_TOP; 
            padding-bottom: @ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_PADDING_BOTTOM;
            >.img-user-content {
                display: flex; 
                padding-left: @ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_IMG_USER_PADDING_LEFT; 
                width: @ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_IMG_USER_WIDTH; 
                height: @ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_IMG_USER_HEIGHT; 
                border-radius: @ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_IMG_USER_BORDER_RADIUS; 
                cursor: pointer;  
            }
            >.wrapper-title-description-content {
                display: inline-block; 
                padding-left: @ACCOUNT_PAGE_WRAPPER_CONTENT_ACCOUNT_TOP_TITLE_DESCRIPTION_PADDING_LEFT; 
                justify-content: center;
                >.title-content-top {
                    display: flex;
                    .FC1();
                    color: extract(@CLR_0, 1);;
                }
                >.description-content-top {
                    display: flex; 
                    .FC0();
                    color: extract(@CLR_0, 7);
                }
            } 
        }
        >.wrapper-sub-content {
        padding-bottom: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_PADDING_BOTTOM;
            >.title-sub-content {
                display: flex; 
                padding-left: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_TITLE_PADDING_LEFT; 
                padding-bottom: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_TITLE_PADDING_BOTTOM;
                .FC1();
                color: extract(@CLR_0, 1);;
                >.edit-content {
                    margin-left: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_TITLE_EDIT_MARGIN_LEFT; 
                    .FC0(); 
                    margin-top: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_TITLE_EDIT_MARGIN_TOP;
                    cursor: pointer; 
                    color: extract(@CLR_0, 7);
                }
            }
            .cursor-content {
                cursor: pointer; 
            }
            >.wrapper-content-shadow {
                box-shadow: 0px 4px 8px  extract(@CLR_1, 4);
                >.block-edit-content {
                    display: flex;   
                    margin-bottom: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_MARGIN_BOTTOM; 
                    height: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_HEIGHT; 
                    width: 100%; 
                    background-color: extract(@CLR_1, 9);
                    align-items: center;
                    >.label-name {
                        padding-left: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_LABEL_NAME_PADDING_LEFT; 
                        width: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_LABEL_NAME_WIDTH;
                        .FC1();
                        color: extract(@CLR_0, 1);;
                    }
                    >.label-value {
                        padding-left: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_LABEL_VALUE_PADDING_LEFT; 
                        width: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_LABEL_VALUE_WIDTH; 
                        .FC0(); 
                        color: extract(@CLR_0, 7);
                    }
                }
                div >.block-address-content {
                    display: flex;   
                    margin-bottom: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_MARGIN_BOTTOM; 
                    height: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_HEIGHT; 
                    width: 100%; 
                    background-color: extract(@CLR_1, 9);
                    align-items: center;
                    >.label-name {
                        padding-left: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_LABEL_NAME_PADDING_LEFT; 
                        width: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_LABEL_NAME_WIDTH;
                        .FC1();
                        color: extract(@CLR_0, 1);;
                    }
                    >.label-value {
                        padding-left: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_LABEL_VALUE_PADDING_LEFT; 
                        width: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_LABEL_VALUE_WIDTH; 
                        .FC0(); 
                        color: extract(@CLR_0, 7);
                    }
                }
                >.block-create-content {
                    display: flex;  
                    justify-content: center;
                    margin-bottom: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_MARGIN_BOTTOM; 
                    height: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BLOCK_EDIT_HEIGHT; 
                    width: 100%; 
                    background-color: extract(@CLR_1, 9);
                    align-items: center;
                } 
            }
            >.below-descripton-content {
                padding-top: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BELOW_DESCRIPTION_PADDING_TOP; 
                width: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_BELOW_DESCRIPTION_WIDTH; 
                .FC1(); 
                color: extract(@CLR_0, 7);
            }
            >.wrapper-below-content {
                padding-top: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_WRAPPER_BELOW_CONTENT_PADDING_TOP; 
                padding-left: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_WRAPPER_BELOW_CONTENT_PADDING_LEFT; 
                margin-bottom: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_WRAPPER_BELOW_CONTENT_PADDING_LEFT;
                >.below-content {
                    padding-top: @ACCOUNT_PAGE_WRAPPER_SUB_CONTENT_WRAPPER_BELOW_CONTENT_BELOW_PADDING_TOP;
                }
            }
        }
    }  
    .coa-scroll {
        & {
            // overflow: auto;
            overflow-x: hidden;

            &::-webkit-scrollbar-track {
                // -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
                background-color: extract(@CLR_1, 9);
            }

            &::-webkit-scrollbar {
                width: 6px;
                background-color: extract(@CLR_1, 9);
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 4px;
                background-color: extract(@CLR_1, 5);
            }
        }
    }
}

.phx-notification-container {
    z-index: 1 !important;
    width: unset !important;
    height: unset !important;
}

.parrots-page-account-general-username {
    material-text-box >.material-text-box {
        width: 360px;
    }
}

.parrots-page-account-general-gender {    
    padding-top: 10pt;
    material-simple-dropdown >.material-simple-dropdown {
        width: 360px;
        >.dropdown-container {
            margin-top: 2pt;
        } 
    }
}

.parrots-page-account-general-name {
    material-text-box >.material-text-box {
        width: 360px;
    }
}

.parrots-page-account-general-phone {
    material-telno-text-box { 
        width: 360px;
    } 
}

.parrots-page-account-general-password {
    material-text-box >.material-text-box {
        width: 360px;
    }
}

.parrots-page-account-general-birthday {
    material-text-box >.material-text-box {
        width: 360px;
    } 
}

.parrots-page-account-edit-address {   
    padding-top: 10pt;
    material-simple-dropdown >.material-simple-dropdown {
        width: 360px;
        >.dropdown-container {
            margin-top: 2pt;
        } 
    }
    material-text-box >.material-text-box {
        width: 360px;
        margin-top: 17.41pt;
    }
}