vbax-template_go 0.1.0

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

@@ -0,0 +1,88 @@
+// Breadcrumbs
+//
+//
+//
+
+.breadcrumb {
+  display: inline-flex;
+  border: $border-width solid $border-color;
+}
+
+.breadcrumb-item {
+  font-size: $font-size-sm;
+
+  a {
+    @include transition;
+    color: $gray-500;
+
+    &:hover {
+      opacity: .8;
+    }
+  }
+}
+
+%breadcrumb-text-whiteed {
+  border-color: $text-white-border;
+
+  .breadcrumb-item {
+
+    + .breadcrumb-item::before {
+      color: $text-white-border;
+    }
+
+    a {
+      color: $text-white-primary;
+    }
+
+    &.active {
+      color: $text-white-secondary;
+    }
+  }
+}
+
+
+//
+// Custom Breadcrumbs
+//
+.breadcrumb-custom {
+  border: 0;
+  padding: 0;
+
+  .breadcrumb-item {
+    position: relative;
+    overflow: hidden;
+
+    &:nth-child(1) {z-index: 1;}
+    &:nth-child(2) {z-index: 2;}
+    &:nth-child(3) {z-index: 3;}
+    &:nth-child(4) {z-index: 4;}
+    &:nth-child(5) {z-index: 5;}
+
+    &.active,
+    a {
+      display: block;
+      padding: 15px 30px;
+      border: $border-width solid $gray-100;
+      border-radius: 10rem;
+      background: $white;
+    }
+
+    a {
+      padding-right: 60px;
+
+      &:hover {
+        background: $primary;
+        color: $white;
+      }
+    }
+
+    + .breadcrumb-item {
+      margin-left: -40px;
+
+      &::before {
+        display: none;
+      }
+
+    }
+  }
+}

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

@@ -0,0 +1,145 @@
+//
+// Buttons
+//
+
+
+// .btn {
+//   letter-spacing: $letter-spacing;
+// }
+
+
+@each $color, $value in $colors {
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
+}
+
+@each $color, $value in $colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+
+@each $color, $value in $socials {
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
+}
+
+@each $color, $value in $socials {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+
+@each $color, $value in $grays {
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
+}
+
+@each $color, $value in $grays {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+
+
+// Rounded
+.btn-rounded { border-radius: 10rem; }
+
+
+//
+// with icon
+//
+.btn-with-ico {
+  position: relative;
+  padding-left: ($input-btn-padding-y * 2 + $input-btn-padding-x + $line-height-base);
+
+  [class*="icon"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    text-align: center;
+    line-height: ($input-btn-padding-y * 2 + $line-height-base);
+    font-size: 24px;
+    width: ($input-btn-padding-y * 2 + $line-height-base);
+    background: rgba($black, .1);
+  }
+
+  &.btn-lg {
+    padding-right: ($input-btn-padding-y-lg * 2 + $input-btn-padding-x-lg + $line-height-base);
+
+    [class*="icon"] {
+      line-height: ($input-btn-padding-y-lg * 2 + $line-height-base);
+      width: ($input-btn-padding-y-lg * 2 + $line-height-base);
+    }
+  }
+
+  &.btn-sm {
+    padding-right: ($input-btn-padding-y-sm * 2 + $input-btn-padding-x-sm + $line-height-base);
+
+    [class*="icon"] {
+      line-height: ($input-btn-padding-y-sm * 2 + $line-height-base);
+      width: ($input-btn-padding-y-sm * 2 + $line-height-base);
+    }
+  }
+
+  &.btn-rounded {
+    [class*="icon"] {
+      border-radius: 50%;
+    }
+  }
+
+
+  // with icon + outlined
+  &[class*="-outline-"] {
+    padding-left: ($input-btn-padding-y / 2 + $input-btn-padding-x + $line-height-base);
+
+    [class*="icon"] {
+      background: transparent;
+    }
+
+    &.btn-lg {
+      padding-right: ($input-btn-padding-y-lg / 2 + $input-btn-padding-x-lg + $line-height-base);
+    }
+
+    &.btn-sm {
+      padding-right: ($input-btn-padding-y-sm / 2 + $input-btn-padding-x-sm + $line-height-base);
+    }
+  }
+}
+
+
+//
+// icon
+//
+.btn-ico {
+  position: relative;
+	width: ($input-btn-padding-y * 2 + $line-height-base);
+  height: ($input-btn-padding-y * 2 + $line-height-base);
+  padding: 0;
+
+  [class*="icon"] {
+    @include translate(-50%,-50%);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+  }
+
+  &.btn-sm {
+    width: ($input-btn-padding-y-sm * 2 + $line-height-base);
+    height: ($input-btn-padding-y-sm * 2 + $line-height-base);
+  }
+
+  &.btn-lg {
+    width: ($input-btn-padding-y-lg * 2 + $line-height-base);
+    height: ($input-btn-padding-y-lg * 2 + $line-height-base);
+  }
+
+  &.btn-xl {
+    width: ($input-btn-padding-y-lg * 4 + $line-height-base);
+    height: ($input-btn-padding-y-lg * 4 + $line-height-base);
+  }
+}

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

@@ -0,0 +1,129 @@
+// Cards
+//
+//
+//
+//
+
+
+.card {
+  @extend %boxed;
+}
+
+.card-header,
+.card-footer {
+  padding: $card-spacer-x;
+}
+
+.card-body + .card-footer,
+.card-header + .card-body {
+  padding-top: 0;
+}
+
+.card-img-container {
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    @include border-radius;
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    background: rgba($black, .1);
+    z-index: 5;
+  }
+
+  .card-footer,
+  .card-header {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+  }
+
+  .card-title {
+    @include text-shadow();
+    font-size: 2rem;
+    margin: 0;
+    color: $white;
+  }
+}
+
+.card-meta {
+  font-size: 1rem;
+  color: $gray-300;
+}
+
+.card-title { 
+  a {
+    @include transition;
+    color: $black;
+
+    &:hover {
+      color: $primary;
+    }
+  }
+}
+
+
+
+//
+// header navs
+//
+
+.card-header-tabs {
+  margin-top: -($card-spacer-x / 2);
+  margin-left: 0;
+  border-right: 0;
+}
+
+.card-header-pills {
+  margin-top: 0;
+  margin-left: 0;
+  border-right: 0;
+}
+
+
+// card minimal
+.card-minimal {
+  @include no-shadow;
+  background: transparent;
+
+  .card-body {
+    padding: $card-spacer-y;
+  }
+
+  .card-img-container {
+    @extend %boxed;
+    @extend %rising;
+    background: transparent;
+
+    &::before {
+      display: none;
+    }
+  }
+}
+
+// card minimal - modification for preview
+.demo-preview {
+  .card-minimal {
+    .card-img-container {
+      background: rgba($dark, .1);
+      padding: 2rem 2rem 0 2rem;
+
+      .card-img {
+        border-radius: 0;
+        @extend %floating;
+        @include border-top-radius($card-border-radius)
+      }
+
+      @include media-breakpoint-down(sm) {
+        padding: 1rem 1rem 0 1rem;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,260 @@
+// Carousel
+//
+//
+//
+
+.owl-carousel {
+	&[data-dots="true"] {
+	    margin-bottom: 60px;
+	}
+
+	// Navigation
+	.owl-nav {
+
+		button.owl-prev,
+		button.owl-next {
+			@include transition;
+			background: rgba($black, .4);
+			position: absolute;
+			border-radius: 50%;
+			top: 50%;
+			width: 4rem;
+			height: 4rem;
+			text-align: center;
+			z-index: 20;
+
+			&::before {
+				display: block;
+				position: absolute;
+				top: 0;
+				right: 0;
+				bottom: 0;
+				left: 0;
+				line-height: 4rem;
+				font-family: 'icomoon';
+				font-size: 1.8rem;
+				color: $white;
+			}
+
+			&:hover {
+				background: rgba($black, .5);
+			}
+
+			span {
+				display: none;
+			}
+		}
+
+
+		.owl-prev {
+			@include translate(0,-50%);
+			left: ($grid-gutter-width / 2);
+
+			&::before { content: "\ebfb" }
+
+		    &[class*="disabled"] {
+		    	@include translate(-100%, -50%);
+		    	opacity: 0;
+		    	visibility: hidden;
+				z-index: 10;
+		    }
+		}
+
+
+		.owl-next {
+			@include translate(0,-50%);
+			right: ($grid-gutter-width / 2);
+
+			&::before { content: "\ebfc" }
+
+		    &[class*="disabled"] {
+				@include translate(100%, -50%);
+				opacity: 0;
+				visibility: hidden;
+				z-index: 10;
+		    }
+		}
+
+	}
+
+}
+
+
+
+// Dots
+.owl-carousel-inside-project {
+	.owl-nav{
+		&.disabled {
+			display: none;
+		}
+	}
+}
+.owl-dots {
+	@include translate(0,50%);
+	position: absolute;
+	bottom: -30px;
+	width: 100%;
+	text-align: center;
+
+	&.disabled {
+		display: none;
+	}
+
+	.owl-dot {
+		display: inline-block;
+		vertical-align: top;
+
+		span {
+			display: block;
+			width: 8px;
+			height: 8px;
+			margin: 10px;
+			border-radius: 50%;
+			background: rgba($black,0.2);
+			@include transition();
+		}
+
+		&:hover {
+			span {
+				background: rgba($black, 0.4);
+			}
+		}
+
+		&.active {
+			span {
+				background: $black;
+				@include scale(1.5);
+			}
+		}
+
+	}
+}
+
+.owl-carousel-single {
+    .owl-stage-outer {
+    	@extend %floating;
+    	border-radius: $border-radius;
+    	overflow: hidden;
+    }
+
+    .owl-nav {
+    	button.owl-prev,
+    	button.owl-next {
+    		background: $primary;
+    		width: 5.5rem;
+    		height: 5.5rem;
+
+    		&::before {
+    			line-height: 5.5rem;
+    		}
+
+    		&:hover {
+    			background: rgba($primary, .9);
+    		}
+    	}
+
+
+    	.owl-prev {
+    		@include translate(-50%,-50%);
+    		left: 0;
+    	}
+
+
+    	.owl-next {
+    		@include translate(50%,-50%);
+    		right: 0;
+    	}
+    }
+}
+
+.owl-carousel-library {
+	// Navigation
+	.owl-nav {
+		margin-top: 1rem;
+
+		button.owl-prev,
+		button.owl-next {
+			@include translate(0,0);
+			position: static;
+			border-radius: $border-radius;
+			background: none;
+			border: $border-width solid transparent;
+
+			&::before {
+				color: $black;
+			}
+
+			&:hover {
+				background: transparent;
+				border-color: $border-color;
+			}
+		}
+
+
+		.owl-prev,
+		.owl-nav {
+		    &[class*="disabled"] {
+		    	@include translate(0, 0);
+		    	visibility: visible;
+		    	opacity: .5;
+		    }
+		}
+
+	}
+}
+
+// library navigation for text white
+.text-white {
+	.owl-carousel-library {
+		.owl-nav {
+			button.owl-prev,
+			button.owl-next {
+				&:hover {
+					border-color: $text-white-border;
+				}
+
+				&::before {
+					color: $white;
+				}
+			}
+		}
+	}
+}
+
+
+
+
+
+// General
+.owl-carousel {
+
+	.owl-stage-outer {
+
+		.owl-stage {
+
+			.owl-item {
+				@include transition();
+				counter-increment: owlItem;
+
+				img {
+					width: auto;
+					max-width: 100%;
+				}
+			}
+		}
+	}
+
+	&.visible {
+		.owl-stage-outer { overflow: visible; }
+	}
+
+	&.accent {
+		.owl-item {
+			opacity: .25;
+
+			&.active {
+				opacity: 1;
+			}
+		}
+	}
+}