vbax-template_go 0.1.0

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

@@ -0,0 +1,53 @@
+// Icons
+// 
+//
+//
+//
+
+
+//
+// Icomoon
+//
+[class^="icon-"], [class*=" icon-"] {
+	display: inline-block;
+	width: 1em;
+	line-height: 1em;
+	box-sizing: content-box;
+	text-align: center;
+	border: 1px solid transparent;
+
+	&[class*="-bordered"] {
+		border-color: currentColor;
+		border-radius: 50%;
+		border-width: 2px;
+		padding: .5em;
+
+	}
+
+	&[class*="-filled"] {
+		border-radius: 50%;
+		border-color: transparent;
+		padding: .5em;
+	}
+
+}
+
+
+//
+// SVG
+//
+.svg-icon {
+	display: inline-block;
+
+	svg {
+		display: block;
+		height: 1em;
+		width: 1em;
+		stroke: currentColor;
+		fill: currentColor; // maybe remove ?
+
+		* {
+			stroke: currentColor;
+		}
+	}
+}

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

@@ -0,0 +1,24 @@
+// 
+// Job
+//
+//
+
+.job {
+	@include transition;
+	@include border-radius;
+	padding: $grid-gutter-width ($grid-gutter-width / 2);
+	margin: 0;
+	background: rgba($black, .1);
+
+	&:hover {
+		background: rgba($black, .2);
+	}
+
+	&:not(:last-child) {
+		margin-bottom: 10px!important;
+	}
+
+	> * {
+		margin: 0;
+	}
+}

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

@@ -0,0 +1,111 @@
+//
+// List
+//
+
+
+// .list-group {
+// 	font-size: 0.9375rem;
+// }
+
+
+.list-group-item {
+	position: relative;
+
+	span {
+		margin-bottom: 0;
+	}
+
+	[class*="icon"] {
+		&:first-child {
+			padding-right: 1rem;
+		}
+		
+		&:last-child {
+			padding-left: 1rem;
+		}
+	}
+
+	a {
+		@include transition();
+		display: inline-block;
+		color: inherit;
+
+		&:hover {
+			color: $primary;
+		}
+	}
+}
+
+
+// .list-group-item-action {
+// 	@include transition;
+
+// 	@include hover-focus {
+// 		background-color: transparent;
+// 	}
+// }
+
+
+.list-group-line {
+	.list-group-item {
+		padding-left: 0;
+		padding-right: 0;
+		border: 0;
+
+		&:not(:first-child) {
+			&::before {
+				position: absolute;
+				top: 0;
+				content: "";
+				display: block;
+				width: 25%;
+				height: $border-width;
+				background: $border-color;
+			}
+		}
+	}
+}
+
+
+// minimal
+.list-group-minimal {
+	.list-group-item {
+		padding: 0 0 .5em 0;
+		border: 0;
+
+		&:last-child {
+			padding: 0;
+		}
+
+		&.active {
+			background: transparent;
+			color: $black;
+		}
+
+		[class*="icon"] {
+			padding-right: 0;
+		}
+	}
+}
+
+
+.text-white {
+	.list-group-item {
+
+		&:not(:first-child) {
+			border-color: $text-white-border;
+		}
+
+		a {
+			color: $text-white-secondary;
+
+			&:hover {
+				color: $text-white-primary;
+			}
+		}
+
+		span {
+			color: $text-white-primary;
+		}
+	}
+}

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

@@ -0,0 +1,43 @@
+// Maps
+//
+//
+//
+
+.map {
+	> [class*="container"] {
+		position: static;
+		visibility: hidden;
+
+		[class*="col"] {
+			visibility: visible;
+			position: relative;
+			z-index: 20;
+		}
+	}
+}
+
+.map-area {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 10;
+}
+
+.map-circle {
+	position: relative;
+	border-radius: 50%;
+	overflow: hidden;
+}
+
+
+// Responsive
+//
+//
+// responsive styles for maps
+@include media-breakpoint-down(md) {
+	.map {
+		padding-bottom: 50vh;
+	}
+}

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

@@ -0,0 +1,28 @@
+// Masonry
+//
+//
+//
+
+
+.masonry {
+	padding: 0;
+	list-style: none;
+
+	> li {
+		position: relative;
+		// width: 100%;
+
+		// > * { margin: 0; }
+
+  //       @include media-breakpoint-up(md) { width: 50%; }
+	}
+
+
+    // &[data-columns="3"] > li {
+    //     @include media-breakpoint-up(lg) { width: (100% / 3); } 
+    // }
+
+    // &[data-columns="4"] > li {
+    //     @include media-breakpoint-up(lg) { width: (100% / 4); }
+    // }
+}

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

@@ -0,0 +1,48 @@
+// 
+// Modals
+//
+//
+.modal-content {
+	position: relative;
+
+	> *:not(.image) {
+		z-index: 5;
+	}
+
+	.image {
+		@include border-radius;
+	}
+
+	.close {
+		@include transition;
+		display: inline-block;
+		margin: 0;
+		padding: .5em;
+		opacity: 1;
+		background: $white;
+		border-radius: 50%;
+
+		span {
+			color: $black;
+		}
+
+		&:hover {
+			@include scale;
+		}
+	}
+}
+
+.modal-header {
+	@include clearfix;
+}
+
+.modal-image {
+	@include border-top-radius($border-radius);
+	position: relative;
+
+	.close {
+		position: absolute;
+		top: $modal-header-padding;
+		right: $modal-header-padding;
+	}
+}

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

@@ -0,0 +1,288 @@
+// Navs
+//
+//
+//
+
+.nav {
+	display: inline-block;
+	position: relative;
+
+	.nav-link {
+		@include transition;
+		position: relative;
+		display: inline-block;
+		color: $gray-300;
+		z-index: 5;
+		font-size: 14px;
+		font-weight: 400;
+		text-transform: uppercase;
+		letter-spacing: $letter-spacing;
+    cursor: pointer;
+	}
+
+	.lavalamp-object {
+		display: none;
+		z-index: 1;
+	}
+}
+
+
+//
+// text
+//
+.nav-text {
+	margin: -.5rem;
+
+	.nav-link {
+		margin: .5rem;
+		padding: 0 0 1rem 0;
+		line-height: 1em;
+		font-weight: $font-weight-light;
+		font-size: 1.875rem;
+		z-index: 5;
+
+		&.active {
+			color: $primary;
+			border-color: $primary;
+		}
+
+		&:hover {
+			color: $primary;
+		}
+	}
+}
+
+
+
+// tabs
+.nav-tabs {
+	border: 0;
+
+	.lavalamp-object {
+		display: block;
+		position: absolute;
+		border-width: 0 0 2px 0;
+		border-style: solid;
+		border-color: $primary;
+	}
+
+	.nav-item  {
+		margin-right: $grid-gutter-width;
+	}
+
+	.nav-link {
+		border: 0;
+		padding-left: 0;
+		padding-right: 0;
+
+		&.active {
+			background-color: transparent;
+		}
+
+	}
+
+	&.nav-vertical {
+		border-width: 0 0 0 $border-width;
+
+		.lavalamp-object {
+			border-width: 0 0 0 2px;
+			border-bottom: 0;
+		}
+
+		.nav-link {
+			padding: .5rem 1rem;
+			margin: 0;
+		}
+	}
+}
+
+
+
+// pills
+.nav-pills {
+	.lavalamp-object {
+		display: block;
+		position: absolute;
+		border: 2px solid $primary;
+		border-radius: 10rem;
+	}
+
+	.nav-link {
+		z-index: 5;
+		padding: .75rem 1.5rem;
+
+		&.active,
+		&:hover {
+			color: $gray-700;
+		}
+	}
+}
+
+
+
+//
+// Switch
+//
+.nav-switch {
+	display: inline-block;
+	border: $border-width solid $border-color;
+	border-radius: 22.5px;
+	overflow: hidden;
+
+	.lavalamp-object {
+		display: block;
+		position: absolute;
+		background: $border-color;
+		border-radius: 10rem;
+	}
+
+	.nav-link {
+		padding: 15px 25px;
+		line-height: 15px;
+		font-size: $font-size-sm;
+		text-transform: uppercase;
+		letter-spacing: $letter-spacing;
+		z-index: 5;
+		cursor: pointer;
+
+		&.active,
+		&:hover {
+			color: $gray-700;
+		}
+	}
+}
+
+
+//
+// Docs
+//
+.nav-docs {
+	display: inline-block;
+
+	.lavalamp-object {
+		@extend %boxed;
+		@include border-radius;
+		display: block;
+		position: absolute;
+	}
+
+	.nav-link {
+		padding: 10px 20px;
+		line-height: 20px;
+		font-size: $font-size-sm;
+		letter-spacing: $letter-spacing-lg;
+		text-transform: uppercase;
+		z-index: 5;
+		cursor: pointer;
+
+		&.active,
+		&:hover {
+			color: $black;
+		}
+
+
+	}
+}
+
+
+// Vertical
+//
+// vertical direction for .nav-pills and .nav-line
+.nav-vertical {
+	display: inline-block;
+
+	.nav-link {
+		display: block;
+	}
+}
+
+
+.tab-content {
+	position: relative;
+
+	.tab-pane {
+		@include transition;
+		width: 100%;
+		display: block;
+
+		&:not(.active) {
+			visibility: hidden;
+			position: absolute;
+			top: 0;
+			animation: fadeOutBottom .25s ease forwards;
+			-webkit-animation: fadeOutBottom .25s ease forwards;
+		}
+
+		&.active {
+			top: 0;
+			position: relative;
+			z-index: 90;
+			animation: fadeInTop .5s ease forwards;
+			-webkit-animation: fadeInTop .5s ease forwards;
+		}
+	}
+}
+
+
+@keyframes fadeOutBottom {
+  from {
+    opacity: 1;
+	@include translate(0,0);
+	@include scale(1);
+  }
+  to {
+    opacity: 0;
+    @include translate(0,10%);
+    @include scale(.8);
+    -webkit-font-smoothing: antialiased;
+  }
+}
+@-webkit-keyframes fadeOutBottom {
+	from {
+		opacity: 1;
+		@include translate(0,0);
+		-webkit-transform: translate3d(0, 0, 0);
+	}
+	to {
+		opacity: 0;
+		@include translate(0,10%);
+		-webkit-font-smoothing: antialiased;
+	}
+}
+@keyframes fadeInTop {
+	from {
+		opacity: 0;
+		@include translate(0,10%);
+	}
+	to {
+		opacity: 1;
+		@include translate(0,0);
+		-webkit-font-smoothing: antialiased;
+	}
+}
+@-webkit-keyframes fadeInTop {
+	from {
+		opacity: 0;
+		@include translate(0,10%);
+	}
+	to {
+		opacity: 1;
+		@include translate(0,0);
+		-webkit-font-smoothing: antialiased;
+	}
+}
+
+
+
+// text-whiteed
+//
+// styles for colored/image background
+.text-white {
+	.nav-switch {
+		border-color: $text-white-border;
+
+		.lavalamp-object {
+			background: $text-white-border;
+		}
+	}
+}