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:

Version: 2.5.6 

/ scss / addons / _jet-slider.scss

.jet-slider {
	position: relative;

	.hidden-html {
		display: none;
	}

	.slider-pro {
		visibility: hidden;

		&.slider-loaded {
			visibility: visible;
		}
	}

	.jet-slider-loader {
		display: none;
	}

	&__image-exact {
		.sp-image {
			object-fit: cover;
		}
	}

	&__image-contain {
		.sp-image {
			object-fit: contain;
		}
	}

	&:before {

	}

	&__item {
		overflow: hidden;
	}

	&__content {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	&__content-item {
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		min-width: 100%;
	}

	&__content-inner {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
	}

	&__icon {
		display: flex;
		justify-content: center;
		width: 100%;

		.jet-slider-icon-inner {
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			align-items: center;

			svg {
				width: 1em;
				height: 1em;
			}
		}
	}

	&__title {
		width: 100%;
	}

	&__subtitle {
		width: 100%;
	}

	&__desc {
		width: 100%;
	}

	&__button-wrapper {
		width: 100%;
	}

	&__button {
		margin: 0 5px;
	}

	.sp-slides-container {
		background-size: cover;
	}

	.sp-image-container {
		position: relative;

		&:after {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: block;
			background-color: rgba(0,0,0, 0.3);
			content: '';
		}
	}

	.sp-full-screen-button {
		color: white;

		svg {
			width: 1em;
			height: 1em;
		}
	}

	.sp-arrow {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		&.sp-next-arrow {
			transform: scale(-1, 1);
		}

		svg {
			width: 1em;
			height: 1em;
		}

		i {
			width: 100%;
			height: 100%;
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			align-items: center;
			line-height: 0em;
		}

		&:before,
		&:after {
			display: none;
		}
	}

	.sp-full-screen-button {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		transform: rotate(0deg);
		transform-origin: 50%;
		top: 10px;
		right: 10px;

		&:before {
			display: none;
		}
	}

	.sp-buttons {
		width: 100%;
		padding: 0;
		margin: 0 auto;

		.sp-button {
			width: 15px;
			height: 15px;
			border-radius: 50%;
		}
	}

	.sp-thumbnails {
		.sp-thumbnail-container {
			position: relative;
			cursor: pointer;

			&:before {
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				content: '';
			}

			&.sp-selected-thumbnail {

			}

			.sp-thumbnail {

			}
		}
	}

	.sp-grab {
		cursor: auto;
	}
}