.vxe-notice-bar { display: flex; flex-direction: row; font-size: var(--vxe-ui-font-size-default); color: var(--vxe-ui-font-color); font-family: var(--vxe-ui-font-family); } .vxe-notice-bar--prefix, .vxe-notice-bar--suffix { flex-shrink: 0; } .vxe-notice-bar--content { flex-grow: 1; overflow: hidden; padding: 0 0.2em; } .vxe-notice-bar--inner { overflow: hidden; } .vxe-notice-bar--wrapper { display: inline-block; white-space: nowrap; animation-duration: 15s; animation-timing-function: linear; animation-delay: 0s; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; } .vxe-notice-bar { &.is--horizontal { &.dir--left { .vxe-notice-bar--wrapper { padding-left: 100%; animation-name: scrollLeftText; } } &.dir--right { .vxe-notice-bar--wrapper { padding-left: 100%; animation-name: scrollRightText; } } .vxe-notice-bar--wrapper { &:hover { animation-play-state: paused; } } } } @keyframes scrollRightText { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } @keyframes scrollLeftText { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .vxe-notice-bar { &.size--medium { font-size: var(--vxe-ui-font-size-medium); } &.size--small { font-size: var(--vxe-ui-font-size-small); } &.size--mini { font-size: var(--vxe-ui-font-size-mini); } }