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

A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.

/* @group Transition */

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

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

.modal-transition-enter-active,
.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-enter-done,
.modal-transition-appear-done {
  &.modal-container {
    opacity: 1;
  }

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

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

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

.modal-transition-exit-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;
  }
}

.modal-transition-exit-done {
  &.modal-container {
    opacity: 0;
  }

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

/* @end Transition */

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

.modal-overlay {
  background-color: @modal-overlay-background;
  z-index: 0;
}

.modal-container {
  overflow: auto;
}

.modal-position {
  padding: @modal-margin-vertical @modal-margin-horizontal;
  margin: 0 auto;

  // For internal use only
  @modal-margin-vertical-double: @modal-margin-vertical * 2;

  &.scrollable {
    .modal {
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - @modal-margin-vertical-double);
    }

    .modal-body {
      overflow: auto;
    }
  }

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

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

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

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

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

  &.fill {
    width: 100%;
  }
}

.modal {
  .content-box();
  margin: 0;
  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;
}