adding the new theme

17 files changed, 1489 insertions, 0 deletions

diff --git a/templates/assets/sass/hipster_cards/_buttons.scss b/templates/assets/sass/hipster_cards/_buttons.scss
new file mode 100755
index 0000000..64020dc
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/_buttons.scss
@@ -0,0 +1,108 @@
+.btn{
+    border-width: $border-thin;
+    background-color: $transparent-bg;
+    font-weight: $font-weight-normal;
+    
+    @include opacity(.8);
+    padding: $padding-base-vertical $padding-base-horizontal;
+    
+    @include btn-styles($default-color, $default-states-color);
+    
+    &:hover,
+    &:focus{
+        @include opacity(1);
+        outline: 0 !important;
+    }
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+         @include box-shadow(none);
+         outline: 0 !important;
+    }
+    
+    &.btn-icon{
+        padding: $padding-base-vertical;
+    }
+    
+}
+
+// Apply the mixin to the buttons
+//.btn-default { @include btn-styles($default-color, $default-states-color); }
+.btn-primary { @include btn-styles($primary-color, $primary-states-color); }
+.btn-success { @include btn-styles($success-color, $success-states-color); }
+.btn-info    { @include btn-styles($info-color, $info-states-color); }
+.btn-warning { @include btn-styles($warning-color, $warning-states-color); }
+.btn-danger  { @include btn-styles($danger-color, $danger-states-color); }
+.btn-neutral { 
+    @include btn-styles($white-color, $white-color);
+    
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle{
+         background-color: $white-color;
+         color: $default-color;
+    }    
+    
+    &.btn-fill,
+    &.btn-fill:hover,
+    &.btn-fill:focus{
+        color: $default-color;
+    }
+    
+    &.btn-simple:active,
+    &.btn-simple.active{
+        background-color: transparent;
+    }
+}
+
+.btn{
+     &:disabled,
+     &[disabled],
+     &.disabled{
+        @include opacity(.5);
+    }
+}
+.btn-round{
+    border-width: $border-thin;
+    border-radius: $btn-round-radius !important;
+    padding: $padding-round-vertical $padding-round-horizontal;
+    
+    &.btn-icon{
+        padding: $padding-round-vertical;
+    }
+}
+.btn-simple{
+    border: $none;
+    font-size: $font-size-medium;
+    padding: $padding-base-vertical $padding-base-horizontal;
+    
+    &.btn-icon{
+        padding: $padding-base-vertical;
+    }
+}
+.btn-lg{
+   @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large);
+   font-weight: $font-weight-normal;
+}
+.btn-sm{
+    @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small);    
+}
+.btn-xs {
+    @include btn-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $border-radius-small);
+}
+.btn-wd {
+    min-width: 140px;
+}
+
+.btn-group.select{
+    width: 100%;
+}
+.btn-group.select .btn{
+    text-align: left;
+}
+.btn-group.select .caret{
+    position: absolute;
+    top: 50%;
+    margin-top: -1px;
+    right: 8px;
+}
diff --git a/templates/assets/sass/hipster_cards/_cards.scss b/templates/assets/sass/hipster_cards/_cards.scss
new file mode 100644
index 0000000..c28deea
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/_cards.scss
@@ -0,0 +1,466 @@
+.card{
+    border-radius: $border-radius-small;    
+    box-shadow: 0 1px 4px rgba(0,0,0,.23);
+    background-color: #FFFFFF;
+    margin-bottom: 20px;
+    position: relative;
+    
+    max-width: 320px;
+    margin-left: auto;
+    margin-right: auto;
+    
+    .title,
+    .stats,
+    .category,
+    .description,
+    .social-line,
+    .actions,
+    .content,
+    .footer,
+    small,
+    a{
+        position: relative;
+        z-index: 3;
+    }
+    
+    a{
+        color: $black-hr;
+        
+        &:hover,
+        &:focus{
+            color: $black-color;
+        }
+    }
+    
+    &[data-radius="none"]{
+        border-radius: $border-radius-none;   
+        
+        .header{
+            border-radius: $border-radius-none-top;
+            
+            img{
+                border-radius: $border-radius-none-top;
+            }
+        } 
+    }
+    
+    &.card-plain{
+        box-shadow: none;
+    }
+    
+    .btn{
+        text-shadow: none;
+        font-weight: bold;
+    }
+    
+    .title-uppercase{
+        text-transform: uppercase;
+    }
+    
+    .header{
+        position: relative;
+        border-radius: $border-radius-small-top;
+        height: 200px;
+        z-index: 3;
+        
+        img{
+            @include opacity(0);
+            display: none;
+        }
+        
+        .category{
+            padding: 15px;
+        }
+        
+        .social-line{
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            @include opacity(0);
+            display: block;
+            transition: all 0.4s;
+            -webkit-transition: all 0.4s;
+            
+            .btn,
+            a{
+                font-family: "Roboto","Helvetica","Arial", sans-serif;   
+                font-weight: 400;
+            }
+            
+            &.social-line-visible{
+                @include opacity(1);
+            }
+        }
+    }
+    
+    .content{
+        .price{
+            border: 2px solid rgba(255,255,255,.7);
+            color: white;
+            border-radius: 50%;
+            width: 152px;
+            height: 152px;
+            margin: 50px auto;
+            text-align: center;
+            vertical-align: middle;
+            line-height: 200px;
+            
+            h4{
+                margin: 5px 0 0;
+                font-size: 36px;
+            }
+            
+            h6{
+                margin-top: 45px;
+                font-size: 16px;
+            }
+            
+            .currency{
+                font-size: 22px;
+                font-weight: normal;
+            }
+        }
+    }
+    .actions{
+        padding: 10px 15px;
+    }
+    
+    .social-line{
+        .btn{
+            float: left;
+            display: block;
+            
+            transition: all 0.2s;
+            -webkit-transition: all 0.2s;
+        }
+        
+        .btn-social{
+            border: 1px solid #EEEEEE;
+            border-radius: 0;
+            border-left: 0;
+            background-color: #FFFFFF;
+            padding: 12px 4px;
+            
+            &:last-child{
+                border-right: 0;
+            }
+        }
+        
+        &[data-buttons="5"]{
+            .btn{
+                width: 20%;
+            }
+        }
+        
+        &[data-buttons="4"]{
+            .btn{
+                width: 25%;
+            }
+        }
+        
+        &[data-buttons="3"]{
+            .btn{
+                width: 33.3333333%;
+            }
+        }
+        
+        &[data-buttons="2"]{
+            .btn{
+                width: 50%;
+            }
+        }
+        
+        &:after{
+            clear: both;
+            display: table;
+            content: " ";
+        }
+    
+    }
+    
+    .filter,
+    .header .actions{
+        position: absolute;
+        z-index: 2;
+        background-color: rgba(0,0,0,.76);
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        
+        @include opacity(0);
+    }
+    
+    .header .actions{
+        background-color: transparent;
+        z-index: 3;
+        
+        .btn{
+            @include vertical-align();
+        }
+    }
+    
+    &:hover{
+        .filter{
+            @include opacity(.7);
+        }
+        
+        .header .social-line,
+        .header .actions{
+            @include opacity(1);
+        }
+    }
+        
+    .category,
+    .label{
+        font-size: $font-size-base;
+        margin-bottom: 0px;
+        i{
+            font-size: $font-paragraph;
+        }
+    }
+    .category{
+        color: $dark-gray;
+    }
+    .label{
+        text-shadow: none;
+    }
+    .title{
+        color: $black-color;         
+    }
+
+    > .title{
+       margin: 0;
+       padding: 30px 0 0; 
+    }
+    
+    .content{
+        padding: 15px 15px 5px 15px;
+        
+        .title{
+            margin: 10px 0 20px 0;
+        }
+        
+        .category ~ .title{
+            margin-top: 0px;
+        }
+        
+        .description ~ .title {
+            margin-top: -10px;
+        }
+    }
+    
+    .description{
+        font-size: $font-paragraph;
+        color: $dark-gray;
+    }
+    
+    h6{
+        font-size: $font-size-small;
+        margin: 0;
+    }
+    
+    .footer{
+        padding: 0 15px 15px;
+        
+        .social-line{
+            .btn:first-child{
+                border-radius: 0 0 0 6px;
+            }
+            .btn:last-child{
+                border-radius: 0 0 6px 0;
+            }
+        }
+    }
+
+   
+    &.card-separator:after{
+        height: 100%;
+        right: -15px;
+        top: 0;
+        width: 1px;
+        background-color: $medium-gray;
+        content: "";
+        position: absolute;
+    }
+    
+    .icon{
+        display: block;
+        margin: 0 auto;
+        top: 50%;
+        position: relative;
+        transform: translateY(-50%);
+        -webkit-transform: translateY(-50%);  
+        text-align: center;        
+        
+        i{
+            font-size: 60px;
+            border: 2px solid rgba(0,0,0, 0.3);
+            padding: 18px;
+            border-radius: 50%;
+        }
+    }
+    
+    .col-lg-4 &{ 
+        .icon{
+            i{
+                font-size: 80px;
+                padding: 22px;
+            }
+        }
+    }
+    
+    &.card-with-border{
+        .content{
+            padding: 15px 15px 25px 15px;
+        }
+        
+        .footer{
+            padding-bottom: 25px;
+        }
+    }
+    
+    &.card-with-border:after{
+        position: absolute;
+        display: block;
+        width: calc(100% - 10px);
+        height: calc(100% - 10px);
+        content: "";
+        top: 5px;
+        left: 5px;
+        border: 1px solid rgba(0,0,0, 0.15);
+        z-index: 1;
+        border-radius: 5px;  
+    }
+    
+    &.card-just-text{
+        .content{
+            padding: 50px 65px;
+            text-align: center;
+        }
+    }
+    
+    &[data-background="image"],
+    &[data-background="color"]{        
+        .image{
+            border-radius: $border-radius-large;
+        }     
+            
+        .title{
+            font-weight: bold;
+        }
+        
+        .filter{
+            border-radius: $border-radius-large;
+        }
+        
+        .title,
+        .stats,
+        .category,
+        .description,
+        .content,
+        .footer,
+        small,
+        a{
+            color: $white-color;
+        }
+        
+        a:hover,
+        a:focus{
+            color: $white-color;
+        }
+            
+        .icon{
+            i{
+                color: #FFFFFF;
+                border: 2px solid rgba(255,255,255,.6);
+            }
+        }
+        
+        &.card-with-border:after{
+            border: 1px solid rgba(255, 255, 255, 0.45);
+        }
+    }
+    
+    &[data-background="image"]{
+        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
+        
+        .filter{
+            @include opacity(0.55);
+        }
+
+        &:hover .filter{
+            @include opacity(0.75);
+        }
+
+    }
+    
+    &[data-color="blue"]{
+        @include card-radial-gradient ($icon-blue-color-top, $icon-blue-color-bottom);
+    }
+    
+    &[data-color="azure"]{
+        @include card-radial-gradient ($icon-azure-color-top, $icon-azure-color-bottom);
+    }
+    
+    &[data-color="green"]{
+        @include card-radial-gradient ($icon-green-color-top, $icon-green-color-bottom);
+    }
+    
+    &[data-color="orange"]{
+        @include card-radial-gradient ($icon-orange-color-top, $icon-orange-color-bottom);
+    }
+    
+    &[data-color="red"]{
+        @include card-radial-gradient ($icon-red-color-top, $icon-red-color-bottom);
+    }
+        
+    &[data-color="black"]{
+        @include card-radial-gradient ($icon-black-color-top, $icon-black-color-bottom);
+    }
+}
+
+
+.filter.filter-white{
+    @include filter($white-color); 
+}
+.filter.filter-blue{
+    @include card-radial-gradient ($icon-blue-color-top, $icon-blue-color-bottom); 
+}
+.filter.filter-azure{
+    @include card-radial-gradient ($icon-azure-color-top, $icon-azure-color-bottom);
+}
+.filter.filter-green{
+    @include card-radial-gradient ($icon-green-color-top, $icon-green-color-bottom);
+}
+.filter.filter-orange{
+    @include card-radial-gradient ($icon-orange-color-top, $icon-orange-color-bottom);
+}
+.filter.filter-red{
+    @include card-radial-gradient ($icon-red-color-top, $icon-red-color-bottom);
+}
+
+@media (min-width: 1200px){
+    .card{
+        .header{
+            height: 265px;
+        }
+        
+        &[data-background="color"]{
+            .header{
+                height: 230px;
+            }
+        }
+    }
+    
+    .col-md-3 .card,
+    .col-sm-3 .card,
+    .col-xs-3 .card,
+    .col-lg-3 .card{
+        .header{
+            height: 185px;
+        }
+    }
+}
+
diff --git a/templates/assets/sass/hipster_cards/_labels.scss b/templates/assets/sass/hipster_cards/_labels.scss
new file mode 100644
index 0000000..ecc6fb4
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/_labels.scss
@@ -0,0 +1,24 @@
+/*           Labels & Progress-bar              */
+.label{
+    padding: 10px 13px;
+    border-radius: 2px;
+    font-weight: 500;
+    font-size: 11px;
+    text-transform: uppercase;
+    display: inline-block;
+}
+.label-primary{
+    background-color: #3472F7;
+}
+.label-info{
+    background-color: #2CA8FF;
+}
+.label-success{
+    background-color: #05AE0E;
+}
+.label-warning{
+    background-color: #FF9500;
+}
+.label-danger{
+    background-color: #FF3B30;
+}
\ No newline at end of file
diff --git a/templates/assets/sass/hipster_cards/_misc.scss b/templates/assets/sass/hipster_cards/_misc.scss
new file mode 100755
index 0000000..ec1bad8
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/_misc.scss
@@ -0,0 +1,56 @@
+/*     General overwrite     */
+body{
+    font-family: "Helvetica Neue","Open Sans",Arial,sans-serif;
+    background-color: #cccccc;
+}
+a{
+  color: $info-color;
+    
+  &:hover, &:focus{
+     color: $info-states-color; 
+     text-decoration: none; 
+  }
+}
+
+a:focus, a:active, 
+button::-moz-focus-inner,
+input[type="reset"]::-moz-focus-inner,
+input[type="button"]::-moz-focus-inner,
+input[type="submit"]::-moz-focus-inner,
+select::-moz-focus-inner,
+input[type="file"] > input[type="button"]::-moz-focus-inner {
+    outline : 0;
+}
+.ui-slider-handle:focus,
+.navbar-toggle {
+    outline : 0 !important;
+}
+
+/*           Animations              */
+.form-control, 
+.input-group-addon, 
+.tagsinput,
+.navbar,
+.navbar .alert{
+    @include transition($general-transition-time, linear);
+}
+.tagsinput .tag,
+.tagsinput-remove-link,
+.filter,
+.btn-hover,
+[data-toggle="collapse"] i{
+    @include transition($fast-transition-time, linear);
+}
+ 
+.btn-morphing .fa,
+.btn-morphing .circle,
+.gsdk-collapse{
+    @include transition($slow-transition-time, linear);
+}
+
+.margin-top{
+    margin-top: 50px;
+}
+.btn-center{
+    text-align: center;
+}
diff --git a/templates/assets/sass/hipster_cards/_mixins.scss b/templates/assets/sass/hipster_cards/_mixins.scss
new file mode 100644
index 0000000..0e5c70d
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/_mixins.scss
@@ -0,0 +1,15 @@
+//Utilities 
+
+@import "mixins/transparency";
+@import "mixins/vendor-prefixes";
+
+//Components
+
+@import "mixins/buttons";
+
+@import "mixins/labels";
+
+@import "mixins/icons";
+@import "mixins/social-buttons";
+
+@import "mixins/cards";
\ No newline at end of file
diff --git a/templates/assets/sass/hipster_cards/_responsive.scss b/templates/assets/sass/hipster_cards/_responsive.scss
new file mode 100644
index 0000000..cae571a
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/_responsive.scss
@@ -0,0 +1,20 @@
+/*          Changes for small display      */
+
+@media (max-width: 767px){ 
+    .navbar-transparent{
+        padding-top: 15px;
+        background-color: rgba(0, 0, 0, 0.45);
+    }
+    body {
+         position: relative;
+    }
+       
+        
+    .social-line .btn{
+        margin: $margin-bottom;
+    }
+    .card .header .social-line .btn{
+        margin: 0;
+    }        
+}
+
diff --git a/templates/assets/sass/hipster_cards/_sections.scss b/templates/assets/sass/hipster_cards/_sections.scss
new file mode 100644
index 0000000..9682b41
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/_sections.scss
@@ -0,0 +1,12 @@
+.section{
+    padding: 30px 0;
+   
+    position: relative;
+    background-color: #FFFFFF;
+}
+.section-gray{
+    background-color: #EEEEEE;
+}
+.section-white{
+    background-color: #FFFFFF;
+}
\ No newline at end of file
diff --git a/templates/assets/sass/hipster_cards/_social-buttons.scss b/templates/assets/sass/hipster_cards/_social-buttons.scss
new file mode 100644
index 0000000..697ed69
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/_social-buttons.scss
@@ -0,0 +1,76 @@
+.btn-social { 
+	//@include btn-styles($default-color, $default-states-color);
+	opacity: 0.93;
+	padding: 8px 9px;
+
+	.fa {
+		font-size: 18px;
+		vertical-align: middle;
+		display: inline-block;
+	}
+
+	&.btn-round {
+		padding: 9px 10px;
+	}
+
+	&.btn-simple {
+		padding: 9px 5px;
+		font-size: 16px;
+
+		.fa{
+			font-size: 20px;
+			position: relative;
+			top: -2px;
+			width: 24px;
+		}
+	}
+
+}
+
+.btn-facebook {
+	@include social-buttons-color($social-facebook);
+}
+
+.btn-twitter {
+	@include social-buttons-color($social-twitter);
+}
+
+.btn-pinterest {
+	@include social-buttons-color($social-pinterest);
+}
+
+.btn-google {
+	@include social-buttons-color($social-google);
+}
+
+.btn-linkedin {
+	@include social-buttons-color($social-linkedin);
+}
+
+.btn-dribbble {
+	@include social-buttons-color($social-dribbble);
+}
+
+.btn-github {
+	@include social-buttons-color($social-github);
+}
+
+.btn-youtube {
+	@include social-buttons-color($social-youtube);
+}
+
+.btn-stumbleupon {
+	@include social-buttons-color($social-stumbleupon);
+}
+
+.btn-reddit {
+	@include social-buttons-color($social-reddit);
+}
+
+.btn-tumblr {
+	@include social-buttons-color($social-tumblr);
+}
+
+.btn-behance{
+	@include social-buttons-color($social-behance);
+}
\ No newline at end of file
diff --git a/templates/assets/sass/hipster_cards/_typography.scss b/templates/assets/sass/hipster_cards/_typography.scss
new file mode 100644
index 0000000..a1c7dab
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/_typography.scss
@@ -0,0 +1,78 @@
+/*           Font Smoothing      */
+
+.card{
+    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, .btn, a, .td-name, td{
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-family: "Playfair Display","Raleway","Helvetica Neue",Arial,sans-serif;
+    }
+    
+    h1, .h1, h2, .h2, h3, .h3, h4, .h4{
+        font-weight: $font-weight-normal;
+        margin: $margin-large-vertical 0 $margin-base-vertical;
+    }
+    
+    h1, .h1 {
+        font-size: $font-size-h1;
+    }
+    h2, .h2{
+        font-size: $font-size-h2;
+    }
+    h3, .h3{
+        font-size: $font-size-h3;
+        margin: 20px 0 10px;
+    }
+    h4, .h4{
+        font-size: $font-size-h4;
+        line-height: 30px;
+    }
+    h5, .h5 {
+        font-size: $font-size-h5;
+        margin-bottom: 15px;
+    }
+    h6, .h6{
+        font-size: $font-size-h6;
+        font-weight: $font-weight-bold;
+        text-transform: uppercase;
+    }
+    p{
+        font-size: $font-paragraph;
+        line-height: $line-height-general;
+        font-family: "Raleway","Helvetica","Arial", sans-serif;
+    }
+    
+    .category,
+    .label,
+    .title-modern,
+    .btn-modern,
+    .price h4{
+        font-family: "Raleway","Helvetica","Arial", sans-serif;
+    }
+    
+    h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
+        color: $dark-gray;
+        font-weight: $font-weight-light;
+        line-height: $line-height-general;
+    }
+    
+    h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small {
+        font-size: 60%;
+    }
+    
+    .text-primary, .text-primary:hover{
+        color: #1D62F0 !important;
+    }
+    .text-info, .text-info:hover{
+        color: #109CFF !important;
+    }
+    .text-success, .text-success:hover{
+        color: #0C9C14 !important;
+    }
+    .text-warning, .text-warning:hover{
+        color: #ED8D00 !important;
+    }
+    .text-danger, .text-danger:hover{
+        color: #EE2D20 !important;
+    }  
+} 
+
diff --git a/templates/assets/sass/hipster_cards/_variables.scss b/templates/assets/sass/hipster_cards/_variables.scss
new file mode 100644
index 0000000..c530b1c
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/_variables.scss
@@ -0,0 +1,260 @@
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$none:                       0   !default;
+$border-thin:                1px !default;
+$border-thick:               2px !default;
+
+$white-color:                #FFFFFF !default;
+$white-bg:                   #FFFFFF !default;
+
+$smoke-bg:                   #F5F5F5 !default;
+
+$black-bg:                   rgba(30,30,30,.97) !default;
+
+$black-color:                #333333 !default;
+$black-hr:                   #444444 !default;
+
+$light-gray:                 #E3E3E3 !default;
+$medium-gray:                #DDDDDD !default; 
+$dark-gray:                  #9A9A9A !default;
+
+$transparent-bg:             transparent !default;
+
+$default-color:              #888888 !default;
+$default-bg:                 #888888 !default;
+$default-states-color:       #777777 !default; 
+
+$primary-color:              #3472F7 !default;
+$primary-bg:                 #3472F7 !default;
+$primary-states-color:       #1D62F0 !default;
+
+$success-color:              #05AE0E !default;
+$success-bg:                 #05AE0E !default;
+$success-states-color:       #049F0C !default; 
+
+$info-color:                 #2CA8FF !default;
+$info-bg:                    #2CA8FF !default;
+$info-states-color:          #109CFF !default;
+
+$warning-color:              #FF9500 !default;
+$warning-bg:                 #FF9500 !default;
+$warning-states-color:       #ED8D00 !default;
+
+
+$danger-color:               #FF3B30 !default;
+$danger-bg:                  #FF3B30 !default;
+$danger-states-color:        #EE2D20 !default;
+
+
+
+$link-disabled-color:        #666666 !default;
+
+
+/*      light colors         */
+$light-blue:                 rgba($primary-color, .2);
+$light-azure:                rgba($info-color, .2);
+$light-green:                rgba($success-color, .2);
+$light-orange:               rgba($warning-color, .2);
+$light-red:                  rgba($danger-color, .2); 
+
+
+//== Components
+//
+
+$padding-base-vertical:         8px !default;
+$padding-base-horizontal:      16px !default;
+
+$padding-round-vertical:        9px !default;
+$padding-round-horizontal:     18px !default;
+
+$padding-simple-vertical:      10px !default;
+$padding-simple-horizontal:    18px !default;
+
+$padding-large-vertical:       14px !default;
+$padding-large-horizontal:     30px !default;
+
+$padding-small-vertical:        5px !default;
+$padding-small-horizontal:     10px !default;
+
+$padding-xs-vertical:           1px !default;
+$padding-xs-horizontal:         5px !default;
+
+$padding-label-vertical:        2px !default;
+$padding-label-horizontal:     12px !default;
+
+$margin-large-vertical:        30px !default;
+$margin-base-vertical:         15px !default;
+
+$margin-bottom:                0 0 10px 0 !default;
+
+$border-radius-none:            0px !default;
+$border-radius-small:           6px !default;
+$border-radius-grande:         10px !default;
+$border-radius-venti:          20px !default;
+
+$border-radius-small:           3px !default;
+$border-radius-base:            4px !default;
+$border-radius-large:           6px !default;
+$border-radius-extreme:        10px !default;
+
+$border-radius-none-top:      $border-radius-none $border-radius-none 0 0 !default;
+$border-radius-none-bottom:   0 0 $border-radius-none $border-radius-none !default;
+
+$border-radius-small-top:      $border-radius-small $border-radius-small 0 0 !default;
+$border-radius-small-bottom:   0 0 $border-radius-small $border-radius-small !default;
+
+$btn-round-radius:             30px !default;
+
+$height-base:                  40px !default;
+
+$font-size-base:               14px !default;
+$font-size-small:              12px !default;
+$font-size-medium:             16px !default; 
+$font-size-large:              18px !default;
+$font-size-large-navbar:       20px !default;
+
+$font-size-h1:                 52px !default;
+$font-size-h2:                 36px !default;
+$font-size-h3:                 28px !default;
+$font-size-h4:                 24px !default;
+$font-size-h5:                 18px !default;
+$font-size-h6:                 14px !default;
+$font-paragraph:               16px !default;
+$font-size-navbar:             16px !default;
+$font-size-small:              12px !default;
+
+$font-weight-light:          300 !default; 
+$font-weight-normal:         400 !default;
+$font-weight-semi:           500 !default;
+$font-weight-bold:           600 !default;
+
+$line-height-general:          1.3 !default;
+$line-height:                 20px !default;
+$line-height-lg:              54px !default;
+
+
+$border-radius-top:        10px 10px 0 0 !default;
+$border-radius-bottom:     0 0 10px 10px !default;
+
+$dropdown-shadow:          1px 2px 3px rgba(0, 0, 0, 0.125);
+
+$general-transition-time:  300ms !default;
+
+$slow-transition-time:           370ms !default; 
+$dropdown-coordinates:      29px -50px !default;
+
+$fast-transition-time:           150ms !default;
+$select-coordinates:         50% -40px !default;
+
+$transition-linear:                                   linear !default;
+$transition-bezier:         cubic-bezier(0.34, 1.61, 0.7, 1) !default;
+$transition-ease:           ease 0s;
+
+$navbar-padding-a:               10px 15px;
+$navbar-margin-a:                15px  3px;
+
+$padding-social-a:               10px  5px;
+
+$navbar-margin-a-btn:            15px 3px;
+$navbar-margin-a-btn-round:      16px 3px;
+
+$navbar-padding-a-icons:         6px 15px;
+$navbar-margin-a-icons:          6px  3px;
+
+$navbar-padding-brand:           20px 15px;
+$navbar-margin-brand:             5px  0px;
+
+$navbar-margin-brand-icons:      12px auto;
+
+$navbar-margin-btn:              15px  3px;
+
+$height-icon:					 64px !default;
+$width-icon:					 64px !default;
+$padding-icon:					 12px !default;
+$border-radius-icon:		     15px !default;
+
+$size-icon: 					 64px;
+$size-icon-sm: 					 32px;
+
+
+$height-icon-sm:				 32px;
+$width-icon-sm:					 32px;
+$padding-icon-sm:			     4px;
+$border-radius-icon-sm:			 7px;
+
+$height-icon-message:			 40px;
+$width-icon-message:			 40px;
+
+$height-icon-message-sm: 		 20px;
+$width-icon-message-sm:			 20px;
+
+
+
+$white-navbar:              rgba(#FFFFFF, .96);
+$blue-navbar:               rgba(#34ACDC, .98);
+$azure-navbar:              rgba(#5BCAFF, .98);
+$green-navbar:              rgba(#4CD964, .98);
+$orange-navbar:             rgba(#FF9500, .98);
+$red-navbar:                rgba(#FF4C40, .98);
+
+$icon-default-color-top:	#d9d9d9 !default;
+$icon-default-color-bottom: #909297 !default;
+
+$icon-blue-color-top: 		#4087ea;
+$icon-blue-color-bottom: 	#533ce1;
+
+$icon-azure-color-top:   	#45c0fd;
+$icon-azure-color-bottom: 	#4091ff;
+
+$icon-green-color-top: 	    #a1eb3a;
+$icon-green-color-bottom: 	#53A319;
+
+
+
+$icon-orange-color-top: 	#ffb33b;
+$icon-orange-color-bottom: 	#ff5221;
+
+$icon-red-color-top: 	    #ff3b30;
+$icon-red-color-bottom: 	#bb0502;
+
+$icon-purple-color-top: 	#df55e1;
+$icon-purple-color-bottom: 	#943bea;
+
+$icon-pink-color-top: 		#ff2a63;
+$icon-pink-color-bottom: 	#ff2e2e;
+
+$icon-black-color-top:	 	#787878;
+$icon-black-color-bottom: 	#343434;
+
+$social-facebook: 			#3b5998;
+$social-twitter: 			#55acee;
+$social-pinterest: 			#cc2127;
+$social-google: 			#dd4b39;
+$social-linkedin: 			#0976b4;
+$social-dribbble: 			#ea4c89;
+$social-github: 			#333333;
+$social-youtube: 			#e52d27;
+$social-stumbleupon: 		#eb4924;
+$social-reddit: 			#ff4500;
+$social-tumblr: 			#35465c;
+$social-behance: 			#1769ff;
+
+
+$filter-blue:         darken($primary-color, 10%);
+$filter-azure:        darken($info-color, 10%);
+$filter-green:        darken($success-color, 10%);
+$filter-orange:       darken($warning-color, 10%);
+$filter-red:          darken($danger-color, 10%);  
+
+
+$topbar-x:             topbar-x !default;
+$topbar-back:          topbar-back !default;
+$bottombar-x:          bottombar-x !default;
+$bottombar-back:       bottombar-back !default;
+
+
+
+
+
diff --git a/templates/assets/sass/hipster_cards/mixins/_buttons.scss b/templates/assets/sass/hipster_cards/mixins/_buttons.scss
new file mode 100644
index 0000000..8322b05
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/mixins/_buttons.scss
@@ -0,0 +1,70 @@
+// Mixin for generating new styles
+@mixin btn-styles($btn-color, $btn-states-color) {
+  border-color: $btn-color;
+  color: $btn-color;
+  
+  &:hover,
+  &:focus,
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    background-color: $transparent-bg;
+    color: $btn-states-color;
+    border-color: $btn-states-color;
+  }
+  
+  &.disabled,
+  &:disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      background-color: $transparent-bg;
+          border-color: $btn-color;
+    }
+  }
+  
+
+  &.btn-fill {
+    color: $white-color;
+    background-color: $btn-color;
+    @include opacity(1);  
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle{
+        background-color: $btn-states-color;
+        color: $white-color;
+    }
+    
+    .caret{
+        border-top-color: $white-color;
+    }
+  }
+  
+  .caret{
+      border-top-color: $btn-color;
+  }
+}
+
+
+@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
+   font-size: $font-size;
+   border-radius: $border;
+   padding: $padding-vertical $padding-horizontal;
+    
+   &.btn-round{
+       padding: $padding-vertical + 1 $padding-horizontal;
+   }
+   
+   &.btn-simple{
+       padding: $padding-vertical + 2 $padding-horizontal; 
+   }
+    
+}
\ No newline at end of file
diff --git a/templates/assets/sass/hipster_cards/mixins/_cards.scss b/templates/assets/sass/hipster_cards/mixins/_cards.scss
new file mode 100644
index 0000000..af1f955
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/mixins/_cards.scss
@@ -0,0 +1,8 @@
+@mixin filter($color){
+    @if $color == #FFFFFF{
+         background-color: rgba($color,.91);
+    } @else {
+         background-color: rgba($color,.69);
+    }
+}
+
diff --git a/templates/assets/sass/hipster_cards/mixins/_icons.scss b/templates/assets/sass/hipster_cards/mixins/_icons.scss
new file mode 100644
index 0000000..80df4df
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/mixins/_icons.scss
@@ -0,0 +1,13 @@
+@mixin icon-background ($icon-url){
+	background-image : url($icon-url);
+		
+}
+
+@mixin icon-shape ($size, $padding, $border-radius) {
+	height: $size;
+	width: $size;
+	padding: $padding;
+	border-radius: $border-radius;
+	display: inline-table;
+
+}
\ No newline at end of file
diff --git a/templates/assets/sass/hipster_cards/mixins/_labels.scss b/templates/assets/sass/hipster_cards/mixins/_labels.scss
new file mode 100644
index 0000000..8a2bdd5
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/mixins/_labels.scss
@@ -0,0 +1,21 @@
+@mixin label-style(){
+     padding: $padding-label-vertical $padding-label-horizontal;
+     border: 1px solid $default-color;
+     border-radius: $border-radius-small;
+     color: $default-color;
+     font-weight: $font-weight-semi;
+     font-size: $font-size-small;
+     text-transform: uppercase;
+     display: inline-block;
+     vertical-align: middle;
+}
+
+@mixin label-color($color){
+     border-color: $color;
+     color: $color;
+}
+@mixin label-color-fill($color){
+     border-color: $color;
+     color: $white-color;
+     background-color: $color;
+}
\ No newline at end of file
diff --git a/templates/assets/sass/hipster_cards/mixins/_social-buttons.scss b/templates/assets/sass/hipster_cards/mixins/_social-buttons.scss
new file mode 100644
index 0000000..38a7d4b
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/mixins/_social-buttons.scss
@@ -0,0 +1,43 @@
+@mixin social-buttons-color ($color){
+
+  border-color: $color;
+  color: $color;
+  
+  &:hover,
+  &:focus,
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    background-color: $transparent-bg;
+    color: $color;
+    border-color: $color;
+    opacity: 1;
+  }
+
+  &:disabled,
+  &[disabled],
+  &.disabled {
+    background-color: $transparent-bg;
+    border-color: $color;
+  }
+
+  &.btn-fill {
+    color: $white-color;
+    background-color: $color;
+    opacity: 0.9;
+    
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle{
+        background-color: $color;
+        color: $white-color;
+        opacity: 1;
+    }
+    
+  }
+  
+  
+}
+			
\ No newline at end of file
diff --git a/templates/assets/sass/hipster_cards/mixins/_transparency.scss b/templates/assets/sass/hipster_cards/mixins/_transparency.scss
new file mode 100644
index 0000000..da32b74
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/mixins/_transparency.scss
@@ -0,0 +1,20 @@
+// Opacity
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: #{alpha(opacity=$opacity-ie)};
+}
+
+@mixin black-filter($opacity){
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    background-color: rgba(17,17,17,$opacity);
+    display: block;
+    content: "";
+    z-index: 1; 
+}
\ No newline at end of file
diff --git a/templates/assets/sass/hipster_cards/mixins/_vendor-prefixes.scss b/templates/assets/sass/hipster_cards/mixins/_vendor-prefixes.scss
new file mode 100644
index 0000000..0f1ed17
--- /dev/null
+++ b/templates/assets/sass/hipster_cards/mixins/_vendor-prefixes.scss
@@ -0,0 +1,199 @@
+// User select
+// For selecting text on the page
+
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+     -moz-user-select: $select;
+      -ms-user-select: $select; // IE10+
+          user-select: $select;
+}
+
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+          box-shadow: $shadow;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+     -moz-box-sizing: $boxmodel;
+          box-sizing: $boxmodel;
+}
+
+
+@mixin transition($time, $type){
+    -webkit-transition: all $time $type;
+    -moz-transition: all $time $type;
+    -o-transition: all $time $type;
+    -ms-transition: all $time $type;
+    transition: all $time $type;
+}
+
+@mixin transform-scale($value){
+     -webkit-transform: scale($value);
+        -moz-transform: scale($value);
+        -o-transform: scale($value);
+        -ms-transform: scale($value);
+        transform: scale($value);
+}
+
+@mixin transform-translate-x($value){
+     -webkit-transform:  translate3d($value, 0, 0);
+        -moz-transform: translate3d($value, 0, 0);
+        -o-transform: translate3d($value, 0, 0);
+        -ms-transform: translate3d($value, 0, 0);
+        transform: translate3d($value, 0, 0);
+}
+
+@mixin transform-origin($coordinates){
+      -webkit-transform-origin: $coordinates;
+        -moz-transform-origin: $coordinates;
+        -o-transform-origin: $coordinates;
+        -ms-transform-origin: $coordinates;
+        transform-origin: $coordinates;
+}
+
+@mixin icon-gradient ($top-color, $bottom-color){
+    background: $top-color;
+    background: -moz-linear-gradient(top,  $top-color 0%, $bottom-color 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top-color), color-stop(100%,$bottom-color));
+    background: -webkit-linear-gradient(top,  $top-color 0%,$bottom-color 100%);
+    background: -o-linear-gradient(top,  $top-color 0%,$bottom-color 100%);
+    background: -ms-linear-gradient(top,  $top-color 0%,$bottom-color 100%);
+    background: linear-gradient(to bottom,  $top-color 0%,$bottom-color 100%);
+}
+
+@mixin card-gradient ($bottom-color, $top-color){
+    background: $top-color;
+    background: -moz-linear-gradient(30deg,  $top-color 0%, $bottom-color 100%);
+    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,$top-color), color-stop(100%,$bottom-color));
+    background: -webkit-linear-gradient(30deg,  $top-color 0%,$bottom-color 100%);
+    background: -o-linear-gradient(30deg,  $top-color 0%,$bottom-color 100%);
+    background: -ms-linear-gradient(30deg,  $top-color 0%,$bottom-color 100%);
+    background: linear-gradient(30deg,  $top-color 0%,$bottom-color 100%);
+
+}
+
+@mixin card-radial-gradient($extern-color, $center-color){
+    background: $extern-color;
+    background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */
+    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */
+    background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */
+    background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */
+    background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */
+    background-size: 250% 250%;
+}
+
+@mixin vertical-align {
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+@mixin rotate-180(){
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
+@mixin bar-animation($type){
+     -webkit-animation: $type 500ms linear 0s;
+     -moz-animation: $type 500ms linear 0s;
+     animation: $type 500ms 0s;
+     -webkit-animation-fill-mode: forwards;
+     -moz-animation-fill-mode: forwards;
+     animation-fill-mode: forwards;
+}
+
+@mixin topbar-x-rotation(){
+    @keyframes topbar-x {
+      0% {top: 0px; transform: rotate(0deg); }
+      45% {top: 6px; transform: rotate(145deg); }
+      75% {transform: rotate(130deg); }
+      100% {transform: rotate(135deg); }
+    }
+    @-webkit-keyframes topbar-x {
+      0% {top: 0px; -webkit-transform: rotate(0deg); }
+      45% {top: 6px; -webkit-transform: rotate(145deg); }
+      75% {-webkit-transform: rotate(130deg); }
+      100% { -webkit-transform: rotate(135deg); }
+    }
+    @-moz-keyframes topbar-x {
+      0% {top: 0px; -moz-transform: rotate(0deg); }
+      45% {top: 6px; -moz-transform: rotate(145deg); }
+      75% {-moz-transform: rotate(130deg); }
+      100% { -moz-transform: rotate(135deg); }
+    }
+}
+
+@mixin topbar-back-rotation(){
+    @keyframes topbar-back {
+      0% { top: 6px; transform: rotate(135deg); }
+      45% { transform: rotate(-10deg); }
+      75% { transform: rotate(5deg); }
+      100% { top: 0px; transform: rotate(0); }
+    }
+    
+    @-webkit-keyframes topbar-back {
+      0% { top: 6px; -webkit-transform: rotate(135deg); }
+      45% { -webkit-transform: rotate(-10deg); }
+      75% { -webkit-transform: rotate(5deg); }
+      100% { top: 0px; -webkit-transform: rotate(0); }
+    }
+    
+    @-moz-keyframes topbar-back {
+      0% { top: 6px; -moz-transform: rotate(135deg); }
+      45% { -moz-transform: rotate(-10deg); }
+      75% { -moz-transform: rotate(5deg); }
+      100% { top: 0px; -moz-transform: rotate(0); }
+    }
+}
+
+@mixin bottombar-x-rotation(){
+    @keyframes bottombar-x {
+      0% {bottom: 0px; transform: rotate(0deg);}
+      45% {bottom: 6px; transform: rotate(-145deg);}
+      75% {transform: rotate(-130deg);}
+      100% {transform: rotate(-135deg);}
+    }
+    @-webkit-keyframes bottombar-x {
+      0% {bottom: 0px; -webkit-transform: rotate(0deg);}
+      45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
+      75% {-webkit-transform: rotate(-130deg);}
+      100% {-webkit-transform: rotate(-135deg);}
+    }
+    @-moz-keyframes bottombar-x {
+      0% {bottom: 0px; -moz-transform: rotate(0deg);}
+      45% {bottom: 6px; -moz-transform: rotate(-145deg);}
+      75% {-moz-transform: rotate(-130deg);}
+      100% {-moz-transform: rotate(-135deg);}
+    }
+}
+
+@mixin bottombar-back-rotation{
+    @keyframes bottombar-back {
+      0% { bottom: 6px;transform: rotate(-135deg);}
+      45% { transform: rotate(10deg);}
+      75% { transform: rotate(-5deg);}
+      100% { bottom: 0px;transform: rotate(0);}
+    }
+    @-webkit-keyframes bottombar-back {
+      0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
+      45% {-webkit-transform: rotate(10deg);}
+      75% {-webkit-transform: rotate(-5deg);}
+      100% {bottom: 0px;-webkit-transform: rotate(0);}
+    }
+    @-moz-keyframes bottombar-back {
+      0% {bottom: 6px;-moz-transform: rotate(-135deg);}
+      45% {-moz-transform: rotate(10deg);}
+      75% {-moz-transform: rotate(-5deg);}
+      100% {bottom: 0px;-moz-transform: rotate(0);}
+    }
+
+}
+
+