You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

80 lines
1.5 KiB

.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);
}
}