616 lines
17 KiB
SCSS
616 lines
17 KiB
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 {
|
|
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;
|
|
margin: auto;
|
|
|
|
.image-frame {
|
|
display: block;
|
|
position: relative;
|
|
width: $profile-image-dimension;
|
|
height: $profile-image-dimension;
|
|
border-radius: ($profile-image-dimension/2);
|
|
overflow: hidden;
|
|
border: 3px solid $gray-lightest;
|
|
margin-top: $baseline*-0.75;
|
|
background: $white;
|
|
}
|
|
|
|
.u-field-upload-button {
|
|
position: absolute;
|
|
top: 0;
|
|
opacity: 0;
|
|
width: $profile-image-dimension;
|
|
height: $profile-image-dimension;
|
|
border-radius: ($profile-image-dimension/2);
|
|
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);
|
|
z-index: 6;
|
|
|
|
i {
|
|
color: $link-color;
|
|
}
|
|
|
|
&:focus,
|
|
&:hover {
|
|
@include show-hover-state();
|
|
border-color: $link-color;
|
|
}
|
|
|
|
&.in-progress {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
color: $base-font-color;
|
|
}
|
|
|
|
.upload-button-input {
|
|
position: absolute;
|
|
top: 0;
|
|
@include left(0);
|
|
width: $profile-image-dimension;
|
|
border-radius: ($profile-image-dimension/2);
|
|
height: 100%;
|
|
cursor: pointer;
|
|
z-index: 5;
|
|
outline: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.u-field-remove-button {
|
|
position: relative;
|
|
display: block;
|
|
width: $profile-image-dimension;
|
|
margin-top: ($baseline / 4);
|
|
padding: ($baseline / 5) 0 0;
|
|
text-align: center;
|
|
opacity: 0;
|
|
transition: opacity 0.5s;
|
|
}
|
|
|
|
&:hover, &:active {
|
|
.u-field-remove-button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrapper-profile {
|
|
min-height: 200px;
|
|
background-color: $gray-lightest;
|
|
|
|
.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*3);
|
|
}
|
|
|
|
.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;
|
|
@include padding($baseline*1.5, $baseline*1.5, $baseline*1.5, 0);
|
|
min-width: 0;
|
|
|
|
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
|
|
@include margin-left(0);
|
|
@include padding($baseline*1.5, 0, $baseline*1.5, 0);
|
|
}
|
|
}
|
|
|
|
.profile-header {
|
|
@include padding(0, $baseline*2, $baseline, $baseline*3);
|
|
|
|
.header {
|
|
@extend %t-title4;
|
|
@extend %t-ultrastrong;
|
|
display: inline-block;
|
|
}
|
|
|
|
.subheader {
|
|
@extend %t-title6;
|
|
}
|
|
}
|
|
|
|
.wrapper-profile-section-one {
|
|
@include float(left);
|
|
@include margin-left($baseline*3);
|
|
width: 300px;
|
|
background-color: $white;
|
|
border-top: 5px solid $blue;
|
|
padding-bottom: $baseline;
|
|
|
|
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
|
|
@include margin-left(0);
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.profile-section-one-fields {
|
|
margin: 0 $baseline/2;
|
|
|
|
.u-field {
|
|
@extend %t-weight4;
|
|
@include padding(0, 0, 0, 3px);
|
|
color: $base-font-color;
|
|
margin-top: $baseline/5;
|
|
|
|
.u-field-value, .u-field-title {
|
|
@extend %t-weight4;
|
|
width: calc(100% - 40px);
|
|
}
|
|
|
|
.u-field-value-readonly {
|
|
font-weight: 500;
|
|
font-family: $sans-serif;
|
|
color: $darkest-base-font-color;
|
|
}
|
|
|
|
.u-field-title {
|
|
color: $lightest-base-font-color;
|
|
display: block;
|
|
}
|
|
|
|
&:not(.u-field-readonly):not(:last-child) {
|
|
padding-bottom: $baseline/4;
|
|
border-bottom: 1px solid $gray-lighter;
|
|
|
|
&:hover.mode-placeholder {
|
|
padding-bottom: $baseline/5;
|
|
border-bottom: 2px dashed $link-color;
|
|
}
|
|
}
|
|
&.u-field-dropdown {
|
|
position: relative;
|
|
|
|
&:not(.editable-never) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
&>.u-field {
|
|
&:not(:first-child) {
|
|
font-size: $body-font-size;
|
|
color: $base-font-color;
|
|
font-weight: $font-light;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&:first-child {
|
|
@extend %t-title4;
|
|
@extend %t-weight4;
|
|
font-size: em(24);
|
|
}
|
|
}
|
|
|
|
select {
|
|
width: 85%
|
|
}
|
|
|
|
.u-field-message {
|
|
@include right(0);
|
|
position: absolute;
|
|
top: 0;
|
|
width: 20px;
|
|
|
|
.icon {
|
|
vertical-align: baseline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrapper-profile-section-container-two {
|
|
@include float(left);
|
|
width: calc(100% - 360px);
|
|
max-width: $learner-profile-container-flex; // Switch to map-get($grid-breakpoints,md) for bootstrap
|
|
padding-left: $baseline;
|
|
|
|
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
|
|
width: 100%;
|
|
margin-top: $baseline;
|
|
}
|
|
|
|
.u-field-textarea {
|
|
margin-bottom: ($baseline/2);
|
|
padding: 0 ($baseline*.75) ($baseline*.75) ($baseline/4);
|
|
|
|
.u-field-header {
|
|
position: relative;
|
|
|
|
.u-field-message {
|
|
@include right(0);
|
|
top: $baseline/4;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
&.editable-toggle {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.u-field-title {
|
|
@extend %t-title6;
|
|
@extend %t-weight5;
|
|
display: inline-block;
|
|
margin-top: 0;
|
|
margin-bottom: ($baseline/4);
|
|
color: $gray-dark;
|
|
width: 100%;
|
|
}
|
|
|
|
.u-field-value {
|
|
@extend %t-copy-base;
|
|
width: 100%;
|
|
overflow: auto;
|
|
|
|
textarea {
|
|
width: 100%;
|
|
background-color: transparent;
|
|
border-radius: 5px;
|
|
border-color: $gray-d1;
|
|
resize: none;
|
|
white-space: pre-line;
|
|
outline: 0;
|
|
box-shadow: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.u-field-message {
|
|
@include float(right);
|
|
width: auto;
|
|
|
|
.message-can-edit {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.u-field.mode-placeholder {
|
|
padding: $baseline;
|
|
margin: $baseline * 0.75;
|
|
border: 2px dashed $gray-l3;
|
|
|
|
i {
|
|
font-size: 12px;
|
|
@include padding-right(5px);
|
|
vertical-align: middle;
|
|
color: $base-font-color;
|
|
}
|
|
.u-field-title {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.u-field-value {
|
|
text-align: center;
|
|
line-height: 1.5em;
|
|
@extend %t-copy-sub1;
|
|
color: $base-font-color;
|
|
}
|
|
|
|
&:hover {
|
|
border: 2px dashed $link-color;
|
|
|
|
.u-field-title, i {
|
|
color: $link-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrapper-u-field {
|
|
font-size: $body-font-size;
|
|
color: $base-font-color;
|
|
|
|
.u-field-header .u-field-title{
|
|
color: $base-font-color;
|
|
}
|
|
|
|
.u-field-footer {
|
|
.field-textarea-character-count {
|
|
@extend %t-weight1;
|
|
@include float(right);
|
|
margin-top: $baseline/4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.profile-private-message {
|
|
@include padding-left($baseline*0.75);
|
|
line-height: 3.0em;
|
|
}
|
|
}
|
|
|
|
.badge-paging-header {
|
|
padding-top: $baseline;
|
|
}
|
|
|
|
.page-content-nav {
|
|
@extend %page-content-nav;
|
|
}
|
|
|
|
.badge-set-display {
|
|
@extend .container;
|
|
padding: 0 0;
|
|
|
|
.badge-list {
|
|
// We're using a div instead of ul for accessibility, so we have to match the style
|
|
// used by ul.
|
|
margin: 1em 0;
|
|
padding: 0 0 0 40px;
|
|
}
|
|
|
|
.badge-display {
|
|
width: 50%;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding: 2em 0;
|
|
.badge-image-container {
|
|
padding-right: $baseline;
|
|
margin-left: 1em;
|
|
width: 20%;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
img.badge {
|
|
width: 100%;
|
|
}
|
|
.accomplishment-placeholder {
|
|
border: 4px dotted $gray-l4;
|
|
border-radius: 50%;
|
|
display: block;
|
|
width: 100%;
|
|
padding-bottom: 100%;
|
|
}
|
|
}
|
|
.badge-details {
|
|
@extend %t-copy-sub1;
|
|
@extend %t-regular;
|
|
max-width: 70%;
|
|
display: inline-block;
|
|
color: $gray-d1;
|
|
.badge-name {
|
|
@extend %t-strong;
|
|
@extend %t-copy-base;
|
|
color: $gray-d3;
|
|
}
|
|
.badge-description {
|
|
padding-bottom: $baseline;
|
|
line-height: 1.5em;
|
|
}
|
|
.badge-date-stamp{
|
|
@extend %t-copy-sub1;
|
|
}
|
|
.find-button-container {
|
|
border: 1px solid $blue-l1;
|
|
padding: ($baseline / 2) $baseline ($baseline / 2) $baseline;
|
|
display: inline-block;
|
|
border-radius: 5px;
|
|
font-weight: bold;
|
|
color: $blue-s3;
|
|
}
|
|
.share-button {
|
|
@extend %t-action3;
|
|
@extend %button-reset;
|
|
background: $gray-l6;
|
|
color: $gray-d1;
|
|
padding: ($baseline / 4) ($baseline / 2);
|
|
margin-bottom: ($baseline / 2);
|
|
display: inline-block;
|
|
border-radius: 5px;
|
|
border: 2px solid $gray-d1;
|
|
cursor: pointer;
|
|
transition: background .5s;
|
|
.share-prefix {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.share-icon-container {
|
|
display: inline-block;
|
|
img.icon-mozillaopenbadges {
|
|
max-width: 1.5em;
|
|
margin-right: .25em;
|
|
}
|
|
}
|
|
&:hover {
|
|
background: $gray-l4;
|
|
}
|
|
&:active {
|
|
box-shadow: inset 0 4px 15px 0 $black-t2;
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.badge-placeholder {
|
|
background-color: $gray-l7;
|
|
box-shadow: inset 0 0 4px 0 $gray-l4;
|
|
}
|
|
}
|
|
|
|
// ------------------------------
|
|
// #BADGES MODAL
|
|
// ------------------------------
|
|
.badges-overlay {
|
|
@extend %ui-depth1;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: $dark-trans-bg; /* dim the background */
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
|
|
.badges-modal {
|
|
@extend %t-copy-lead1;
|
|
@extend %ui-depth2;
|
|
color: $lighter-base-font-color;
|
|
box-sizing: content-box;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 80%;
|
|
max-width: 700px;
|
|
max-height: calc(100% - 100px);
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
border-top: rem(10) solid $blue-l2;
|
|
background: $light-gray3;
|
|
padding-right: ($baseline * 2);
|
|
padding-left: ($baseline * 2);
|
|
padding-bottom: ($baseline);
|
|
overflow-x: hidden;
|
|
|
|
.modal-header {
|
|
margin-top: ($baseline / 2);
|
|
margin-bottom: ($baseline / 2);
|
|
}
|
|
|
|
.close {
|
|
@extend %button-reset;
|
|
@extend %t-strong;
|
|
color: $lighter-base-font-color;
|
|
position: absolute;
|
|
right: ($baseline);
|
|
top: $baseline;
|
|
cursor: pointer;
|
|
padding: ($baseline / 4) ($baseline / 2);
|
|
@include transition(all $tmg-f2 ease-in-out 0s);
|
|
&:focus, &:hover {
|
|
background-color: $blue-d2;
|
|
border-radius: 3px;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.badges-steps {
|
|
display: table;
|
|
}
|
|
|
|
.image-container{
|
|
// Lines the image up with the content of the above list.
|
|
@include ltr {
|
|
@include padding-left(2em);
|
|
}
|
|
@include rtl {
|
|
@include padding-right(1em);
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.backpack-logo {
|
|
@include float(right);
|
|
@include margin-left($baseline);
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-hr {
|
|
display: block;
|
|
border: none;
|
|
background-color: $light-gray;
|
|
height: rem(2);
|
|
width: 100%;
|
|
}
|
|
}
|