notice-bar.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. .vxe-notice-bar {
  2. display: flex;
  3. flex-direction: row;
  4. font-size: var(--vxe-ui-font-size-default);
  5. color: var(--vxe-ui-font-color);
  6. font-family: var(--vxe-ui-font-family);
  7. }
  8. .vxe-notice-bar--prefix,
  9. .vxe-notice-bar--suffix {
  10. flex-shrink: 0;
  11. }
  12. .vxe-notice-bar--content {
  13. flex-grow: 1;
  14. overflow: hidden;
  15. padding: 0 0.2em;
  16. }
  17. .vxe-notice-bar--inner {
  18. overflow: hidden;
  19. }
  20. .vxe-notice-bar--wrapper {
  21. display: inline-block;
  22. white-space: nowrap;
  23. animation-duration: 15s;
  24. animation-timing-function: linear;
  25. animation-delay: 0s;
  26. animation-direction: normal;
  27. animation-fill-mode: none;
  28. animation-play-state: running;
  29. }
  30. .vxe-notice-bar {
  31. &.is--loop {
  32. .vxe-notice-bar--wrapper {
  33. animation-iteration-count: infinite;
  34. }
  35. }
  36. &.is--horizontal {
  37. &.dir--left {
  38. .vxe-notice-bar--wrapper {
  39. animation-name: scrollLeftText;
  40. }
  41. }
  42. &.dir--right {
  43. .vxe-notice-bar--wrapper {
  44. animation-name: scrollRightText;
  45. }
  46. }
  47. &.dir--left,
  48. &.dir--right {
  49. .vxe-notice-bar--wrapper {
  50. padding-left: 100%;
  51. &.is--end {
  52. padding-left: 0;
  53. }
  54. }
  55. }
  56. .vxe-notice-bar--wrapper {
  57. &:hover {
  58. animation-play-state: paused;
  59. }
  60. }
  61. }
  62. }
  63. @keyframes scrollRightText {
  64. 0% {
  65. transform: translateX(-100%);
  66. }
  67. 100% {
  68. transform: translateX(0);
  69. }
  70. }
  71. @keyframes scrollLeftText {
  72. 0% {
  73. transform: translateX(0);
  74. }
  75. 100% {
  76. transform: translateX(-100%);
  77. }
  78. }
  79. .vxe-notice-bar {
  80. &.size--medium {
  81. font-size: var(--vxe-ui-font-size-medium);
  82. }
  83. &.size--small {
  84. font-size: var(--vxe-ui-font-size-small);
  85. }
  86. &.size--mini {
  87. font-size: var(--vxe-ui-font-size-mini);
  88. }
  89. }