e7ffc6fe0c
* Add saving of profile photo * Add removal of profile photo Needs work on knowing when a default photo has been supplied. * Add action creator tests * Fix some reference issues after merge * Fix broken test
95 lines
1.7 KiB
SCSS
Executable File
95 lines
1.7 KiB
SCSS
Executable File
@import "~@edx/edx-bootstrap/scss/edx-bootstrap.scss";
|
|
|
|
$fa-font-path: "~font-awesome/fonts";
|
|
@import "~font-awesome/scss/font-awesome";
|
|
|
|
@import "~@edx/frontend-component-site-header/src/scss/index";
|
|
@import "~@edx/frontend-component-footer/src/lib/scss/site-footer";
|
|
|
|
.word-break-all {
|
|
word-break: break-all !important;
|
|
}
|
|
.w-auto {
|
|
width: auto !important;
|
|
}
|
|
|
|
.bg-banner {
|
|
height: 12rem;
|
|
background-image: url('./assets/dot-pattern-light.png');
|
|
background-repeat: repeat-x;
|
|
background-size: auto 85%;
|
|
|
|
}
|
|
|
|
|
|
.profile-avatar-wrap {
|
|
margin-right: 1rem;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
max-width: 12rem;
|
|
margin-right: 0;
|
|
margin-top: -8rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
|
|
.profile-avatar {
|
|
max-width: 50%;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
position: relative;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
width: 12rem;
|
|
max-width: none;
|
|
height: 12rem;
|
|
}
|
|
|
|
.profile-avatar-edit-button {
|
|
position: absolute;
|
|
height: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: .1rem;
|
|
font-weight: 600;
|
|
background: rgba(0,0,0,.5);
|
|
border-radius:0;
|
|
transition: opacity 200ms ease;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
height: 4rem;
|
|
}
|
|
|
|
&:focus, &:hover, &:active, &.active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-async-action {
|
|
transition: background .2s linear;
|
|
min-width: 6rem;
|
|
|
|
.icon-state {
|
|
transition: opacity .2s ease, width .2s ease;
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
&.btn-state-pending,
|
|
&.btn-state-complete,
|
|
&.btn-state-error, {
|
|
.icon-state {
|
|
width: 1.5rem;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|