fine-true/lib/modal/index.less

A small and beautiful Vue3 version of the UI Library

/*
jiangbei 2021/09/18
*/

.fine-modal {
  .fine-modal-content {
    max-width: 100%;
    background: #fff;
    border-radius: 3px;
    position: fixed;
    top: var(--fine-modal-position-top);
    left: 0;
    right: 0;
    z-index: var(--fine-modal-content-zindex);
    margin: auto;
  }
  .fine-modal-head {
    padding: var(--fine-modal-head-padding);
    display: flex;
    align-items: center;
    .fine-modal-title {
      flex: 1;
      font-size: var(--fine-modal-title-size);
      color: var(--fine-modal-title-color);
    }
    .fine-icon {
      font-size: var(--fine-modal-head-icon-size);
      margin-right: var(--fine-modal-head-icon-spacing);
      color: var(--fine-modal-head-icon-color);
      transition: color 0.25s;
      &:hover {
        color: var(--fine-modal-head-icon-hover-color);
      }
    }
    .fine-icon:last-child {
      margin-right: 0;
    }
  }
  .fine-modal-body {
    padding: var(--fine-modal-body-padding);
    font-size: var(--fine-modal-body-size);
    color: var(--fine-modal-body-color);
  }
  .fine-modal-footer {
    padding: var(--fine-modal-footer-padding);
    text-align: right;
    > * ~ * {
      margin-left: 10px;
    }
  }
}

.fine-fade-translateY-enter-active {
  transition: all 0.25s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

.fine-fade-translateY-leave-active {
  transition: all 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

.fine-fade-translateY-enter-from,
.fine-fade-translateY-leave-to {
  transform: translateY(-15px) scale3d(0.2, 0.2, 0.2);
  opacity: 0;
}