Directory:~$ /home/lmsyaran/public_html/j3/templates/g5_hydrogen/custom/scss/

Upload File

[Home] [System Details] [Kill Me]

// Set the variable defaults in case they are missing in the template
$fontsizes-body-font-size: 1rem !default;
$base-element-color: #f8f8f8 !default;

.g-pricing-tables {
	text-align: center;
	&:not(.gutter-disabled) {
		margin-left: -($content-padding);
		margin-right: -($content-padding);
	}
	.g-pricing-table {
		@include breakpoint(mobile-only) {
			margin-bottom: 30px;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	.g-content {
		margin: 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	.g-pricing-table-inner {
		margin: 0;
		border: 1px solid $base-border-color;
		list-style: none;
		border-radius: 3px;
		background: #ffffff;
		position: relative;
		overflow: hidden;
	}
	h4, h3 {
		margin: 0;
	}
	.g-table-title {
		padding: 25px 20px;
	}
	.g-table-price {
		padding: 30px 20px;
		font-size: $fontsizes-body-font-size*2.3;
		background: $accent-color-1;
		color: #ffffff;
	}
	.g-table-item {
		padding: 15px 20px;
		border-bottom: 1px solid $base-border-color;
	}
	.g-table-button {
		padding: 25px 20px;
		i {
			margin-right: 10px;
		}
	}
	&.style1 {
		.featured-table {
			h4 {
				font-size: $fontsizes-body-font-size*1.5;
				line-height: 1.5rem;
			}
			.g-pricing-table-inner {
				box-shadow: 0 0 4px rgba(0, 0, 0, 0.09);
			}
			.g-table-featured-text {
				background: red;
				color: #ffffff;
				font-size: 12px;
				font-weight: bold;
				position: absolute;
				right: -30px;
				top: 30px;
				text-align: center;
				width: 135px;
				@include transform(rotate(45deg));
			}
		}
	}
	&.gutter-disabled {
		> .g-grid { 
			border: 1px solid $base-border-color;
			border-radius: 3px;
			@include breakpoint(mobile-only) {
				border: none;
			}
		}
		.g-pricing-table-inner {
			border: none;
			border-right: 1px solid $base-border-color;
			border-radius: 0;
			@include breakpoint(mobile-only) {
				border: 1px solid $base-border-color;
			}
		}
		&.style1 {
			.featured-table {
				.g-pricing-table-inner {
					box-shadow: none;
				}
				h4 {
					line-height: 1.55rem;
				}
			}
		}
		.g-pricing-table {
			&:last-child {
				.g-pricing-table-inner {
					border-right: none;
					@include breakpoint(mobile-only) {
						border-right: 1px solid $base-border-color;
					}
				}
			}
		}
	}
	&.style2 {
		.g-table-head {
			padding: 30px 20px;
			border-bottom: 1px solid $base-border-color;
		}
		.g-table-title {
			padding: 0 20px;
			margin-bottom: 10px;
			h4 {
				font-size: $fontsizes-body-font-size*1.7;
				font-weight: normal;
				text-transform: uppercase;
			}
		}
		.g-table-item {
			&:nth-child(even) {
				background: $base-element-color;
			}
		}
		.g-table-price {
			background: none;
			color: $accent-color-1;
			padding: 0 20px;
			font-size: $fontsizes-body-font-size*3;
			font-weight: bold;
		}
		.featured-table {
			.g-table-featured-text {
				margin-bottom: 15px;
				> span {
					padding: 7px 30px;
					background: #ffffff;
					color: $base-text-color;
					text-transform: uppercase;
					letter-spacing: 4px;
					border-radius: 50px;
					font-size: 13px;
					@include breakpoint(desktop-range) {
						letter-spacing: 2px;
						padding: 7px 20px;
					}
					@include breakpoint(tablet-range) {
						letter-spacing: 0;
						padding: 7px 10px;
						font-size: 11px;
					}
					@include breakpoint(mobile-only) {
						letter-spacing: 3px;
						padding: 7px 25px;
					}
				}
			}
			.g-table-head {
				background: $accent-color-1;
				color: #ffffff;
			}
			.g-table-title {
				h4 {
					color: #ffffff !important;
				}
			}
			.g-table-price {
				color: #ffffff;
			}
			.g-table-button {
				.button {
					border: 1px solid transparent;
				}
			}
		}
		&.g-has-featured-text {
			.g-particle-intro {
				margin-bottom: 77px;
				@include breakpoint(mobile-only) {
					margin-bottom: 2.5rem;
				}
			}
			> .g-grid {
				margin-top: 39px;
				@include breakpoint(mobile-only) {
					margin-top: 0;
				}
			}
			.featured-table {
				margin-top: -39px;
				@include breakpoint(mobile-only) {
					margin-top: 0;
				}
			}
		}
	}
}