meri-design-dev/custom/theme/Message.styl

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.p-message-box
  position: fixed
  top: 36px
  left: 0
  text-align: center
  display: flex
  flex-flow: column wrap
  justify-content: center
  align-items: center
  width: 100%
  z-index: 9000
  pointer-events: none

.fadeDownUpUi-enter-active
  animation: fadeInDownUi .3s ease-out

.fadeDownUpUi-leave-active
  animation: fadeOutUpUi .3s ease-in

@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
.p-message
  display: flex
  justify-content: space-around
  align-items: flex-start
  padding: 8px 8px 8px 12px
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  min-width: 240px
  max-width: 600px
  min-height: 40px

.p-message + .p-message
  margin-top: 24px

.p-message .p-message-hint
  line-height: 24px
  font-size: 0

.p-message .p-message-hint svg
  vertical-align: middle
  width: 16px
  height: 16px

.p-message .p-message-text
  padding-left: 8px
  padding-right: 8px
  width: 100%
  text-align: left
  font-size: 14px
  color: $white
  word-wrap: break-word
  line-height: 24px

.p-message .p-message-close
  height: 24px
  line-height: 24px
  pointer-events: auto
  font-size: 0

.p-message .p-message-close svg
  vertical-align: middle
  width: 12px
  opacity: .5
  transition: opacity .3s
  cursor: pointer

.p-message .p-message-close svg:hover
  opacity: 1

.p-message-info
  background-color: $blue-500

.p-message-success
  background-color: $turquoise-500

.p-message-warning
  background-color: $orange-400

.p-message-error
  background-color: $red-400