<div class="efl-profile-left-popup" role="dialog" aria-modal="true" data-behavior="efl-profile-left-popup">
<button class="efl-profile-left-popup__close" aria-label="close popup window"></button>
<div class="efl-profile-left-popup--inner">
</div>
<div class="efl-profile-left-popup__toast-notification" tabindex="-1" aria-label="">
<canvas id="rive" width="36" height="36"></canvas>
</div>
<div class="efl-profile-left-popup__alert-modal" role="dialog" aria-modal="true">
<h5 class="efl-category-title">This Image is Not Appropriate</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies, nibh sit amet varius faucibus, est ipsum commodo mi, a rutrum urna mauris ut.</p>
<a href="/" class="cta cta--efl " id="please-take-a-new-photo" tabindex="0">Please Take a New Photo</a>
</div>
</div>
No notes defined.
{
"please-take-a-new-photo-button": {
"copy": "Please Take a New Photo",
"modifier": "efl",
"id": "please-take-a-new-photo"
}
}
export default parentElement => {
const eflProfileLayout = document.querySelector('.efl-profile-layout');
const closeBtn = parentElement.querySelector(
'.efl-profile-left-popup__close'
);
closeBtn.addEventListener('click', event => {
event.preventDefault();
if (!closeBtn.classList.contains('not-saved')) {
parentElement.classList.remove('add-animation');
document.body.classList.remove('efl-profile-dark-overlay');
if (eflProfileLayout) {
eflProfileLayout.style.zIndex = null;
}
}
});
closeBtn.addEventListener('keydown', event => {
if (event.keyCode === 27) {
// Cancel the default action, if needed
event.preventDefault();
closeBtn.click();
} else if (event.shiftKey && event.keyCode === 9) {
event.preventDefault();
}
});
};
.efl-profile-left-popup {
background: $white;
height: 100%;
width: 100%;
visibility: hidden;
left: -100%;
overflow: hidden;
position: fixed;
z-index: 9999999999;
opacity: 0;
transition: all 0.25s ease-out;
-webkit-transition: all 0.25s ease-out;
padding: 3.2rem 0;
top: 0;
display: flex;
flex-direction: column;
form {
margin-bottom: 2.4rem;
}
h3 {
color: $blue;
margin-bottom: 2.4rem;
@extend .efl-heading-3;
}
.cta {
width: 100%;
max-width: unset;
text-decoration: none;
svg {
display: none;
}
&[aria-disabled='true'] {
background-color: $grey-light !important;
color: $color-interface-light !important;
border: none !important;
}
&.loading-bar {
span {
display: none;
}
svg {
display: flex;
}
&[aria-disabled='true'] {
background-color: $red !important;
color: $white !important;
}
}
}
.cta.cta--efl {
color: white;
}
.cta.cta--secondary {
text-decoration: none;
color: $blue;
border-color: $light-blue;
margin-top: 1.6rem;
&:hover {
background-color: $light-blue;
}
}
.cta + .cta {
margin-top: 1.6rem;
}
&.add-animation {
visibility: visible;
opacity: 1;
left: 0;
}
&.dark-overlay {
&::after {
content: '';
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 115;
}
}
&__close {
cursor: pointer;
width: 3.4rem;
height: 3.4rem;
background: url('./assets/images/profile-left-modal-close.svg');
display: flex;
position: absolute;
z-index: 100;
right: 3.2rem;
top: 3.2rem;
border: none;
border-radius: 50%;
padding: 0;
}
.efl-profile-left-popup__back {
display: block;
font-size: 1.6rem;
text-decoration: none;
padding: 0.4rem 0;
margin-bottom: 2.4rem;
border-top: 0.1rem solid $grey-light;
border-bottom: 0.1rem solid $grey-light;
border-left: none;
border-right: none;
background: none;
min-width: 100%;
text-align: unset;
line-height: 3.2rem;
color: $color-interface-light;
cursor: pointer;
&::before {
content: '';
display: inline-block;
background-image: url('./assets/images/profile-icons/back.svg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 1.35rem;
height: 0.9rem;
margin-right: 1.45rem;
}
}
&__toast-notification {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
background: $blue-accent3;
width: fit-content;
height: 6.2rem;
border-radius: 10rem;
box-shadow: 0 0.4rem 2.4rem rgba(0, 0, 0, 0.45);
opacity: 0;
top: 100vh;
left: 50%;
padding: 1.6rem 2.4rem;
transform: translateX(-50%);
white-space: nowrap;
font-family: $text-font-ef;
font-style: normal;
font-weight: 700;
font-size: 1.6rem;
line-height: 2rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: $white;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
&::before {
content: '';
display: block;
width: 3.6rem;
height: 3.6rem;
background-image: url('./assets/images/profile-icons/tick.svg');
margin-right: 1.6rem;
}
&.enter-animation {
visibility: visible;
opacity: 1;
top: calc(100vh - 14rem);
}
}
&__alert-modal {
position: fixed;
width: calc(100% - 6.4rem);
max-width: 70.6rem;
z-index: 120;
background: $white;
border-radius: 0.8rem;
visibility: hidden;
pointer-events: none;
opacity: 0;
top: 30%;
left: calc(50% - 2.8rem);
margin: 0 2.8rem;
padding: 2.4rem;
transform: translate(-50%, 50vh);
transition: all 0.25s ease-out;
-webkit-transition: all 0.25s ease-out;
color: $blue;
&[data-err='fill-all-fields'] {
.cta[id='previous-experience-continue-editing-button'],
.cta[id='my-qualifications-continue-editing-button'],
.cta[id='about-me-continue-editing-button'] {
display: flex;
}
}
&[data-err='unsaved-changes'] {
.cta[id='previous-experience-continue-editing-button'],
.cta[id='my-qualifications-continue-editing-button'],
.cta[id='about-me-continue-editing-button'] {
display: flex;
}
.cta[id='previous-experience-lose-changes-button'],
.cta[id='my-qualifications-lose-my-changes-button'],
.cta[id='about-me-lose-my-changes-button'] {
display: flex;
}
}
&[data-err='make-bio-public'] {
.cta[id='previous-experience-make-bio-public-button'],
.cta[id='my-qualifications-make-bio-public-button'],
.cta[id='about-me-make-bio-public-button'] {
display: flex;
}
.cta[id='previous-experience-keep-bio-private-button'],
.cta[id='my-qualifications-keep-bio-private-button'],
.cta[id='about-me-keep-bio-private-button'] {
display: flex;
}
}
&[data-err='innapropriate-content'],
&[data-err='invalid-data-content'] {
.cta[id='efl-learner-profile-edit-about-me-button'],
.cta[id='efl-learner-profile-edit-qualification-button'],
.cta[id='efl-learner-profile-edit-previous-experience-button'] {
display: flex;
}
}
&[data-err='iwf-error-content'] {
.cta[id='efl-learner-profile-error-about-me-button'],
.cta[id='efl-learner-profile-error-qualification-button'],
.cta[id='efl-learner-profile-error-previous-experience-button'] {
display: flex;
}
}
/* stylelint-disable no-descending-specificity */
.cta {
display: none;
}
h5 {
display: flex;
align-items: center;
font-size: 1.6rem;
line-height: 2.4rem;
font-weight: 700;
letter-spacing: 0.09em;
&::before {
content: '';
display: inline-block;
width: 2.7rem;
height: 2.4rem;
background: url('./assets/images/profile-icons/alert.svg') no-repeat
center;
margin-right: 0.8rem;
}
}
&.add-animation {
visibility: visible;
pointer-events: all;
transform: translate(-50%, 0);
opacity: 1;
p {
margin-bottom: 1.2rem;
&::before {
content: '';
display: block;
margin: 0.8rem 0;
border-bottom: 0.1rem solid $grey-light;
width: 100%;
height: auto;
}
}
}
}
&.my-qualifications,
&.previous-experience {
.efl-profile-left-popup--inner {
h6 {
width: fit-content;
strong {
font-size: 1.8rem;
line-height: 2.4rem;
}
}
&.hidden {
display: none;
}
.datepicker-input {
background: url('./assets/images/calendar-input.svg') no-repeat 16px
center;
padding-left: 4.5rem !important;
}
}
.efl-learner-profile__section__qualification--container {
padding-bottom: 1.6rem;
margin-bottom: 1.6rem;
&.other {
.efl-learner-profile__section__qualification__content {
width: calc(100% - 3.4rem);
}
}
}
.efl-learner-profile__section__experience--container {
p {
font-size: 1.8rem;
overflow-wrap: break-word;
}
.efl-learner-profile__section__experience__content {
width: calc(100% - 5.4rem);
}
}
.cta[id='my-qualifications-save-form-button'] {
border: none;
width: 100%;
text-decoration: none;
color: white;
max-width: none;
}
.cta[id='previous-experience-add-button'],
.cta[id='add-experience-button'],
.cta[id='add-qualification-button'] {
max-width: unset;
text-decoration: none;
color: black;
border-color: $light-blue;
margin-bottom: 1.6rem;
&::before {
content: '+';
font-size: 2.4rem;
line-height: 2.4rem;
color: $blue;
display: flex;
justify-content: center;
align-items: center;
border: 0.2rem solid $light-blue;
border-radius: 100%;
margin-right: 0.8rem;
width: 2.4rem;
height: 2.4rem;
padding-bottom: 0.1rem;
padding-left: 0.05rem;
}
&:hover {
background-color: $light-blue;
&::before {
border-color: $blue;
}
}
}
p.efl-learner-profile__section--subheading {
font-size: 1.6rem;
line-height: 2.4rem;
margin-bottom: 0.8rem;
strong {
font-size: 1.6rem;
}
&::after {
content: '';
display: block;
border-bottom: 0.1rem solid $light-blue;
margin-bottom: 0.8rem;
width: 100%;
height: auto;
}
}
.paragraph {
margin-bottom: 1.6rem;
border-bottom: 0.1rem solid $grey-light;
padding-bottom: 1.6rem;
}
.missing-something {
margin-bottom: 0;
margin-top: 1.6rem;
}
label {
display: block;
font: $efl-p-medium;
font-weight: 700;
color: $blue;
margin-bottom: 0.8rem;
margin-top: 1.6rem;
}
form {
> div {
display: flex;
gap: 3rem;
}
> p {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
.my-qualifications-form--date-container,
.previous-experience-form--date-range {
position: relative;
.datepicker-dropdown {
top: 4rem !important;
&.datepicker-orient-left {
left: 0 !important;
}
&.datepicker-orient-right {
left: 0 !important;
}
}
}
input {
color: $blue;
border: 0.2rem solid $light-blue;
border-radius: 0.5rem;
width: 100%;
font-size: 1.6rem;
line-height: 2.4rem;
&[type='text'] {
height: 4.4rem;
padding: 1.6rem;
}
&#previous-experience-form--date-start,
&#previous-experience-form--date-end,
&#my-qualifications-form--date {
height: 4.4rem;
padding: 1.6rem 1rem;
display: flex;
&::before {
content: '';
display: inline-block;
width: 1.6rem;
height: 1.8rem;
background: url('./assets/images/calendar-input.svg') no-repeat center
center;
left: 0;
}
}
&:focus-visible {
border-color: $blue;
}
+ p {
margin-top: 0.8rem;
}
}
textarea {
display: block;
border: 0.2rem solid $light-blue;
border-radius: 0.5rem;
min-height: 19rem;
padding: 1.3rem 1.6rem;
margin-bottom: 0.8rem;
font-size: 1.8rem;
line-height: 2.4rem;
color: $blue;
height: 100%;
width: 100%;
resize: none;
&:focus-visible {
border-color: $blue;
}
}
}
&.about-me {
p {
margin-bottom: 2.4rem;
}
textarea {
width: 100%;
min-height: 19rem;
border-color: $light-blue;
padding: 1.3rem 1.6rem;
margin-bottom: 0.8rem;
font-size: 1.8rem;
line-height: 2.4rem;
color: $blue;
resize: none;
&::placeholder {
font-size: 1.8rem;
line-height: 2.4rem;
color: $color-interface-light;
}
&:focus {
border: $black;
}
}
.options {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 2.4rem;
font-size: 1.6rem;
line-height: 2.4rem;
letter-spacing: -0.01em;
.clear-text {
color: $color-interface-light;
text-decoration: underline;
}
p {
margin-bottom: 0;
}
}
}
.cta[id='about-me-save-button'],
.cta[id='my-qualifications-save-button'] {
border: none;
color: $white;
text-decoration: none;
max-width: unset;
width: 100%;
&[aria-disabled='true'] {
cursor: unset;
background-color: $grey-light;
color: $color-interface-light;
}
}
&--inner {
overflow-y: auto;
overflow-x: hidden;
max-height: calc(100vh - 6.4rem);
padding: 0 3.2rem;
@include efl-scrollbar();
}
.efl-learner-profile__section--header {
padding-left: 3.2rem;
}
.efl-learner-profile__social-links__list {
padding-right: 6.4rem;
width: 100%;
div a,
.copy {
background-color: $grey-light;
p {
color: $blue;
}
}
@include efl-scrollbar();
}
@media screen and (min-width: $mq-medium) {
max-width: 43.1rem;
top: 0;
left: -43.1rem;
width: 43.1rem;
padding: 3.2rem;
&.add-animation {
visibility: visible;
opacity: 1;
left: 0;
}
.efl-learner-profile__social-links__list {
margin-left: 0;
padding-right: 0;
flex-wrap: wrap;
div a,
.copy {
width: 5.6rem;
height: 5.6rem;
&.copy img {
width: 2.5rem;
height: 2.5rem;
}
.canvas {
width: 3.6rem !important;
height: 3.6rem !important;
top: 1rem !important;
}
}
}
&__close {
right: 5.2rem;
top: 3rem;
}
&__alert-modal {
left: 5.2rem;
transform: translate(0, 50vh);
margin: 0;
max-width: 31.9rem;
&.add-animation {
transform: none;
}
}
&.large-modal {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 69.7rem;
height: fit-content;
padding: 1.6rem 0;
border-radius: 0.8rem;
.efl-profile-left-popup__close {
right: 3.2rem;
top: 1.6rem;
}
#cropme.active {
position: initial;
.cropme-container::before {
display: none;
}
}
.cta,
.efl-profile-upload-another-photo label {
max-width: 32.9rem;
margin-left: auto;
margin-right: auto;
&.efl-profile-capture-photo {
margin-top: 1.6rem;
margin-bottom: 0;
}
}
.efl-learner-profile-add-photo {
padding: 0;
h3 {
padding-left: 4rem;
margin-bottom: 1.6rem;
}
}
}
&--inner {
padding: 0 3.2rem;
max-height: calc(100vh - 6.4rem);
@include efl-scrollbar();
}
&__toast-notification {
left: 5.6rem;
transform: none;
&.enter-animation {
top: calc(100vh - 6.9rem - 6.2rem);
}
canvas {
display: none;
}
}
&.my-qualifications {
h4 {
font-size: 2rem;
line-height: 2.2rem;
font-weight: 700;
}
a {
color: $blue;
}
}
}
}
.efl-profile-dark-overlay {
overflow: hidden;
&::after {
content: '';
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(black, 0.7);
z-index: 101;
}
}
<div class="efl-profile-left-popup" role="dialog" aria-modal="true" data-behavior="efl-profile-left-popup">
<button class="efl-profile-left-popup__close" aria-label="close popup window"></button>
<div class="efl-profile-left-popup--inner">
</div>
<div class="efl-profile-left-popup__toast-notification" tabindex="-1" aria-label="">
<canvas id="rive" width="36" height="36"></canvas>
</div>
<div class="efl-profile-left-popup__alert-modal" role="dialog" aria-modal="true">
<h5 class="efl-category-title">This Image is Not Appropriate</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies, nibh sit amet varius faucibus, est ipsum commodo mi, a rutrum urna mauris ut.</p>
{{render '@cta--efl' please-take-a-new-photo-button merge="true"}}
</div>
</div>