noticebar.scss 662 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. .cl-noticebar {
  2. display: flex;
  3. align-items: center;
  4. padding: 10rpx;
  5. &__icon,
  6. &__close {
  7. display: flex;
  8. align-items: center;
  9. justify-content: center;
  10. padding: 0 10rpx;
  11. }
  12. &__close {
  13. color: #999;
  14. }
  15. &__box {
  16. flex: 1;
  17. margin: 0 10rpx;
  18. overflow: hidden;
  19. }
  20. &__scroller {
  21. height: 40rpx;
  22. line-height: 40rpx;
  23. position: relative;
  24. &.is-vertical {
  25. transition: top 0.3s;
  26. .cl-noticebar__text {
  27. display: block;
  28. height: 40rpx;
  29. overflow: hidden;
  30. text-overflow: ellipsis;
  31. white-space: nowrap;
  32. }
  33. }
  34. }
  35. &__text {
  36. font-size: 26rpx;
  37. }
  38. &--scrollable {
  39. .cl-noticebar__box {
  40. white-space: nowrap;
  41. }
  42. }
  43. }