England Football

Registration Container 

<div class="registration-container" data-modal-title='Test Are you sure you want quit' data-modal-subtitle='Subtitle for cross icon' data-modal-primary='Quit' data-modal-secondary='Cancel'>
    <div id="camera_host"></div>
    <div class="registration-container__header">
        <button class="back-icon-container registration_hide" aria-label="back registration journey">
            <i class="back-icon"></i> <span class="back-text">Back</span>
        </button>
        <button class="close-icon-container" aria-label="close registration journey">
            <i class="close-icon"></i>
        </button>
    </div>
    <div class="registration-container__body">
        <div class="registration-loader registration_hide" role="alert" aria-label="loading, Please do not refresh the page. ">
            <img id="registration-loader-logo" class="registration-loader-estc" src="/assets/example-content/loading_with_logo.gif" loading="lazy" alt="loading" />

            <div class="registration-loader__travelclubs">
                <div class="registration-loader__spinner">
                    <div class="registration-loader__ring"></div>
                </div>
            </div>
        </div>
        <div class="form-container">
            Registration container
        </div>
    </div>
    <div class="registration-container__footer">
        <img src="./../../../assets/example-content/threelions-logo.svg" class="footer-logo" alt="england football logo" />
        <dialog class="registration-confirm-modal">
            <!-- Modal content -->
            <div class="registration-confirm-modal__content">
                <div class="registration-confirm-modal__header">
                    <h1 class="registration-form-title">
                        Are you sure?
                    </h1>
                </div>
                <div class="registration-confirm-modal__body">
                    <h2 class="registration-form-sub-title">
                        If you don’t want to register now you can come back at any time.
                    </h2>
                </div>
                <div class="registration-confirm-modal__footer">
                    <a role="button" href="/" class="cta cta--r-primary ">
                        <p>
                            Leave</p>
                    </a>

                    <a role="button" href="/" class="cta cta--r-secondary ">
                        <p>
                            Cancel</p>
                    </a>

                </div>
            </div>
        </dialog>
    </div>

No notes defined.

{
  "popup-title": {
    "copy": "Are you sure you want to remove junior?"
  },
  "popup-para": {
    "copy": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum iste optio fugit totam mollitia? Quisquam impedit, provident ipsa fuga vel aspernatur ipsam unde labore quasi doloremque ea harum, amet possimus?"
  },
  "quit-button": {
    "copy": "QUIT"
  },
  "cancel-button": {
    "copy": "CANCEL"
  }
}
  • Content: 
    import { hideClass } from '../../modules/registration/registration-error/registration-error';
import {
  BACKCLICKED,
  backBtnElement,
  currentPage,
  nevigateToPrevious,
} from '../../modules/registration/registrationUtility';

import {
  setDialogTitle,
  setDialogSubTitle,
  setConfirmDialogPrimaryCtaText,
  setConfirmDialogSecondaryCtaText,
} from '../../modules/registration/registration-confirm-modal/registration-confirm-modal';

export default parentElement => {
  const backBtn = backBtnElement;
  const closeBtn = parentElement.querySelector('.close-icon-container');
  const model = parentElement.querySelector('.registration-confirm-modal');

  closeBtn.addEventListener('click', () => {
    setDialogTitle(parentElement.getAttribute('data-modal-title'));
    setDialogSubTitle(parentElement.getAttribute('data-modal-subtitle'));
    setConfirmDialogPrimaryCtaText(
      parentElement.getAttribute('data-modal-primary')
    );
    setConfirmDialogSecondaryCtaText(
      parentElement.getAttribute('data-modal-secondary')
    );
    model.showModal();
  });

  backBtn.addEventListener('click', event => {
    event.preventDefault();
    if (!currentPage.isLoading) {
      let currentElement = currentPage.page;

      if (
        currentElement.classList.contains('registration-passport-details') ||
        currentElement.classList.contains(
          'registration-passport-details-cloned'
        )
      ) {
        currentElement.classList.add(hideClass);
        currentElement = currentElement.previousElementSibling;
      }
      if (currentElement.classList.contains('registration-select-junior')) {
        currentElement = currentElement.parentElement;
        currentElement.classList.add('registration_skip');
        if (currentPage.isAdultRegistered === 'true') {
          currentElement = document.querySelector(
            '.registration-privacy-policy'
          );
          currentPage.page.parentElement.classList.add(hideClass);
        }
      }
      nevigateToPrevious(currentElement);
      sessionStorage.setItem(BACKCLICKED, true);
    }
  });
};
  • URL: /components/raw/registration-container/registration-container.js
  • Filesystem Path: src/library/layouts/registration-container/registration-container.js
  • Size: 2.1 KB
  • Content: 
    /* stylelint-disable no-descending-specificity */
$border-radius: 16px;
$width: 1000px;
$height: 800px;
$containe-height: 593px;
$margin-y: 112px;
$margin-mobile-y: 40px;
$margin-mobile-x: 20px;

// close icon
$close-icon-y: 22px;
$close-icon-right: 22px;
$close-icon-height: 16px;
$close-icon-width: 16px;

// footer image
$footer-image-width: 155px;
$footer-image-height: 64.58px;
$footer-bottom: 50px;

.theme-three-lions .registration-container,
.theme-lionesses .registration-container {
  background-color: transparent;

  &__header {
    .back-icon-container {
      .back-text {
        color: white;
        font-family: $registration-font-subtitle;
      }

      .back-icon {
        background-image: url('./assets/example-content/arrow_back_hover.svg');
      }
    }
  }

  .cta--r-primary,
  .cta--r-secondary {
    min-height: 48px !important;
    border-radius: 12px;
    font-family: $registration-font-subtitle;
    // font-weight: 500;

    &:hover {
      background-color: #d6d9e1;
      color: #0d0d0d;
    }

    &:focus-visible {
      color: #1b1c1e;
      border: 2px solid #1b1c1e;
      background-color: #fd0;
      text-decoration: underline;
    }
  }

  .cta--r-disabled {
    min-height: 48px !important;
    border-radius: 12px;
    font-family: $registration-font-subtitle;
    background-color: #e4e7ec;
    border: 1px solid #8e98ae;
    color: #bbc1ce;
  }

  .cta--r-primary {
    background-color: #f0f1f4;
    color: #0d0d0d;
  }

  .cta--r-secondary {
    border: 1px solid #caced9;
    background-color: transparent;
    color: #fff;
  }

  .checkbox {
    .checkmark-container {
      height: 18px;
      width: 18px;
      border-width: 2px;
      box-sizing: content-box;
      background-color: transparent;

      .checkmark {
        border-radius: 2px;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        &::after {
          left: unset;
          top: 0;
          border: solid #0d0d0d;
          border-width: 0 2.5px 2.5px 0;
          width: 6px;
          height: 12px;
        }
      }
    }
  }

  .checkbox--secondary:hover input ~ .checkmark-container,
  .checkbox--with-dob:hover input ~ .checkmark-container,
  .checkbox--primary:hover input ~ .checkmark-container {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .checkbox--secondary input:checked ~ .checkmark-container,
  .checkbox--with-dob input:checked ~ .checkmark-container,
  .checkbox--primary input:checked ~ .checkmark-container {
    background-color: #fff;
  }

  .checkbox--secondary:hover input:checked ~ .checkmark-container,
  .checkbox--with-dob:hover input:checked ~ .checkmark-container,
  .checkbox--primary:hover input:checked ~ .checkmark-container {
    background-color: rgba(255, 255, 255, 0.9);
  }

  .checkbox--secondary:hover input:checked ~ .checkmark-container .checkmark,
  .checkbox--with-dob:hover input:checked ~ .checkmark-container .checkmark,
  .checkbox--primary:hover input:checked ~ .checkmark-container .checkmark {
    background-color: transparent;
  }

  .checkbox--with-dob:has(input:checked) .checkmark-container,
  .checkbox--primary:has(input:checked) .checkmark-container {
    border-color: #fff;
  }

  .checkbox--with-dob input:checked ~ .checkmark-container .checkmark,
  .checkbox--primary input:checked ~ .checkmark-container .checkmark {
    background-color: #fff;
  }

  .checkbox input:focus-visible ~ .checkmark-container {
    outline: 2px solid #fd0;
    outline-offset: 2px;
    background-color: transparent;
    border: 2px solid #fff;
  }

  .checkbox input:checked:focus-visible ~ .checkmark-container {
    outline: 2px solid #fd0;
    outline-offset: 2px;
    background-color: #fff;
    border: 2px solid #fff;
  }

  .checkbox input:checked:focus-visible ~ .checkmark-container .checkmark {
    background-color: #fff;
  }

  .checkbox--with-dob:has(input:checked),
  .checkbox--primary:has(input:checked) {
    background-color: transparent;
  }

  .checkbox--with-dob:has(input:checked) .dob-label,
  .checkbox--with-dob:has(input:checked) .label,
  .checkbox--primary:has(input:checked) .dob-label,
  .checkbox--primary:has(input:checked) .label {
    color: #fff;
  }

  .checkbox--with-dob:hover,
  .checkbox--with-dob:has(input:checked):hover,
  .checkbox--primary:hover,
  .checkbox--primary:has(input:checked):hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .registration-text-input-container__label {
    color: #fff;
  }

  .registration-text-input-container__text-input {
    background-color: transparent;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    &:focus {
      outline: none;
      background-color: transparent;
      color: #fff;
    }

    &:focus-visible {
      outline: 2px solid #fd0;
      outline-offset: 2px;
      background-color: #f0f0f0;
      color: #1b1c1e;
    }

    &:focus-visible::placeholder {
      color: #1b1c1e;
    }

    &:disabled {
      background-color: #f0f0f0;
      color: #1b1c1e;
    }

    &:disabled::placeholder {
      color: #1b1c1e;
    }
  }

  .registration-text-input-container__text-input::placeholder {
    color: #fff;
  }

  .registration-text-input-container__text-input[type='date']:focus-visible {
    background-color: transparent;
    color: #fff;
  }

  .registration-custom-select select {
    background-color: transparent;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    &:focus-visible {
      outline: 2px solid #fd0;
      outline-offset: 2px;
    }
  }

  .registration-passport-details-cloned
    .passport-expiry.untouched-element
    input,
  .registration-passport-details-cloned
    .passport-expiry.untouched-element
    select,
  .registration-passport-details-cloned .nationality.untouched-element input,
  .registration-passport-details-cloned .nationality.untouched-element select,
  .registration-passport-details .passport-expiry.untouched-element input,
  .registration-passport-details .passport-expiry.untouched-element select,
  .registration-passport-details .nationality.untouched-element input,
  .registration-passport-details .nationality.untouched-element select {
    color: #fff;
  }

  .registration-junior-details .DateOfBirth.untouched-element input,
  .registration-junior-details .DateOfBirth.untouched-element select,
  .registration-junior-details .gender.untouched-element input,
  .registration-junior-details .gender.untouched-element select {
    color: #fff;
  }

  .registration-membership-summary .registration-membership-sub-title,
  .registration-membership-summary .link-button {
    color: #fff;
  }

  .registration-membership-summary .separator {
    background-color: #fff;
  }

  .registration-member .info-header,
  .registration-member .info {
    border-color: #fff;
  }

  .registration-member .info:not(:first-child) {
    border-top: 1px solid #fff;
  }

  .registration-member--secondary-with-header .bar,
  .registration-member--secondary .bar {
    background-color: #fff;
  }

  .registration-container__header .close-icon-container:focus-visible {
    background-color: transparent;
    color: #fff;
    border: 2px solid #1b1c1e;
    outline: 4px solid #fd0;
  }

  .registration-container__header
    .close-icon-container:focus-visible
    .close-icon {
    background-image: url('./assets/example-content/close.svg');
  }

  .registration-container__header .back-icon-container:hover .back-text {
    color: white;
    font-weight: normal;
    text-decoration: underline;
  }

  .registration-container__header .back-icon-container:focus-visible {
    outline: none;
    background-color: #fd0;
    border-bottom: 2px solid #1b1c1e;
    color: #1b1c1e;
  }

  .registration-confirm-modal__footer .cta--r-primary {
    border: 1px solid #1b1c1e;
  }

  .registration-confirm-modal__footer .cta--r-secondary {
    color: #0d0d0d;
    border: 1px solid #1b1c1e;
  }

  img.footer-logo {
    width: auto;
    height: auto;
  }
}

.registration-container {
  background-color: $crest-blue;
  border-radius: $border-radius;
  width: $width;
  min-height: $height;
  margin: $margin-y auto;
  display: flex;
  flex-direction: column;
  position: relative;

  &__header {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .close-icon-container {
      margin-left: auto;
      height: 44px;
      width: 44px;
      margin-top: 12px;
      margin-right: 12px;
      border-radius: 2px;
      background-color: transparent;
      border: 0;

      .close-icon {
        background-size: contain;
        background-image: url('./assets/example-content/close.svg');
        transition: all 0.2s ease-in-out;
        height: $close-icon-height;
        width: $close-icon-width;
        display: block;
        margin: auto;

        &:hover {
          transform: scale(1.25);
        }
      }

      &:focus-visible {
        outline: none;
        background-color: $yellow1;
        border: 1px solid $black1;
        color: $black1;

        .close-icon {
          background-image: url('./assets/example-content/close-icon-black.svg');
        }
      }
    }

    .back-icon-container {
      display: flex;
      align-items: center;
      height: 44px;
      margin: 12px;
      border-radius: 2px;
      background-color: transparent;
      border: 0;

      .back-icon,
      .back-text {
        margin: 16px 0;
      }

      .back-text {
        color: $light-blue;
        font-family: $registration-font;
        font-size: 16px;
        font-weight: 400;
        margin-right: 16px;
        cursor: pointer;
      }

      .back-icon {
        margin-right: 8px;
        display: block;
        margin-left: 16px;
        height: 11px;
        width: 11px;
        background-image: url('./assets/example-content/arrow_back.svg');
      }

      &:hover {
        .back-icon {
          background-image: url('./assets/example-content/arrow_back_hover.svg');
        }

        .back-text {
          color: white;
          font-weight: 700;
        }
      }

      &:focus-visible {
        outline: none;
        background-color: $yellow1;
        border: 1px solid $black1;
        color: $black1;

        .back-text {
          color: $black1;
        }

        .back-icon {
          background-image: url('./assets/example-content/arrow_black_back.svg');
        }
      }
    }
  }

  &__body {
    flex: 1;
    width: 100%;
    // margin-top: 15px;
    display: flex;
    overflow-y: auto;
    position: relative;
  }

  &__footer {
    width: 100%;

    .footer-logo {
      width: $footer-image-width;
      height: $footer-image-height;
      margin: 40px auto;

      // converting the icon to image tag
      // background-image: url('./assets/example-content/logo-name.png');
      // background-size: contain;
      // background-repeat: no-repeat;

      @media screen and (max-width: $mq-medium) {
        width: 130px;
        height: 54px;
      }
    }

    .travelclub-footer-logo {
      margin: 40px auto;
    }
  }

  @media screen and (max-width: $mq-medium) {
    margin: $margin-mobile-y auto;
    width: calc(100% - 40px);
  }

  #camera_host {
    background-color: $crest-blue;
    position: absolute;
    z-index: 2;
    border-radius: 16px;

    .registration__camera {
      .video_container {
        position: relative;

        #video {
          width: 1000px;
        }

        #camera_close_btn {
          position: absolute;
          top: 16px;
          right: 16px;
          background-image: url('./assets/example-content/camera_close.svg');
          height: 44px;
          width: 44px;
          background-size: inherit;
          background-repeat: no-repeat;
          background-position: center;
          border-radius: 2px;
          padding: 0;
          z-index: 1;
          border: none;

          &:hover {
            transform: scale(1.1);
          }
        }
      }

      #capturebtn {
        width: 375px;
        margin: auto;
        margin-top: 3px;
      }
    }
  }

  .registration-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: $light-black;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .registration-modal-content-details {
    background-color: $white;
    padding: 24px;
    border: 1px solid $light-red1;
    width: 90%;
    max-height: 80vh;
    max-width: 600px;
    text-align: left;
    top: 288px;
    left: 416px;
    overflow-y: auto;
    border-radius: 8px 8px 8px 8px;
    box-sizing: border-box;
  }

  .registration-modal-content-details h2 {
    margin-bottom: 24px;
    color: $dark-black;
    font-family: $registration-font;
    font-size: 26px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.01em;
    text-align: left;
  }

  .registration-modal-content-details p {
    color: $dark-black;
    margin-bottom: 40px;
    font-family: $registration-font;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
  }

  .registration-modal-content-details .btn-container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 20px;
    border-radius: 2px;
    border: 1px;
  }

  .registration-modal-content-details .btn-container button {
    width: 100%;
    padding: 10px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    color: $white;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
  }

  .registration-modal-content-details .btn-container a {
    width: 100%;
    padding: 10px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    color: $white;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
  }

  .registration-modal-content-details .btn-quit {
    background-color: $red-rj;
    font-family: $registration-font;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.01em;
    text-align: center;
  }

  .registration-modal-content-details .btn-cancel {
    background-color: $blue-accent6;
    font-family: $registration-font;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.01em;
    text-align: center;
  }

  .registration-modal-content-details .btn-quit:hover {
    background-color: $white;
    color: $blue;
    border: 1px solid $blue;
  }

  .registration-modal-content-details .btn-cancel:hover {
    background-color: $white;
    color: $blue;
    border: 1px solid $blue;
  }
}

@media screen and (min-width: $mq-medium) {
  .registration-container {
    .registration-modal {
      .registration-modal-content-details {
        .btn-container {
          flex-direction: row;
        }
      }
    }
  }
}

@media screen and (min-width: $mq-medium) {
  .registration-container {
    .registration-self-steps-container {
      max-height: $containe-height;
    }
  }
}
  • URL: /components/raw/registration-container/registration-container.scss
  • Filesystem Path: src/library/layouts/registration-container/registration-container.scss
  • Size: 15 KB 
<div class="registration-container" data-modal-title='Test Are you sure you want quit'
  data-modal-subtitle='Subtitle for cross icon' data-modal-primary='Quit' data-modal-secondary='Cancel'>
  <div id="camera_host"></div>
  <div class="registration-container__header">
    <button class="back-icon-container registration_hide" aria-label="back registration journey">
      <i class="back-icon"></i> <span class="back-text">Back</span>
    </button>
    <button class="close-icon-container" aria-label="close registration journey">
      <i class="close-icon"></i>
    </button>
  </div>
  <div class="registration-container__body">
    {{render '@registration-loader'}}
    <div class="form-container">
      {{#> @partial-block}}
      Registration container
      {{/ @partial-block}}
    </div>
  </div>
  <div class="registration-container__footer">
    <img src="./../../../assets/example-content/threelions-logo.svg" class="footer-logo" alt="england football logo" />
  {{render '@registration-confirm-modal'}}
</div>