vui-design/src/style/components/modal.less

A high quality UI Toolkit based on Vue.js

@vui-modal: ~"@{vui}-modal";

.@{vui-modal} {
  &-backdrop {
    position:fixed;
    z-index:2000;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100%;
    background-color:@backdrop-background-color;
  }

  &-wrapper {
    position:fixed;
    z-index:2000;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100%;
    overflow:auto;

    &-centered {
      text-align:center;

      &:before,
      &:after {
        content:"";
        display:inline-block;
        width:0;
        height:100%;
        overflow:hidden;
        vertical-align:middle;
      }
    }
  }

  & {
    position:relative;
    display:block;
    border-radius:@modal-border-radius;
    background-color:@modal-background-color;
    box-shadow:@modal-box-shadow;
    margin:0 auto;

    &-centered {
      display:inline-block;
      vertical-align:middle;
    }
  }

  &-header {
    border-bottom:@modal-header-border-bottom;
    padding:@modal-header-padding;
  }

  &-title {
    padding-right:@modal-btn-close-size + @padding-lg;
    color:@modal-title-font-color;
    font-size:@modal-title-font-size;
    text-align:left;
    line-height:@modal-title-line-height;

    .writeBreak;
  }

  &-body {
    padding:@modal-body-padding;
    color:@modal-body-font-color;
    font-size:@modal-body-font-size;
    text-align:left;
    line-height:@modal-body-line-height;

    .writeBreak;
  }
  &-with-notice &-body {
    padding:@modal-body-padding + 12px @modal-body-padding + 12px @modal-body-padding + 4px @modal-body-padding + 12px;
  }

  &-footer {
    border-top:@modal-footer-border-top;
    padding:@modal-footer-padding;
    text-align:right;
  }
  &-footer button + button {
    margin-left:@margin-md;
  }
  &-with-notice &-footer {
    border-top:none;
    padding:@modal-footer-padding + 12px;
    padding-top:0;
  }

  &-btn-close {
    position:absolute;
    top:0;
    right:0;
    z-index:2000;
    cursor:pointer;
    padding:@modal-header-padding;
    color:@modal-btn-close-color;
    font-size:@modal-btn-close-size;
    text-align:center;
    line-height:1;
    transition:color @transition-duration @transition-timing-function;

    .@{vui}-icon {
      display:block;
      transform:scale(0.85);
    }

    &:hover {
      color:@modal-btn-close-hover-color;
    }
  }
  &-with-header &-btn-close {
    line-height:floor(@modal-title-font-size * @modal-title-line-height);

    .@{vui}-icon {
      display:inline-block;
    }
  }

  &-notice {
    position:relative;
    padding-left:floor(@font-size-lg * @line-height) + 8px;
    color:@font-color;
    font-size:@font-size;
    line-height:@line-height;

    &-icon {
      position:absolute;
      top:0;
      left:0;
      font-size:floor(@font-size-lg * @line-height);
      line-height:1;

      .@{vui}-icon {
        display:block;
      }
    }
    &-info &-icon {
      color:@primary-color;
    }
    &-warning &-icon {
      color:@warning-color;
    }
    &-success &-icon {
      color:@success-color;
    }
    &-error &-icon {
      color:@error-color;
    }
    &-confirm &-icon {
      color:@warning-color;
    }

    &-title {
      color:@font-primary-color;
      font-size:@font-size-lg;
    }

    &-description {
      margin-top:8px;
    }
  }

  @media (max-width: @screen-sm-max) {
    & {
      width:auto !important;
      margin-left:16px;
      margin-right:16px;
    }
  }

  &-backdrop-fade-enter-active {
    animation:vuiModalBackdropFadeIn @animation-in-duration @animation-in-timing-function both;
  }
  &-backdrop-fade-leave-active {
    animation:vuiModalBackdropFadeOut @animation-out-duration @animation-out-timing-function both;
  }

  &-zoom-enter-active {
    animation:vuiModalZoomIn @animation-in-duration @animation-in-timing-function both;
  }
  &-zoom-leave-active { 
    animation:vuiModalZoomOut @animation-out-duration @animation-out-timing-function both;
  }
}

@keyframes vuiModalBackdropFadeIn {
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes vuiModalBackdropFadeOut {
  0% { opacity:1; }
  20% { opacity:1; }
  100% { opacity:0; }
}

@keyframes vuiModalZoomIn {
  0% { transform:scale(0.6); }
  100% { transform:scale(1); }
}
@keyframes vuiModalZoomOut {
  0% { transform:scale(1); }
  20% { transform:scale(1); }
  100% { transform:scale(0.6); }
}