vbax-template_go 0.1.0

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

@@ -0,0 +1,31 @@
+@import 'tables';
+@import 'navbar';
+@import 'hero';
+@import 'swiper';
+@import 'boxes';
+@import 'gallery';
+@import 'nav';
+@import 'features';
+@import 'accordion';
+@import 'carousel';
+@import 'users';
+@import 'blog';
+@import 'pricing';
+@import 'buttons';
+@import 'partners';
+@import 'testimonials';
+@import 'jobs';
+@import 'list';
+@import 'video';
+@import 'cards';
+@import 'maps';
+@import 'icons';
+@import 'dropdowns';
+@import 'syntax';
+@import 'docs';
+@import 'badges';
+@import 'breadcrumbs';
+@import 'masonry';
+@import 'presentations';
+@import 'progress';
+@import 'modals';

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

@@ -0,0 +1,107 @@
+// Docs
+//
+//
+//
+
+
+.component {
+  padding-bottom: 0;
+  overflow: visible;
+  
+
+  > .container {
+    margin-bottom: 20px;
+  }
+
+  [class*="container"] {
+    .row:not(:last-child) {
+      margin-bottom: 30px;
+    }
+  }
+
+  @include media-breakpoint-up(lg) { 
+    max-width: 95%; 
+  }
+
+  @include media-breakpoint-up(xl) { 
+    max-width: 80%; 
+  }
+
+  > .tab-content {
+    > .tab-pane {
+      @extend %boxed;
+      @include border-radius;
+      overflow: hidden;
+
+      &[class*="bg-light"] {
+        border: $border-width solid $border-color;
+      }
+    }
+  }
+}
+
+//
+// Example
+//
+.component-example {
+  position: relative;
+  padding: 75px 0;
+  overflow: hidden;
+
+  &[class*="-fit"] {
+    padding: 0;
+  }
+
+  &[class*="-fluid"] {
+    padding: $grid-gutter-width ($grid-gutter-width / 2);
+  }
+}
+
+
+//
+// Details
+//
+.component-details {
+  position: relative;
+  padding: 40px 0;
+  border-top: $border-width solid $border-color;
+}
+
+.component-details-markup,
+.component-details-reference {
+  position: relative;
+  padding-top: 30px;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: ($grid-gutter-width / 2);
+    content: "Markup";
+    font-size: 12px;
+    letter-spacing: $letter-spacing-lg;
+    text-transform: uppercase;
+  }
+}
+
+.component-details-reference {
+  &::before {
+    content: "Reference";
+  }
+}
+
+
+
+//
+// Demo
+//
+.btn-demo {
+  > .btn {
+    margin: 0 .5rem .5rem 0;
+  }
+}
+
+.text-white {
+  &.component-details {
+    border-color: $text-white-border;
+  }
+}

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

@@ -0,0 +1,115 @@
+//
+// Dropdowns
+//
+
+.dropdown-toggle {
+	outline: 0;
+}
+
+.dropdown-menu {
+	@include shadow;
+	padding: 0;
+}
+
+.dropdown-item {
+	@include transition;
+	font-size: $font-size-sm;
+
+	&:first-child { @include border-top-radius($card-inner-border-radius); }
+	&:last-child { @include border-bottom-radius($card-inner-border-radius); }
+
+	&:active {
+		span {
+			color: $white;
+		}
+
+		color: rgba($white, .5);
+	}
+
+	span {
+		color: $gray-800;
+		font-size: $font-size-base;
+	}
+}
+
+.dropdown-divider {
+	margin: 0;
+}
+
+
+// animate dropdown inside navbar
+.navbar {
+	@include media-breakpoint-up(lg) {
+		.dropdown-menu {
+			&.show {
+				animation: dropdown .2s ease forwards;
+			}
+		}
+	}
+}
+
+@keyframes dropdown{
+  0%{ opacity: 0; transform: translateY(-1rem); }
+  100%{ opacity: 1; transform: translateY(0); }
+}
+
+
+
+// mega dropdown
+.dropdown-mega {
+	position: static;
+
+	.dropdown-menu {
+		top: 85px;
+		width: 100%;
+
+		> .row {
+			margin-right: 0;
+			margin-left: 0;
+
+			> [class*="col"] {
+				padding-top: ($grid-gutter-width / 2);
+				padding-bottom: ($grid-gutter-width / 2);
+
+				&:not(:first-child) {
+					border-left: $border-width solid $border-color;
+				} 
+			}
+		}
+	}
+}
+
+.mega-title {
+	display: block;
+	padding: 0 $dropdown-item-padding-y;
+	margin-bottom: .5rem;
+	color: $black;
+	letter-spacing: $letter-spacing;
+	font-size: $font-size-sm;
+	text-transform: uppercase;
+}
+
+.mega-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	li {
+		a {
+			@include transition;
+			@include border-radius;
+			display: block;
+			font-size: $font-size-sm;
+			padding: $dropdown-item-padding-y;
+			color: $gray-300;
+
+			&:hover {
+				background-color: rgba($black, .05);
+			}
+
+			&.highlight {
+				border: $border-width solid $border-color;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,50 @@
+//
+//	Features
+//
+
+
+[class*="boxed"] {
+	> .row {
+		padding: 0;
+		// margin-left: 0;
+		// margin-right: 0;
+	}
+}
+
+
+//
+// Feature Square
+//
+.feature-square {
+	@extend %equal;
+	@include border-radius;
+	@include transition;
+	position: relative;
+	text-align: center;
+
+	&:hover {
+		background: $gray-100;
+	}
+	
+	div {
+		@include translate(-50%,-50%);
+		position: absolute;
+		top: 50%;
+		left: 50%;
+	}
+}
+
+// List
+.feature-list {
+	@include clearfix;
+	list-style: none;
+	padding: 0;
+
+	li {
+		float: left;
+	}
+
+	.media-body{
+		flex: none;
+	}
+}

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

@@ -0,0 +1,104 @@
+// Gallery
+//
+//
+
+.align-bottom {
+    .owl-stage {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-align: end!important;
+        align-items: flex-end!important;
+    }
+}
+
+//
+// Scrolling Gallery
+//
+.scrolling-gallery {
+    height: 50vh;
+}
+
+@include media-breakpoint-down(md) {
+    .scrolling-gallery {
+        overflow: hidden;
+        margin-bottom: -5rem;
+    }
+}
+
+
+//
+// Photo
+//
+.photo {
+    @include transition;
+    @include border-radius;
+    position: relative;
+    overflow: hidden;
+    -webkit-mask-image: -webkit-radial-gradient(white, black);
+
+    img {
+        width: 100%;
+    }
+
+    a { 
+        display: block;
+        margin: 0;
+        background-size: cover;
+        background-position: center;
+
+        &::before { 
+            @include border-radius;
+            @include transition;
+            opacity: 0;
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background: rgba($black, .2);
+        }
+    }
+
+    &:hover {
+        a {
+            &:before {
+                opacity: 0.75;
+            }
+        }
+
+        .photo-caption {
+            @include translate(0,0);
+            opacity: 1;
+        }
+    }
+
+}
+
+.photo-caption {
+    @include translate(0,100%);
+    @include transition;
+    @include text-shadow();
+    position: absolute;
+    bottom: .625rem;
+    left: .625rem;
+    padding: .5rem;
+    opacity: 0;
+    color: $white;
+}
+
+
+.gutter-0 {
+    .photo {
+        border-radius: 0;
+    }
+}
+
+
+// scrolling gallery
+
+.scrolling--gallery {
+    position: absolute;
+    top: 0;
+    width: 100%;
+}

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

@@ -0,0 +1,266 @@
+// Cover
+//
+//
+//
+
+.hero {
+	&[class*="-with-header"] {
+		padding-top: ($section-padding * 2);
+	}
+}
+
+
+
+//
+// Box
+//
+.box {
+	@extend %equal;
+
+	> * {
+		@extend %floating;
+		@include border-radius();
+		display: -ms-flexbox;
+		display: flex;
+		-ms-flex-align: end;
+		align-items: flex-end;
+		padding: 1.875rem;
+	}
+
+	b {
+		display: block;
+		margin-bottom: .5rem;
+		line-height: 1.25;
+		font-family: $headings-font-family;
+		font-size: 1.5rem;
+		font-weight: 400;
+	}
+
+	span {
+		font-size: $font-size-sm;
+		font-weight: 500;
+		letter-spacing: $letter-spacing-lg;
+		text-transform: uppercase;
+		color: inherit;
+	}
+}
+
+
+%text-whiteed-box {
+	b {
+		color: $white;
+	}
+}
+
+
+// Gradient
+.gradient-bg {
+	> * {
+		position: relative;
+		z-index: 40;
+	}
+}
+
+.gradient {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+}
+
+.image {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-size: cover;
+	background-position: center;
+
+
+	&[class*="-overlay"] {
+		&::after {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			content: "";
+			// background: rgba($black, 0.25)
+		}
+	}
+
+	&[class*="-overlay-dark"] {
+		&::after {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			content: "";
+			background: rgba($black, 0.4)
+		}
+	}
+
+	&[class*="-gradient-vertical"] {
+		-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
+		from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
+	}
+
+	&[class*="-gradient-horizontal"] {
+		-webkit-mask-image: -webkit-gradient(linear, right top, left top,
+		from(rgba(0,0,0,1)), to(rgba(0,0,0,.5)));
+	}
+
+	&[class*="-gradient-vertical-light"] {
+		-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
+		from(rgba(0,0,0,1)), to(rgba(0,0,0,.5)));
+	}
+
+	&[class*="-gradient-horizontal-light"] {
+		-webkit-mask-image: -webkit-gradient(linear, right top, left top,
+		from(rgba(0,0,0,1)), to(rgba(0,0,0,.5)));
+	}
+
+
+	&[class*="-cover"] {
+		-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
+		from(rgba(0,0,0,.5)), to(rgba(0,0,0,0)));
+	}
+
+	&[class*="-parallax"] {
+		width: 150%;
+	}
+
+
+	&[class*="-blur"] {
+		margin: -20px;
+		@include prefix(filter, blur(10px), webkit moz o ms);
+	}
+}
+
+
+//
+// Image actions
+//
+
+// Zoom
+.image-zoom {
+	@include scale(1.2);
+	@include transition(10s);
+}
+
+.swiper-slide-active {
+	.image-zoom {
+		@include scale(1);
+	}
+}
+
+// Scrolling
+.image-scrolling {
+	height: 125%;
+	top: -25%;
+}
+
+
+.caption {
+	position: relative;
+	z-index: 50;
+	height: 100%;
+}
+
+.caption-background {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 25;
+
+	.container,
+	.container-fluid,
+	.container-full {
+		height: 100%;
+
+		.row {
+			height: 100%;
+		}
+	}
+}
+
+
+//
+// Scrolling Indicator
+//
+.mouse {
+	position: relative;
+	display: inline-block;
+	width: 1.875rem;
+	height: 3.125rem;
+	border-radius: 10rem;
+	border: 2px solid $gray-300;
+
+	&::after {
+		@include translate(-50%, 0);
+		content: "";
+		position: absolute;
+		display: block;
+		top: 25%;
+		left: 50%;
+		width: 6px;
+		height: 6px;
+		background: $black;
+		border-radius: 50%;
+		-webkit-animation: mouse 2s linear infinite;
+		-moz-animation: mouse 2s linear infinite;
+		animation: mouse 2s linear infinite;
+	}
+}
+
+.text-white {
+	.mouse {
+		border-color: $white;
+
+		&::after {
+			background: $white;
+		}
+	}
+}
+
+
+@-webkit-keyframes mouse {
+  0% {
+    opacity: 1;
+    @include translate(-50%,0);
+  }
+  100% {
+    opacity: 0;
+    @include translate(-50%,20px);
+  }
+}
+
+@-moz-keyframes mouse {
+  0% {
+    opacity: 1;
+    @include translate(-50%,0);
+  }
+  100% {
+    opacity: 0;
+    @include translate(-50%,20px);
+  }
+}
+
+@keyframes mouse {
+  0% {
+    opacity: 1;
+    @include translate(-50%,0);
+  }
+  100% {
+    opacity: 0;
+    @include translate(-50%,20px);
+  }
+}