magic_stylez 0.0.0.27 → 0.0.0.28

data/vendor/assets/stylesheets/magic-min.scss

@@ -0,0 +1,62 @@
+// load bourbon sass helper
+@import "bourbon";
+// load twitter bootstrap
+@import "magic/lib/twbs";
+// load bourbon again, to overwriter twbs helpers
+@import "bourbon";
+
+// load some basic methods
+@import "magic/lib/cross_browser";
+@import "magic/lib/media_querries";
+// load style helper
+@import "magic/lib/helper";
+@import "magic/lib/animation";
+@import "magic/lib/text";
+@import "magic/lib/filter";
+@import "magic/lib/forms";
+
+
+// load effects
+@import "magic/effects/shadows";  // (generates no code, when unused)
+// @import "magic/effects/reflections";
+
+// load icons
+// @import "magic/icons/icomoon";
+// @import "magic/icons/magicons";
+// @import "magic/icons/orderlifticons";
+
+
+// load layout helper
+@import "magic/layout/section";
+@import "magic/layout/corset";
+@import "magic/layout/fullpage_table";
+
+
+// load elements
+// @import "magic/elements/circle_diagram";
+
+// load content helper
+// @import "magic/content/banner";
+// @import "magic/content/box";
+// @import "magic/content/buttons";
+// @import "magic/content/forms";
+// @import "magic/content/helper";
+// @import "magic/content/icons";
+// @import "magic/content/inputs";
+// @import "magic/content/navbar";
+// @import "magic/content/panel";
+// @import "magic/content/pix";
+
+
+@import "magic/helper/divider";
+// @import "magic/helper/arrow_hints";
+// @import "magic/helper/crossed";
+// @import "magic/helper/dots";
+// @import "magic/helper/three_previews";
+
+
+// @import "magic/lists/nav";
+// @import "magic/content/header";
+// @import "magic/layout/body";
+
+

data/vendor/assets/stylesheets/magic/content/_buttons.scss

@@ -10,7 +10,7 @@
     width: auto;
 	width: 100%;
 	// margin: 0 0 10px; 
-	padding: 0;
+	margin: 0; padding: 0;
 	& > * {
 		display: table-cell; position: relative;
 		padding: $padding-base-vertical $padding-base-horizontal;
@@ -78,6 +78,15 @@
 	}
 }
 
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+  margin-top: 10px;
+}
+.btn-splited + .btn-splited, .btn-splited + .btn-divided, .btn-divided + .btn-splited, .btn-divided + .btn-divided {
+  margin-top: 10px;
+}
+
+
 // 
 //   Social - Buttons
 // 
@@ -174,6 +183,21 @@ $paypal-nice-bottom:      darken(#1784cb, 5%);
   @include btn-with-gradient($btn-paypal-color, $paypal-gradient-top, $paypal-gradient-bottom, $btn-paypal-border);
 }
 
+.btn-link {
+  color: $link-color !important;
+  background-color: transparent !important;
+  border-color: transparent !important;
+  &:hover,
+  &:focus,
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $link-hover-color !important;
+    background-color: transparent !important;
+    border-color: transparent !important;
+    background-image: none;
+  }
+}
 
 
 

data/vendor/assets/stylesheets/magic/content/_forms.scss

@@ -171,5 +171,30 @@ form.corset, .form {
 	}
 }
 
+.form-control + .form-control {
+	margin-top: 10px;
+}
+
+
+@include all_form_elements {
+	&.form-control.half { @include horizontal-margin( auto ); width: 50%; }
+}
+
+form, .form {
+	
+	@include all_form_elements {
+		&.form-control { margin-bottom: 10px; }
+	}
+	.btn-divided, .btn-splited, .btn-block { margin-bottom: 10px; }
+	
+	.row > * {
+		margin-bottom: 10px;
+		@include all_form_elements { &.form-control { margin-bottom: 0; } }
+		.btn-divided, .btn-splited, .btn-block { margin-bottom: 0; }
+	}
+	
+}
+
+
 
 

data/vendor/assets/stylesheets/magic/content/_inputs.scss

@@ -136,6 +136,10 @@ textarea.form-control {
   max-width: 100%;
 }
 
+.inpt-splited + .inpt-splited, .inpt-splited + .inpt-divided, .inpt-divided + .inpt-splited, .inpt-divided + .inpt-divided {
+	margin-top: 10px;
+}
+
 
 
 // Form control sizing

data/vendor/assets/stylesheets/magic/content/_navbar.scss

@@ -35,6 +35,69 @@
 	
 }
 
+
+
+.navbar {
+	background: $white;
+	border-color: $main-border-color;
+	
+	.corset, .container { background: inherit; }
+	.navbar-collapse { background: inherit; }
+	
+	// default hight 50px
+	.navbar-nav {
+		background: inherit;
+		// a:not(.btn) { }
+		& > li > a, & > a {
+			padding: 15px 10px;
+			line-height: 20px;
+			
+			&.btn {
+				margin: 9px 5px;
+				@include vertical-padding( 5px );
+				line-height: 20px;
+				&.btn-sm {
+					margin: 11px 5px;
+					@include vertical-padding( 3px );
+				}
+				&.btn-xs {
+					margin: 13px 5px;
+					@include vertical-padding( 1px );
+				}
+				&.btn-lg {
+					margin: 6px 5px;
+					@include vertical-padding( 8px );
+				}
+			}
+		}
+		
+	}
+	
+	@media (max-width: $grid-float-breakpoint-max) {
+		.corset .navbar-collapse { @include horizontal-margin( -10px ); }
+	}
+	
+	&.navbar-xs { @include sized-navbar( 30px ); }
+	&.navbar-sm { @include sized-navbar( 40px ); }
+	&.navbar-lg { @include sized-navbar( 60px ); }
+	&.navbar-xl { @include sized-navbar( 80px ); }
+	
+}
+
+
+body, #body, #container, .main-content, .main_content {
+	
+	&.fixed-nav-xs { padding: 30px 0 0; }
+	&.fixed-nav-sm { padding: 40px 0 0; }
+	&.fixed-nav    { padding: 50px 0 0; }
+	&.fixed-nav-lg { padding: 60px 0 0; }
+	&.fixed-nav-xl { padding: 80px 0 0; }
+	
+}
+
+
+
+
 @media (max-width: $grid-float-breakpoint) {
 	.navbar {
 		&.navbar-slidebar {
@@ -54,6 +117,10 @@
 			
 			&.fixed-top .navbar-collapse, &.navbar-fixed-top .navbar-collapse {
 				top: 50px;
+				&.navbar-xs { top: 30px; }
+				&.navbar-sm { top: 40px; }
+				&.navbar-lg { top: 60px; }
+				&.navbar-xl { top: 80px; }
 			}
 		}
 	}

data/vendor/assets/stylesheets/magic/helper/_divider.scss

@@ -1,5 +1,7 @@
 .divider {
 	display: block; position: relative;
+	padding: 0;
+	// margin: floor($line-height-computed / 2) 0;
 	background: inherit;
 	text-align: center;
 	& > * {
@@ -11,42 +13,68 @@
 		&.dark { background: $dark-bg; }
 		&.main { background: $main-bg; }
 		&.soft { background: $main-bg; }
-		
 	}
 	&:after {
 		display: block; position: absolute; content: "";
 		margin: -1px 0 0; padding: 0;
 		top: 50%; height: 0;
 		left: 0; right: 0;
-		border-top: solid 1px #ccc;
-		border-bottom: solid 1px $white;
 		z-index: 1;
 	}
 }
 
+hr {
+	display: block; position: relative;
+	// margin: floor($line-height-computed / 2) 0;
+	padding: 0;
+	height: 0;
+	border: none;
+}
+
+hr, .divider { margin: $line-height-computed 0; }
+hr, .divider:after {
+	border-top: solid 1px $main-border-color;
+	border-bottom: solid 1px $white;
+}
+
+
 .section {
-	.divider {
-		& > * { background: $main-bg; }
-	}
-	hr {
-		display: block; position: relative;
-		margin: 10px 0; padding: 0;
-		height: 0;
-		border: none;
-		border-top: solid 1px #ccc;
+	
+	.divider & > * { background: $main-bg; }
+	hr, .divider:after {
+		border-top: solid 1px $main-border-color;
 		border-bottom: solid 1px $white;
 	}
+	
+	
 
     &.dark {
-        background: $dark-bg;
-		.divider > * { background: $dark-bg; }
-    }
+		.divider & > * { background: $dark-bg; }
+		hr, .divider:after {
+			border-top: solid 1px $gray;
+			border-bottom: solid 1px $white;
+		}
+	}
 	&.bright {
-		background: $white;
-		.divider > * { background: $white; }
+		.divider & > * { background: $bright-bg; }
+		hr, .divider:after {
+			border-top: solid 1px $main-border-color;
+			border-bottom: solid 1px $white;
+		}
+	}
+	&.brand {
+		.divider & > * { background: $brand-bg; }
+		hr, .divider:after {
+			border-top: solid 1px $main-border-color;
+			border-bottom: solid 1px $white;
+		}
 	}
-	&.brand { 
-		background: $brand-color; 
-		.divider > * { background: $brand-color; }
+	&.soft {
+		.divider & > * { background: $soft-bg; }
+		hr, .divider:after {
+			border-top: solid 1px $main-border-color;
+			border-bottom: solid 1px $white;
+		}
 	}
+	
 }

data/vendor/assets/stylesheets/magic/layout/_section.scss

@@ -8,10 +8,11 @@
     z-index: 1;
 	font-size: $font-size-base;
 	.corset, .container { background: inherit; }
+	
     
-    h1, h2, h3, h4, h5, h6, p {
-        margin-bottom: 10px;
-    }
+    // h1, h2, h3, h4, h5, h6, p {
+    //     margin-bottom: 10px;
+    // }
     
     &.shine-top {
         overflow: hidden;
@@ -57,39 +58,24 @@
 	&.fatter { padding-top: 120px; padding-bottom: 120px; }
 	
     
-	// @include all_inputs { background: $white; }
+	@include all_form_elements { background: $white; }
 	
-	.divider {
-		
-		span { background: $main-bg; }
-	}
-	hr {
-		display: block; position: relative;
-		margin: 10px 0; padding: 0;
-		height: 0;
-		border: none;
-		border-top: solid 1px #ccc;
-		border-bottom: solid 1px $white;
-	}
-
     &.dark {
-        background: $dark-bg;
-		.divider span { background: $dark-bg; }
-        .three-previews .preview { border-color: $main-border-color; }
-		input.half, textarea.half, textarea { background: $white; }
-		@include all_inputs {
-			background: $white;
-		}
+		background: $dark-bg;
+		.three-previews .preview { border-color: $main-border-color; }
+		@include all_form_elements { background: $white; }
     }
 	&.bright {
-		background: $white;
-		.divider span { background: $white; }
-		@include all_inputs { background: $main-bg; }
-		textarea { background: $dark-bg; }
+		background: $bright-bg;
+		@include all_form_elements { background: $main-bg; }
 	}
 	&.brand { 
 		background: $brand-color; 
-		.divider span { background: $brand-color; }
+		@include all_form_elements { background: $white; }
+	}
+	&.soft { 
+		background: $soft-bg; 
+		@include all_form_elements { background: $white; }
 	}
     &.blank { background: transparent; }
 
@@ -106,6 +92,19 @@
 			small { color: #999; }
 		}
 	}
+	
+	
+	
+	
+	// kill margin of child elements, to avoid unwanted sizing
+	&, & > .corset, & > .container {
+		& > *, & > .row, & > .row > *, & > .row > * > * {
+			&:first-child { margin-top: 0; }
+			&:last-child { margin-bottom: 0; }
+		}
+	}
+	
+	
 }
 
 
@@ -122,8 +121,9 @@
 	
 	.section {
 		.half, .btn.half, input.half, select.half, textarea.half {
-		margin: 0 auto 10px;
-		width: 50%;
+			// margin: 0 auto 10px;
+			@include horizontal-margin( auto );
+			width: 50%;
 		}
 	}
 	
@@ -133,7 +133,8 @@
 	
 	.section {
 		.half, .btn.half, input.half, select.half, textarea.half {
-			margin: 0 auto 10px;
+			// margin: 0 auto 10px;
+			@include horizontal-margin( auto );
 			width: 40%;
 		}
 	}

data/vendor/assets/stylesheets/magic/lib/_helper.scss

@@ -109,3 +109,71 @@
     background-color: $color;
   }
 }
+
+
+
+@mixin sized-navbar( $navHeight: 50px ) {
+	$padHorizontal: floor(($navHeight - $line-height-computed) / 2);
+	$lineHeight: $navHeight - $padHorizontal * 2;
+	
+	height: $navHeight + 1;
+	min-height: $navHeight + 1;
+	
+	.navbar-brand {
+		padding: $padHorizontal $navbar-padding-horizontal;
+		line-height: $lineHeight;
+		height: $navHeight;
+	}
+	.navbar-header { height: #{$navHeight}; }
+	
+	.navbar-toggle {
+		@if ( 16px + 14 ) > ($navHeight - 5) {
+			margin: 4px 15px;
+			@include vertical-padding( $padHorizontal - 3px );
+			line-height: 16px;
+		} @else {
+			margin: #{$padHorizontal - 6px} 15px;
+			@include vertical-padding( 7px );
+			line-height: 16px;
+		}
+	}
+	
+	.navbar-nav {
+		// a:not(.btn) { }
+		& > li > a, & > a  {
+			padding: $padHorizontal $navbar-padding-horizontal;
+			line-height: $lineHeight;
+			
+			&.btn {
+				@if ($lineHeight + 10) > ($navHeight - 5) {
+					margin: 4px 5px;
+					@include vertical-padding( $padHorizontal - 5px );
+					line-height: $lineHeight;
+				} @else {
+					margin: #{$padHorizontal - 6px} 5px;
+					@include vertical-padding( 5px );
+					line-height: $lineHeight;
+					
+					@if ($lineHeight + 16) < ($navHeight - 5) {
+						&.btn-lg {
+							margin: #{$padHorizontal - 9px} 5px;
+							@include vertical-padding( 8px );
+						}
+					}
+					
+					&.btn-sm {
+						margin: #{$padHorizontal - 4px} 5px;
+						@include vertical-padding( 3px );
+					}
+					&.btn-xs {
+						margin: #{$padHorizontal - 2px} 5px;
+						@include vertical-padding( 1px );
+					}
+					
+				}
+			}
+		}
+	}
+}
+
+