Sid Gifari Advanced File Manager

✏️ Editing: pricing.scss

.pxl-pricing1 {
	background-color: #fff;
	padding: 25px 30px 30px 30px;
	border-radius: 40px 0 40px 40px;
	box-shadow: 0 2px 7px rgba(#363636, 0.13);
	position: relative;
	z-index: 1;
	&:before {
		content: '';
		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 40px 0 40px 40px;
		border: 3px solid $primary_color;
		@include transition(all 300ms linear 0ms);
		opacity: 0;
	}
	.pxl-pricing--title {
		font-size: 36px;
 		margin-bottom: 60px;
 		text-align: center;
	}
	.pxl-pricing--feature {
		list-style: none;
		font-size: 16px;
		color: #01062e;
		@include transition(all 300ms linear 0ms);
		i {
			@extend .text-gradient;
			@include transition(all 300ms linear 0ms);
		}
		li {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			.flaticon-close {
				font-size: 13px;
			}
			+ li {
				margin-top: 10px;
			}
		}
	}
	.pxl-price--inner {
		font-size: 65px;
		color: #01062e;
		font-weight: 700;
		@extend .ft-theme-default;
		@include transition(all 300ms linear 0ms);
	}
	.pxl-pricing--price {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #b6c9d9;
		@include transition(all 300ms linear 0ms);
		line-height: 1.2;
		padding-bottom: 12px;
		margin-bottom: 38px;
	}
	.pxl-pricing--time {
		font-weight: 500;
		font-size: 16px;
		color: #4d4d4d;
		margin-top: 18px;
		@include transition(all 300ms linear 0ms);
	}
	.pxl-pricing--icon {
		color: #fff;
		width: 110px;
		height: 110px;
		border: 8px solid #fff;
		border-radius: 110px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -55px;
		right: 0;
		left: 0;
		margin: auto;
		font-size: 44px;
		@include background-horizontal($gradient_color_from, $gradient_color_to);
		@include transition(all 300ms linear 0ms);
		i {
			@include transition(all 300ms linear 0ms);
		}
	}
	.pxl-pricing--button {
		text-align: center;
		a {
			line-height: 52px;
			padding: 0 54px;
			background-color: $primary_color;
			border-radius: 3px;
		}
	}
	.pxl-pricing--holder {
		background-color: #d6ecff;
		padding: 77px 34px 30px 34px;
		position: relative;
		border-radius: 20px 0 20px 20px;
		position: relative;
		z-index: 1;
		@media #{$max-sm} {
			padding-left: 20px;
			padding-right: 20px;
		}
		&:before {
			border-radius: 20px 0 20px 20px;
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			@include transition(all 300ms linear 0ms);
			@include background-horizontal($gradient_color_from, $gradient_color_to);
			opacity: 0;
			z-index: -1;
		}
	}
	&:hover {
		&:before {
			opacity: 1;
		}
		.pxl-pricing--holder:before {
			opacity: 1;
		}
		.pxl-pricing--feature {
			color: #fff;
			i {
				@include background-horizontal(#fff, #fff);
			}
		}
		.pxl-pricing--price {
			border-color: rgba(#fff, 0.43);
		}
		.pxl-price--inner, .pxl-pricing--time {
			color: #fff;
		}
		.pxl-pricing--button a {
			background-color: #fff;
			span {
				@extend .text-gradient;
			}
		}
		.pxl-pricing--icon {
			@include background-horizontal(#aed4f9, #aed4f9);
			i {
				@extend .text-gradient;
			}
		}
	}
	&.style-2 {
		background-color: #080808;
		.pxl-pricing--icon {
			border-color: #080808;
		}
		.pxl-pricing--holder {
			background-color: #191919;
		}
		.pxl-pricing--price {
			border-color: rgba(#fff, 0.1);
		}
		.pxl-pricing--title {
			color: #fff;
		}
		.pxl-pricing--time {
			color: #b6b6b6;
		}
		.pxl-price--inner {
			color: #fff;
		}
		.pxl-pricing--feature {
			color: #b6b6b6;
		}
		&:hover {
			.pxl-pricing--time {
				color: #fff;
			}
			.pxl-pricing--feature {
				color: #fff;
				i {
					@include background-horizontal(#fff, #fff);
				}
			}
			.pxl-pricing--icon {
				@include background-horizontal(#191919, #191919);
			}
		}
	}
}

.pxl-pricing2 {
	background-color: #{'rgba(var(--primary-color-rgb),0.1)'};
	padding: 40px 30px 30px 30px;
	border-radius: 15px;
	overflow: hidden;
	.pxl-pricing--title {
		margin-bottom: 10px;
		font-size: 32px;
		font-weight: 500;
	}
	.pxl-pricing--subtitle {
		font-size: 18px;
		color: #484E6C;
		margin-bottom: 17px;
	}
	.pxl-pricing--price {
		font-size: 48px;
		color: #01062E;
		font-weight: 700;
		@extend .ft-theme-default;
		display: flex;
		flex-wrap: wrap;
		align-items: first baseline;
		border-bottom: 1px solid #{'rgba(var(--primary-color-rgb),0.3)'};
		padding-bottom: 17px;
		margin-bottom: 30px;
	}
	.pxl-pricing--time {
		font-size: 18px;
		font-weight: 400;
		color: #484E6C;
	}
	.pxl-pricing--feature {
		list-style: none;
		margin: 0 0 31px;
		font-size: 18px;
		color: #484E6C;
		svg {
			height: 24px;
			margin-right: 12px;
			path {
				&:nth-child(1) {
					fill: $primary_color;
				}
				&:nth-child(2) {
					fill: #fff;
				}
			}
		}
		li {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			+ li {
				margin-top: 12px;
			}
		}
	}
	.pxl-pricing--button {
		a {
			display: block;
			border-radius: 8px;
			font-size: 18px;
			font-weight: 600;
			text-transform: uppercase;
			line-height: 60px;
			background-color: #{'rgba(var(--primary-color-rgb),0.2)'};
			color: $primary_color;
			&:hover {
				background-color: $primary_color;
				color: #fff;
			}
		}
	}
	&.pxl-pricing--popular {
		background-color: $primary_color;
		position: relative;
		.pxl-pricing--feature svg path {
			&:nth-child(1) {
				fill: #fff;
			}
			&:nth-child(2) {
				fill: $primary_color;
			}
		}
		.pxl-popular--text {
			line-height: 33px;
			height: 34px;
			font-size: 15px;
			font-weight: 500;
			color: $primary_color;
			background-color: #B2FAFF;
			position: absolute;
			width: 180px;
			padding: 0 10px;
			-webkit-transform: rotate(40deg);
			-khtml-transform: rotate(40deg);
			-moz-transform: rotate(40deg);
			-ms-transform: rotate(40deg);
			-o-transform: rotate(40deg);
			transform: rotate(40deg);
			top: 25px;
			right: -48px;
			text-align: center;
			text-transform: uppercase;
			z-index: 101;
		}
		.pxl-pricing--price {
			border-color: rgba(#fff, 0.3);
		}
		.pxl-pricing--title, .pxl-pricing--subtitle, .pxl-pricing--feature, .pxl-pricing--price, .pxl-pricing--time {
			color: #fff;
		}
		.pxl-pricing--button a {
			background-color: #fff;
			color: $primary_color;
		}
	}
}

body.rtl {
	
}

📁 File Manager Pro