vbax-template_go 0.1.0

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

@@ -0,0 +1,195 @@
+//
+// text-white
+//
+
+%text-white {
+	color: $white;
+
+	h1, h2, h3, h4, h5, h6,
+	.h1, .h2, .h3, .h4, .h5, .h6,
+	strong, b, li, a:not(.btn) {
+	  color: $text-white-primary;
+	}
+
+	p, span:not(.badge) {
+		color: $text-white-secondary;
+		&.reworkcolor{
+			// TODO: variable
+			color: $buttonGreen;
+			font-weight: 800;
+		}
+	}
+
+
+	hr {
+		border-color: $text-white-border;
+	}
+}
+
+%revert {
+	color: $body-color;
+
+	h1, h2, h3, h4, h5, h6,
+	.h1, .h2, .h3, .h4, .h5, .h6,
+	strong, b, li {
+	  color: $black;
+	}
+
+	p, span {
+		color: $body-color;
+	}
+
+	hr {
+		border-color: $border-color;
+	}
+}
+
+.revert {
+	@extend %revert;
+}
+
+
+
+// text-whiteed Components
+//
+//
+.text-white {
+	@extend %text-white;
+
+
+
+	// Typography
+	.lead {
+		color: rgba($white, .75);
+	}
+
+	.text-muted {
+		color: $text-white-secondary!important;
+	}
+
+	// Socials
+	.socials {
+		@extend %socials-text-whiteed;
+	}
+
+	// Bordered
+	[class*="bordered"] {
+		@extend %bordered-text-whiteed;
+	}
+
+	// Box
+	.box {
+		@extend %text-whiteed-box;
+	}
+
+
+	// Text Decorated
+	.text-decorated {
+		@extend %text-decorated-text-white;
+	}
+
+
+	// Blockquote
+	.blockquote {
+		@extend %blockquote-text-white;
+	}
+
+	// Breadcrumb
+	.breadcrumb {
+		@extend %breadcrumb-text-whiteed;
+	}
+
+
+	// Separator
+	[class*="separator"] {
+		@extend %separator-text-white;
+	}
+
+	&[class*="separator"] {
+		@extend %separator-text-white;
+	}
+
+
+
+
+	// Progress
+	@extend %progress-text-white;
+
+
+	// Owl Carousel Dots
+	.owl-dots {
+
+		.owl-dot {
+
+			span { background: rgba($white, .2); }
+
+			&:hover {
+				span { background: rgba($white, .4); }
+			}
+
+			&.active {
+				span { background: $white; }
+			}
+		}
+	}
+
+	// Tabs
+	.nav {
+		.lavalamp-object {
+			border-color: $white;
+		}
+
+		.nav-link {
+			color: rgba($white, 0.5);
+
+			&.active,
+			&:hover {
+				color: $white;
+			}
+		}
+
+		&.nav--line {
+			border-color: rgba($white, 0.2);
+		}
+	}
+
+
+	// Step
+	.step {
+
+		&::before {
+			border-color: rgba($white, 0.2);
+			color: $white;
+		}
+
+		&:hover,
+		&.step-highlight {
+			&::before {
+				background: $white;
+				border-color: $white;
+				color: $black;
+			}
+		}
+
+		&::after {
+			background-color: rgba($white, 0.2)!important;
+		}
+	}
+
+
+	// Table
+	.table {
+		@extend %table-text-whiteed;
+	}
+
+
+
+
+	// SVG ICON
+	.svg-icon {
+		color: $white;
+	}
+
+
+
+}

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

@@ -0,0 +1,16 @@
+@import 'mixins';
+@import 'helpers';
+@import 'colors';
+@import 'sizing';
+@import 'icons';
+@import 'forms';
+@import 'custom-forms';
+@import 'typography';
+@import 'header';
+@import 'content';
+@import 'components';
+@import 'sidebar';
+@import 'footer';
+@import 'overlay';
+@import 'invert';
+@import 'project';

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

@@ -0,0 +1,110 @@
+//
+// Mixins & Functions
+//
+
+
+//
+// Rem Calculator
+//
+@function rem($size) {
+  $rem: $size / 16;
+  @return #{$rem}rem;
+}
+
+@function px($size) {
+  $px: strip-units($size) * 16;
+  @return #{$px}px;
+}
+
+// removing "px" or "rem" from variable
+@function strip-units($number) {
+  @return $number / ($number * 0 + 1);
+}
+
+
+//
+// vendor prefixes
+//
+@mixin prefix($property, $value, $prefixes: ()) {
+  @each $prefix in $prefixes {
+    #{'-' + $prefix + '-' + $property}: $value;
+  }
+ 
+  // Output standard non-prefixed declaration
+  #{$property}: $value;
+}
+
+
+
+//
+// Font Size
+//
+$font-size-list: ( 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 50, 60, 70, 80, 90, 100 );
+@each $size in $font-size-list {
+	.fs-#{$size} {
+		font-size: rem($size)!important;
+		line-height: 1.4em;
+	}
+}
+
+
+
+// Helpers
+@mixin text-shadow($size: 25px) {
+	text-shadow: 0px 0px $size rgba($black, 0.4);
+}
+
+
+@mixin translate($vertical, $horizontal) {
+	@include prefix(transform, translate($vertical, $horizontal), webkit moz);
+}
+
+
+@mixin transition($time: 0.2s, $type: all, $delay: 0s) {
+	@include prefix(transition, $type $time, webkit moz);
+	@include prefix(transition-delay, $delay, webkit moz);
+}
+
+@mixin selection($type) {
+	@include prefix(user-select, $type, webkit moz ms);
+}
+
+@mixin shadow($size: 10px, $size-2: 0px, $color: rgba($black,0.05)) {
+	@include prefix(box-shadow , 0px 0px $size $size-2 $color, webkit moz);
+}
+
+@mixin scale($ratio: 1.05) {
+	@include prefix(transform , scale($ratio), webkit moz);
+}
+
+@mixin rotate($grade: 90deg) {
+	@include prefix(transform , rotate($grade), webkit moz);
+}
+
+
+// remove ?
+@mixin no-shadow() {
+	@include prefix(box-shadow , none!important, webkit moz);
+}
+
+
+@mixin animation($duration, $mode) {
+	@include prefix(animation-duration , $duration, webkit moz);
+	@include prefix(animation-fill-mode , $mode, webkit moz);
+}
+
+
+// Placeholder
+@mixin placeholder {
+	&::-webkit-input-placeholder {@content}
+	&:-moz-placeholder           {@content}
+	&::-moz-placeholder          {@content}
+	&:-ms-input-placeholder      {@content}  
+}
+
+
+@mixin input-hover {
+	&:hover,
+	&:focus,
+	&:active {@content}
+}

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

@@ -0,0 +1,165 @@
+// Overlay
+//
+//
+
+.overlay-active {
+    overflow: hidden;
+}
+
+// Vendor prefixes
+$sass-burger-add-vendor-prefixes: true !default;
+
+// Burger
+@mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: .3s) {
+    $burger-height: $height !global;
+    $burger-gutter: $gutter !global;
+
+    position: relative;
+    margin-top: $height + $gutter;
+    margin-bottom: $height + $gutter;
+
+    @if $sass-burger-add-vendor-prefixes {
+        @include prefix(user-select, none, webkit moz ms);
+    }
+    user-select: none;
+
+    // 1. Fixes jagged edges in Firefox, see issue #10.
+    &, &::before, &::after {
+        display: block;
+        width: $width;
+        height: $height;
+        background-color: $color;
+        outline: 1px solid transparent; // 1
+        @if $border-radius != 0 {
+            border-radius: $border-radius;
+        }
+
+        @if $sass-burger-add-vendor-prefixes {
+            @include prefix(transition-property, background-color, webkit moz o);
+        }
+        transition-property: background-color, transform;
+
+        @if $sass-burger-add-vendor-prefixes {
+            @include prefix(transition-duration, $transition-duration, webkit moz o);
+        }
+        transition-duration: $transition-duration;
+    }
+
+    &::before, &::after {
+        position: absolute;
+        content: "";
+    }
+
+    &::before {
+        top: -($height + $gutter);
+    }
+
+    &::after {
+        top: $height + $gutter;
+    }
+}
+
+
+// Burger animations
+@mixin burger-to-cross($color: auto) {
+    & {
+        background-color: transparent;
+    }
+    @if ($color != auto) {
+        &::before, &::after {
+            background-color: $color;
+        }
+    }
+    &::before {
+        @if $sass-burger-add-vendor-prefixes {
+            @include prefix(transform, translateY($burger-gutter + $burger-height) rotate(45deg), webkit moz ms o);
+        }
+        transform: translateY($burger-gutter + $burger-height) rotate(45deg);
+    }
+    &::after {
+        @if $sass-burger-add-vendor-prefixes {
+            @include prefix(transform, translateY(-($burger-gutter + $burger-height)) rotate(-45deg), webkit moz ms o);
+        }
+        transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
+    }
+}
+
+
+
+.burger {
+	display: inline-block;
+	position: relative;
+	width: 60px;
+	height: 60px;
+	z-index: 100;
+  
+  span {
+    @include burger(20px, 2px, 4px, $black);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -10px;
+    margin-top: -1.5px;
+  }
+  
+  &.clicked {
+    span {
+      @include burger-to-cross();
+      
+      &:before, &:after {
+        background-color: $black;
+      }
+    }
+  }
+
+  &.burger-dot {
+    @include shadow;
+    background: $white;
+    border-radius: 50%;
+  }
+  
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+
+
+// Overlay
+.overlay-menu {
+	@include transition(.5s);
+	@include translate(0,100%);
+	visibility: hidden;
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: rgba($black,.75);
+	z-index: 90;
+    overflow: hidden;
+
+	&.opened {
+		@include translate(0,0);
+		visibility: visible;
+	}
+}
+
+.overlay-nav {
+    list-style: none;
+    padding: 0;
+
+    a {
+        font-size: 30px;
+        line-height: 2em;
+    }
+}
+
+
+.wrapper {
+	@include transition(.5s);
+
+	&.push {
+		@include scale(.8);
+	}
+}