magic_stylez 0.0.0.13 → 0.0.0.19

data/vendor/assets/javascripts/magic/circle_diagram.js.coffee

@@ -0,0 +1,146 @@
+class CircleDiagram
+  
+  constructor: (options) ->
+    @opt      = if options then options else {}
+    @options  = $.extend {}, defaults, @opt
+    # @circle = $(@options.circle)
+    @circle   = @options.circle
+    @el       = @circle.find(@options.el)
+    @percent  = @options.percent
+    @degree   = @options.deg
+    @rotating = @options.rotating
+    @timer    = @options.timer
+    @setup()
+    
+
+
+  defaults =
+    el:             '.inner_half_one'
+    circle:         '.circle-diagram'
+    percent:        0
+    deg:            0
+    rotating:       false
+    precision:      "ungenau"
+    timeStep:       20
+    fastStep:       5
+    slowStep:       50
+    timer:          undefined
+
+
+  rotate: ->
+    @clean_percent
+    @set_rotation @percent
+    @timer = setTimeout(->
+      ++@percent
+      @rotate()
+    , @options.timeStep)
+
+
+  rotate_to: (value) =>
+    @clean_percent
+    # console?.log? "rotate_to ::: #{@percent}% (#{@degree}°) -- #{value}"
+    deg = parseInt( 360 / 100 * value )
+    @set_rotation @percent, @degree
+    unless @degree is deg
+      if @degree < deg
+        new_value = @degree + 1
+        timerStep = deg - @degree
+      else
+        new_value = @degree - 1
+        timerStep = @degree - deg
+      @degree = new_value
+      if @options.precision is "genau"
+        @percent = ( Math.round( new_value / 360 * 100 * 10 ) / 10 ).toFixed(1)
+      else
+        @percent = parseInt( new_value / 360 * 100 )
+      @timer = setTimeout(=>
+        @rotate_to(value)
+      , @getTimeStep(timerStep))
+    else
+      clearTimeout @timer
+      @set_rotation value, @degree
+      
+
+
+  set_rotation: (value, deg) =>
+    circ = deg + 90
+    
+    # $elie.css WebkitTransform: "rotate(" + circ + "deg)"
+    @el.css "-webkit-transform": "rotate(" + circ + "deg)"
+    @el.css "-moz-transform": "rotate(" + circ + "deg)"
+    @el.css "-ms-transform": "rotate(" + circ + "deg)"
+    @el.css "-o-transform": "rotate(" + circ + "deg)"
+    @el.css "transform": "rotate(" + circ + "deg)"
+    
+    @circle.attr "data-deg", deg
+    @circle.attr "data-percent", value
+    
+    if @options.precision is "genau"
+      @circle.find(".middle_full").html (Math.round(value * 10) / 10).toFixed(1) + " %"
+    else
+      @circle.find(".middle_full").html parseInt(value) + " %"
+      
+    if deg >= 180
+      @circle.addClass "halfplus"
+    else
+      @circle.removeClass "halfplus"
+
+  clean_percent: ->
+    @percent = @percent - 100 if @percent > 100
+    @percent
+
+
+
+  setup: ->
+    percent = parseInt( @circle.attr("data-percent") ) or 0
+    @rotate_to percent unless percent is @percent
+
+
+
+
+  getTimeStep: (valu) ->
+    if valu > 60
+      @options.fastStep
+    else if valu > 18
+      @options.timeStep
+    else
+      @options.slowStep
+
+
+window.CircleDiagram = CircleDiagram
+
+# $(".animate_knopf").click ->
+#   console.log "klicked"
+#   if rotating
+#     clearTimeout timer
+#     rotating = false
+#   else
+#     rotate()
+#     rotating = true
+# 
+# $(".set_deg_knopf").click ->
+#   console.log "klicked"
+#   rotate_to parseInt($("#wished_deg").val())
+#   $("#wished_percent").val $("#wished_deg").val() / 360 * 100
+# 
+# $(".set_percent_knopf").click ->
+#   console.log "klicked"
+#   field = $(@).closest("tr").find(".wished_percent")
+#   newval = parseInt( field.val() )
+#   window.circles[ parseInt( field.attr("data-circle") ) ].rotate_to newval
+
+
+
+
+
+# $ ->
+#   if $('.circle-diagram').length > 1
+#     window.circles = {}
+#     count = 0
+#     $('.circle-diagram').each ->
+#       window.circles[count] = new CircleDiagram( circle: $(@) )
+#       count = count + 1
+#   else if $('.circle-diagram').length > 0
+#     window.circleDiagram = new CircleDiagram( circle: $('.circle-diagram') )
+
+

data/vendor/assets/javascripts/magic/collapse.js.coffee

@@ -0,0 +1,11 @@
+$ ->
+  $("body").on "click", ".navbar-slidebar .navbar-toggle", (ev) ->
+    ev.preventDefault()
+    $(@).closest(".navbar-slidebar").find(".navbar-collapse").toggleClass("on")
+    false
+
+  # $("body").on "click", ".navbar .slidebar-toggle", (ev) ->
+  #   ev.preventDefault()
+  #   header = $(@).closest(".navbar-slidebar")
+  #   slidebar = header.find(".navbar-collapse")
+  #   slidebar.toggleClass("on")

data/vendor/assets/javascripts/magic/helper.js.coffee

@@ -0,0 +1,19 @@
+@to_currency = ( number ) ->
+  unless isNaN number
+    (Math.round( parseFloat( number ) * 100 ) / 100).toFixed(2)
+  else
+    (0).toFixed(2)
+
+@to_euro = (number) ->
+  "#{to_currency(number)} €"
+
+@to_dollar = (number) ->
+  "$ #{to_currency(number)}"
+
+
+$ ->
+  
+  # replace komma with dot (german uses komma instead of dot)
+  $("body").on "keyup", "input.number_field", ->
+    if jQuery(@).val().indexOf(",") isnt -1
+      jQuery(@).val( jQuery(@).val().replace(',','.')  )

data/vendor/assets/javascripts/magic-min.js.coffee

@@ -0,0 +1,22 @@
+## Load bootstrap
+#= require bootstrap/affix
+#= require bootstrap/alert
+#= require bootstrap/button
+#= require bootstrap/carousel
+#= require bootstrap/collapse
+#= require bootstrap/dropdown
+#= require bootstrap/tab
+#= require bootstrap/transition
+#= require bootstrap/scrollspy
+#= require bootstrap/modal
+#= require bootstrap/tooltip
+#= require bootstrap/popover
+
+## Load magic
+#= require magic/helper
+#= require magic/collapse
+
+icon = (icn) ->
+  "<i class='icon icon-#{icn}'></i>"
+
+    

data/vendor/assets/javascripts/magic-stylez.js.coffee

@@ -12,6 +12,11 @@
 #= require bootstrap/tooltip
 #= require bootstrap/popover
 
+## Load magic
+#= require magic/circle_diagram
+#= require magic/helper
+#= require magic/collapse
+
 icon = (icn) ->
   "<i class='icon icon-#{icn}'></i>"
 

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

@@ -1,5 +1,9 @@
-.box {
+.box, .box > .header, .box > .body, .box > .pic {
 	display: block; position: relative;
+	margin: 0; padding: 0;
+}
+
+.box {
 	margin: 0 0 20px; padding: 10px;
 	border: solid 1px #ccc;
 	@include border-radius(3px);
@@ -12,7 +16,7 @@
 	
 	
 	& > .pic {
-		padding: 0; margin: 0 10px 0 -100px;
+		margin: 0 10px 0 -100px;
 		width: 100px;
 		float: left;
 		border: solid 1px #ccc;
@@ -20,9 +24,14 @@
 	& > .header {
 		padding: 5px 10px 5px;
 		border-bottom: solid 1px #ccc;
-		color: #a0c775;
-		line-height: 30px;
-		font-size: 18px;
+		
+		&, h1, h2, h3, h4, h5, h6, p, span, .h1, .h2, .h3, .h4, .h5, .h6 {
+			margin: 0; padding: 0 5px 2px;
+			color: #a0c775;
+			line-height: 30px;
+			font-size: 18px;
+		}
+		
 		&.blank { border-bottom: solid 1px transparent; }
 		i, i:before {
 			color: #999;

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

@@ -0,0 +1,285 @@
+@mixin btn_icn_width( $lineHeight: 20px, $verticalPadding: 10px ) {
+	$wdth: 5 + $lineHeight + $verticalPadding * 2;
+	min-width: $wdth;
+	max-width: $wdth;
+}
+
+
+.btn-splited, .btn-divided {
+	display: table;
+    width: auto;
+	width: 100%;
+	// margin: 0 0 10px; 
+	padding: 0;
+	& > * {
+		display: table-cell; position: relative;
+		padding: $padding-base-vertical $padding-base-horizontal;
+		font-size: inherit;
+		line-height: inherit;
+		text-shadow: inherit;
+		color: inherit;
+		width: auto;
+		width: 98%;
+		@include border-left-radius(0);
+		vertical-align: middle;
+		&:first-child { @include border-left-radius($border-radius-base); }
+		&:last-child { @include border-right-radius($border-radius-base); }
+		&.icn { 
+			width: 2%;
+			font-size: $font-size-base * 1.1;
+			@include horizontal-padding(2px);
+			text-align: center;
+			@include btn_icn_width( $line-height-computed, $padding-base-vertical );
+		}
+	}
+	
+	&.btn-lg > * {
+		padding: $padding-large-vertical $padding-large-horizontal;
+		// font-size: $font-size-large;
+		// line-height: $line-height-large;
+		&:first-child { @include border-left-radius($border-radius-large); }
+		&:last-child { @include border-right-radius($border-radius-large); }
+		&.icn { font-size: $font-size-large * 1.1; @include btn_icn_width($line-height-computed-lg, $padding-large-vertical);}
+	}
+	&.btn-sm > * {
+		padding: $padding-small-vertical $padding-small-horizontal;
+		// font-size: $font-size-small;
+		// line-height: $line-height-small;
+		&:first-child { @include border-left-radius($border-radius-small); }
+		&:last-child { @include border-right-radius($border-radius-small); }
+		&.icn { font-size: $font-size-small * 1.1; @include btn_icn_width($line-height-computed-sm, $padding-small-vertical);}
+	}
+	&.btn-xs > * {
+		padding: $padding-xs-vertical $padding-xs-horizontal;
+		// font-size: $font-size-small;
+		// line-height: $line-height-small;
+		&:first-child { @include border-left-radius($border-radius-small); }
+		&:last-child { @include border-right-radius($border-radius-small); }
+		&.icn { font-size: $font-size-small * 1.1; @include btn_icn_width($line-height-computed-xs, $padding-xs-vertical); }
+	}
+	
+	& > .icn {
+		width: 2%;
+		@include horizontal-padding(2px);
+		text-align: center;
+	}
+	
+}
+.btn-divided {
+	& > * {
+		border-right-style: solid;
+		border-right-width: 1px;
+		border-right-color: inherit;
+		@include box-shadow( inset -1px 0 1px 0 rgba(255,255,255,.32) );
+		&:last-child {
+			@include box-shadow( none );
+			border-right: none;
+		}
+	}
+}
+
+// 
+//   Social - Buttons
+// 
+.btn-app, .btn-google, .btn-facebook, .btn-twitter, .btn-paypal,
+.btn-app-nice, .btn-google-nice, .btn-facebook-nice, .btn-twitter-nice, .btn-paypal-nice {
+    color: #fff;
+	vertical-align: middle;
+    &:hover, &:active { color: #fff; }
+}
+
+//.btn-socials {
+//	padding: 5px 22px !important;
+//}
+
+// Flat Colors
+$facebook-color: 	#3b5998;
+$google-color: 		#dd4b39;
+$twitter-color: 	#00aced;
+$paypal-color: 		#12398c;
+$paypal-color: 		#1784cb;
+// Gradient Colors
+$facebook-nice-top:       lighten($facebook-color, 7%);
+$facebook-nice-bottom:    darken($facebook-color, 7%);
+$google-nice-top:         lighten($google-color, 7%);
+$google-nice-bottom:      darken($google-color, 7%);
+$twitter-nice-top:        lighten($twitter-color, 7%);
+$twitter-nice-bottom:     darken($twitter-color, 7%);
+$paypal-nice-top:         #52b9f4;
+$paypal-nice-bottom:      darken(#1784cb, 5%);
+
+
+
+// Flat Buttons
+.btn-facebook {
+	background: $facebook-color;
+	text-shadow: 0 1px 0 darken($facebook-color, 20%);
+	border-color: darken($facebook-color, 10%);
+	&:active {
+		background: darken($facebook-color, 10%);
+	}
+	&:hover {
+		background: darken($facebook-color, 5%);
+		border-color: darken($facebook-color, 15%);
+	}
+}
+.btn-google {
+	background: $google-color;
+	text-shadow: 0 1px 0 darken($google-color, 20%);
+	border-color: darken($google-color, 10%);
+	&:active {
+		background: darken($google-color, 10%);
+	}
+	&:hover {
+		background: darken($google-color, 5%);
+		border-color: darken($google-color, 15%);
+	}
+}
+.btn-twitter {
+	background: $twitter-color;
+	text-shadow: 0 1px 0 darken($twitter-color, 20%);
+	border-color: darken($twitter-color, 10%);
+	&:active {
+		background: darken($twitter-color, 10%);
+	}
+	&:hover {
+		background: darken($twitter-color, 5%);
+		border-color: darken($twitter-color, 15%);
+	}
+}
+.btn-paypal {
+	background: $paypal-color;
+	text-shadow: 0 1px 0 darken($paypal-color, 20%);
+	border-color: darken($paypal-color, 10%);
+	&:active {
+		background: darken($paypal-color, 10%);
+	}
+	&:hover {
+		background: darken($paypal-color, 5%);
+		border-color: darken($paypal-color, 15%);
+	}
+}
+
+
+// Nice Buttons
+.btn-facebook-nice, .btn-google-nice, .btn-twitter-nice, .btn-paypal-nice {
+	color: #fff;
+	@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42), 0 1px 1px 0 rgba(0,0,0,.42) );
+	&.btn-icn, & > .btn-icn {
+		@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42), 0 1px 1px 0 rgba(0,0,0,.42), inset -1px 0 1px 0 rgba(255,255,255,.32) );
+	}
+	&:hover { color: #fff; }
+}
+
+.btn-facebook-nice, .btn-facebook-nice > .btn {
+	@include linear-gradient($facebook-nice-top, $facebook-nice-bottom);
+	text-shadow: 0 1px 0 darken($facebook-nice-bottom, 20%);
+	border-color: darken($facebook-nice-top, 10%);
+	&:active {
+		@include linear-gradient( darken($facebook-nice-top, 10%), darken($facebook-nice-bottom, 10%));
+	}
+	&:hover {
+		@include linear-gradient( darken($facebook-nice-top, 5%), darken($facebook-nice-bottom, 5%));
+	}
+}
+.btn-google-nice, .btn-google-nice > .btn {
+	@include linear-gradient($google-nice-top, $google-nice-bottom);
+	text-shadow: 0 1px 0 darken($google-nice-bottom, 20%);
+	border-color: darken($google-nice-top, 10%);
+	border-bottom-color: darken($google-nice-bottom, 5%);
+	&:active {
+		@include linear-gradient( darken($google-nice-top, 10%), darken($google-nice-bottom, 10%));
+	}
+	&:hover {
+		@include linear-gradient( darken($google-nice-top, 5%), darken($google-nice-bottom, 5%));
+	}
+}
+.btn-twitter-nice, .btn-twitter-nice > .btn {
+	@include linear-gradient($twitter-nice-top, $twitter-nice-bottom);
+	text-shadow: 0 1px 0 darken($twitter-nice-bottom, 20%);
+	border-color: darken($twitter-nice-top, 10%);
+	&:active {
+		@include linear-gradient( darken($twitter-nice-top, 10%), darken($twitter-nice-bottom, 10%));
+	}
+	&:hover {
+		@include linear-gradient( darken($twitter-nice-top, 5%), darken($twitter-nice-bottom, 5%));
+	}
+}
+.btn-paypal-nice, .btn-paypal-nice > .btn {
+	@include linear-gradient($paypal-nice-top, $paypal-nice-bottom);
+	text-shadow: 0 1px 0 darken($paypal-nice-bottom, 20%);
+	border-color: darken($paypal-nice-top, 20%);
+	&:active {
+		@include linear-gradient( darken($paypal-nice-top, 10%), darken($paypal-nice-bottom, 10%));
+	}
+	&:hover {
+		@include linear-gradient( darken($paypal-nice-top, 5%), darken($paypal-nice-bottom, 5%));
+	}
+}
+
+
+
+
+
+
+
+// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # 
+// 
+//   D E P R E A C A T E D   . . .   will be removed soon !
+// 
+// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # 
+
+
+.btn-group-block.input-group {
+	.btn {
+		text-align: left;
+		padding: 10px;
+		&.icn {
+			text-align: center;
+		}
+	}
+}
+
+.btn-group-block {
+	@include box-sizing(border-box);
+	display: table;
+    width: 100%;
+    margin: 0 0 10px;
+	text-decoration: none;
+    .btn {
+		display: table-cell;
+		width: auto;
+		width: 95%;
+		&.btn-icn {
+			width: 5%;
+			font-size: 18px;
+			@include box-shadow( inset -1px 0 1px 0 rgba(255,255,255,.32) );
+			min-width: 42px;
+			max-width: 44px;
+			text-align: center;
+			@include horizontal-padding(5px);
+		}
+		border-collapse: separate;
+        border-spacing: 0;
+		@include border-radius(0);
+		
+		&:first-child { @include border-left-radius(5px); }
+        &:last-child { @include border-right-radius(5px); }
+    }
+	.btn + .btn {
+		border-left: none;
+	}
+	
+	&.lineless {
+		.btn {
+			border-left-width: 0;
+			border-right-width: 0;
+			@include box-shadow( none );
+			&:first-child { border-left-width: 0; }
+			&:last-child { border-right-width: 0; }
+		}
+	}
+	
+	&.half { width: 50%; margin-left: auto; margin-right: auto; }
+	&:hover { text-decoration: none !important; }
+}