芝麻web文件管理V1.00

编辑当前文件:/home/digitalh/tricomgroupbd.com/assets/sass/component/_gallery.scss

/*-------------------------------------------------------
20. Gallery css 
---------------------------------------------------------*/

:root {
  --swiper-image-ratio: 33.3%; /* ratio 16:9 = 56.25% */

--swiper-width: 50%;
  --swiper-inactive-scale: .85; /* makes the other slide smaller */
  
  /* responsive settings */
  --swiper-mobile-width: 90%;
  --swiper-mobile-inactive-scale: .95;
}

.gallery-pic {
	position: relative;
	z-index: 1;
	&::before {
		@include pos-abs(linear-gradient(to top,var(--clr-def-2) 0%,transparent 100%),100%,100%,.7);
		top: 0;
		left: 0;
		z-index: 0;
	}
	.gallery-desc {
		position: absolute;
		bottom: 50px;
		left: 50%;
		translate: -50% 0;
		padding: 50px;
		z-index: 1;
		min-width: 50%;
		opacity: 0;
		&::before {
			@include pos-abs(var(--clr-def-2),100%,100%,.7);
			top: 0;
			left: 0;
		}
		.heading-3 {
			color: var(--clr-white);
		}
		p {
			color: var(--clr-white);
			margin-bottom: 3rem;
		}
	}
}

.gallery-btn {
	i {
		height: 50px;
		width: 50px;
		line-height: 50px;
		text-align: center;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		background-color: var(--clr-def);
		display: inline-block;
		color: var(--clr-white);
		margin-right: 1.5rem;
	}
	color: var(--clr-white);
}

.gallery-shape {
    position: absolute;
    z-index: -1;
    top: 0;
    right: -90px;
    height: 790px;
    opacity: .3;
}

.port-sldr{
	&.swiper {
		.swiper-pagination {
			.swiper-pagination-bullet{
				background: transparent;
				height: 20px;
				width: 20px;
				border: 1px solid #dfdbdb;
				position: relative;
				z-index: 1;
				opacity: 1;
				&.swiper-pagination-bullet-active {
					border-color: var(--clr-def);
					&::after {
						position: absolute;
						left: 50%;
						top: 50%;
						content: "";
						height: 5px;
						width: 5px;
						border-radius: 50%;
						transform: translate(-50%, -50%);
						background: var(--clr-def);
						transition: all 0.35s ease-in-out;
					}
				}
			}
		}
	}
	.swiper-horizontal>.swiper-pagination-bullets,
	.swiper-pagination-bullets.swiper-pagination-horizontal,
	.swiper-pagination-custom,
	.swiper-pagination-fraction {
		bottom: 33px;
	}
}

.port-sldr .swiper-slide {
    flex-shrink: 0;
    width: 50%;
    opacity: 1;
    transform: scale(.94);
    transition: all .3s ease-in-out;
    overflow: hidden;
}

.swiper-slide.swiper-slide-active {
	.gallery-pic {
		.gallery-desc {
			opacity: 1;
		}
	}
}

@media only screen and (min-width: 4000px) {
 .port-sldr .swiper {
	height: calc(var(--swiper-mobile-width) * var(--swiper-image-ratio) / 100%)!important;
  }

.port-sldr .swiper-slide {
	width: var(--swiper-mobile-width)!important;
	transform: scale(var(--swiper-mobile-inactive-scale))!important;
  }

}

芝麻web文件管理V1.00

Oops! Page not found.