better_styles 0.0.1 → 0.0.2

data/assets/stylesheets/better/layout/_section.scss

@@ -0,0 +1,220 @@
+.section {
+  display: block; position: relative;
+  margin: 0; 
+  padding: $section-padding 0;
+  // background: $white;
+  // text-align: center;
+  text-align: inherit;
+  &.center {  text-align: center; } 
+	&.left {    text-align: left; }
+	&.right {   text-align: right; }
+  
+  &.z, &.zindex, &.z-index { z-index: 1; }
+    
+    
+  &.image {
+    &.fixed { background-attachment: fixed; /* position: static; */ z-index: 88; }
+    background-color: transparent;
+  	background-position: center center;
+  	background-repeat: no-repeat;
+  	background-size: cover;
+  	background-image: url('http://lorempixel.com/g/1200/500/nature/');
+  }
+    
+
+    
+    
+  // 
+	//   Header Section
+	// 
+	&.head {
+		z-index: 2;
+		background: $section-head-background;
+		padding: $section-head-padding 0;
+		h1, h2, .h1, .h2 {
+			margin: 0; padding: 0;
+			line-height: $section-head-line-height;
+			font-size: $section-head-font-size;
+			color: $brand-color;
+			text-align: left;
+			small { color: $section-head-small-color; }
+		}
+	}
+	
+    
+	// 
+	//   Sections with shine
+	// 
+    &.shine-top {
+        z-index: 1;
+        overflow: hidden;
+        &:before {
+            display: block; position: absolute; content: ""; z-index: 11;
+            margin: 0; padding: 0;
+            bottom: 100%; left: 10%; right: 10%; height: 100px;
+            border-radius: 500px / 20px;
+            box-shadow: 0 5px 20px 0 rgba(0,0,0,.23) ;
+        }
+    }
+    &.shine-bottom {
+        z-index: 1;
+        overflow: hidden;
+        &:after {
+            display: block; position: absolute; content: ""; z-index: 11;
+            margin: 0; padding: 0;
+            top: 100%; left: 10%; right: 10%; height: 100px;
+            border-radius: 500px / 20px ;
+            box-shadow: 0 -5px 20px 0 rgba(0,0,0,.23) ;
+        }
+    }
+    
+
+	// 
+	//   Border Stylez
+	// 
+  &.hard-top {
+      border-top: solid 1px $main-border-color;
+      @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
+  }
+	&.hard-bottom {
+      border-bottom: solid 1px rgba(255,255,255,.75);
+      @include box-shadow( inset 0 -1px 1px 0 $main-border-color );
+  }
+	&.hard-top.hard-bottom {
+		@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), inset 0 -1px 1px 0 $main-border-color );
+	}
+	
+	&.dotted-top {
+      border-top: dotted 2px $gray-light;
+      @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
+  }
+	&.dotted-bottom {
+      border-bottom: dotted 2px $gray-light;
+      @include box-shadow( 0 1px 1px 0 rgba(255,255,255,.75) );
+  }
+	&.dotted-top, &.dotted-bottom {
+		@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), 0 1px 1px 0 rgba(255,255,255,.75) );
+	}
+	
+	// 
+	//   Section Sizes
+	// 
+	&.section-xs, &.sctn-xs, &.compact { padding-top: $section-xs-padding; padding-bottom: $section-xs-padding; }
+	&.section-sm, &.sctn-sm, &.flatted, &.tight { padding-top: $section-sm-padding; padding-bottom: $section-sm-padding; }
+	
+	&.section-lg, &.sctn-lg, &.fat { padding-top: $section-lg-padding; padding-bottom: $section-lg-padding; }
+	&.section-xl, &.sctn-xl, &.fatter { padding-top: $section-xl-padding; padding-bottom: $section-xl-padding; }
+	&.section-xxl, &.sctn-xxl { padding-top: $section-xxl-padding; padding-bottom: $section-xxl-padding; }
+	
+	&.flat { padding-top: 0; padding-bottom: 0; }
+	&.flat-top { padding-top: 0; }
+  &.flat-bottom { padding-bottom: 0; }
+	
+	
+	// 
+	//   Section Colors
+	// 
+	background: $section-background;
+	
+  &.dark {
+		background: $section-dark-background;
+  }
+  &.black {
+		background: #333;
+		color: #fff;
+  }
+	&.bright {
+		background: $section-bright-background;
+	}
+	&.soft { 
+		background: $section-soft-background; 
+	}
+  &.blank { background: transparent; }
+  
+  @each $clrName, $clrValue in $brandColorz {
+    &.#{ $clrName } { background: $clrValue; }
+  }
+	
+	// 
+	//   Speech Section
+	// 
+	&.speech {
+      &:after {
+          display: block; position: absolute; content: "";
+          margin: 0; padding: 0;
+          width: 0; height: 0;
+          border: solid 10px transparent;
+          border-right:  solid 10px $section-background;
+          border-bottom: solid 10px $section-background;
+          bottom: -8px;
+          left: 50%;
+          margin-left: -8px;
+          @include rotation( 45 );
+          z-index: 99;
+      }
+      &.dark:after {
+          border-right:  solid 10px $section-dark-background;
+          border-bottom: solid 10px $section-dark-background;
+      }
+      &.bright:after {
+          border-right:  solid 10px $section-bright-background;
+          border-bottom: solid 10px $section-bright-background;
+      }
+      &.soft:after {
+          border-right:  solid 10px $section-soft-background;
+          border-bottom: solid 10px $section-soft-background;
+      }
+  }
+	
+	
+	// 
+	//   Rotated Sections
+	// 
+	&.rotated {
+	    z-index: 99;
+	    &:after, &:before {
+            display: none; position: absolute; content: "";
+            margin: 0; padding: 0;
+            height: $section-padding * 1.4;
+            left: -10%; right: -10%;
+            z-index: -1;
+            background: inherit;
+        }
+        &:before { top: -1 * $section-padding / 2; }
+        &:after { bottom: -1 * $section-padding / 2; }
+        
+        &.top-left, &.top-right, &.both-left, &.both-right {
+            &:before { display: block; }
+        }
+        &.bottom-left, &.bottom-right, &.both-left, &.both-right {
+            &:after { display: block; }
+        }
+        
+        
+        &.top-left, &.both-left {
+            &:before { @include rotation( 2 ); }
+        }
+        &.top-right, &.both-right {
+            &:before { @include rotation( -2 ); }
+        }
+        &.bottom-left, &.both-left {
+            &:after { @include rotation( 2 ); }
+        }
+        &.bottom-right, &.both-right {
+            &:after { @include rotation( -2 ); }
+        }
+        
+        
+        
+        // &.top-right:before { @include rotation( -2 ); }
+        // &.bottom-right:after { @include rotation( -2 ); }
+        
+	}
+	
+}
+
+
+
+
+
+

data/assets/stylesheets/better/lib/_helpers.scss

@@ -0,0 +1,49 @@
+@mixin squareSize( $size ) {
+	width: #{ $size }px;
+	height: #{ $size }px;
+}
+
+@mixin square-size( $size ) {
+	width: $size;
+	height: $size;
+}
+
+@mixin horizontal-padding( $pad: 5px ) {
+	padding-left: $pad; padding-right: $pad;
+}
+@mixin vertical-padding( $pad: 5px ) {
+	padding-top: $pad; padding-bottom: $pad;
+}
+@mixin horizontal-margin( $pad: 5px ) {
+	margin-left: $pad; margin-right: $pad;
+}
+@mixin vertical-margin( $pad: 5px ) {
+	margin-top: $pad; margin-bottom: $pad;
+}
+
+
+@mixin rotation( $rotate ) {
+	transform: rotate(#{ $rotate }deg);
+}
+
+
+
+@mixin elipse( $first, $second ) {
+	border-radius: #{ $first }px / #{ $second }px;
+}
+@mixin elipsis( $first, $second ) {
+	border-radius: #{percentage($first)} / #{percentage($second)} ;
+}
+
+
+@mixin gpu_render {
+	// old style (bourbon)
+	// transform: translateZ( 0 ) ;
+	// twbs
+	// @include translate3d(0, 0, 0);
+	// bourbon
+	// there is a chrome bug with that ... http://codepen.io/herzflimmern/blog/chrome-bug-with-fixed-background-and-translate3d
+	transform:translate3d(0,0,0);
+	// transform: translate(0,0) ;
+}
+

data/assets/stylesheets/better/lib/_media_querries.scss

@@ -0,0 +1,43 @@
+// before sm 
+@mixin responsiveStep-xs {
+  @include media-breakpoint-up(xs) { @content; }
+}
+@mixin responsiveStep-sm {
+	@include media-breakpoint-up(sm) { @content; }
+}
+@mixin responsiveStep-md {
+	@include media-breakpoint-up(md) { @content; }
+}
+@mixin responsiveStep-lg {
+	@include media-breakpoint-up(lg) { @content; }
+}
+@mixin responsiveStep-xl {
+	@media only screen and (min-width: 1600px) {
+		@content;
+	}
+}
+@mixin responsiveStep-xxl {
+	@media only screen and (min-width: 2000px) {
+		@content;
+	}
+}
+
+
+
+@mixin responsiveStep-xs-only {
+  @include media-breakpoint-only(xs) { @content; }
+}
+@mixin responsiveStep-sm-only {
+	@include media-breakpoint-only(sm) { @content; }
+}
+@mixin responsiveStep-md-only {
+	@include media-breakpoint-only(md) { @content; }
+}
+@mixin responsiveStep-lg-only {
+	@include media-breakpoint-only(lg) { @content; }
+}
+@mixin responsiveStep-xl-only {
+	@media only screen and (min-width: 1600px) and (max-width: 1999px) {
+		@content;
+	}
+}

data/assets/stylesheets/better/lib/_nav.scss

@@ -0,0 +1,31 @@
+
+
+@mixin asideScrollBar {
+    
+    overflow-y: auto !important;
+    // scrollbar-face-color: #000000;
+    // scrollbar-shadow-color: #2D2C4D;
+    // scrollbar-highlight-color:#7D7E94;
+    // scrollbar-3dlight-color: #7D7E94;
+    // scrollbar-darkshadow-color: #2D2C4D;
+    // scrollbar-track-color: #7D7E94;
+    // scrollbar-arrow-color: #C1C1D1;
+    
+    &::-webkit-scrollbar { width: 3px; height: 3px;}
+    &::-webkit-scrollbar-button {  background-color: rgba(0,0,0,.13); }
+    &::-webkit-scrollbar-track {  background-color: rgba(0,0,0,.13); }
+    &::-webkit-scrollbar-track-piece { background-color: rgba(255,255,255,.42);}
+    &::-webkit-scrollbar-thumb { border-radius: 5px; background: #000; }
+    &::-webkit-scrollbar-corner { background-color: rgba(0,0,0,.13);}
+    &::-webkit-resizer { background-color: rgba(255,255,255,.42); }
+    
+    
+    &::scrollbar { width: 3px; height: 3px;}
+    &::scrollbar-button {  background-color: rgba(0,0,0,.13); }
+    &::scrollbar-track {  background-color: rgba(0,0,0,.13); }
+    &::scrollbar-track-piece { background-color: rgba(255,255,255,.42);}
+    &::scrollbar-thumb { border-radius: 5px; background: #000; }
+    &::scrollbar-corner { background-color: rgba(0,0,0,.13);}
+    &::resizer { background-color: rgba(255,255,255,.42); }
+    
+}

data/assets/stylesheets/better/lib/_shadows.scss

@@ -0,0 +1,247 @@
+@mixin make_shadows($horizontal, $vertical, $blur, $size, $color, $times) {
+	$shdw: '';
+	$seprat: "";
+	@while $times > 0 {
+		@if $times > 1 {
+			$seprat: ", ";
+		} @else {
+			$seprat: "";
+		}
+		$shdw: $shdw + "#{$horizontal} #{$vertical} #{$blur} #{$size} #{$color}#{$seprat}";
+		$times: $times - 1;
+	}
+	// @debug $shdw;
+	box-shadow: #{$shdw} ;
+}
+
+
+
+
+// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
+// // //     B O X - S H A D O W S
+// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
+
+
+@mixin raised_shadow( $color, $times: 3, $horizontal: 0, $vertical: 10px, $blur: 10px, $size: -10px ) {
+	// position: relative;
+	// display: block;
+	@include make_shadows($horizontal, $vertical, $blur, $size, $color, $times);
+}
+
+@mixin pseudo_raised_shadow($color,$times:3,$gap:10px,$radius:3px,$horizontal:0,$vertical:3px,$blur:7px,$size:0){
+	// position: relative;
+	// display: block;
+	// z-index: 3;
+	&:before {
+		content: ""; display: block; position: absolute; width:auto;
+		top: 0;
+		right: #{$gap};
+		left: #{$gap};
+		bottom: 0;
+		border: solid 1px #ccc;
+		border-radius: #{$radius};
+		@include make_shadows($horizontal, $vertical, $blur, $size, $color, $times);
+		z-index: -2;
+	}
+}
+
+@mixin lifted_shadow( $color, $times: 3, $horizontal: 0, $vertical: 15px, $blur: 10px, $size: 0 ) {
+	// position: relative;
+	// display: block;
+	&:before, &:after {
+		content: ""; display: block; position: absolute;
+		bottom:15px;
+		width:50%;
+		height:20%;
+		z-index: -2;
+		@include make_shadows($horizontal, $vertical, $blur, $size, $color, $times);
+	}
+	&:before {
+		left:10px;
+		@include rotation(-3);
+	}
+	&:after {
+		right:10px;
+		@include rotation(3);
+	}
+}
+
+@mixin perspective_shadow( $color, $times: 3, $degre: 30, $blur: 10px ) {
+	// position: relative;
+	// display: block;
+	&:before, &:after {
+		content: ""; display: block; position: absolute;
+		background: transparent;
+		left: 80px;
+		bottom:5px;
+		right:20px;
+		height:35%;
+		z-index: -2;
+		@include make_shadows(-80px, 0, $blur, 0, $color, $times);
+		transform:skew(#{$degre}deg);
+    transform-origin:0 100%;
+	}
+}
+
+@mixin vertical_curves( $color, $times: 3, $horizontal: 0, $vertical: 0, $blur: 15px, $size: 0 ) {
+	// position: relative;
+	// display: block;
+	&:before {
+		content: ""; display: block; position: absolute;
+		top: 10px; bottom: 10px;
+		left: 0; right: 0;
+		z-index: -2;
+		@include elipse( 10, 100 );
+		@include make_shadows($horizontal, $vertical, $blur, $size, $color, $times);
+	}
+}
+
+@mixin horizontal_curves( $color, $times: 3, $horizontal: 0, $vertical: 0, $blur: 15px, $size: 0 ) {
+	// position: relative;
+	// display: block;
+	&:before {
+		content: ""; display: block; position: absolute;
+		top: 0; bottom: 0;
+		left: 10px; right: 10px;
+		z-index: -2;
+		@include elipse( 100, 10 );
+		@include make_shadows($horizontal, $vertical, $blur, $size, $color, $times);
+	}
+}
+
+@mixin vertical_shine( $color, $times: 1, $width: 3px, $blur: 10px, $size: 0 ) {
+	// position: relative;
+	// display: block;
+	overflow: hidden;
+	&:before, &:after {
+		content: ""; display: block; position: absolute; z-index: 55;
+	}
+	&:before {
+		top:5px; bottom: 5px;
+		width: 100px; left: -100px;
+		@include elipse( 50, 100 );
+		@include make_shadows($width, 0, $blur, $size, $color, $times);
+	}
+	&:after {
+		top:5px; bottom: 5px;
+		width: 100px; right: -100px;
+		@include elipse( 50, 100 );
+		@include make_shadows(-$width, 0, $blur, $size, $color, $times);
+	}
+}
+
+@mixin horizontal_shine( $color, $times: 1, $width: 3px, $blur: 10px, $size: 0 ) {
+	// position: relative;
+	// display: block;
+	overflow: hidden;
+	&:before, &:after {
+		content: ""; display: block; position: absolute; z-index: 55;
+	}
+	&:before {
+		left:5px; right: 5px;
+		height: 100px; top: -100px;
+		@include elipse( 100, 50 );
+		@include make_shadows(0, $width, $blur, $size, $color, $times);
+	}
+	&:after {
+		left:5px; right: 5px;
+		height: 100px; bottom: -100px;
+		@include elipse( 100, 50 );
+		@include make_shadows(0, -$width, $blur, $size, $color, $times);
+	}
+}
+
+@mixin single_curve( $color, $times: 3, $position: left, $width: 5px, $blur: 5px, $size: 0, $corner: 100 ) {
+	$that: "";
+	$horizontal: 0;
+	$vertical: 0;
+	// position: relative;
+	// display: block;
+	&:before {
+		content:""; position:absolute; z-index: -2;
+		@if $position == top {
+			left: 5px; right: 5px;
+			top: 0; bottom: 5px;
+			$horizontal: 0; $vertical: -#{$width};
+			// @include elipse( #{$corner}, #{round($corner / 2)} );
+			@include elipsis( $corner, round($corner / 10) );
+		} @else if $position == bottom {
+			left: 5px; right: 5px;
+			top: 5px; bottom: 0;
+			$horizontal: 0; $vertical: #{$width};
+			// @include elipse( #{$corner}, #{round($corner / 2)} );
+			@include elipsis( $corner, round($corner / 10) );
+		} @else if $position == right {
+			left: 5px; right: 0;
+			top: 5px; bottom: 5px;
+			$horizontal: #{$width}; $vertical: 0;
+			// @include elipse( #{round($corner / 2)}, #{$corner} );
+			@include elipsis( round($corner / 10), $corner );
+		} @else {
+			left: 0; right: 5px;
+			top: 5px; bottom: 5px;
+			$horizontal: -#{$width}; $vertical: 0;
+			// @include elipsis( round($corner / 2), $corner );
+			@include elipsis( round($corner / 10), $corner );
+		}
+		background: transparent;
+		@include make_shadows($horizontal, $vertical, $blur, $size, $color, $times);
+	}
+}
+
+
+@mixin single_shine( $color, $times: 3, $position: right, $width: 5px, $blur: 5px, $size: 0, $corner: 100 ) {
+	$that: "";
+	$horizontal: 0;
+	$vertical: 0;
+	// position: relative;
+	// display: block;
+	overflow:hidden;
+	&:before {
+		content:""; position:absolute; z-index: 3;
+		
+		@if $position == top {
+			left: 5px; right: 5px;
+			height: 100px;
+			top: -100px;
+			$horizontal: 0; $vertical: #{$width};
+			@include elipse( #{$corner}, #{round($corner / 2)} );
+		} @else if $position == bottom {
+			left: 5px; right: 5px;
+			height: 100px;
+			bottom: -100px;
+			$horizontal: 0; $vertical: -#{$width};
+			@include elipse( #{$corner}, #{round($corner / 2)} );
+		} @else if $position == right {
+			top:5px; bottom: 5px;
+			width: 100px;
+			right: -100px;
+			$horizontal: -#{$width}; $vertical: 0;
+			@include elipsis( ($corner / 2), $corner );
+		} @else {
+			top:5px; bottom: 5px;
+			width: 100px;
+			left: -100px;
+			$horizontal: #{$width}; $vertical: 0;
+			@include elipsis( ($corner / 2), $corner );
+		}
+		background: transparent;
+		@include make_shadows($horizontal, $vertical, $blur, $size, $color, $times);
+	}
+}
+
+
+
+@mixin paper_shadow( $color, $times: 3 ) {
+	// position: relative;
+	// display: block;
+	&:before {
+		content:""; position:absolute; z-index: -2;
+		// @include make_shadows($horizontal, $vertical, $blur, $size, $color, $times);
+		top: 0; bottom:10px;
+		left: 0; right: 0;
+
+		@include make_shadows(0, 0, 5px, 3px, $color, $times);
+		border-radius: 10px 10px 10px 10px / 10px 10px 300px 300px ;
+	}
+}