magic_stylez 0.0.0.1 → 0.0.0.2

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

@@ -0,0 +1,143 @@
+//## Signup/Login Forms
+//
+.centered-form {
+	text-align: center;
+	max-width: 350px;
+	padding: 15px;
+	margin: 10px auto;
+	h2 { margin: 0 0 15px; }
+	.form-control {
+		position: relative;
+		@include border-radius(0);
+		margin: 0 0 -1px;
+		padding: 10px;
+		font-size: 16px;
+		
+		
+		
+		height: auto;
+		&:first-child { @include border-top-radius(3px); }
+		&:last-child { @include border-bottom-radius(3px); margin: 0 0 20px; }
+		@include placeholder {
+			color: #ccc;
+		}
+		&:focus, &:active { z-index: 99; }
+	}
+}
+
+
+
+// for checkbox and radio fields
+.input-group.labeled {
+	.input-group-addon {
+		border-color: transparent;
+		background: none;
+	}
+	label {
+		position: relative;
+		z-index: 2;
+		float: left;
+		width: 100%;
+		margin-bottom: 0;
+		border-color: transparent;
+		background: none;
+		text-align: left;
+		@include box-shadow( none );
+	}
+}
+
+
+// error inputs
+.form-control > input.form-control {
+	margin: 0 !important;
+	padding: 0;
+	border: none;
+	background: transparent;
+	@include box-shadow(none);
+	@include placeholder { color: red; }
+}
+
+.form-control.error > input.form-control { color: red; }
+
+.field_with_errors input.form-control {
+	color: red;
+	border: solid 1px red;
+}
+
+form.corset, .form {
+	label {
+		display: block; position: relative;
+		margin: 0; padding: 7px 0;
+		line-height: 20px;
+		text-align:left;
+	}
+}
+
+
+// Inputs with Icons (orderlifticons)
+.icon_field {
+	display: block; position: relative;
+	margin: 0; padding: 0;
+	&:after {
+		display: block; position: absolute;
+		margin: 0; padding: 0;
+		left: 2px; top: 0; bottom: 0; 
+		width: 24px; line-height: 34px;
+		text-align: center; vertical-align: middle;
+		content: "\e003";
+		z-index: 5;
+		color: #aaa;
+		text-shadow: 0 1px 1px #fff;
+		font-family: 'Glyphicons Halflings'; font-weight: normal;  font-style: normal; 
+		font-size: 14px;
+	}
+	// input {
+	// 	display: block; position: relative;
+	// 	margin: 0; padding-left: 32px;
+	// 	@include box-sizing(border-box);
+	// 	width: 100%; height: 30px;
+	// 	@include placeholder_styles {
+	// 		color: rgba(0,0,0,.20);
+	// 	}
+	// }
+	input, input.form-control { padding-left: 28px; }
+	&.half { width: 50%; margin: 0 auto; }
+	&.fat {
+		input {
+	        padding: 11px 20px 9px 34px;
+	        height: 42px;
+	        font-size: 18px;
+			@include placeholder {
+				font-size: 18px;
+				color: rgba(0,0,0,.20);
+			}
+			@include border-radius(0);
+	
+		}
+		&:after {
+			left: 2px; top: 0; bottom: 0; 
+			width: 30px; line-height: 44px;
+			content: "\f021";
+			text-shadow: 0 1px 0 rgba(0,0,0,.01);
+			font-size: 18px;
+		}
+	}
+	// glyphicons
+	&.search:after 		{ content: "\e003"; }
+	&.mail:after 		{ content: "\2709"; }
+	&.password:after 	{ content: "\e033"; }
+	&.user:after 		{ content: "\e008"; }
+	&.location:after 	{ content: "\e062"; }
+	&.globe:after 		{ content: "\e135"; }
+	&.filter:after 		{ content: "\e138"; }
+	&.euro:after 		{ content: "\20ac"; }
+	&.dollar:after 		{ content: "\e148"; }
+	
+	
+	&.euro, &.dollar {
+		input { text-align: right; }
+	}
+	
+}
+
+

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

@@ -0,0 +1,368 @@
+#header, #main_header, #sub_header, #mainLogo, .phone-box, .phone-box .icon, .phone-box .info_line, .phone-box .number_line,
+.rating, .ratingLogo, .ratingStars, .ratingWrapper,
+.immoscout_recommendation, .immoscout_recommendation .text, .immoscout_recommendation .logo,
+#notices, #notices .alert, #notices .notice, #notices .close_btn,
+.paypal_logo, .sofortueberweisung_logo, .cash_logo
+{
+	display: block; position: relative; margin: 0; padding: 0;
+}
+
+
+
+#mainLogo {
+	margin: 0 auto;
+	height: 50px;
+	// width: 130px;
+	line-height: 50px;
+	// background: transparent image-url("tmp/Logo.png") center center no-repeat;
+	// background-size: contain;
+	// text-indent: -1000px;
+	overflow: hidden;
+	img { max-height: 40px; }
+	float: none;
+}
+@include responsiveStep-sm {
+	#mainLogo {
+		margin: 0;
+		margin-right: 30px;
+		float: left;
+	}
+}
+
+
+#notices {
+	top: 100px;
+	z-index: 111;
+	.alert, .notice {
+		z-index: 99;
+		padding: 10px 10%;
+		font-size: 20px;
+		line-height: 30px;
+		font-weight: bold;
+		z-index: 111;
+		text-align: center;
+	}
+	.alert { background: rgba(204,0,0,.7); color: #fff; }
+	.notice { background: rgba(0,153,0,.7); color: #fff; }
+	.close_btn {
+		position: absolute;
+		right: 10px; top: 15px;
+		@include squareSize(20);
+		text-align: center;
+		@include border-radius(30px);
+		border: solid 1px #ccc;
+		background: #e5e5e5;
+		&, & i, & i:before {
+			color: #777;
+			line-height: 17px;
+		}
+		line-height: 20px;
+		z-index: 115;
+	}
+}
+// &.logged_in {
+// 	#notices { top: 90px; }
+// }
+
+
+.rating, .immoscout_recommendation, .paypal_logo, .sofortueberweisung_logo, .cash_logo, .logo_lnk {
+	// display: none;
+	display: block; display: inline-block;
+	margin: 0;
+	height: 50px;
+	overflow: hidden;
+	vertical-align: top;
+}
+
+.logo_lnk + .logo_lnk {
+	margin-left: 10px; margin-right: 0;
+	&.pull-right {
+		margin-left: 0; margin-right: 10px;
+	}
+}
+
+
+.rating {
+	// width: 200px;
+	padding-left: 52px;
+	padding-top: 8px;
+	text-align: left;
+	.ratingLogo {
+		width: 44px;
+		left: 0; top: 3px;
+		position: absolute;
+		img { max-width: 100%; vertical-align: top; }
+	}
+	.ratingStars {
+		.ratingWrapper {
+			// background: image-url("tmp/starRatingGray.png") no-repeat scroll left top transparent;
+			height: 18px;
+			width: 100px;
+			.ratingInner {
+				// background: image-url("tmp/starRatingYellow.png") no-repeat scroll left top transparent;
+				height: 18px;
+				width: 100px;
+			}
+	    }
+	}
+}
+.immoscout_recommendation {
+	padding: 9px 0 0;
+	padding-right: 78px;
+	// margin-right: 20px;
+	// width: 210px;
+	// max-width: 200px;
+	.text {
+		text-align: right;
+		max-width: 100px;
+	}
+	.logo {
+		position: absolute;
+		top: 8px; right: 0;
+		img {
+			max-height: 34px;
+		}
+	}
+}
+.paypal_logo, .sofortueberweisung_logo, .cash_logo, .card_logos {
+	padding: 10px 0;
+	img { max-height: 30px; vertical-align: top; }
+}
+.paypal_logo {
+	
+}
+.sofortueberweisung_logo {
+	
+}
+.cash_logo {
+	padding: 10px 5px 10px 45px;
+	line-height: 30px;
+	font-size: 16px;
+	img { position: absolute; left: 0; top: 10px; }
+}
+
+#main-nav-header .rating, #main-nav-header .immoscout_recommendation {
+	padding-right: 20px;
+	margin-right: 10px;
+	border-right: solid 1px #ccc;
+}
+#main-nav-header .rating { margin-right: 20px; }
+
+
+
+
+.rating .ratingText, .immoscout_recommendation .text, .phone-box .info_line {
+	line-height: 16px;
+	font-size: 10px;
+	color: $gray;
+	@include sansRegular;
+}
+
+.navbar-form.navbar-right.hidden-xs {
+	margin: 10px 0 7px 0;
+}
+
+.phone-box {
+	padding: 1px 0 3px 32px;
+	.icon {
+		position: absolute;
+		left: 0; top: 5px;
+		width: 30px; height: 30px;
+		line-height: 30px;
+		font-size: 28px;
+		color: transparentize($blue, .4);
+		span {
+			font-size: 22px;
+			color: transparentize($blue, .4);
+			line-height: 28px;
+			line-height: 25px;
+		}
+	}
+	.info_line {
+		// line-height: 12px;
+	}
+	.number_line {
+		line-height: 18px;
+		font-size: 16px;
+		color: $blue;
+		@include sansBold;
+	}
+}
+
+#header .phone-box {
+	padding: 1px 0 3px 0;
+	.icon { display: none; }
+}
+
+.navbar.navbar-default {
+	border:0px;
+	margin:0px;
+	background-color: rgba(255,255,255,0.0);
+}
+
+@include responsiveStep-sm {
+	#header .phone-box {
+		padding: 1px 0 3px 32px;
+		.icon { display: block; }
+	}
+}
+
+#main-nav li a {
+	padding-left:18px;
+}
+
+#bs-example-navbar-collapse-1, .navbar-form.navbar-right {
+	border: 0px;
+	margin: 0px;
+	padding:0px;
+}
+
+#main-nav-header, #spacing-playcing.nav.navbar-nav, #bs-example-navbar-collapse-1 {
+	max-width:1450px;
+	margin:auto;
+}
+#main-nav-header, #spacing-playcing.nav.navbar-nav, #bs-example-navbar-collapse-1 {
+	@media only screen and (max-width: 1490px) {
+		padding-left:20px;
+		padding-right:20px;
+	}
+}
+
+@media only screen and (max-width: 767px) {
+	.nav.navbar-nav {
+		margin:0px;
+	}
+	.navbar.navbar-default.navbar-fixed-top {
+		@include box-shadow( inset 0 2px 3px 0 rgba(0,0,0,0.35),  0 2px 3px 0 rgba(0,0,0,0.35) );
+		border-bottom: 1px solid rgba(0,102,153,0.80);;
+	}
+}
+
+
+
+
+
+
+// #main_page {
+// 	margin-top:59px;
+// }
+
+#header {
+	position: fixed;
+	font-size: 16px;
+	top: 0; left: 0; right: 0;
+	height: 50px;
+	z-index: 23;
+	background: #fff;
+	@include transform( translateZ( 0 ) );
+	.navbar-toggle { float: left; border: solid 1px transparent; }
+	.nav.navbar-nav {
+		li {
+			padding: 0 5px;
+			a {
+				padding: 15px 10px;
+				}
+			&.small a {
+				padding: 15px 0;
+			}
+			&.current a {
+				color: #369;
+				//font-weight: bold;
+			}
+		}
+		&.navbar-left li { text-transform: uppercase; }
+	}
+	
+	.phone-link .numbr { display: none; }
+}
+
+.phone-link {
+	i { font-size: 18px; color: #369; vertical-align: middle; }
+}
+
+@media only screen and (min-width: 960px) {
+	#header .phone-link .numbr { display: initial; }
+}
+
+
+
+
+#header, #form_header {
+	.locale_toggle {
+		padding: 14px 5px 12px;
+		line-height: 22px;
+		img.flag_img { max-width: 24px; vertical-align: top; }
+		i {
+			font-size: 15px;
+			vertical-align: middle;
+			width: 12px;
+			text-align: right;
+			
+		}
+	}
+}
+
+
+#header .nav.navbar-nav li a {
+	.btn.btn-xs { margin: -2px 0; }
+	.btn.btn-sm { margin: -6px 0; }
+}
+
+
+
+#body { padding-top: 50px; display: block; position: relative; }
+
+
+
+#form_header {
+	display: block; position: relative;
+	margin: -50px 0 0;
+	padding: 20px 0;
+	// background: rgba(51,102,153, .25);
+	background: whitesmoke;
+	.navbar-brand { float: none; display: inline-block;}
+	.btn-sm { margin: 10px 0; }
+	.btn-group { margin: 6px 0;}
+}
+
+#one_two_three {
+	display: block; position: relative;
+	.nmbr {
+		display: block; display: inline-block; position: relative;
+		$sz: 50px;
+		width: $sz; height: $sz; line-height: $sz * .94;
+		background: whitesmoke;
+		font-weight: bold;
+		color: #ccc;
+		font-size: 16px;
+		margin: 0 10px;
+		border: solid 3px #ccc;
+		text-align: center;
+		@include border-radius(75px);
+	}
+	&.one #one { background: #369; color: #fff; }
+	&.two #two { background: #369; color: #fff; }
+	&.three #three { background: #369; color: #fff; }
+}
+
+
+.bg-white {
+	background-color: white;
+}
+
+.phone-box.pull-right.visible-xs {
+	margin: 4px 10px 0 0;
+}
+@media only screen and (max-width: 450px) {
+	.phone-box.pull-right.visible-xs {
+		display:none !important;
+	}
+}
+
+#bs-example-navbar-collapse-1 {
+	overflow:visible;
+}
+
+
+
+