rsuite/Modal/styles/index.less

A suite of react components

@import '../../styles/common';
@import 'mixin';

//
// Modals
// Figma: https://www.figma.com/file/uEq9QBplcKUYZrcWWA3RK2/NXT-UI?node-id=0%3A1348&t=H5h3Dd3AnJVgbAbz-4
// --------------------------------------------------

// Modal background
.rs-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: @zindex-modal - 1;
  background-color: var(--rs-bg-backdrop);

  // Fade for backdrop
  &.rs-anim-fade {
    opacity: 0;
    transition: opacity 0.3s ease-in;
  }

  &.rs-anim-in {
    opacity: 1;
  }
}

// Kill the scroll on the body
.rs-modal-open {
  overflow: hidden;
}

.rs-modal-wrapper {
  position: fixed;
  overflow: auto;
  z-index: @zindex-modal;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

// Container that the modal scrolls within
.rs-modal {
  display: none;
  overflow: visible;
  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;
  margin: 30px auto 0 auto;
  position: relative;
  width: auto;
  z-index: @zindex-modal;

  // Scale up the modal
  &-lg {
    .content-width(@modal-lg);
  }

  &-md {
    .content-width(@modal-md);
  }

  &-sm {
    .content-width(@modal-sm);
  }

  &-xs {
    .content-width(@modal-xs);
  }

  &-full {
    margin: 0;
    height: 100%;

    .rs-modal-content {
      position: absolute;
      height: 100%;
      width: 100%;
      border-radius: 0;
      display: flex;
      flex-direction: column;

      .rs-modal-header {
        flex: 0 0 auto;
      }

      .rs-modal-body {
        flex: 1 1 auto;
        overflow: auto;
      }

      .rs-modal-footer {
        flex: 0 0 auto;
      }
    }
  }
}

.rs-modal-shake .rs-modal-dialog {
  animation: 0.3s linear shakeHead;
}

// Actual modal
.rs-modal-content {
  position: relative;
  background-color: var(--rs-bg-overlay);
  border: var(--rs-modal-border, none);
  border-radius: @modal-border-radius;
  // Remove focus outline from opened modal
  outline: 0;
  box-shadow: var(--rs-modal-shadow);
  padding: @modal-content-padding;
}

// Modal header
// Top section of the modal w/ title and dismiss
.rs-modal-header {
  .clearfix();

  padding-right: @line-height-computed;

  .rs-modal-header-close {
    position: absolute;
    right: @modal-content-padding;
    top: @modal-content-padding;
    font-size: @modal-close-btn-size;
    color: @modal-close-btn-color;
    padding: 0;

    &:hover {
      color: @modal-close-btn-hover-color;
    }
  }
}

.rs-modal-title {
  font-weight: normal;
  font-size: @modal-title-font-size;
  line-height: unit((@line-height-computed / @modal-title-font-size));
  width: 100%;
  display: block;
  color: var(--rs-text-heading);
  margin: 0;
  .ellipsis();
}

// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.rs-modal-body {
  position: relative;
  margin-top: @modal-body-margin;
  // Make sure input error message don't overflow.
  padding-bottom: @modal-body-margin;
}

// Footer (for actions)
.rs-modal-footer {
  text-align: right; // right align buttons
  border-top: none;
  .clearfix(); // clear it in case folks use .pull-* classes on buttons

  // Properly space out buttons
  .rs-btn + .rs-btn {
    margin-left: 10px;
    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
  }
  // but override that for button groups
  .rs-btn-group .rs-btn + .rs-btn {
    margin-left: -1px;
  }
  // and override it for block buttons as well
  .rs-btn-block + .rs-btn-block {
    margin-left: 0;
  }
}

// Measure scrollbar width for padding body during modal show/hide
.rs-modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}