vbax-template_go 0.1.0

data/lib/vbax/sass/template_go/components/_navbar.scss

@@ -0,0 +1,119 @@
+//
+// navbar
+//
+//
+
+.navbar {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.navbar-brand {
+	height: 35px;
+	margin-top: .5rem;
+	margin-bottom: .5rem;
+	margin-right: 3rem;
+	@include media-breakpoint-down(xs) { margin-right: 0rem; }
+
+	&.navbar-brand-sm { height: 36px; }
+	&.navbar-brand-lg { height: 56px; }
+
+	.navbar-logo {
+		width: auto;
+		max-height: 100%;
+		display: none;
+	}
+}
+
+.navbar-nav {
+	.nav-item {
+		+ .nav-item {
+			margin-left: 1rem;
+		}
+	}
+
+	.nav-link {
+		@include transition;
+		font-size: $font-size-sm;
+	}
+}
+
+
+.navbar-toggler {
+	padding: 0!important;
+	border: 0;
+}
+
+
+// Responsive
+//
+// Mobile View for Navbar
+@include media-breakpoint-down(md) {
+
+	.navbar-logo-dark {
+		display: block!important;
+	}
+
+	.navbar {
+		.navbar-toggler {
+			padding: .5rem;
+			color: $navbar-light-color;
+			border-color: $navbar-light-toggler-border-color;
+			border-radius: 50%;
+		}
+
+		.nav-item {
+			+ .nav-item {
+				margin: 0;
+			}
+
+			.nav-link {
+				padding: 5px 0;
+				color: $body-color;
+
+				&:focus,
+				&:hover {
+					color: $black;
+				}
+			}
+
+			&.show,
+			&.active {
+				.nav-link {
+					color: $black;
+				}
+			}
+		}
+	}
+
+
+	.navbar {
+		.banner {
+			display: none;
+		}
+	}
+
+	.navbar-nav {
+
+
+		.nav-item {
+			width: 100%;
+			padding: .5rem 0;
+
+			.btn {
+				display: block;
+				background-color: $primary;
+				color: $white;
+			}
+		}
+	}
+}
+
+
+.overlay-active {
+	.headroom {
+		max-height: 100vh;
+		overflow: hidden;
+		overflow-y: scroll;
+	}
+}

data/lib/vbax/sass/template_go/components/_partners.scss

@@ -0,0 +1,27 @@
+//
+//	Partners
+//
+.partners {
+
+	.owl-stage-outer {
+
+		.owl-stage {
+			display: -ms-flexbox!important;
+			display: flex !important;
+
+			.owl-item {
+				text-align: center;
+				-ms-flex-item-align: center !important;
+				align-self: center !important;
+				
+				img {
+					display: inline-block;
+					width: initial;
+					max-width: 60%;
+				}
+
+			}
+		}
+
+	}
+}

data/lib/vbax/sass/template_go/components/_presentations.scss

@@ -0,0 +1,173 @@
+// 
+// Images
+//
+//
+
+.presentation-circle {
+	@extend %equal;
+	overflow: visible;
+
+	> figure {
+		@extend %boxed;
+		background-size: cover;
+		background-position: center;
+		border-radius: 50%;
+		z-index: 10;
+
+		&::before {
+			@include translate(-50%, -50%);
+			@include prefix(animation, pulse 3s infinite, webkit moz o);
+			content: "";
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			width: 100%;
+			height: 100%;
+			border-radius: 50%;
+			border: $border-width solid rgba($black, .1);
+			z-index: -1;
+			animation-timing-function: cubic-bezier(0.1, 0.2, 0.3,1);
+		}
+	}
+
+	&.with-delay {
+		> figure {
+			&::before {
+				animation-delay: 1s;
+			}
+		}
+	}
+}
+
+@-webkit-keyframes pulse {
+  0% { 
+  	width: 100%; 
+  	height: 100%;
+  	opacity: 0;
+  }
+  50% {
+  	opacity: 1;
+  }
+  100% { 
+  	width: 125%;
+  	height: 125%;
+  	opacity: 0;
+  }
+}
+@-moz-keyframes pulse {
+	0% { 
+		width: 100%; 
+		height: 100%;
+		opacity: 0;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% { 
+		width: 125%;
+		height: 125%;
+		opacity: 0;
+	}
+}
+@-o-keyframes pulse {
+	0% { 
+		width: 100%; 
+		height: 100%;
+		opacity: 0;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% { 
+		width: 125%;
+		height: 125%;
+		opacity: 0;
+	}
+}
+@keyframes pulse {
+	0% { 
+		width: 100%; 
+		height: 100%;
+		opacity: 0;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% { 
+		width: 125%;
+		height: 125%;
+		opacity: 0;
+	}
+}
+
+
+
+//
+// Presentation
+//
+.presentation-container {
+	> * {
+		position: relative;
+		z-index: 5;
+	}
+}
+
+.presentation {
+	position: relative;
+	z-index: 0;
+
+	img {
+		position: absolute;
+		// max-width: 100%;
+		// max-height: calc(100% + 12.5rem);
+		max-width: initial;
+		max-height: initial;
+	}
+
+	.top-0 { top: 0; }
+	.top-25 { top: 25%; }
+	.top-50 { top: 50%; }
+	.top-75 { top: 75%; }
+
+	.bottom-0 { bottom: 0; }
+	.bottom-25 { bottom: 25%; }
+	.bottom-50 { bottom: 50%; }
+	.bottom-75 { bottom: 75%; }
+  
+	.left-0 { left: 0; }
+	.left-25 { left: 25%; }
+	.left-50 { left: 50%; }
+	.left-75 { left: 75%; }
+
+	.right-0 { right: 0; }
+	.right-25 { right: 25%; }
+	.right-50 { right: 50%; }
+	.right-75 { right: 75%; }
+
+	.vertical-align {
+		top: 50%;
+		@include translate(0,-50%); 
+	}
+
+	.horizontal-align {
+		left: 50%;
+		@include translate(-50%,0);
+	}
+}
+
+@include media-breakpoint-down(md) {
+	.presentation-responsive {
+		height: 40vh!important;
+
+		img {
+			top: 0!important;
+			left: 0!important;
+			@include translate(0,0);
+		}
+
+		img.vertical-align,
+		img.horizontal-align {
+			@include translate(0,0);
+		}
+	}
+}

data/lib/vbax/sass/template_go/components/_pricing.scss

@@ -0,0 +1,111 @@
+//
+//	Pricing
+//
+
+
+.card-price {
+	.svg-icon {
+		margin-bottom: ($card-spacer-x * 1.5);
+	}
+
+	// .card-title {
+	// 	margin-bottom: ($card-spacer-y / 2);
+	// 	font-size: 1.25rem;
+	// 	font-weight: 400;
+	// }
+
+	.card-footer {
+		@include transition;
+		position: relative;
+		padding: $card-spacer-x!important;
+		border-top: $border-width solid $border-color;
+		color: $body-color;
+
+		&::after {
+			@include transition;
+			@include translate(0,-50%);
+			position: absolute;
+			top: 50%;
+			right: 2.875rem;
+			display: block;
+			content: "\ebde";
+			font-size: 1.375rem;
+			font-family: $font-icon;
+		}
+
+		&:hover {
+			background: $gray-200;
+
+			&::after {
+				right: 1.875rem;
+				color: inherit;
+			}
+		}
+	}
+
+	.card-price {
+		font-size: 2.5rem;
+		font-weight: 400;
+	}
+}
+
+
+
+// card 2
+.card-price-2 {
+	.card-title {
+		margin-top: $card-spacer-x;
+		margin-bottom: ($card-spacer-y / 2);
+		font-size: 1.25rem;
+		font-weight: 400;
+	}
+
+	.card-price {
+		font-size: 3.125rem;
+		font-weight: 400;
+	}
+
+	.card-footer {
+		padding-top: 0;
+	}
+}
+
+
+
+// card 3
+.card-price-3 {
+	text-align: center;
+
+	.card-title {
+		@extend %eyebrow;
+		display: block;
+		color: $body-color;
+		margin-bottom: ($card-spacer-x * 1.5);
+	}
+
+	.card-price {
+		font-size: 3.75rem;
+		font-weight: 400;
+	}
+
+	.card-body {
+		padding-bottom: ($card-spacer-x * 1.5);
+	}
+}
+
+
+
+// text-whiteed colors
+//
+//
+.text-white {
+	.card-price {
+		.card-footer {
+			border-color: $text-white-border;
+
+			&:hover {
+				background-color: $text-white-border;
+			}
+		}
+	}
+}

data/lib/vbax/sass/template_go/components/_progress.scss

@@ -0,0 +1,70 @@
+// Progress
+// 
+//
+//
+
+
+//
+// Progress Bar
+//
+
+.progress {
+	@include border-radius(.25rem);
+	overflow: visible;
+
+	.progress-bar {
+		@include border-radius(.25rem);
+		position: relative;
+
+		span {
+			@include transition();
+			position: absolute;
+			right: 0;
+			top: calc(100% + .5rem);
+			font-size: 12px;
+			font-weight: $font-weight-normal;
+			line-height: 1rem;
+		}
+	}
+}
+
+.progress-title {
+	margin-bottom: 1em;
+	font-size: $font-size-sm;
+	font-weight: 600;
+	letter-spacing: $letter-spacing;
+	text-transform: uppercase;
+}
+
+%progress-text-white {
+	.progress {
+		background: rgba($white, .1);
+	}
+
+	.progress-bar {
+		background: $text-white-primary;
+
+		span {
+			color: $text-white-primary;
+		}
+	}
+}
+
+.progress-circle {
+	position: relative;
+
+	canvas {
+		height: 100%!important;
+		width: 100%!important;
+	}
+
+	strong {
+		@include translate(-50%, -50%);
+		position: absolute;
+		font-size: 2.5rem;
+		font-family: $headings-font-family;
+		font-weight: 400;
+		top: 50%;
+		left: 50%;
+	}
+}