magic_stylez 0.0.0.1

data/test/dummy/app/assets/javascripts/views/elements/arrow_infos.jst.eco

@@ -0,0 +1,46 @@
+<div class="section head">
+  <div class="corset">
+    <h1>Arrow Hints</h1>
+  </div>
+</div>
+
+<div class="section">
+  <div class="corset">
+    
+  </div>
+</div>
+
+<div class="section fat">
+  <div class="corset center_text">
+    
+    <button class="btn btn-success help_arrow" data-intro=".help_arrow">
+      Some element
+    </button>
+    
+  </div>
+</div>
+
+<div class="section shine-top">
+  <div class="corset">
+    
+    <p class="loud">Arrow Hints can be used on every element, just add class 'help_arrow' and data-intro attribute with your Hint text.</p>
+    <p class="loud"><strong>Be carefull! Arrow and Hint are absolute positioned, so they may overlap other content.</strong></p>
+    <pre>
+      <code>
+    &lt;button class=&quot;btn btn-success help_arrow&quot; data-intro=&quot;Go baby Go!&quot;&gt;<br/>      Click Me<br/>    &lt;/button&gt;
+      </code>
+    </pre>
+    
+  </div>
+</div>
+
+
+<div class="section fat">
+  <div class="corset">
+    
+    <button class="btn btn-default help_arrow" data-intro="Here goes your info text.">
+      .btn.help_arrow[data-intro='Here goes your info text.']
+    </button>
+    
+  </div>
+</div>

data/test/dummy/app/assets/javascripts/views/layout/corset.jst.eco

@@ -0,0 +1,27 @@
+<div class="section head">
+  <div class="corset">
+    <h1>Corsets</h1>
+  </div>
+</div>
+<div class="section">
+  <div class="corset">
+    <h2>.section .corset</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </div>
+</div>
+
+<div class="section">
+  <div class="corset tight">
+    <h2>.section .corset.tight</h2>
+    <div class="box">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <div class="corset full">
+    <h2>.section .corset.full</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </div>
+</div>

data/test/dummy/app/assets/javascripts/views/layout/fullpage_table.jst.eco

@@ -0,0 +1,76 @@
+<div class="fullpage-table" id="banner-one">
+  <div class="table-row">
+    <div class="banner-box responsive-hero with-footer with-header fill berlin">
+      <div class="banner-header">
+        <div class="corset">
+          <h1 class="loud">Fullpage Table</h1>
+        </div>
+      </div>
+      
+      <div class="banner-content">
+        <div class="corset">
+          <p class="loud">This is a fullpage-table, it allways uses fullpage-height<br/>(if content fits in).</p>
+        </div>
+      </div>
+      
+      <div class="banner-footer" id="sign_up_banner">
+        <div class="corset">
+          <div class="row">
+            <div class="col-sm-4 col-sm-offset-4">
+              <!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
+              <button class="btn btn-success btn-block help_arrow" data-intro="Go click me!">
+                Click Me
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</div>
+
+
+<div class="section shine-top">
+  <div class="corset">
+    <h2>Usage</h2>
+    <pre>
+    <code>
+&lt;div class=&quot;fullpage-table&quot; id=&quot;front-banner&quot;&gt;
+  &lt;div class=&quot;table-row&quot;&gt;<br/>    &lt;div class=&quot;banner-box responsive-hero with-footer with-header fill wood&quot;&gt;<br/>      &lt;div class=&quot;banner-header&quot;&gt;<br/>        &lt;div class=&quot;corset&quot;&gt;<br/>          &lt;h1 class=&quot;loud&quot;&gt;Fullpage Table&lt;/h1&gt;<br/>        &lt;/div&gt;<br/>      &lt;/div&gt;<br/>      <br/>      &lt;div class=&quot;banner-content&quot;&gt;<br/>        &lt;div class=&quot;corset&quot;&gt;<br/>          &lt;p class=&quot;loud&quot;&gt;This is a fullpage-table, it allways uses fullpage-height (if content fits in).&lt;/p&gt;<br/>        &lt;/div&gt;<br/>      &lt;/div&gt;<br/>      <br/>      &lt;div class=&quot;banner-footer&quot; id=&quot;sign_up_banner&quot;&gt;<br/>        &lt;div class=&quot;corset&quot;&gt;<br/>          &lt;div class=&quot;row&quot;&gt;<br/>            &lt;div class=&quot;col-sm-4 col-sm-offset-4&quot;&gt;<br/>              &lt;a href=&quot;#&quot; class=&quot;btn btn-success btn-block btn-lg&quot;&gt;Sign up now&lt;/a&gt;<br/>            &lt;/div&gt;<br/>          &lt;/div&gt;<br/>        &lt;/div&gt;<br/>      &lt;/div&gt;<br/>      <br/>    &lt;/div&gt;<br/>  &lt;/div&gt;<br/>&lt;/div&gt;
+    </code>
+    </pre>
+  </div>
+</div>
+
+<div class="fullpage-table" id="banner-two">
+  <div class="table-row">
+    <div class="banner-box responsive-hero with-footer with-header fill berlin fixed-bg">
+      <div class="banner-header">
+        <div class="corset">
+          <h1 class="loud">Fullpage Table <small>with fixed Background</small></h1>
+        </div>
+      </div>
+      
+      <div class="banner-content">
+        <div class="corset">
+          <p class="loud">This is a fullpage-table, it allways uses fullpage-height<br/>(if content fits in).</p>
+        </div>
+      </div>
+      
+      <div class="banner-footer" id="sign_up_banner">
+        <div class="corset">
+          <div class="row">
+            <div class="col-sm-4 col-sm-offset-4">
+              <!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
+              <button class="btn btn-success btn-block help_arrow" data-intro="Go click me!">
+                Click Me
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</div>

data/test/dummy/app/assets/javascripts/views/layout/section.jst.eco

@@ -0,0 +1,109 @@
+<div class="section head">
+  <div class="corset">
+    <h1>Sections <small>.section.head .corset h1</small></h1>
+  </div>
+</div>
+<div class="section">
+  <div class="corset">
+    <p class="loud">Sections are just wrapper for content, they come with some nice states:</p>
+  </div>
+</div>
+
+<div class="section hard-top">
+  <div class="corset">
+    <h4>.hard-top</h4>
+  </div>
+</div>
+<div class="section dotted-top">
+  <div class="corset">
+    <h4>.dotted-top</h4>
+  </div>
+</div>
+<div class="section shine-top">
+  <div class="corset">
+    <h4>.shine-top</h4>
+  </div>
+</div>
+<div class="section dark">
+  <div class="corset">
+    <h4>.dark</h4>
+  </div>
+</div>
+<div class="section bright">
+  <div class="corset">
+    <h4>.bright</h4>
+  </div>
+</div>
+<div class="section brand">
+  <div class="corset">
+    <h4>.brand</h4>
+  </div>
+</div>
+<div class="section blank">
+  <div class="corset">
+    <h4>.blank</h4>
+  </div>
+</div>
+
+
+
+
+<div class="section shine-top shine-bottom compact">
+  <div class="corset">
+    <h4>.shine-top .shine-bottom .compact</h4>
+  </div>
+</div>
+
+<div class="section shine-bottom compact">
+  <div class="corset">
+    <h4>.shine-bottom .compact</h4>
+  </div>
+</div>
+
+
+<div class="section">
+  <div class="corset">
+    <h2>Sizes:</h2>
+    <table class="table">
+      <thead>
+        <tr>
+          <th>Class</th>
+          <th>Padding-Top</th>
+          <th>Padding-Bottom</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th> </th>
+          <td>42px</td>
+          <td>50px</td>
+        </tr>
+        <tr>
+          <th>.compact</th>
+          <td>10px</td>
+          <td>10px</td>
+        </tr>
+        <tr>
+          <th>.flatted</th>
+          <td>30px</td>
+          <td>30px</td>
+        </tr>
+        <tr>
+          <th>.flat</th>
+          <td>0px</td>
+          <td>0px</td>
+        </tr>
+        <tr>
+          <th>.flat-top</th>
+          <td>0px</td>
+          <td> </td>
+        </tr>
+        <tr>
+          <th>.flat-bottom</th>
+          <td> </td>
+          <td>0px</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

data/test/dummy/app/assets/javascripts/views/layout/slide_boxes.jst.eco

@@ -0,0 +1,33 @@
+<div class="section">
+  <div class="corset">
+    
+    <div class="layout-slider">
+      <div class="box aside left">
+    
+        <ul id="devise_links" class="nav_list big">
+          <li><a href="#" class="shaguar"><i class="icon-check"></i> Anmelden</a></li>
+          <li><a href="#" class="shaguar"><i class="icon-edit"></i> Registrieren</a></li>
+          <li><span class="lst_lnk"><i class="icon-cog"></i> Probleme</span>
+            <ul class="sub_nav">
+              <li><a href="#">Passwort vergessen</a></li>
+              <li><a href="#">Bestätigung erneut senden</a></li>
+              <li><a href="#">Entsperr-E-Mail erneut</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+      <div class="box main" style="min-height: 0px;">
+      	<div class="head">
+      		<button class="btn layout-slider-oppener">
+      			<i class="icon-list opener"></i>
+      			<i class="icon-arrow-left closer"></i>
+      		</button>
+      		<h1>Tach</h1>
+      	</div>
+      	Bla bla ...
+      </div>
+    </div>
+    
+    
+  </div>
+</div>

data/test/dummy/app/assets/stylesheets/application.css.scss

@@ -0,0 +1,180 @@
+@import "magic-stylez";
+
+html, body {
+	width: 100%; height: 100%; position: relative;
+	margin: 0; padding: 0;
+	background: #f3f2f2;
+}
+body { position: relative; padding: 0 0 0 220px;}
+
+#app_content {
+	display: block; position: relative;
+	width: 100%; height: 100%;
+	// margin-left: 220px;
+	// background: #333;
+	// .section {
+	// 	&, & > .corset { background: #333; color: #ccc; }
+	// 	&.head, &.head > .corset {
+	// 		background: #000; color: #ccc;
+	// 	}
+	// }
+	
+	
+}
+
+
+.banner-box.responsive-hero {
+	// .banner-head, .banner-footer {
+	// 	padding: 10px 0;
+	// }
+	// .banner-footer { background: rgba(0,0,0,.23); }
+}
+
+
+#aside {
+	// @mixin single_shine( $color, $times: 3, $position: right, $width: 5px, $blur: 5px, $size: 0, $corner: 100 )
+	@include single_shine( rgba(0,0,0,.23), 1, right, 10px );
+	display: block; position: fixed;
+	top: 0; right: auto; bottom: 0; left: 0;
+	width: 220px;
+	z-index: 99;
+	// box-shadow: inset -2px 0 3px 0 #000;
+	border-right: solid 1px #ccc;
+}
+
+ul {
+	display: block; position: relative;
+	list-style: none;
+	margin: 0; padding: 10px;
+	text-align: left;
+	li {
+		display: block; position: relative;
+		margin: 0; padding: 5px;
+	}
+}
+
+// .section .corset { text-align: left; }
+.section { text-align: left; }
+
+
+
+.help_arrow {
+	// display: block;
+	position: relative;
+	z-index: 7;
+	&:before, &:after {
+		font-family: 'Gloria Hallelujah', cursive;
+		font-weight: 400;
+	}
+	&:before {
+		display: block; position: absolute; content: "";
+		padding: 0;
+		width: 50px; height: 50px;
+		bottom: 100%; left: 50%;
+		margin: 0 0 10px -25px;
+		background: transparent image-url("magic/arrows/arrow2-2.png") center center no-repeat;
+		background-size: contain;
+		@include rotation(-53);
+	}
+	&:after {
+		display: block; position: absolute; content: attr(data-intro);
+		padding: 0;
+		height: 30px; line-height: 30px;
+		bottom: 100%; left: 50%;
+		margin: 0 0 37px 30px;
+		color: #a0c775;
+		font-size: 28px; font-weight: 300;
+		text-shadow: 0 1px 1px #000;
+	}
+}
+
+
+
+
+
+
+
+
+.samplebox {
+	display: block; position: relative;
+	margin: 0 0 20px;
+	padding: 10px;
+	border: solid 1px #ccc;
+	background: #fff;
+	
+	h2 { font-size: 16px; }
+	
+	&.raised_shadow { 
+		@include raised_shadow( rgba(0, 0, 0, 0.5), 5 );
+		&.one { @include raised_shadow( rgba(102, 53, 53, 0.5), 5 ); }
+		&.two { @include raised_shadow( rgba(102, 53, 53, 0.5), 5, -10px, 0 ); }
+	}
+	&.pseudo_raised_shadow {
+		@include pseudo_raised_shadow( rgba(0, 0, 0, 0.5), 3 );
+		&.one { @include pseudo_raised_shadow( rgba(102, 53, 53, 0.5), 5, 30px, 10px, 0, 10px ); }
+		&.two { @include pseudo_raised_shadow( rgba(102, 53, 53, 0.5), 5, 10px, 10px, 20px, 10px ); }
+	}
+	&.lifted_shadow {
+		@include lifted_shadow( rgba(0, 0, 0, 0.5), 2 );
+		&.one { @include lifted_shadow( rgba(102, 53, 53, 0.5), 5 ); }
+		&.two { @include lifted_shadow( rgba(204, 0, 0, 0.5), 2 ); }
+	}
+	&.perspective_shadow {
+		@include perspective_shadow( rgba(0, 0, 0, 0.42), 1, 30, 3px );
+		&.one { @include perspective_shadow( rgba(102, 53, 53, 0.5), 5, 50, 5px ); }
+		&.two { @include perspective_shadow( rgba(204, 0, 0, 0.5), 2, 42, 10px ); }
+	}
+	&.vertical_curves {
+		@include vertical_curves( rgba(0, 0, 0, 0.42), 3 );
+		&.one { @include vertical_curves( rgba(102, 53, 53, 0.5), 5 ); }
+		&.two { @include vertical_curves( rgba(204, 0, 0, 0.5), 2 ); }
+	}
+	&.horizontal_curves {
+		@include horizontal_curves( rgba(0, 0, 0, 0.42), 3 );
+		&.one { @include horizontal_curves( rgba(102, 53, 53, 0.5), 5 ); }
+		&.two { @include horizontal_curves( rgba(204, 0, 0, 0.5), 2 ); }
+	}
+	&.vertical_shine {
+		@include vertical_shine( rgba(0, 0, 0, 0.3), 2 );
+		&.one { @include vertical_shine( rgba(102, 53, 53, 0.5), 5 ); }
+		&.two { @include vertical_shine( rgba(204, 0, 0, 0.5), 2 ); }
+	}
+	&.horizontal_shine {
+		@include horizontal_shine( rgba(0, 0, 0, 0.3), 2 );
+		&.one { @include horizontal_shine( rgba(102, 53, 53, 0.5), 5 ); }
+		&.two { @include horizontal_shine( rgba(204, 0, 0, 0.5), 2 ); }
+	}
+	
+	&.single_shine {
+		@include single_shine( rgba(0, 0, 0, 0.5), 2 );
+		&.one { @include single_shine( rgba(102, 53, 53, 0.5), 5 ); }
+		&.two { @include single_shine( rgba(204, 0, 0, 0.5), 2 ); }
+	}
+	
+	&.single_curve {
+		@include single_curve( rgba(0, 0, 0, 0.5), 2 );
+		&.one { @include single_curve( rgba(102, 53, 53, 0.5), 5 ); }
+		&.two { @include single_curve( rgba(204, 0, 0, 0.5), 2 ); }
+	}
+	
+	&.paper_shadow {
+		@include paper_shadow( rgba(0, 0, 0, 0.5), 2 );
+		&.one { @include paper_shadow( rgba(102, 53, 53, 0.5), 5 ); }
+		&.two { @include paper_shadow( rgba(204, 0, 0, 0.5), 2 ); }
+	}
+	
+	
+	&.smal { 
+		width: 40%; float: left;
+		margin: 0 4% 3% 5%;
+		padding: 0;
+		// border: solid 1px #555;
+		// @include verlauf_A;
+		h2 { padding: 20px 30px; text-align: center; }
+		p.warning { font-size: 10px; color: #663333; }
+	}
+	.warning { text-align: left; }
+}
+
+
+

data/test/dummy/app/controllers/application_controller.rb

@@ -0,0 +1,6 @@
+class ApplicationController < ActionController::Base
+  # Prevent CSRF attacks by raising an exception.
+  # For APIs, you may want to use :null_session instead.
+  protect_from_forgery with: :exception
+  
+end

data/test/dummy/app/controllers/front_controller.rb

@@ -0,0 +1,7 @@
+class FrontController < ApplicationController
+  
+  def start
+    Rails.logger.info "Front - Start"
+  end
+  
+end

data/test/dummy/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/test/dummy/app/views/front/_aside.html.erb

@@ -0,0 +1,36 @@
+<div id="aside">
+  <div class="aside-content">
+    
+    
+    <ul class="nav_list dark">
+      <li class="current active"><%= link_to "Magic-Stylez", "#", class: "app_lnk lst_lnk" %></li>
+      
+      <li><%= link_to "Layout", "#", class: "lst_lnk" %>
+        <ul class="sub_nav">
+          <li><%= link_to "Section", "#", class: "app_lnk lst_lnk", data: {target: "layout/section"} %></li>
+          <li><%= link_to "Corset", "#", class: "app_lnk lst_lnk", data: {target: "layout/corset"} %></li>
+          <li><%= link_to "Fullpage Table", "#", class: "app_lnk lst_lnk", data: {target: "layout/fullpage_table"} %></li>
+        </ul>
+      </li>
+      
+      <li><%= link_to "Elements", "#", class: "lst_lnk" %>
+        <ul class="sub_nav">
+          <li><%= link_to "Arrow Infos", "#", class: "app_lnk lst_lnk", data: {target: "elements/arrow_infos"} %></li>
+        </ul>
+      </li>
+      
+      
+      <li><%= link_to "Effects", "#", class: "lst_lnk" %>
+        <ul class="sub_nav">
+          <li><%= link_to "Reflections", "#", class: "app_lnk lst_lnk", data: {target: "effects/reflections"} %></li>
+          <li><%= link_to "Shadows", "#", class: "app_lnk lst_lnk", data: {target: "effects/shadows"} %></li>
+        </ul>
+      </li>
+      <% if 3 == 4 %>
+      <li><%= link_to "Layout", "#", class: "lst_lnk" %></li>
+      <% end %>
+    </ul>
+    
+    
+  </div>
+</div>

data/test/dummy/app/views/front/start.html.erb

@@ -0,0 +1,77 @@
+<div class="section head">
+  <div class="corset">
+    <h1>magic-stylez</h1>
+  </div>
+</div>
+
+
+<div class="section flatted">
+  <div class="corset">
+    <p class="loud"><em>Some style helpers used in a lot of our apps.</em></p>
+  </div>
+</div>
+
+<div class="section compact hard-top">
+  <div class="corset center_text">
+    <h2>Warning</h2>
+    <p class="loud">This Gem is still work in process, it is not used in a production app!</p>
+    <p class="loud">Its just the start to outsource my style framework (I mostly rebuild for every app).</p>
+    <p class="loud">It is mostly driven by my own habits, so I don't know if its usefull for others.</p>
+  </div>
+</div>
+
+<div class="section compact hard-top">
+  <div class="corset">
+    <h3>Dependencies</h3>
+    <ul>
+      <li><%= link_to "bootstrap-sass", "https://github.com/twbs/bootstrap-sass", target: "_blank" %></li>
+      <li><%= link_to "bourbon", "http://bourbon.io/", target: "_blank" %></li>
+    </ul>
+  </div>
+</div>
+
+<div class="section compact">
+  <div class="corset">
+    <h3>Thanks</h3>
+    <p class="loud">
+      A lot of code for this gem is taken from <%= link_to "bootstrap-sass", "https://github.com/twbs/bootstrap-sass", target: "_blank" %>, 
+      so thank you guys for the great work.</br>
+      Same goes for <%= link_to "bourbon", "http://bourbon.io/", target: "_blank" %> thanks for a lightweight helper set.
+    </p>
+    <p class="loud">Also thanks to all the people, how share their knowlegde on <%= link_to "stackoverflow", "http://stackoverflow.com/", target: "_blank" %>.</p>
+  </div>
+</div>
+
+<div class="section compact">
+  <div class="corset">
+    <h3>Authors</h3>
+    <ul>
+      <li><%= link_to "Torsten Wetzel", "http://twetzel.github.io/", target: "_blank" %></li>
+      <li>many others ...</li>
+    </ul>
+  </div>
+</div>
+
+<div class="section compact">
+  <div class="corset">
+    <h3>License</h3>
+    <p class="loud">MIT-License</p>
+  </div>
+</div>
+
+
+
+
+
+
+<div class="section shine-top flat-bottom">
+  <div class="corset">
+    <p class="center_text">&copy; 2014 Torsten Wetzel (berlinmagic UG)</p>
+  </div>
+</div>
+
+
+    
+
+
+

data/test/dummy/app/views/layouts/application.html.erb

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Magic-Stylez</title>
+  <%= stylesheet_link_tag    'application', media: 'all' %>
+  <%= javascript_include_tag 'application' %>
+  <%= csrf_meta_tags %>
+  <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
+  <script type="text/javascript" charset="utf-8">
+    App = {};
+    App.Environment = "<%= Rails.env.to_s %>";
+  </script>
+</head>
+<body>
+  
+  <%= render "front/aside" %>
+  <div class="clearfix"></div>
+  <div id="app_content">
+    <%= yield %>
+  </div>
+  <div class="clearfix"></div>
+  
+</body>
+</html>

data/test/dummy/bin/bundle

@@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+load Gem.bin_path('bundler', 'bundle')

data/test/dummy/bin/rails

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+APP_PATH = File.expand_path('../../config/application',  __FILE__)
+require_relative '../config/boot'
+require 'rails/commands'

data/test/dummy/bin/rake

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+require_relative '../config/boot'
+require 'rake'
+Rake.application.run