better_styles 0.0.0.338 → 0.0.1

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

@@ -1,220 +0,0 @@
-.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;
-      box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.75);
-  }
-	&.hard-bottom {
-      border-bottom: solid 1px rgba(255,255,255,.75);
-      box-shadow: inset 0 -1px 1px 0 $main-border-color;
-  }
-	&.hard-top.hard-bottom {
-		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;
-      box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.75);
-  }
-	&.dotted-bottom {
-      border-bottom: dotted 2px $gray-light;
-      box-shadow: 0 1px 1px 0 rgba(255,255,255,.75);
-  }
-	&.dotted-top, &.dotted-bottom {
-		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

@@ -1,67 +0,0 @@
-@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 hpadding( $pad: 5px ){  @include horizontal-padding( $pad); }
-@mixin h-padding( $pad: 5px ){  @include horizontal-padding( $pad); }
-@mixin vpadding( $pad: 5px ){  @include vertical-padding( $pad); }
-@mixin v-padding( $pad: 5px ){  @include vertical-padding( $pad); }
-
-@mixin hmargin( $pad: 5px ){  @include horizontal-margin( $pad ); }
-@mixin h-margin( $pad: 5px ){  @include horizontal-margin( $pad ); }
-@mixin vmargin( $pad: 5px ){  @include vertical-margin( $pad ); }
-@mixin v-margin( $pad: 5px ){  @include vertical-margin( $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 absoluteCentered( $size: 0 ){
-  position: absolute;
-  top:  $size; bottom: $size;
-  left: $size; right:  $size;
-}
-
-
-@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

@@ -1,46 +0,0 @@
-$responsive-steps: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 2000px
-) !default;
-
-
-@mixin responsiveStep-xs {
-	@media only screen and (min-width: map-get($responsive-steps, xs)) { @content; }
-}
-@mixin responsiveStep-sm {
-	@media only screen and (min-width: map-get($responsive-steps, sm)) { @content; }
-}
-@mixin responsiveStep-md {
-	@media only screen and (min-width: map-get($responsive-steps, md)) { @content; }
-}
-@mixin responsiveStep-lg {
-	@media only screen and (min-width: map-get($responsive-steps, lg)) { @content; }
-}
-@mixin responsiveStep-xl {
-	@media only screen and (min-width: map-get($responsive-steps, xl)) { @content; }
-}
-@mixin responsiveStep-xxl {
-	@media only screen and (min-width: map-get($responsive-steps, xxl)) { @content; }
-}
-
-
-
-@mixin responsiveStep-xs-only {
-	@media only screen and (max-width: map-get($responsive-steps, xs)) { @content; }
-}
-@mixin responsiveStep-sm-only {
-	@media only screen and (min-width: map-get($responsive-steps, sm)) and (max-width: map-get($responsive-steps, md) - 1) { @content; }
-}
-@mixin responsiveStep-md-only {
-	@media only screen and (min-width: map-get($responsive-steps, md)) and (max-width: map-get($responsive-steps, lg) - 1) { @content; }
-}
-@mixin responsiveStep-lg-only {
-	@media only screen and (min-width: map-get($responsive-steps, lg)) and (max-width: map-get($responsive-steps, xl) - 1) { @content; }
-}
-@mixin responsiveStep-xl-only {
-	@media only screen and (min-width: map-get($responsive-steps, xl)) and (max-width: map-get($responsive-steps, xxl) - 1) { @content; }
-}

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

@@ -1,31 +0,0 @@
-
-
-@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

@@ -1,247 +0,0 @@
-@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 ;
-	}
-}

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

@@ -1,66 +0,0 @@
-// no line break in texts, when to long for box show "..."
-@mixin noWrap {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-@mixin no_wrap {        @include noWrap; }
-@mixin no-wrap {        @include noWrap; }
-@mixin no_word_break {  @include noWrap; }
-@mixin no-word-break {  @include noWrap; }
-
-
-
-// user formated text .. like pre tag
-@mixin preText {
-    white-space: -moz-pre-wrap !important;
-    white-space: -pre-wrap;
-    white-space: -o-pre-wrap;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-
-@mixin pre_text {  @include preText; }
-@mixin pre-text {  @include preText; }
-@mixin user_input {  @include preText; }
-@mixin user-input {  @include preText; }
-
-
-
-// make icons and fonts thinner in webkit (white icons on dark background)
-@mixin antialiasedText {
-	text-shadow: 0 0 0 rgba(0,0,0,.01);
-	-webkit-font-smoothing: antialiased;
-	text-rendering: optimizelegibility;
-}
-
-@mixin antialiased_text {  @include antialiasedText; }
-@mixin antialiased-text {  @include antialiasedText; }
-
-
-
-// make it smooth and app-like on mobile (best in body!)
-@mixin mobileAppImprovements {
-    -webkit-font-smoothing: antialiased;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    ::-webkit-scrollbar { display: none; }
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-}
-
-@mixin mobile_app_improvements {  @include mobileAppImprovements; }
-@mixin mobile-app-improvements {  @include mobileAppImprovements; }
-
-
-
-// add rules for all text elements
-@mixin textTags {
-	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, span, a {
-		@content;
-	}
-}
-
-@mixin text_tags { @include textTags { @content; } }
-@mixin text-tags { @include textTags { @content; } }
-