fine-true/lib/message/index.less

A small and beautiful Vue3 version of the UI Library

/*
jiangbei 2021/10/26
*/

.fine-message {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: var(--fine-message-zindex);
  text-align: center;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.2;
  padding: 8px;
  color: var(--fine-message-color);
  transition: top 0.3s;
  pointer-events: none;
}
.fine-message-wrapper {
  display: inline-block;
  padding: 10px 16px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
    0 9px 28px 8px #0000000d;
  pointer-events: auto;
}
.fine-message-content {
  .fine-icon {
    margin-right: 8px;
  }
  .fine-icon-message {
    color: var(--fine-message-default);
  }
  .fine-icon-info {
    color: var(--fine-message-info);
  }
  .fine-icon-success {
    color: var(--fine-message-success);
  }
  .fine-icon-warning {
    color: var(--fine-message-warning);
  }
  .fine-icon-error {
    color: var(--fine-message-error);
  }
}

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

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

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