magic_stylez 0.0.0.1 → 0.0.0.2

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

@@ -0,0 +1,70 @@
+.divider {
+	display: block; position: relative;
+	background: inherit;
+	text-align: center;
+	span {
+		display: inline-block; position: relative;
+		margin: 0 auto; padding: 0 15px;
+		background: inherit;
+		z-index: 3;
+		&.white-bg { background: #fff; }
+	}
+	&:after {
+		display: block; position: absolute; content: "";
+		margin: 0; padding: 0;
+		top: 50%; height: 1px;
+		left: 0; right: 0;
+		background: #ccc;
+		z-index: 1;
+	}
+}
+
+.dot {
+	display: block; display: inline-block; position: relative;
+	width: 10px; height: 10px;
+	@include border-radius( 15px );
+	border: solid 1px $main-border-color;
+	&.ok { background: #55b8f7; border: solid 1px darken( #55b8f7, 10% ); }
+	&.warning { background: #f9a538; border: solid 1px darken( #f9a538, 10% ); }
+}
+
+
+.number_dot {
+	display: inline-block;
+	height: 92px;
+	line-height: 82px;
+	width: 92px;
+	text-align: center;
+	@include border-radius( 100px );
+	@include box-shadow (inset 0 1px 1px 0 rgba(51,102,153,0.4));
+	text-shadow: 0 2px rgba(51,102,153,0.4);
+	border: solid 5px #fff;
+	color: #fff;
+	background-color: $pink;
+	font-size: 40px;
+	font-weight: 800;
+	margin: 0 auto 10px;
+}
+
+
+.striked {
+	display: inline-block;
+	position: relative;
+	&:before, &:after {
+		display: block; position: absolute; content: "";
+		margin: 0; padding: 0;
+	}
+	&:before {
+		top: -10px; right: -10px; bottom: -6px; left: -8px;
+		background:transparent image-url('magic/helper/crossed.png') center center no-repeat;
+		background-size: contain;
+	}
+	&:after {
+		bottom: 100%;
+		left: 42%;
+		content: attr(data-text);
+		color: #369;
+		font-size: 90%;
+		font-style: italic;
+	}
+}

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

@@ -0,0 +1,18 @@
+.feature-icon {
+	margin: 0 auto;
+	$that_size: 90px;
+	width: $that_size; height: $that_size;
+	@include border-radius($that_size);
+	border: solid 5px transparentize($orange, 0.5);
+	img { max-width: 80%; margin: 10%; }
+	i {
+		display:block; position: absolute;
+		top: -1px; right: -4px;
+		background: $orange;
+		color: #fff;
+		@include border-radius(20px);
+		width: 24px; height: 24px;
+		line-height: 24px;
+		font-size: 18px;
+	}
+}

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

@@ -0,0 +1,48 @@
+.panel-task {
+	.panel-heading {
+		padding: 0;
+		overflow: hidden;
+		@include border-radius(0);
+		background: #fff;
+		.panel-title {
+			display: block; position: relative;
+			overflow: hidden;
+			line-height: 50px;
+			font-size: 18px;
+			color: #656565;
+			@include border-radius(0);
+			.cell.number, .cell.state-icon {
+				width: 50px;
+				text-align: center;
+			}
+			.cell.number {
+				background: $brand-color;
+				font-weight: bold;
+				color: #fff;
+				font-size: 24px;
+			}
+			.cell.text {
+				padding: 0 20px;
+				text-align: left;
+			}
+			.cell.state-icon { color: #fff; }
+		}
+	}
+	.panel-collapse {
+		.panel-body {
+			p { text-align: left; }
+		}
+	}
+	&.disabled  {
+		.panel-title {
+			.cell.number { background: lighten($brand-color, 20%); }
+		}
+	}
+	&.finished  {
+		.panel-title {
+			cursor: default;
+			.cell.number { background: #ccc; }
+			.cell.state-icon { color: $brand-color; }
+		}
+	}
+}

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

@@ -0,0 +1,74 @@
+.pic, .pic-list, .pic-list > li, .pic-list > li > *, .pic-list .pic, 
+.pic-list .facts, .pic-list .facts .head, .pic-list .facts .body {
+	display: block; position: relative;
+	margin: 0; padding: 0;
+}
+
+.pic {
+	overflow: hidden;
+	img {
+		max-width: 100%; max-height: 100%;
+		vertical-align: top;
+	}
+	&.bordered { border: solid 1px $main-border-color; }
+	&.rounded { @include border-radius(3px); }
+	&.round, &.initials {
+		@include border-radius( 500px );
+		img { @include border-radius( 500px ); }
+	}
+}
+
+
+.pic-list {
+	list-style: none;
+	& > li {
+		margin: 0;
+		border: none;
+		border-bottom: solid 1px $main-border-color;
+		&:last-child { border-bottom: none; }
+		& > * {
+			padding: 5px 0;
+			@include clearfix;
+			.pic  {
+				width: 50px;
+				border: solid 1px $main-border-color;
+				float: left;
+				img {
+					max-width: 100%;
+					width: 100%;
+				}
+			}
+			.facts {
+				padding: 5px 0;
+				margin-left: 60px;
+				.head {
+					line-height: 20px;
+					font-size: 13px;
+					font-weight: bold;
+				}
+				.body {
+					line-height: 20px;
+					// font-size: 15px;
+					font-weight: normal;
+				}
+			}
+		}
+	}
+}
+
+
+.box > .body > .pic-list {
+	margin: -10px;
+}
+
+
+// responsive background:
+
+// background-color: rgba(255,255,255,.50);
+// background-image: image-url("shiftchange_black.png");
+// background-position: center center;
+// background-repeat: no-repeat;
+// background-size: contain;
+
+
+

data/vendor/assets/stylesheets/magic/icons/magicons.scss

@@ -138,6 +138,7 @@ ul.icons {
   }
 }
 
+
 .#{$magicons-class-name}-close-round:before             { content: "\f001"; }
 .#{$magicons-class-name}-ok-round:before                { content: "\f002"; }
 .#{$magicons-class-name}-minus-round:before             { content: "\f003"; }
@@ -702,5 +703,3 @@ ul.icons {
 .#{$magicons-class-name}-layout-workspace:before   { content: "\f30a"; }
 
 
-
-

data/vendor/assets/stylesheets/magic/icons/orderlifticons.scss

@@ -1,11 +1,12 @@
 //** Load fonts from this directory.
-$olicons-font-path: "magic/" !default;
+$olicons-font-path: "magic/";
 //** File name for all font files.
-$olicons-font-name: "orderlifticons-webfont" !default;
+// $olicons-font-name: "orderlifticons-webfont" !default;
+$olicons-font-name: "newmagicons-regular-webfont";
 //** Element ID within SVG icon file.
-$olicons-font-svg-id: "orderlifticonsregular" !default;
+$olicons-font-svg-id: "orderlifticonsregular";
 
-$olicons-class-name: "olicons" !default;
+$olicons-class-name: "olicons";
 
 
 @font-face {
@@ -233,6 +234,47 @@ $olicons-class-name: "olicons" !default;
 .#{$olicons-class-name}-gift:before { content: "\f101"; }
 
 
+/* New Stuff .. 22.01.2014 */
+.#{$olicons-class-name}-auge:before { content: "\f102"; }
+.#{$olicons-class-name}-inventar:before { content: "\f103"; }
+.#{$olicons-class-name}-analytics-alt:before { content: "\f104"; }
+.#{$olicons-class-name}-settings-alt:before { content: "\f105"; }
+.#{$olicons-class-name}-slidebar:before { content: "\f106"; }
+.#{$olicons-class-name}-info-circle:before { content: "\f107"; }
+.#{$olicons-class-name}-product-circle:before { content: "\f108"; }
+.#{$olicons-class-name}-pos-circle:before { content: "\f109"; }
+.#{$olicons-class-name}-user:before { content: "\f10a"; }
+.#{$olicons-class-name}-calendar:before { content: "\f10b"; }
+.#{$olicons-class-name}-glass:before { content: "\f10c"; }
+.#{$olicons-class-name}-trash:before { content: "\f10d"; }
+.#{$olicons-class-name}-resize:before { content: "\f10e"; }
+
+
+.#{$olicons-class-name}-product-alt:before { content: "\f111"; }
+.#{$olicons-class-name}-circle-plus:before { content: "\f112"; }
+.#{$olicons-class-name}-circle-times:before { content: "\f113"; }
+.#{$olicons-class-name}-circle-minus:before { content: "\f114"; }
+.#{$olicons-class-name}-circle-ok:before { content: "\f115"; }
+.#{$olicons-class-name}-auge-alt:before { content: "\f116"; }
+.#{$olicons-class-name}-inventar-alt:before { content: "\f117"; }
+.#{$olicons-class-name}-analytics-alt:before { content: "\f118"; }
+.#{$olicons-class-name}-euro-circle:before { content: "\f119"; }
+.#{$olicons-class-name}-reports:before { content: "\f11a"; }
+.#{$olicons-class-name}-tasks:before { content: "\f11b"; }
+.#{$olicons-class-name}-vcard:before { content: "\f11c"; }
+.#{$olicons-class-name}-catalog:before { content: "\f11d"; }
+.#{$olicons-class-name}-flyer:before { content: "\f11e"; }
+
+
+
+
+
+
+
+// T E S T normal signs
+.#{$olicons-class-name}-euro:before { content: "\20AC"; }
+
+
 
 
 // .#{$olicons-class-name}-:before { content: "\f001"; }

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

@@ -0,0 +1,229 @@
+//## fixed Navbar 
+//
+body { 
+	padding: 0;
+	&.blank { padding: 0; }
+	&.app { padding: 50px 0 50px; }
+	#body { padding:0; margin:0; }
+}
+
+#fixedNav {
+	position: fixed;
+	// let graphic card render header:
+	@include transform( translateZ( 0 ) );
+	top: 0; left: 0; right: 0;
+	@include border-radius(0);
+	z-index: 999;
+	min-height: 30px;
+	background: #333;
+	// background: #727270;
+	color: #fff;
+	.navbar-brand {
+		padding: 0;
+		height: 40px;
+		&.logo {
+			width: 150px;
+			overflow: hidden;
+			text-indent: -1000px;
+			background-color: transparent;
+			background-image: image-url('magic/arrows/arrow1.png');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+		}
+	}
+	
+	
+	.full-links {
+		border: solid 1px #000;
+		@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.25) );
+		ul.nav > li {
+			& > a {
+				padding: 10px;
+				line-height: 20px;
+				&:hover {
+					background: #000 !important;
+					color: #fff !important;
+				}
+			}
+			form {
+				padding: 4px 0;
+			}
+			&.active a { background: #000; color: $brand-color; }
+		}
+	}
+	.bubble-links {
+		background: #fff;
+		padding: 0 42px;
+		ul.nav.navbar-nav > li {
+			padding: 8px;
+			& > a {
+				padding: 2px 12px;
+				line-height: 20px;
+				color: #777;
+				&:hover {
+					background: transparent;
+					color: #333;
+				}
+				&.btn {
+					color: #fff;
+					&:hover {
+						background: $brand-color;
+					}
+				}
+			}
+			&.active > a, &.open > a {
+				background: transparent;
+				color: $brand-color;
+			}
+		}
+		ul.nav.navbar-nav.navbar-left > li {
+			padding: 8px;
+			& > a {
+				border: solid 1px transparent;
+				@include border-radius(15px);
+				&:hover {
+					background: transparent !important;
+					color: #333 !important;
+					border: solid 1px $main-border-color;
+				}
+			}
+			&.active > a, &.open > a {
+				background: transparent;
+				color: $brand-color;
+				border: solid 1px $brand-color;
+			}
+		}
+	}
+	.bubble-links, .navbar-brand {
+		.navbar-nav > li > .dropdown-menu {
+			margin-top: 3px;
+			border-radius: 3px;
+			li a { color: #333; }
+		}
+	
+		li.dropdown > a.dropdown-toggle {
+			padding-top: 5px;
+			padding-bottom: 5px;
+			line-height: 30px;
+			color: #fff;
+			&:hover {
+				background: #000;
+				color: #fff;
+				@include box-shadow(none);
+			}
+			& > * { vertical-align: middle; &.avatar {vertical-align: top; }}
+		}
+		li.dropdown.open > a.dropdown-toggle {
+			background: #000;
+			color: $brand-color;
+		}
+	}
+}
+
+
+
+//## Aside-Navigation
+#nav-aside {
+	display: block; position: fixed;
+	@include transform( translateZ( 0 ) );
+	margin: 0; padding: 0;
+	
+	right: 0; left: 0; bottom: 0;
+	background: #e1e1e1;
+	z-index: 99;
+	.inner-aside {
+		height: 100%;
+		border: solid 1px #ccc;
+	}
+	.aside-btn {
+		display: block; position: relative;
+		margin: 0 -1px; padding: 12px 0 8px;
+		width: 50px;
+		line-height: 30px;
+		text-align: center;
+		font-size: 22px;
+		
+		// @include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42) );
+		border: none;
+		border: solid 1px #ccc;
+		border-top: solid 1px rgba(255,255,255,.42);
+		
+		color: #555;
+		text-shadow: 0 1px 0 rgba( 255,255,255,.42 );
+		
+		&:hover {
+			color: $brand-color;
+			text-decoration: none;
+		}
+		&:active, &.active {
+			background: $brand-color;
+			color: #fff;
+			@include antialiased_text;
+			border: solid 1px darken($brand-color, 15%);
+			@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42) );
+			text-shadow: 0 1px 2px rgba( 0,0,0,.42 );
+		}
+		.bubble-counter {
+			display: block; position: absolute;
+			padding: 0 5px; margin: 0;
+			top: 3px; left: 27px;
+			line-height: 14px;
+			font-size: 10px;
+			background: #cc4246;
+			@include border-radius( 2px );
+			color: #fff;
+			text-shadow: 0 1px 1px rgba( 0,0,0,.20 );
+		}
+	}
+}
+
+
+body.front { padding: 42px 0 0; }
+
+
+
+
+// # # #  R E S P O N S I V E - S T E P S  # # # # # # # # # # # # # # # # # # # # # # # # # # # 
+@include responsiveStep-xs-only {
+	.sppt-navbar .logo-cell {display: none;}
+	#nav-aside .inner-aside {
+		display: table;
+		table-layout:fixed;
+		width: 100%;
+		.aside-btn {
+			display: table-cell;
+			width: auto;
+			// border: none;
+			// border-right: solid 1px #ccc;
+			// &:last-child { border-right:  none; }
+			// &:hover { border-bottom: solid 2px #999; }
+			// &:active, &.active { border-bottom: solid 2px $brand-color; }
+		}
+	}
+}
+@include responsiveStep-sm {
+	#fixedNav.full-links .navbar-header > .navbar-brand {display: none;}
+	body.app { 
+		padding: 42px 0 0;
+		#body { padding:0; margin-left: 50px; }
+		#fixedNav .container-fluid { padding: 0 20px 0 50px;}
+	}
+	
+	#nav-aside {
+		top: 0; right: auto; padding: 42px 0 0;
+		.aside-btn {
+			// border: none;
+			// border-bottom: solid 1px #ccc;
+			&:last-child { @include box-shadow( 0 1px 0 0 rgba(255,255,255,.42) ); }
+			// &:hover { border-right: solid 2px #999; }
+			// &:active, &.active { border-right: solid 2px $brand-color; }
+		}
+	}
+}
+@include responsiveStep-md {
+	
+}
+@include responsiveStep-lg {
+	
+}