vbax-template_go 0.1.0

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

@@ -0,0 +1,113 @@
+//
+// Video
+//
+
+.video-js {
+	@extend %floating;
+	@include border-radius;
+	position: absolute;
+	width: 100% !important;
+	height: 100% !important;
+	left: 0;
+	top: 0;
+	z-index: 50;
+	background: transparent;
+}
+
+.video-3-4 {
+	position: relative;
+	width: 100%;
+	height: 0;
+	padding-bottom: 42.6%;
+}
+
+.video-16-9 {
+	position: relative;
+	width: 100%;
+	height: 0;
+	padding-bottom: 56.25%;
+	overflow: hidden;
+}
+
+.youtube {
+	.vjs-control-bar {
+		display: none;
+	}
+}
+
+
+.video-js .vjs-big-play-button {
+	top: 50%;
+	left: 50%;
+	width: 80px;
+	height: 80px;
+	margin: -40px 0 0 -40px;
+	line-height: 80px;
+	font-size:40px;
+	background: none;
+	color: $white;
+	border: 0;
+	z-index: 5;
+	@include transition();
+
+	&::before {
+		@include transition();
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin-top: -40px;
+		margin-left: -40px;
+		display: block;
+		width: 80px;
+		height: 80px;
+		line-height: 80px;
+		text-align: center;
+		cursor: pointer;
+		border: 2px solid $white;
+		content: "";
+		font-size: 20px;
+		color: $black;
+		border-radius: 50%;
+	}
+}
+
+.video-js:hover .vjs-big-play-button {
+	background: none;
+
+	&::before {
+		@include scale(1.2);
+	}
+}
+
+
+
+
+// Background Video
+.jquery-background-video-wrapper {
+	@include prefix(background-size, cover, webkit moz);
+	position: relative;
+	overflow: hidden;
+	background-position: center center;
+	background-repeat: no-repeat;
+}
+.jquery-background-video {
+	@include prefix(object-fit, contain, o);
+	position: absolute;
+	min-width: 100%;
+	min-height: 100%;
+	width: auto;
+	height: auto;
+	top: 0;
+	left: 0;
+}
+/**
+ * Fade in videos
+ * Note the .js class - so non js users still
+ * see the video
+ */
+.js .video-bg video {
+	opacity: 0;
+}
+.js .video-bg video.is-playing {
+	opacity: 1;
+}

data/lib/vbax/sass/template_go/layout/_colors.scss

@@ -0,0 +1,54 @@
+//
+// colors
+//
+//
+
+// background colors
+@each $color, $value in $colors {
+  @include bg-variant(".bg-#{$color}", $value);
+}
+
+.bg-image {
+	background-size: cover;
+	background-position: center;
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		background: rgba($black, .4);
+		z-index: 10;
+	}
+
+	> .container {
+		position: relative;
+		z-index: 20;
+	}
+
+	> .image {
+		&[class*="blured"] {
+			@include prefix(filter, blur(5px), webkit moz o ms);
+			position: absolute;
+			top: -2.5rem;
+			right: -2.5rem;
+			bottom: -2.5rem;
+			left: -2.5rem;
+		}
+	}
+
+
+}
+
+// text colors
+@each $color, $value in $colors {
+	@include text-emphasis-variant(".text-#{$color}", $value);
+}
+
+@each $color, $value in $socials {
+	@include text-emphasis-variant(".text-#{$color}", $value);
+}
+
+.text-black { color: $black!important; }

data/lib/vbax/sass/template_go/layout/_components.scss

@@ -0,0 +1,253 @@
+//
+// Components
+//
+
+.logo-sm {
+	max-height: 2rem;
+}
+
+img {
+	max-width: 100%;
+}
+
+
+// anchor
+.anchor {
+	@extend %equal;
+	@include transition;
+	@include border-radius;
+	position: relative;
+	display: block;
+	background-color: $gray-200;
+
+	i {
+		@include translate(-50%,-50%);
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		font-size: 1.5rem;
+		color: $black;
+	}
+
+	&:hover {
+		background-color: $primary;
+
+		i {
+			color: $white;
+		}
+	}
+}
+
+
+// typed
+#typed-strings {
+	display: none;
+}
+
+
+
+// socials
+.socials {
+	@include transition();
+	display: inline-block;
+	width: auto;
+	overflow: hidden;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+
+	li {
+		float: left;
+	}
+
+	a {
+		@include transition();
+		display: block;
+		line-height: 1em;
+		width: 1em;
+		padding: 1rem;
+		border-radius: 50%;
+
+		&:hover {
+			background: gray('100');
+		}
+	}
+
+	&[class*="vertical"] {
+		> li {
+			float: none;
+		}
+	}
+
+	&[class*="-sm"] {
+		a {
+			padding: .75rem;
+		}
+	}
+
+	&[class*="bordered"],
+	&[class*="boxed"] {
+		a {
+			border-radius: 0;
+		}
+	}
+}
+
+
+%socials-text-whiteed {
+	a {
+		color: $text-white-primary;
+
+		&:hover {
+			background: $text-white-border;
+		}
+	}
+}
+
+
+// step
+.step {
+	position: relative;
+	padding:5.625rem 20% 0 0;
+
+	&::before {
+		@include transition;
+		content: counter(owlItem, decimal);
+		position: absolute;
+		display: block;
+		top: 0;
+		left: 0;
+		width: 3.75rem;
+		height: 3.75rem;
+		line-height: calc(3.75rem - .25rem);
+		text-align: center;
+		border: ( 2 * $border-width) solid $border-color;
+		z-index: 20;
+		border-radius: 50%;
+		font-size: 1.5rem;
+	}
+
+	&:hover,
+	&.step-highlight {
+		&::before {
+			@include shadow;
+			@include scale(1.25);
+			background: $primary;
+			border-color: transparent;
+			color: $white;
+		}
+	}
+}
+
+.owl-item {
+
+	&:not(:last-child) {
+		.step {
+			&::after {
+				content: "";
+				display: block;
+				position: absolute;
+				top: 29px;
+				left: 3.75rem;
+				width: calc(100% - 40px);
+				height: 2px;
+				background: $gray-200;
+				z-index: 10;
+			}
+		}
+	}
+}
+
+.step-title {
+	font-size: $font-size-lg;
+	font-weight: $font-weight-normal;
+	letter-spacing: $letter-spacing-sm;
+}
+
+
+
+// meteo widget
+.meteo {
+	display: inline-block;
+	padding: .5rem 1rem;
+
+	> * { vertical-align: middle; }
+
+	// icon
+	.svg-icon {
+		font-size: 40px;
+		padding-right: .5rem;
+	}
+
+	// temperature
+	span {
+		font-size: $font-size-lg;
+		color: $white!important;
+
+		b {
+			font-weight: $font-weight-normal;
+			color: rgba($white, .5);
+		}
+	}
+}
+
+
+// number
+.number {
+	padding: 2.5rem;
+	text-align: center;
+	text-transform: uppercase;
+	letter-spacing: $letter-spacing;
+	font-size: $font-size-sm;
+
+	b {
+		display: block;
+		font-size: 3.125rem;
+		font-weight: 400;
+	}
+}
+
+
+// phone number widget
+.phone {
+	@include border-radius;
+	@include transition;
+	position: relative;
+	display: inline-block;
+	padding: 1rem 1rem 1rem 5rem;
+	color: $black;
+	letter-spacing: $letter-spacing;
+
+	&::before {
+		@include transition;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		width: 3.625rem;
+		content: "\ec73";
+		text-align: center;
+		line-height: 3.625rem;
+		font-family: $font-icon;
+		font-size: 20px;
+		background-color: $border-color;
+	}
+
+	&:hover {
+		border-color: $primary!important;
+
+		&::before {
+			background-color: $primary!important;
+			color: $white;
+		}
+	}
+}
+
+.text-white {
+	.phone {
+		&::before {
+			background: $text-white-border;
+		}
+	}
+}

data/lib/vbax/sass/template_go/layout/_content.scss

@@ -0,0 +1,376 @@
+//
+// Content
+//
+//
+
+body {
+	position: relative;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+[class*="container"] {
+
+	+ [class*="container"] {
+		margin-top: ($section-padding / 2);
+	}
+}
+
+.container-full {
+	overflow: hidden;
+}
+
+.container-fluid {
+	@include media-breakpoint-up(lg) { max-width: 1370px }
+	@include media-breakpoint-up(xl) { max-width: 1770px; }
+}
+
+
+.pattern {
+	&::before,
+	&::after {
+		@include rotate(-45deg);
+		position: absolute;
+		content: "";
+		display: block;
+		background: rgba($white, .05);
+		border-radius: 10rem;
+	}
+
+	&::before {
+		width: 80vw;
+		height: 80vw;
+		bottom: -40vw;
+		left: 25vw;
+	}
+
+	&::after {
+		width: 60vw;
+		height: 60vw;
+		bottom: -30vw;
+		left: 80vw;
+	}
+
+	&.pattern-dark {
+		&::before,
+		&::after {
+			background: rgba($dark, .05);
+		}
+	}
+
+	> * {
+		position: relative;
+		z-index: 10;
+	}
+
+
+	@include media-breakpoint-down(sm) {
+		&::before {
+			width: 160vw;
+			height: 160vw;
+			bottom: -80vw;
+		}
+
+		&::after {
+			width: 120vw;
+			height: 120vw;
+			bottom: -60vw;
+			left: 80vw;
+		}
+	}
+}
+
+
+//
+// section
+//
+body {
+
+	> section,
+	> footer {
+		position: relative;
+		margin: 0 auto;
+		padding: $section-padding 0;
+		overflow: hidden;
+	}
+
+	[class*="container"] {
+		.row:not(:last-child) {
+			margin-bottom: ($section-padding / 2);
+		}
+	}
+}
+
+@include media-breakpoint-down(sm) {
+	body {
+		> section,
+		> footer {
+			padding: ($section-padding / 2) 0;
+		}
+
+		[class*="container"] {
+			.row:not(:last-child) {
+				margin-bottom: ($section-padding / 3);
+			}
+		}
+	}
+}
+
+
+
+//
+// layers section
+//
+.layers {
+	position: relative;
+	margin: 0 auto;
+}
+
+.layers-foreground {
+	position: relative;
+	z-index: 50;
+
+	@include media-breakpoint-down(sm) {
+		background: rgba($purple, .5);
+	}
+}
+
+.layers-background {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 40;
+
+	> .container,
+	> .container-fluid,
+	> .container-full {
+		height: 100%;
+
+		> .row {
+			height: 100%;
+		}
+	}
+}
+
+.layers-background-overlay {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: $purple;
+	z-index: 45;
+}
+
+
+//
+// split
+//
+.split-background {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 100%;
+
+	.container,
+	.container-fluid,
+	.container-full {
+		height: 100%;
+
+		.row { height: 100%; }
+	}
+}
+
+@include media-breakpoint-down(sm) {
+	.split-background {
+		position: static;
+	}
+}
+
+
+//
+// overlay
+//
+.overlay {
+	&::before {
+		position: absolute;
+		content: "";
+		display: block;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		background-color: currentColor;
+		opacity: .8;
+		z-index: 10;
+	}
+}
+
+
+
+//
+// Section Sizing
+//
+section {
+	&[class*="large"] {
+		padding: ($section-padding * 1.5) 0;
+	}
+
+	&[class*="small"] {
+		padding: ($section-padding / 1.5) 0;
+	}
+}
+//////////
+// need to add responsive breakpoints here
+//////////
+
+
+//
+// separator
+//
+[class*="separator"] {
+	border-width: 0;
+	border-color: $border-color;
+	border-style: solid;
+
+	&[class*="-top"] { border-top-width: $border-width; }
+	&[class*="-right"] { border-right-width: $border-width; }
+	&[class*="-bottom"] { border-bottom-width: $border-width; }
+	&[class*="-left"] { border-left-width: $border-width; }
+}
+
+%separator-text-white {
+	border-color: rgba($white, .1);
+}
+
+//
+// SVG shape section decoration
+//
+.section-decorated-top {
+	padding-top: ($section-padding * 1.5);
+}
+
+.section-decorated-bottom {
+	padding-bottom: ($section-padding * 1.5);
+}
+
+.decorated-top {
+	position: absolute;
+	top: -$border-width;
+	right: 0;
+	bottom: auto;
+	left: 0;
+	z-index: 20;
+	height: ($section-padding / 2);
+	transform: translateZ(0);
+
+	svg {
+		position: absolute;
+		width: 100%;
+		bottom: 0;
+		left: 0;
+		height: 100%;
+		
+		> * {
+			fill: currentColor;
+			@include shadow();
+		}
+	}
+
+	@include media-breakpoint-down(sm) {
+		height: 20px;
+	}
+}
+
+.decorated-bottom {
+	position: absolute;
+	top: auto;
+	right: 0;
+	bottom: -$border-width;
+	left: 0;
+	z-index: 20;
+	height: ($section-padding / 2);
+	transform: translateZ(0);
+
+	svg {
+		position: absolute;
+		width: 100%;
+		bottom: 0;
+		left: 0;
+		height: 100%;
+		
+		> * {
+			fill: currentColor;
+			@include shadow(20px);
+		}
+	}
+
+	@include media-breakpoint-down(sm) {
+		height: 20px;
+	}
+}
+
+.decorated-sm {
+	height: 20px;
+}
+
+
+
+
+//
+// fullscreen section
+//
+.viewport {
+	position: relative;
+	overflow: hidden;
+}
+
+
+// background decoration
+.circle {
+	position: absolute;
+	top: 40%;
+	width: 20vw;
+	height: 20vw;
+	background: rgba($black, .1);
+	border-radius: 50%;
+}
+
+.square {
+	position: absolute;
+	top: 80%;
+	left: 75vw;
+	width: 15vw;
+	height: 15vw;
+	background: rgba($black, .1);
+}
+
+
+
+// Responsive
+//
+//
+@include media-breakpoint-up(xl) {
+
+	body {
+		> section,
+		> footer {
+			padding: 7.5rem 0;
+		}
+	}
+}
+
+@include media-breakpoint-down(md) {
+
+	.container,
+	.container-fluid,
+	.container-full {
+		> .row {
+			> *:not(:last-child) {
+				margin-bottom: 1.875rem;
+			}
+		}
+	}
+}