Learn more  » Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Bower components Debian packages RPM packages NuGet packages

jsarnowski / jsarnowski/jet-elements   php

Repository URL to install this package:

/ scss / addons / _jet-scroll-navigation.scss

.jet-scroll-navigation {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
	overflow: visible !important;

	&--position-left {
		left: 0;

		.jet-scroll-navigation__item-hint {
			left: calc(100% + 10px);
		}
	}

	&--position-right {
		right: 0;

		.jet-scroll-navigation__item-hint {
			right: calc(100% + 10px);
		}
	}

	&--show-active-hint {

		.jet-scroll-navigation__item {
			&.active {
				.jet-scroll-navigation__item-hint {
					opacity: 1;
					pointer-events: auto;
				}
			}
		}
	}

	&--show-hint-on-hover {
		.jet-scroll-navigation__item {
			&:hover {
				.jet-scroll-navigation__item-hint {
					opacity: 1;
					pointer-events: auto;
				}
			}
		}
	}

	&__inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: visible !important;
	}

	&__item {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: visible !important;
	}

	&__dot {
		width: 20px;
		height: 20px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	&__item-hint {
		position: absolute;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		opacity: 0;
		pointer-events: none;
		transition: all .3s cubic-bezier(.5,.12,.46,.88);
	}

	&__icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	&__label {
		white-space: nowrap;
	}
}