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

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.slideUpUi-enter-active
  animation: slideInUpUi .3s ease-out

.slideUpUi-leave-active
  animation: slideOutUpUi .15s ease-in

@keyframes slideInUpUi
  from
    transform: translate3d(0,100%,0)
    opacity: 0
  to
    transform: translate3d(0,0,0)
    opacity: 1
@keyframes slideInUpUi
  from
    transform: translate3d(0,100%,0)
    opacity: 0
  to
    transform: translate3d(0,0,0)
    opacity: 1
@keyframes slideInUpUi
  from
    transform: translate3d(0,100%,0)
    opacity: 0
  to
    transform: translate3d(0,0,0)
    opacity: 1
@keyframes slideInUpUi
  from
    transform: translate3d(0,100%,0)
    opacity: 0
  to
    transform: translate3d(0,0,0)
    opacity: 1
@keyframes slideOutUpUi
  from
    transform: translate3d(0,0,0)
    opacity: 1
  to
    transform: translate3d(0,-100%,0)
    opacity: 0
@keyframes slideOutUpUi
  from
    transform: translate3d(0,0,0)
    opacity: 1
  to
    transform: translate3d(0,-100%,0)
    opacity: 0
@keyframes slideOutUpUi
  from
    transform: translate3d(0,0,0)
    opacity: 1
  to
    transform: translate3d(0,-100%,0)
    opacity: 0
@keyframes slideOutUpUi
  from
    transform: translate3d(0,0,0)
    opacity: 1
  to
    transform: translate3d(0,-100%,0)
    opacity: 0
.p-carousel
  display: flex
  align-items: center
  justify-content: flex-end
  width: 100%
  height: 24px
  overflow: hidden
  font-size: 0

.p-carousel > span
  display: inline-block
  width: 100%

.p-carousel .p-carousel-msg
  display: flex
  align-items: center
  justify-content: flex-end
  width: 100%
  height: 24px

.p-carousel .p-carousel-icon
  margin-right: 8px
  padding-top: 4px
  background-color: $red-400
  border-radius: 11px
  width: 22px
  height: 22px
  text-align: center

.p-carousel .p-carousel-icon svg
  vertical-align: middle

.p-carousel .p-carousel-item
  max-width: calc(100% - 30px)
  height: 24px
  line-height: 24px
  font-size: 14px
  color: $grey-600
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  cursor: pointer