magic_stylez 0.0.0.13 → 0.0.0.19

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

@@ -0,0 +1,67 @@
+<div class="section head">
+  <div class="corset">
+    <h1>CSS Circle-Diagram</h1>
+  </div>
+</div>
+
+
+
+<div class="section">
+  <div class="corset tight">
+    
+    <div class="row">
+			<div class="col-sm-6">
+				<div class="circle-diagram" data-percent="87">
+					<div class="outer_half_one"></div>
+					<div class="outer_half_two"></div>
+					<div class="inner_half_one"></div>
+					<div class="inner_half_two"></div>
+					<div class="middle_full">87 %</div>
+				</div>
+			</div>
+			<div class="col-sm-6">
+				<div class="circle-diagram dark" data-percent="63">
+					<div class="outer_half_one"></div>
+					<div class="outer_half_two"></div>
+					<div class="inner_half_one"></div>
+					<div class="inner_half_two"></div>
+					<div class="middle_full">63 %</div>
+				</div>
+			</div>
+		</div>
+		<div class="clearfix"></div>
+    
+  </div>
+</div>
+
+
+<div class="section">
+  <div class="corset tight">
+    
+    <div class="row">
+			<div class="col-sm-6">
+				<div class="circle-diagram responsive" data-percent="87">
+          <img src="<%= assetPath("magic/helper/blank_10.png") %>" class="placeholder-pic" />
+					<div class="outer_half_one"></div>
+					<div class="outer_half_two"></div>
+					<div class="inner_half_one"></div>
+					<div class="inner_half_two"></div>
+					<div class="middle_full">87 %</div>
+				</div>
+			</div>
+			<div class="col-sm-6">
+				<div class="circle-diagram dark responsive" data-percent="63">
+				  <img src="<%= assetPath("magic/helper/blank_10.png") %>" class="placeholder-pic" />
+					<div class="outer_half_one"></div>
+					<div class="outer_half_two"></div>
+					<div class="inner_half_one"></div>
+					<div class="inner_half_two"></div>
+					<div class="middle_full">63 %</div>
+				</div>
+			</div>
+		</div>
+		<div class="clearfix"></div>
+    
+  </div>
+</div>
+

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

@@ -0,0 +1,185 @@
+<div class="section head">
+  <div class="corset">
+    <h1>Inputs</h1>
+  </div>
+</div>
+
+
+
+<div class="section">
+  <div class="corset tight">
+    
+    <div class="inpt-splited input-lg press">
+      <span class="icn"><i class="icomoon-mail2"></i></span>
+      <div class="inpt">
+        <input placeholder="E-Mail" type="email" value="">
+      </div>
+    </div>
+    
+    <div class="inpt-splited press">
+      <span class="icn"><i class="icomoon-mail2"></i></span>
+      <div class="inpt">
+        <input placeholder="E-Mail" type="email" value="">
+      </div>
+    </div>
+    
+    <div class="inpt-splited input-sm press">
+      <span class="icn"><i class="icomoon-mail2"></i></span>
+      <div class="inpt">
+        <input placeholder="E-Mail" type="email" value="">
+      </div>
+    </div>
+    
+    <div class="inpt-splited input-xs half press">
+      <span class="icn"><i class="icomoon-mail2"></i></span>
+      <div class="inpt">
+        <input placeholder="E-Mail" type="email" value="">
+      </div>
+    </div>
+    
+  </div>
+</div>
+
+<div class="section shine-top">
+  <div class="corset">
+    <p class="loud">splited and divided input are nice little helper for inputs that contain an icon</p>
+    <p class="loud"><strong>Be carefull! .inpt-splited & .inpt-divided are always block elements.</strong></p>
+    <pre>
+      <code>
+  &lt;div class=&quot;inpt-splited press&quot;&gt;<br/>    &lt;span class=&quot;icn&quot;&gt;&lt;i class=&quot;icomoon-mail2&quot;&gt;&lt;/i&gt;&lt;/span&gt;<br/>    &lt;div class=&quot;inpt&quot;&gt;<br/>      &lt;input placeholder=&quot;E-Mail&quot; type=&quot;email&quot; value=&quot;&quot;&gt;<br/>    &lt;/div&gt;<br/>  &lt;/div&gt;
+      </code>
+    </pre>
+    <ul class="arrow loud">
+      <li>tag of inner element doesn't matter</li>
+      <li>element conaining icon need class <strong>.icn</strong></li>
+      <li>element conaining input need class <strong>.inpt</strong></li>
+    </ul>
+  </div>
+</div>
+
+
+
+<div class="section hard-top">
+  <div class="corset tight">
+    <div class="box">
+      <div class="header">
+        <h3>Some Form</h3>
+      </div>
+      <div class="body">
+        <form action="#" method="get" accept-charset="utf-8" class="form">
+          <div class="row">
+            <div class="col-sm-5 press">
+              <label>Text-Field</label>
+            </div>
+            <div class="col-sm-7 press">
+              <input type="text" class="form-control">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-5 press">
+              <label>check_switch</label>
+            </div>
+            <div class="col-sm-3 press">
+              <div class="check_switch">
+                <div class="switch_toggle"></div>
+              </div>
+            </div>
+            <div class="col-sm-4 press">
+              <div class="check">
+                <a href="#" class="checka"><i class="icon-ok"></i></a>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-5 press">
+              <label>Text-Field</label>
+            </div>
+            <div class="col-sm-7 press">
+              <input type="text" class="form-control">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-5 press">
+              <label>Text-Field</label>
+            </div>
+            <div class="col-sm-7 press">
+              <textarea class="form-control"></textarea>
+            </div>
+          </div>
+          <hr/>
+          <div class="row">
+            <div class="col-sm-4">
+              <button class="btn btn-success btn-splited" type="submit">
+                <span>Continue</span>
+                <span class="icn">→</span>
+              </button>
+            </div>
+            <div class="col-sm-4">
+              <button class="btn btn-default btn-block" type="reset">
+                Reset
+              </button>
+            </div>
+            <div class="col-sm-4 press">
+              &nbsp;
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section shine-top shine-bottom">
+  <div class="corset tight">
+    <div class="row">
+      <div class="col-sm-4">
+        <div class="inpt-splited press">
+          <span class="icn"><i class="icomoon-mail2"></i></span>
+          <div class="inpt">
+            <input placeholder="Email" type="email" value="">
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-4">
+        <div class="inpt-splited press">
+          <span class="icn"><i class="icomoon-lock"></i></span>
+          <div class="inpt">
+            <input placeholder="Password" type="password" value="">
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-4">
+        <button class="btn btn-success btn-splited" type="submit">
+          <span>Continue</span>
+          <span class="icn">→</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section warning">
+  <div class="corset">
+    <h2>Old style ... will be removed in next versions.</h2>
+    <p>Here is the old style icon-input helper:</p>
+  </div>
+</div>
+
+<div class="section">
+  <div class="corset tight">
+    
+    
+    <div class="icon_field fat mail">
+      <input class="form-control input-lg" id="user_email" name="user[email]" placeholder="E-Mail" type="email" value="">
+    </div>
+    
+    <br/>
+    
+    <div class="icon_field fat password press">
+      <input class="form-control input-lg" id="user_email" name="user[email]" placeholder="E-Mail" type="email" value="">
+    </div>
+    
+    
+  </div>
+</div>
+

data/test/dummy/app/assets/javascripts/views/{elements → helper}/arrow_infos.jst.eco

@@ -1,6 +1,6 @@
 <div class="section head">
   <div class="corset">
-    <h1>Arrow Hints</h1>
+    <h1>Arrow Infos</h1>
   </div>
 </div>
 
@@ -13,7 +13,7 @@
 <div class="section fat">
   <div class="corset center_text">
     
-    <button class="btn btn-success help_arrow" data-intro=".help_arrow">
+    <button class="btn btn-success help_arrow" data-text=".help_arrow">
       Some element
     </button>
     
@@ -27,7 +27,7 @@
     <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;
+    &lt;button class=&quot;btn btn-success help_arrow&quot; data-text=&quot;Go baby Go!&quot;&gt;<br/>      Click Me<br/>    &lt;/button&gt;
       </code>
     </pre>
     
@@ -38,8 +38,8 @@
 <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 class="btn btn-default help_arrow" data-text="Here goes your info text.">
+      .btn.help_arrow[data-text='Here goes your info text.']
     </button>
     
   </div>

data/test/dummy/app/assets/javascripts/views/helper/crossed_text.jst.eco

@@ -0,0 +1,33 @@
+<div class="section head">
+  <div class="corset">
+    <h1>Crossed Text</h1>
+  </div>
+</div>
+
+<div class="section fat">
+  <div class="corset">
+    
+    <h2>Write your layouts faster with the <span class="crossed" data-text="power">help</span> of magic_stylez.</h2>
+    
+  </div>
+</div>
+
+<div class="section head">
+  <div class="corset">
+    <h3>Usage:</h3>
+  </div>
+</div>
+
+
+
+
+<div class="section shine-top">
+  <div class="corset">
+    <pre>
+      <code>
+  &lt;span class=&quot;crossed&quot; data-text=&quot;power&quot;&gt;help&lt;/span&gt;
+      </code>
+    </pre>
+    <p class="loud"><strong>Absolute psitioned .. needs space!</strong></p>
+  </div>
+</div>

data/test/dummy/app/assets/javascripts/views/helper/divider.jst.eco

@@ -0,0 +1,82 @@
+<div class="section head">
+  <div class="corset">
+    <h1>Divider</h1>
+  </div>
+</div>
+
+<div class="section">
+  <div class="corset center_text">
+    <p class="loud press">Divider are a nice hr-like text divider:</p>
+    
+    <div class="divider press">
+      <span class="name">I'm a divider :)</span>
+    </div>
+    
+    <p class="loud press">There are many usecases for dividers</p>
+    
+    <div class="divider half press">
+      <span class="name">I'm a .half divider</span>
+    </div>
+    
+
+    
+  </div>
+</div>
+
+
+<div class="section head">
+  <div class="corset">
+    <h3>ie. divide Buttons:</h3>
+  </div>
+</div>
+
+<div class="section">
+  <div class="corset tight center_text">
+    
+    <div class="btn btn-facebook btn-lg btn-divided">
+      <div class="icn">
+        <i class="icomoon-facebook"></i>
+      </div>
+      <div class="text">
+        Sign in with Facebook
+      </div>
+    </div>
+    <br/>
+    <div class="divider">
+      <span>or</span>
+    </div>
+    <br/>
+    <div class="inpt-splited input-lg press">
+      <span class="icn"><i class="icomoon-mail2"></i></span>
+      <div class="inpt">
+        <input placeholder="Email" type="email" value="">
+      </div>
+    </div>
+    
+    <div class="inpt-splited input-lg press">
+      <span class="icn"><i class="icomoon-key"></i></span>
+      <div class="inpt">
+        <input placeholder="Password" type="password" value="">
+      </div>
+    </div>
+    
+  </div>
+</div>
+
+
+<div class="section head">
+  <div class="corset">
+    <h3>Usage:</h3>
+  </div>
+</div>
+
+<div class="section shine-top">
+  <div class="corset">
+    <pre>
+      <code>
+  &lt;div class=&quot;divider&quot;&gt;<br/>    &lt;span&gt;or&lt;/span&gt;<br/>  &lt;/div&gt;
+      </code>
+    </pre>
+    <p class="loud"><strong>Parent box needs background!</strong></p>
+  </div>
+</div>

data/test/dummy/app/assets/javascripts/views/helper/three_previews.jst.eco

@@ -0,0 +1,46 @@
+<div class="section head">
+  <div class="corset">
+    <h1>Three Previews</h1>
+  </div>
+</div>
+
+<div class="section flat-bottom">
+  <div class="corset tight">
+    
+    <div class="three-previews">
+      
+      <div class="preview">
+        <img src="<%= assetPath("magic/bgs/seucide.jpg") %>" />
+      </div>
+      <div class="preview">
+        <img src="<%= assetPath("magic/bgs/hdr_landsberger.jpg") %>" />
+      </div>
+      <div class="preview">
+        <img src="<%= assetPath("magic/bgs/seucide.jpg") %>" />
+      </div>
+      
+    </div>
+    
+  </div>
+</div>
+
+<div class="section shine-top">
+  <div class="corset">
+    <ul class="arrows">
+      <li>Needs surrounding <em>.section.flat-bottom</em></li>
+      <li>Next .section should have class <em>.hard-top</em> or <em>.shine-top</em></li>
+      <li>All Images should have the same dimensions</li>
+    </ul>
+  </div>
+</div>
+
+
+<div class="section hard-top">
+  <div class="corset">
+    <pre>
+      <code>
+  &lt;div class=&quot;three-previews&quot;&gt;<br/>    &lt;div class=&quot;preview&quot;&gt;<br/>      &lt;img src=&quot;/images/image_1.jpg&quot; /&gt;<br/>    &lt;/div&gt;<br/>    &lt;div class=&quot;preview&quot;&gt;<br/>      &lt;img src=&quot;/images/image_2.jpg&quot; /&gt;<br/>    &lt;/div&gt;<br/>    &lt;div class=&quot;preview&quot;&gt;<br/>      &lt;img src=&quot;/images/image_3.jpg&quot; /&gt;<br/>    &lt;/div&gt;<br/>  &lt;/div&gt;
+      </code>
+    </pre>
+  </div>
+</div>