@dabapps/roe/src/less/modals.less

A Collection of React Components for Project Development

/* @group Transition */

.modal-transition-enter,
.modal-transition-appear {
  &.modal-container {
    opacity: 0.01;
  }

  .modal {
    transform: translate3d(0, -50px, 0);
  }
}

.modal-transition-enter.modal-transition-enter-active,
.modal-transition-appear.modal-transition-appear-active {
  &.modal-container {
    opacity: 0.99;
    transition: opacity 0.3s ease-in;
  }

  .modal {
    transform: translate3d(0, 0, 0);
    transition: transform 0.3s ease-in-out;
  }
}

.modal-transition-leave {
  &.modal-container {
    opacity: 0.99;
  }

  .modal {
    transform: translate3d(0, 0, 0);
  }
}

.modal-transition-leave.modal-transition-leave-active {
  &.modal-container {
    opacity: 0.01;
    transition: opacity 0.2s ease-in;
  }

  .modal {
    transform: translate3d(0, -50px, 0);
    transition: transform 0.2s ease-in-out;
  }
}

/* @end Transition */

.modal-overlay,
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
  opacity: 1;
}

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 0;
}

.modal-container {
  overflow: auto;
}

.modal-position {
  padding: 0 @gutter-width / 2;
  margin: 0 auto;

  @modal-margins: @margin-large * 2;
  @modal-header-and-footer-margins: (@margin-large * 2) * 2;
  @modal-header-and-footer-content: 50px * 2; // Magic number to allow slightly larger content
  @modal-header-and-footer-space: @modal-margins + @modal-header-and-footer-margins + @modal-header-and-footer-content;

  &.scrollable {
    .modal-body {
      max-height: ~'calc(100vh - @{modal-header-and-footer-space})';
      overflow: auto;
    }
  }

  @media all and (min-width: @screen-sm) {
    width: @screen-sm;
  }

  @media all and (min-width: @screen-md) {
    width: @screen-md;
  }

  &.small {
    @media all and (min-width: @screen-md) {
      width: @screen-sm;
    }
  }

  &.large {
    @media all and (min-width: @screen-lg) {
      width: @screen-lg;
    }

    @media all and (min-width: @screen-xl) {
      width: @screen-xl;
    }
  }

  &.fill {
    width: 100%;
  }
}

.modal {
  .content-box();
  position: relative;
  z-index: 1;
  transform: translate3d(0, 0, 0);
  background-color: @modal-background;
}

.modal-close-icon {
  float: right;
  width: 24px;
  height: 24px;
  margin: @padding-large;
  margin-right: 0;
  fill: @primary;
  color: @primary;
  cursor: pointer;
  text-align: center;
  font-size: 24px;
}

.modal-header {
  .content-box-header();
  background-color: @modal-header-background;
  border-bottom: @modal-header-border;
}

.modal-body {
  .row();
  padding-left: @gutter-width / 2;
  padding-right: @gutter-width / 2;
  background-color: @modal-background;

  &:first-child {
    border-top-left-radius: @border-radius-base;
    border-top-right-radius: @border-radius-base;
  }

  &:last-child {
    border-bottom-left-radius: @border-radius-base;
    border-bottom-right-radius: @border-radius-base;
  }
}

.modal-footer {
  .content-box-header();
  background-color: @modal-footer-background;
  border-top: @modal-footer-border;
  border-bottom: @border-none;
  text-align: right;
  border-radius: 0;
  border-bottom-left-radius: @border-radius-base;
  border-bottom-right-radius: @border-radius-base;
}