FTSE Russell Styleguide

Modal: Default 

<div class="modal-wrapper">
    <div class="modal-backdrop fade show"></div>
    <div class="modal ngx-modal fade show">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <i></i>

                    <body>
                        <div class="modal-title">You are now leaving www.ftserussell.com</div>
                        <p>
                            You are now leaving www.ftserussell.com to access a third party website. The link to the third party website has been provided for information purposes only and inclusion of this link does not imply any endorsement or approval from FTSE Russell. FTSE
                            Russell shall not be responsible for the accuracy, lawfulness or content of any third party website or of subsequent links and does not make any representation whatsoever about the content of any third party website. FTSE Russell
                            does not accept any liability, of any kind, to any person arising as a result of any loss or damage or indirectly from the use of any content on such third party website or subsequent links.
                        </p>
                    </body>
                </div>
                <div class="modal-footer">
                    <button class="modal-button">No</button>
                    <button class="modal-button">Yes</button>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="modal-wrapper">
  <div class="modal-backdrop fade show"></div>
  <div class="modal ngx-modal fade show">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
          <i></i>
          <body>
            <div class="modal-title">You are now leaving www.ftserussell.com</div>
            <p>
              You are now leaving www.ftserussell.com to access a third party website. The link to the third party website has been provided for information purposes only and inclusion of this link does not imply any endorsement or approval from FTSE Russell. FTSE Russell shall not be responsible for the accuracy, lawfulness or content of any third party website or of subsequent links and does not make any representation whatsoever about the content of any third party website. FTSE Russell does not accept any liability, of any kind, to any person arising as a result of any loss or damage or indirectly from the use of any content on such third party website or subsequent links.
            </p>
          </body>
        </div>
        <div class="modal-footer">
          <button class="modal-button">No</button>
          <button class="modal-button">Yes</button>
        </div>
      </div>
    </div>
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .modal-backdrop {
  background-color: rgba(0,0,0,0.5);
  height: 100%;
  left: 0;
  opacity: .5 !important;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}

.modal {
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 10000;

  &.archive {
    .modal-dialog {
      max-height: calc(100vh - 10vw);
      overflow-y: auto;

      @include mq($breakpoint-lg) {
        max-height: 95vh;
        max-width: 500px;
        width: 50%;
      }
    }

    .modal-header {
      background-color: $gray-lighter;
      padding: $space-xs $space-md;

      .modal-title {
        margin-bottom: 0;
      }
    }

    .modal-body {
      padding-bottom: 0;

      .related__links__content,
      .related__links {
        margin-bottom: 0;
      }

      .related__links__item {
        @include mq-only($breakpoint-mob) {
          font-size: $space-sm;
        }
      }
    }

    .modal-footer {
      text-align: right;
    }

    .modal-button {
      margin: 0;
    }

    .modal-title {
      color: $primary-dark;
    }
  }
}

.modal-dialog {
  background-color: $white;
  margin: auto;
  padding: $space-xs;
  width: 90%;

  @include mq($breakpoint-lg) {
    width: 70%;
  }
}

.modal-title {
  color: $accent;
  font-size: 1.125rem;
  font-weight: $font-weight-medium;
  line-height: 1.2;
  margin: 0 0 $space-md 0;

  @include mq($breakpoint-lg) {
    font-size: $font-size-lg;
  }

  @include mq-only($breakpoint-xs) {
    font-size: $space-sm;
  }
}

.modal-body {
  padding: $space-md;

  @include mq($breakpoint-lg) {
    padding: $space-xl;
  }

  p {
    font-size: $font-size-base;

    @include mq($breakpoint-lg) {
      font-size: 1.125rem;
    }

    @include mq-only($breakpoint-xs) {
      font-size: $font-size-xs;
    }
  }
}

.modal-footer {
  background-color: $white;
  padding: 0 $space-md $space-lg;

  @include mq($breakpoint-lg) {
    padding: 0 $space-xl $space-lg;
  }
}

.modal-button {
  background-color: $white;
  border: $border-width-thin solid $gray-lighter;
  color: $primary;
  cursor: pointer;
  display: inline-block;
  margin: 0 10px 0 0;
  padding: $space-md $space-xxl $space-md $space-md;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;

  @include mq-only($breakpoint-xs) {
    font-size: $font-size-sm;
  }

  &:focus {
    background-color: $white;
  }

  &::after {
    background-image: url('../../assets/icons/ico-chevron-up.svg');
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    display: block;
    height: 14px;
    position: absolute;
    right: $space-md;
    top: 17px;
    transform: rotate(90deg);
    width: 14px;
  }

  .icon {
    height: 14px;
    position: absolute;
    right: $space-md;
    top: 17px;
    transform: rotate(90deg);
    width: 14px;
  }
}
  • URL: /components/raw/modal/_modal.scss
  • Filesystem Path: src/components/molecules/modal/_modal.scss
  • Size: 2.9 KB

There are no notes for this item.