edx-platform/lms/static/sass/views/_learner-profile.scss

// lms - application - learner profile
// ====================

// Table of Contents
// * +Container - Learner Profile
// * +Main - Header
// * +Settings Section

.view-profile {
    $profile-image-dimension: 120px;

    .window-wrap,
    .content-wrapper {
        background-color: $white;
    }

    .ui-loading-indicator {
        @extend .ui-loading-base;
        padding-bottom: $baseline;

        // center horizontally
        @include margin-left(auto);
        @include margin-right(auto);
        width: ($baseline*5);
    }

    .profile-image-field {
        @include float(left);

        button {
            background: transparent !important;
            border: none !important;
            padding: 0;
        }

        .u-field-image {
            padding-top: 0;
            padding-bottom: ($baseline/4);
        }

        .image-wrapper {
            width: $profile-image-dimension;
            position: relative;

            .image-frame {
                display: block;
                position: relative;
                width: $profile-image-dimension;
                height: $profile-image-dimension;
                border-radius: ($baseline/4);
            }

            .u-field-upload-button {
                position: absolute;
                top: 0;
                width: $profile-image-dimension;
                height: $profile-image-dimension;
                border-radius: ($baseline/4);
                border: 2px dashed transparent;
                background: rgba(229,241,247, .8);
                color: $link-color;
                text-shadow: none;
                @include transition(all $tmg-f1 ease-in-out 0s);
                opacity: 0;
                z-index: 6;

                i {
                    color: $link-color;
                }

                &:focus,
                &:hover {
                    @include show-hover-state();
                    border-color: $link-color;
                }
            }

            .button-visible {
                @include show-hover-state();
            }

            .upload-button-icon,
            .upload-button-title {
                display: block;
                margin-bottom: ($baseline/4);
                @include transform(translateY(35px));
                line-height: 1.3em;
                text-align: center;
                z-index: 7;
            }

            .upload-button-input {
                position: absolute;
                top: -($profile-image-dimension * 2);
                @include left(0);
                width: $profile-image-dimension;
                height: 100%;
                cursor: pointer;
                z-index: 5;
                outline: 0;
            }

            .u-field-remove-button {
                position: relative;
                display: block;
                width: $profile-image-dimension;
                margin-top: ($baseline / 4);
                padding: ($baseline / 5);
                text-align: center;
            }
        }
    }

    .wrapper-profile {
        min-height: 200px;

        .ui-loading-indicator {
            margin-top: 100px;
        }
    }

    .profile-self {
        .wrapper-profile-field-account-privacy {
            @include clearfix();
            @include box-sizing(border-box);
            width: 100%;
            margin: 0 auto 0;
            border: 1px solid $gray-l3;
            background-color: $gray-l4;
            padding: ($baseline*0.75) 0;

            .u-field-account_privacy {
                @extend .container;
                border: none;
                box-shadow: none;
                padding: 0 ($baseline*1.5);
            }

            .u-field-title {
                @extend %t-strong;
                width: auto;
                color: $base-font-color;
                cursor: text;
                text-shadow: none; // override bad lms styles on labels
            }

            .u-field-value {
                width: auto;
                @include margin-left($baseline/2);
            }

            .u-field-message {
                @include float(left);
                width: 100%;
                padding: 0;
                color: $base-font-color;

                .u-field-message-notification {
                    color: $gray-d2;
                }
            }
        }
    }

    .wrapper-profile-sections {
        @extend .container;
        padding: 0 ($baseline*1.5);
    }

    .wrapper-profile-section-one {
        width: 100%;
        display: inline-block;
        margin-top: ($baseline*1.5);
        @include margin-left($baseline/2);
    }

    .profile-section-one-fields {
        @include float(left);
        width: flex-grid(4, 12);
        @include margin-left($baseline);

        .u-field {
            margin-bottom: ($baseline/4);
            padding-top: 3px;
            padding-bottom: 3px;
            @include padding-left(3px);
        }

        .u-field-username {

            input[type="text"] {
              font-weight: 600;
            }

            .u-field-value {
                width: 350px;
                @extend %t-title4;
            }
        }

        .u-field-icon {
            display: inline-block;
            vertical-align: baseline;
        }

        .u-field-title {
            width: 0;
        }

        .u-field-value {
            width: 200px;
            display: inline-block;
            vertical-align: baseline;
        }

        select {
            width: 100%
        }

        .u-field-message {
            @include float(right);
            width: 20px;
            display: inline-block;
            vertical-align: baseline;
            margin-top: 0;

            .icon {
                vertical-align: baseline;
            }
        }
    }

    .wrapper-profile-section-two {
        width: flex-grid(8, 12);
    }

    .profile-section-two-fields {

        .u-field-textarea {
            margin-bottom: ($baseline/2);
            padding: ($baseline/2) ($baseline*.75) ($baseline*.75) ($baseline*.75);

            &.editable-toggle {
                cursor: pointer;
            }
        }

        .u-field-title {
            @extend %t-title5;
            @extend %t-weight4;
            display: inline-block;
            margin-top: 0;
            margin-bottom: ($baseline/4);
            color: inherit;
        }

        .u-field-value {
            @extend %t-copy-base;
            width: 100%;

            textarea {
              width: 100%;
              background-color: transparent;
              white-space: pre-line;
            }

            a {
                color: inherit;
            }
        }

        .u-field-message {
            @include float(right);
            width: auto;
        }

        .u-field.mode-placeholder {
            padding: $baseline;
            border: 2px dashed $gray-l3;
            i {
              font-size: 12px;
              @include padding-right(5px);
              vertical-align: middle;
              color: $gray;
            }
            .u-field-title {
                width: 100%;
                text-align: center;
            }

            .u-field-value {
                text-align: center;
                line-height: 1.5em;
                @extend %t-copy-sub1;
                color: $gray;
            }
        }

        .u-field.mode-placeholder:hover {
            border: 2px dashed $link-color;
            .u-field-title,
            i {
              color:  $link-color;
            }
        }
    }
}