vbax-template_go 0.1.0

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

@@ -0,0 +1,35 @@
+// Badges
+// 
+//
+//
+//
+
+[class*="badge"] {
+	@include transition;
+}
+
+@each $color, $value in $colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}
+
+
+// outline badges
+@mixin badge-outline($bg) {
+  color: $bg;
+  border: $border-width solid $bg;
+  background-color: transparent;
+}
+
+@each $color, $value in $colors {
+  .badge-outline-#{$color} {
+    @include badge-outline($value);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .badge-outline-#{$color} {
+    @include badge-outline($value);
+  }
+}

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

@@ -0,0 +1,321 @@
+// Blog
+//
+//
+//
+
+
+//
+// entry
+//
+.entry {
+  @include transition(0.2s);
+  overflow: hidden;
+  position: relative;
+
+  > a {
+    padding: 2.5rem;
+    color: inherit;
+  }
+
+  &:not(:first-child) { border-top: $border-width solid $border-color; }
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    right: 2.5rem;
+    display: block;
+    content: "\f105";
+    font-size: 1.375rem;
+    font-family: $font-icon;
+    @include transition(0.2s);
+    @include translate(0,-50%);
+  }
+
+  &:hover {
+    background: $border-color;
+
+    &::after { right: 1.875rem; }
+  }
+
+  time {
+    @extend %eyebrow;
+  }
+}
+
+.entry-title {
+  font-size: 1rem;
+  font-family: $font-family-sans-serif;
+  font-weight: $font-weight-normal;
+}
+
+.text-white {
+  .entry {
+    &:not(:first-child) { border-color: $text-white-border; }
+
+    &:hover {
+      background: $text-white-border;
+    }
+  }
+}
+
+
+
+
+//
+// News
+//
+.news {
+  margin-top: .3125rem;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  a {
+    @include border-radius;
+    @include transition;
+    position: relative;
+    padding: 1.875rem;
+    display: inline-block;
+    background: $border-color;
+    color: inherit;
+
+    &:hover {
+      padding-left: 2.5rem;
+    }
+  }
+
+  time {
+    @include translate(1.25rem,-50%);
+    left: 100%;
+    top: 50%;
+    position: absolute;
+    white-space: nowrap;
+  }
+}
+
+.news-title {
+  margin: 0;
+  font-size: 1rem;
+  font-family: $font-family-sans-serif;
+  font-weight: $font-weight-normal;
+}
+
+.text-white {
+  .news {
+    a {
+      background: rgba($black, .1);
+    }
+
+    time {
+      color: $text-white-secondary;
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .news {
+    time {
+      position: static;
+      font-size: $font-size-sm;
+      letter-spacing: $letter-spacing-sm;
+    }
+  }
+}
+
+
+
+
+//
+// tiles
+//
+.tile {
+  @extend %equal;
+  @include border-radius;
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+  overflow: hidden;
+
+  .tile-content {
+    @extend %text-white;
+    @extend %text-shadow;
+
+    // Dark overlay for background image
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      background: rgba($black, 0.2);
+    }
+  }
+
+  &:hover {
+    .tile-image {
+      @include scale;
+    }
+
+    .tile-header {
+      @include translate(0,5%);
+    }
+
+    .tile-footer {
+      @include translate(0,-5%);
+    }
+
+    .on-hover {
+      opacity: 1;
+
+      &.tile-header { @include translate(0,0) }
+      &.tile-footer { @include translate(0,0) }
+    }
+  }
+}
+
+.tile-image {
+  @include transition;
+  background-size: cover;
+  background-position: 50% 50%;
+}
+
+.tile-header,
+.tile-footer {
+  @include transition;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  padding: $card-spacer-x;
+}
+
+.on-hover {
+  opacity: 0;
+  &.tile-header {
+    @include translate(0,-25%)
+  }
+
+  &.tile-footer {
+    @include translate(0,25%)
+  }
+}
+
+.tile-footer {
+  top: auto;
+  bottom: 0;
+}
+
+
+
+
+//
+// Sidebar
+//
+.widget {
+  + .widget {
+    margin-top: 3.125rem;
+  }
+}
+
+.widget-title {
+  @extend %eyebrow;
+  display: block;
+  margin-bottom: 1rem;
+}
+
+
+// Tag Cloud
+.tag-cloud {
+  margin: -.25rem;
+
+  a {
+    @include transition;
+    float: left;
+    display: block;
+    margin: .25rem;
+    background: $gray-200;
+    padding: .5rem 1rem;
+    font-size: $font-size-sm;
+    color: $body-color;
+    border-radius: 10rem;
+
+    &:hover {
+      background: $primary;
+      color: $white;
+    }
+  }
+}
+
+
+// Categories
+.list-group-categories {
+  .list-group-item {
+    @include transition;
+    color: $black;
+
+    &:hover {
+      color: $primary;
+
+      .badge {
+        color: $primary;
+      }
+    }
+  }
+
+  .badge {
+    background: $gray-200;
+  }
+}
+
+
+// Latest posts
+.feed {
+  padding: 0;
+  list-style: none;
+
+  li {  
+    &:not(:last-child) {
+      margin-bottom: ($grid-gutter-width / 2);
+      padding-bottom: ($grid-gutter-width / 2);
+      border-bottom: $border-width solid $border-color;
+    }
+  }
+}
+
+.feed-item {
+  @include transition;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  -ms-flex-align: center !important;
+  align-items: center !important;
+
+  &:hover {
+    .feed-item-content h3 {
+      color: $primary;
+    }
+  }
+
+  img {
+    @extend %boxed;
+    @include border-radius;
+    width: 70px;
+  }
+}
+
+.feed-item-content {
+  padding-left: ($grid-gutter-width / 2);
+
+  h3 {
+    @include transition;
+    margin-bottom: 0;
+    font-size: $font-size-base;
+    font-weight: 400;
+  }
+
+  span {
+    font-size: $font-size-sm;
+    color: $body-color;
+  }
+}

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

@@ -0,0 +1,169 @@
+//
+// Boxes
+//
+//
+
+%bordered {
+	@include border-radius;
+	@include transition;
+	background-color: transparent;
+	border: $border-width solid $border-color;
+}
+
+%bordered-text-whiteed {
+	background: transparent;
+	border-color: $text-white-border;
+}
+
+%boxed {
+	@include border-radius;
+	@include shadow;
+	background-color: $white;
+}
+
+%floating {
+	-webkit-box-shadow: 0px 10px 15px 0 rgba($black,0.1);
+	   -moz-box-shadow: 0px 10px 15px 0 rgba($black,0.1);
+			box-shadow: 0px 10px 15px 0 rgba($black,0.1);
+}
+
+[class*="boxed"] { @extend %boxed; }
+[class*="bordered"] { @extend %bordered; }
+[class*="floating"] { @extend %floating; }
+[class*="rounded"] {
+	border-radius: 10rem!important;
+	&.blk_syst{
+		border-radius: 0rem!important;
+	}
+ }
+
+
+// Hovers
+%scaling {
+	@include transition;
+
+	&:hover {
+		@include scale;
+		@include shadow;
+		position: relative;
+		z-index: 50;
+	}
+}
+
+%rising {
+	@include transition();
+
+	&:hover {
+		@include translate(0,-10px);
+		position: relative;
+		z-index: 50;
+		-webkit-box-shadow: 0px 10px 15px 0 rgba($black,0.1);
+		   -moz-box-shadow: 0px 10px 15px 0 rgba($black,0.1);
+				box-shadow: 0px 10px 15px 0 rgba($black,0.1);
+	}
+}
+
+@include media-breakpoint-up(md) {
+	[class*="scaling"] {
+		@include transition();
+
+		&:hover {
+			@include scale;
+			@include shadow;
+			position: relative;
+			z-index: 50;
+		}
+	}
+
+	[class*="rising"] {
+		@include transition();
+
+		&:hover {
+			@include translate(0,-10px);
+			position: relative;
+			z-index: 50;
+			-webkit-box-shadow: 0px 10px 15px 0 rgba($black,0.1);
+			   -moz-box-shadow: 0px 10px 15px 0 rgba($black,0.1);
+					box-shadow: 0px 10px 15px 0 rgba($black,0.1);
+		}
+	}
+}
+
+
+//
+// separated items
+//
+.separated {
+	overflow: hidden;
+
+	> * {
+		@include prefix(box-shadow, -1px -1px 0px 0px $border-color, webkit moz);
+
+		&:not(:last-child) {
+			margin-bottom: 0!important;
+		}
+	}
+}
+
+.text-white {
+	.separated {
+		> * {
+			@include prefix(box-shadow, -1px -1px 0px 0px $text-white-border, webkit moz);
+		}
+	}
+}
+
+
+// Equal
+//
+// equalise width and height of a box
+%equal {
+	position: relative;
+	// overflow: hidden;
+
+	&::before {
+		display: block;
+		content: "";
+		width: 100%;
+		padding-top: 100%;
+	}
+
+	> * {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+
+	&[class*="-short"] {
+		&::before {
+			padding-top: 75%;
+		}
+	}
+
+	&[class*="-long"] {
+		&::before {
+			padding-top: 125%;
+		}
+	}
+}
+
+.equal {
+	@extend %equal;
+
+	.equal-header,
+	.equal-footer {
+		position: absolute;
+		right: 0;
+		left: 0;
+		padding: 30px;
+	}
+
+	.equal-header { top: 0; }
+	.equal-footer { bottom: 0; }
+
+	.row {
+		height: 100%;
+	}
+}