22

✏️ Editing: _jet-blog-text-ticker.scss

.jet-text-ticker {
	display: flex;
	align-items: center;
	&__date {
		white-space: nowrap;
	}
	&__posts {
		display: none;
		margin-right: 80px;
		&.slick-initialized {
			display: block;
		}
		&-wrap {
			flex: 1 1 auto;
			overflow: hidden;
		}

.slick-track {
			display: flex;
			align-items: center;

&:before,
			&:after {
				content: none;
			}
		}
		.slick-slide {
			height: auto;
		}
	}
	&__item {
		outline: none;

&-content {
			display: flex;
			align-items: center;
		}

&-typed-wrap {
			overflow: hidden;
			line-height: 1;
		}

.jet-use-typing & {
			&-typed {
				//position: relative;
				display: inline-block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				max-width: 100%;
				line-height: 1.4;

&-inner {
					//display: inline-flex;
					//overflow: hidden;
					//.slick-current & {
					//	animation: typing 1s steps(40, end);
					//}
				}

&:after {
					content: "";
					display: inline-block;
					vertical-align: top;
					opacity: 0;

//position: absolute;
					//.slick-current & {
					//	animation: blink-caret .5s step-end 5;
					//}
				}

&.jet-text-typing:after {
					opacity: 1;
				}
			}
		}

.jet-multiline-typing & {
			&-typed {
				white-space: normal;
			}
		}
	}
	&__title {
		padding-right: 10px;
		position: relative;
		flex: 1 0 auto;
	}
	&__date {
		padding-right: 10px;
		&-icon {
			margin-right: 5px;
		}
	}
	&__post {
		&-author {
			display: flex;
			align-items: center;
			gap: 10px;
			white-space: nowrap;
			padding-right: 10px;
			&-icon {
				margin-right: 5px;
			}
		}
		&-date {
			padding-right: 10px;
			&-icon {
				margin-right: 5px;
			}
		}

.slick-slide & {
			&-thumb {
				margin: 0;
				margin-right: 10px;
			}
		}
	}

.jet-blog-arrow {
		position: absolute;
		top: 15%;
		width: 40px;
		height: 40px;
		text-align: center;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		&:before {
			display: block;
		}

&.jet-arrow-prev {
			right: -40px;
		}
		&.jet-arrow-next {
			right: -80px;
			&:before {
				transform: scale(-1, 1);
			}
		}
	}
}

/* The typing effect */
@keyframes typing {
	from { width: 0 }
	to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
	from { opacity: 1; }
	to { opacity: 0; }
}

MR SKB