@ustack/uskin/css/components/modal.less

A graceful framework which provides developers another chance to build an amazing site.

// Mixins

// Variables 
@modal_width: 540px;
@modal_bg_color: #fff;
@modal_border_radius: 2px;
@modal_box_shadow: 0 0 18px rgba(0,0,0,.2);
@modal_hd_height: 46px;
@modal_hd_h_padding: 48px;
@modal_hd_font_size: 18px;
@modal_hd_close_size: 14px;

@modal_hd_close_top: 16px;
@modal_hd_close_right: 20px;

@modal_hd_bg_color: @color_grey;
@modal_hd_close_color: @color_grey_700;
@modal_hd_close_hover_color: @color_grey_800;
@modal_hd_close_active_color: @color_grey_800;

@modal_bd_v_top_padding: 30px;
@modal_bd_v_bottom_padding: 46px;
@modal_bd_h_padding: 48px;

@modal_ft_padding: 8px 36px;
@modal_ft_height: 50px;
@modal_ft_border_top: 1px solid @color_grey;

@modal_tip_icon_info: @color_info;
@modal_tip_icon_success: @color_success;
@modal_tip_icon_warning: @color_warning;
@modal_tip_icon_danger: @color_delete;

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: @modal_width;
  transform: translate3d(-50%, -50%, 0) scale(1, 1);
  overflow: hidden;
  background-color: @modal_bg_color;
  border-radius: @modal_border_radius;
  box-shadow: @modal_box_shadow;
  z-index:999;

  .modal-hd {
    position: relative;
    padding-left: @modal_hd_h_padding;
    height: @modal_hd_height;
    background-color: @modal_hd_bg_color;
    h6 {
      height: @modal_hd_height;
      line-height: @modal_hd_height;
      font-size: @modal_hd_font_size;
      font-weight: normal;
    }
    .close {
      position: absolute;
      top: @modal_hd_close_top;
      right: @modal_hd_close_right;
      display: inline-block;
      width: @modal_hd_close_size;
      height: @modal_hd_close_size;
      color: @modal_hd_close_color;
      cursor: pointer;
      user-select: none;
      &:before {
        font-size: @modal_hd_close_size;
      }
      &:hover {
        color: @modal_hd_close_hover_color;
      }
      &:active {
        color: @modal_hd_close_active_color;
      }
    }
  }

  .modal-bd {
    padding: @modal_bd_v_top_padding @modal_bd_h_padding @modal_bd_v_bottom_padding;
    min-height: 40px;
  }

  .modal-ft {
    padding: @modal_ft_padding;
    height: @modal_ft_height;
    border-top: @modal_ft_border_top;
    text-align: right;
    font-size: 0;
    box-sizing: border-box;

    > .btn:not(:last-child) {
      margin-right: 12px;
    }
  }

  &.modal-enter {
    opacity: 0;
    animation-duration: 0.2s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.08, .82, .17, 1);
    animation-play-state: paused;

    &.modal-enter-active {
      animation-name: modalZoomIn;
      animation-play-state: running;
    }
  }

  &.modal-leave {
    animation-duration: 0.2s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.78, .14, .15, .86);
    animation-play-state: paused;

    &.modal-leave-active {
      animation-name: modalZoomOut;
      animation-play-state: running;
    }
  }
}

.modal {
  .modal-bd {
    padding: 36px;
    .modal-reminder-content {
      .modal-reminder-title {
        height: 36px;
        line-height: 36px;
        font-size: 24px;
        margin-bottom: 8px;

        i {
          margin-right: 8px;
          &.info {
            color: @modal_tip_icon_info;
          }
          &.success {
            color: @modal_tip_icon_success;
          }
          &.warning {
            color: @modal_tip_icon_warning;
          }
          &.danger {
            color: @modal_tip_icon_danger;
          }
        }
      }
      .modal-reminder-message {
        max-height: 100px;
        overflow-y: auto;
      }
    }
  }
}

.modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.55);
  height: 100%;
  z-index: 998;

  &.modal-mask-enter {
    opacity: 0;
    animation-duration: 0.2s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.08, .82, .17, 1);
    animation-play-state: paused;

    &.modal-mask-enter-active {
      animation-name: modalFadeIn;
      animation-play-state: running;
    }
  }

  &.modal-mask-leave {
    animation-duration: 0.2s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.78, .14, .15, .86);
    animation-play-state: paused;

    &.modal-mask-leave-active {
      animation-name: modalFadeOut;
      animation-play-state: running;
    }
  }
}