magic_stylez 0.0.330 → 0.1.0

checksums.yaml

@@ -1,15 +1,7 @@
 ---
-!binary "U0hBMQ==":
-  metadata.gz: !binary |-
-    ZmJjNjhkNGU0MDZmZmM1NGQ0MTM1NmExNDYxNmQ3OWE0YTk1ZDNmOA==
-  data.tar.gz: !binary |-
-    NzhjYWNkNWZhZGUyZTM1NzkyZDc2MjliZDU4MzEwMDNlNTYxZDIxYg==
+SHA1:
+  metadata.gz: 913a4a5c0c1a181a1db99f5f0d7ab716d88b50c3
+  data.tar.gz: c62f85fc298bc4e157d6917673156868a628fe5b
 SHA512:
-  metadata.gz: !binary |-
-    ZDAzYjg5MTAxZDc4OTI5NDY2M2RjMmE3NjFkYzMwNGVmZDk4MWMxOTQxOWIw
-    N2UxY2VhMGNhZmZhNjMzNWNjYmI3MjcyY2RhYTg5NDExMDlmNzQ5ZjJhNGM0
-    YmM3MWY2NDU1MDU2N2E2ZjI0MjEwODJhZTg2NDBhYjI3ZWM2MWI=
-  data.tar.gz: !binary |-
-    NGVmMzQ0YzZjNGVjMDFhZjEwOTk5MWRlODZjM2ZkZDI2MzgxNjY4NTBiNjgz
-    ZWUxY2YyZjMzNGEwYmJkY2ViOGQ4YjVjODY5NjI1MDRjMGFmNmFjODZiNzA0
-    Y2RhMzQ2YWY1NzIxNGNhNGMxODM4ZjdiNzA4ZmZjYmE0NGJjNDc=
+  metadata.gz: b4ef0bbd98d83d2181fe87c1d3e0b0c81d77b51b99c6f6da90bfb0f42d9ffd3657ebe59146bad7f2fb25f17f0710241d2e0a8b4bbe5aeeb09627a7cc2a85bc80
+  data.tar.gz: ec2838f70daec903d085d4daef0b842355a0eaa89a972b13f33d9b5306645b020abf0bcebba10732fce0d39d4d6ffb108dd9eb78fac6a5ee4a70026ad7a10b6f

data/Gemfile

@@ -1,4 +1,4 @@
-source "http://rubygems.org"
+source "https://rubygems.org"
 
 # Declare your gem's dependencies in magic_stylez.gemspec.
 # Bundler will treat runtime dependencies like base dependencies, and

data/lib/magic_stylez/version.rb

@@ -1,3 +1,3 @@
 module MagicStylez
-  VERSION = "0.0.330"
+  VERSION = "0.1.0"
 end

data/magic_stylez.gemspec

@@ -22,7 +22,8 @@ Gem::Specification.new do |s|
   s.add_dependency "rails",               ">= 3.1"
   s.add_dependency 'autoprefixer-rails',  '>= 1.1'
   s.add_dependency 'sass',                '>= 3.2'
-  s.add_dependency 'bootstrap-sass',      '>= 3.3.5.1', '< 3.4'
+  ## since 3.2.x bootstrap-sass changed the asset structure, so first stay with 3.1.1.1
+  s.add_dependency 'bootstrap-sass',      '3.1.1.1'
   s.add_dependency 'bourbon',             '>= 3.0.0'
   
    # Testing dependencies

data/test/dummy/app/assets/javascripts/app.js.coffee

@@ -10,6 +10,54 @@ loadCircles = ->
   else if $('.circle-diagram').length > 0
     window.circleDiagram = new CircleDiagram( circle: $('.circle-diagram') )
 
+build_paralax = (el) ->
+  console.log "build_paralax", el
+  ## Create the background image holder ##
+  el.prepend("<div class='px_bg_holder'></div>")
+  el.find(".px_bg_holder").css(
+    "background-image" : el.css("background-image")
+    "background-position" : "center center"
+    "background-repeat" : "no-repeat"
+    "background-size" : "cover"
+    "position" : "absolute"
+    "height" : $(window).height()
+    "width" : $(window).width()
+  )
+  ## We will remove the background at all ##
+  el.css("background","none")
+  el.css("overflow","hidden")
+  
+  $("body").scroll ->
+    console.log "Scrolling"
+    # bg_pos = $("#app_content").offset().top + el.offset().top;
+    console.log if el.hasClass("responsive-hero") then el.closest(".fullpage-table").position().top else el.position().top
+    bg_pos = ($("#app_content").offset().top + if el.hasClass("responsive-hero") then el.closest(".fullpage-table").position().top else el.position().top)
+    console.log "bg_pos #{ bg_pos }"
+    if bg_pos < $(window).height()
+      bg_pos = bg_pos - (bg_pos / 10)
+    
+    el.find(".px_bg_holder").css(
+      "top" : "#{ bg_pos * -1 }px"
+    )
+  $(window).resize ->
+    $(".px_bg_holder").css(
+      "height" : $(window).height()
+      "width" : $(window).width()
+    )
+
+
+load_paralax = ->
+  if $(".section.image.fixed").length > 0
+    $(".section.image.fixed").each ->
+      build_paralax( $(@) )
+
+  if $(".responsive-hero.fixed-bg").length > 0
+    $(".responsive-hero.fixed-bg").each ->
+      build_paralax( $(@) )
+
+
+
+
 
 
 navigate = ->
@@ -31,6 +79,7 @@ navigate = ->
   lnk.addClass("active")
   $("body").removeClass("aside-on")
   loadCircles()
+  load_paralax()
   $("#current-view-name").text( lnk.text() )
   currentPath = path
     

data/test/dummy/app/assets/javascripts/assets.js.coffee.erb

@@ -9,11 +9,9 @@ appImages = <%= imgs.to_json %>
 # console.log "appImages", appImages
 
 
-
 @MagicStylezVersion = "<%= MagicStylez::VERSION %>"
 
 
-
 @assetPath = (path) ->
   # "/assets/angular/app/views/#{path}.html"
   appImages["#{path}"]

data/test/dummy/app/assets/javascripts/views/app/changelog.jst.eco

@@ -20,19 +20,6 @@
 </div>
 
 
-<div class="section sctn-sm">
-  <div class="corset tight">
-    <h4><small>Version</small> 0.1.1</h4>
-    <p>
-      + fullpage-table => <code>header-cell</code>, <code>footer-cell</code> default without bg
-    </p>
-    <p>
-      + add timeline for <a href="#helper/dots">dots</a>
-    </p>
-  </div>
-</div>
-
-
 <div class="section sctn-sm">
   <div class="corset tight">
     <h4><small>Version</small> 0.1.0</h4>

data/test/dummy/app/assets/javascripts/views/app/start.jst.eco

@@ -25,7 +25,7 @@
   <div class="corset full center_text">
     <h4 class="no-press-top">Warning</h4>
     <p class="gray-clr thin">This Gem is still work in process!</p>
-    <p class="gray-clr thin">(But it is already used in some production apps).</p>
+    <p class="gray-clr thin">Its just the start to outsource my style framework (I mostly rebuild for every app).</p>
     <p class="gray-clr thin">It is mostly driven by my own habits, so I don't know if its usefull for others.</p>
     <hr/>
     <h4>Info</h4>

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

@@ -65,7 +65,7 @@
     
     <div class="row">
       <% for x, i in ["xs", "sm", "", "lg", "xl", "xxl"]: %>
-        <div class="col-xs-6 col-sm-3 col-md-2">
+        <div class="col-xs-4 col-sm-3 col-md-2">
           <div class="number_dot dot-brand<%= if x != "" then " dot-#{x}" else "" %>"><%= i + 1 %></div>
           <div class="clearfix"></div>
           <p><%= if x != "" then ".dot-#{x}" else "" %></p>
@@ -79,7 +79,7 @@
     
     <div class="row">
       <% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-sm-2">
           <div class="number_dot dot-lg dot-<%= x %>"><%= i + 1 %></div>
           <div class="clearfix"></div>
           <p>.dot-<%= x %></p>
@@ -89,7 +89,7 @@
       <hr/>
       <p class="loud">plus <code>.dot-blank</code></p>
       <% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-sm-2">
           <div class="number_dot dot-lg dot-<%= x %> dot-blank"><%= i + 1 %></div>
           <div class="clearfix"></div>
           <p>.dot-<%= x %></p>
@@ -99,7 +99,7 @@
       <hr/>
       <p class="loud">plus <code>.dot-blank-soft</code></p>
       <% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
-        <div class="col-md-2 col-sm-4 col-xs-6">
+        <div class="col-sm-2">
           <div class="number_dot dot-lg dot-<%= x %> dot-blank-soft"><%= i + 1 %></div>
           <div class="clearfix"></div>
           <p>.dot-<%= x %></p>
@@ -112,21 +112,4 @@
   </div>
 </div>
 
-<div class="section hard-top">
-  <div class="corset">
-    
-    <h3>Time-Lines</h3>
-    
-    <div class="numbered_time_line">
-      <% for x in [1..7]: %>
-        <div class="numbered_line">
-          <div class="number_dot"><%= x %></div>
-          <p>Fact Number #<%= x %></p>
-        </div>
-      <% end %>
-    </div>
-    
-  </div>
-</div>
-
 

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

@@ -11,7 +11,7 @@
   <div class="table-row">
     <div class="cell table-cell content-cell fill">
       
-      <div class="corset responsive-hero center_text">
+      <div class="corset center_text">
         <h1 class="loud white-clr upcase">FullPage Table</h1>
         <p class="loud white-clr">
           FullPage-Tables always use full page size!
@@ -38,7 +38,42 @@
 </div>
 <div class="clearfix"></div>
 
-
+<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 class="well">
+            surounding element (i.e. body) needs the following <em>css</em>:
+            <br/>
+            <code>width: 100%; height: 100%;</code>
+          </div>
+        </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 fakeClick" data-text="Go click me!">
+                Click Me
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</div>
 
 
 <div class="section shine-top">
@@ -46,102 +81,45 @@
     <h2>Usage</h2>
     <pre>
     <code>
-&lt;div class=&quot;fullpage-table&quot; id=&quot;banner-one&quot;&gt;<br/>  &lt;div class=&quot;table-row&quot;&gt;<br/>    &lt;div class=&quot;header-cell bright&quot;&gt;<br/>      &lt;div class=&quot;corset center_text&quot;&gt;<br/>        &lt;h1 class=&quot;loud&quot;&gt;Fullpage Table&lt;/h1&gt;<br/>      &lt;/div&gt;<br/>    &lt;/div&gt;<br/>  &lt;/div&gt;<br/>  &lt;div class=&quot;table-row&quot;&gt;<br/>    &lt;div class=&quot;content-cell fill&quot;&gt;<br/>      &lt;div class=&quot;corset responsive-hero center_text&quot;&gt;<br/>        <br/>        &lt;p class=&quot;loud &quot;&gt;This is a fullpage-table, it allways uses fullpage-height&lt;br/&gt;(if content fits in).&lt;/p&gt;<br/>        &lt;div class=&quot;well&quot;&gt;<br/>          surounding element (i.e. body) needs the following &lt;em&gt;css&lt;/em&gt;:<br/>          &lt;br/&gt;<br/>          &lt;code&gt;width: 100%; height: 100%;&lt;/code&gt;<br/>        &lt;/div&gt;<br/>        <br/>      &lt;/div&gt;<br/>    &lt;/div&gt;<br/>  &lt;/div&gt;<br/>  &lt;div class=&quot;table-row&quot;&gt;<br/>    &lt;div class=&quot;footer-cell bright&quot;&gt;<br/>      &lt;div class=&quot;corset center_text&quot;&gt;<br/>        <br/>        &lt;div class=&quot;row&quot;&gt;<br/>          &lt;div class=&quot;col-sm-4 col-sm-offset-4&quot;&gt;<br/>            &lt;!--&lt;a href=&quot;#&quot; class=&quot;btn btn-success btn-block btn-lg&quot;&gt;Sign up now&lt;/a&gt;--&gt;<br/>            &lt;button class=&quot;btn btn-success btn-block help_arrow fakeClick&quot; data-text=&quot;Go click me!&quot;&gt;<br/>              Click Me<br/>            &lt;/button&gt;<br/>          &lt;/div&gt;<br/>        &lt;/div&gt;<br/>        <br/>      &lt;/div&gt;<br/>    &lt;/div&gt;<br/>  &lt;/div&gt;<br/>&lt;/div&gt;<br/>
+&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-one">
-  
+<div class="fullpage-table" id="banner-two">
   <div class="table-row">
-    <div class="header-cell bright">
-      <div class="corset center_text">
-        <h1 class="loud">Fullpage Table</h1>
+    <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>
-  </div>
-  <div class="table-row">
-    <div class="content-cell fill">
-      <div class="corset responsive-hero center_text">
-        
-        <p class="loud ">This is a fullpage-table, it allways uses fullpage-height<br/>(if content fits in).</p>
-        <div class="well">
-          surounding element (i.e. body) needs the following <em>css</em>:
+      
+      <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>
           <br/>
-          <code>width: 100%; height: 100%;</code>
+          <div class="well">
+            <strong>!!!</strong> fixed background doesn't work on chrome browser (Version 35.x - 39.x) <strong>!!!</strong>
+          </div>
         </div>
-        
       </div>
-    </div>
-  </div>
-  <div class="table-row">
-    <div class="footer-cell bright">
-      <div class="corset center_text">
-        
-        <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 fakeClick" data-text="Go click me!">
-              Click Me
-            </button>
+      
+      <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 fakeClick" data-text="Go click me!">
+                Click Me
+              </button>
+            </div>
           </div>
         </div>
-        
       </div>
+      
     </div>
   </div>
-</div>
-
-
-<div class="section">
-  <div class="corset">
-    <h2>Sizes:</h2>
-    
-    <p>For <code>.header-cell</code>, <code>.content-cell</code> and <code>.footer-cell</code> within the <code>fullpage-table</code>.
-    <table class="table">
-      <thead>
-        <tr>
-          <th>Class</th>
-          <th>Padding-Top</th>
-          <th>Padding-Bottom</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th> </th>
-          <td>20px</td>
-          <td>20px</td>
-        </tr>
-        <tr>
-          <th>.xs<br/>.flat</th>
-          <td>0</td>
-          <td>0</td>
-        </tr>
-        <tr>
-          <th>.sm</th>
-          <td>10px</td>
-          <td>10px</td>
-        </tr>
-        <tr>
-          <th>.lg</th>
-          <td>30px</td>
-          <td>30px</td>
-        </tr>
-        <tr>
-          <th>.xl</th>
-          <td>40px</td>
-          <td>40px</td>
-        </tr>
-        <tr>
-          <th>.dark</th>
-          <td colspan="2">Dark Background (<code>$fullpageDarkBG</code>)</td>
-        </tr>
-        <tr>
-          <th>.bright</th>
-          <td colspan="2">Bright Background (<code>$fullpageBrightBG</code>)</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
+</div>

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

@@ -188,7 +188,16 @@
     <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 image fixed">
+  <div class="corset">
+    <h4>.image.fixed</h4>
+    <br/>
+    <p>with pictures makes more sensce ...</p>
+    <br/><br/><br/>
+    <br/><br/><br/>
+    <br/><br/><br/>
+  </div>
+</div>
 
 <div class="section black">
   <div class="corset">

data/test/dummy/public/html/aside-nav.html

@@ -3,10 +3,10 @@
 <head>
   <title>Magic-Stylez</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
+  <link href="//berlinmagic.github.io/magic_stylez/assets/application-da1577d96bf3c413c09d9f3bc9dad816.css" media="all" rel="stylesheet" />
   <script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
   <meta content="authenticity_token" name="csrf-param" />
-<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" name="csrf-token" />
+<meta content="PVFg+VF0iagbADVJrRBzOTAh0Rip8//tURVhWCX+r7k=" name="csrf-token" />
   <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
   <script type="text/javascript" charset="utf-8">
     App = {};

data/test/dummy/public/html/fixed-header.html

@@ -3,10 +3,10 @@
 <head>
   <title>Magic-Stylez</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
+  <link href="//berlinmagic.github.io/magic_stylez/assets/application-da1577d96bf3c413c09d9f3bc9dad816.css" media="all" rel="stylesheet" />
   <script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
   <meta content="authenticity_token" name="csrf-param" />
-<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" name="csrf-token" />
+<meta content="PVFg+VF0iagbADVJrRBzOTAh0Rip8//tURVhWCX+r7k=" name="csrf-token" />
   <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
   <script type="text/javascript" charset="utf-8">
     App = {};

data/test/dummy/public/html/fixed-subnav.html

@@ -3,10 +3,10 @@
 <head>
   <title>Magic-Stylez</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
+  <link href="//berlinmagic.github.io/magic_stylez/assets/application-da1577d96bf3c413c09d9f3bc9dad816.css" media="all" rel="stylesheet" />
   <script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
   <meta content="authenticity_token" name="csrf-param" />
-<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" name="csrf-token" />
+<meta content="PVFg+VF0iagbADVJrRBzOTAh0Rip8//tURVhWCX+r7k=" name="csrf-token" />
   <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
   <script type="text/javascript" charset="utf-8">
     App = {};

data/test/dummy/public/html/index.html

@@ -6,10 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-  <link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
-  <script src="//berlinmagic.github.io/magic_stylez/assets/application-f6b944362b05ca8e034bddd1145b4433.js"></script>
+  <link href="//berlinmagic.github.io/magic_stylez/assets/application-da1577d96bf3c413c09d9f3bc9dad816.css" media="all" rel="stylesheet" />
+  <script src="//berlinmagic.github.io/magic_stylez/assets/application-01dcc42e6a4c7c37cee0a9daae0e15dc.js"></script>
   <meta content="authenticity_token" name="csrf-param" />
-<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" name="csrf-token" />
+<meta content="PVFg+VF0iagbADVJrRBzOTAh0Rip8//tURVhWCX+r7k=" name="csrf-token" />
   <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
   <link href="//berlinmagic.github.io/magic_stylez/assets/ico/favicon-f1706407301f788c54691b6995f60a8f.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
   <link href="//berlinmagic.github.io/magic_stylez/assets/ico/favicon-f34b54df445838a4f6bdac98bd904570.png" rel="shortcut icon" type="image/png" />
@@ -124,7 +124,7 @@
   <div class="corset">
     <div class="row">
       <div class="col-sm-9 col-xs-6">
-        <h1>magic-stylez <small>0.1.1</small></h1>
+        <h1>magic-stylez <small>0.1.0</small></h1>
       </div>
       <div class="col-sm-3 col-xs-6">
         <a href="https://github.com/berlinmagic/magic_stylez/tree/master" target="_blank" class="btn btn-sm btn-default btn-divided pull-right">

data/test/dummy/public/html/slidebar-header.html

@@ -3,10 +3,10 @@
 <head>
   <title>Magic-Stylez</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
+  <link href="//berlinmagic.github.io/magic_stylez/assets/application-da1577d96bf3c413c09d9f3bc9dad816.css" media="all" rel="stylesheet" />
   <script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
   <meta content="authenticity_token" name="csrf-param" />
-<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" name="csrf-token" />
+<meta content="PVFg+VF0iagbADVJrRBzOTAh0Rip8//tURVhWCX+r7k=" name="csrf-token" />
   <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
   <script type="text/javascript" charset="utf-8">
     App = {};

data/test/dummy/public/html/slidebar-subnav.html

@@ -3,10 +3,10 @@
 <head>
   <title>Magic-Stylez</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
+  <link href="//berlinmagic.github.io/magic_stylez/assets/application-da1577d96bf3c413c09d9f3bc9dad816.css" media="all" rel="stylesheet" />
   <script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
   <meta content="authenticity_token" name="csrf-param" />
-<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" name="csrf-token" />
+<meta content="PVFg+VF0iagbADVJrRBzOTAh0Rip8//tURVhWCX+r7k=" name="csrf-token" />
   <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
   <script type="text/javascript" charset="utf-8">
     App = {};

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

@@ -75,13 +75,6 @@
 		background-size: cover;
 		background-image: image-url('magic/bgs/seucide.jpg');
 }
-#banner-one {
-		background-color: rgba(255,255,255,.50);
-		background-position: center center;
-		background-repeat: no-repeat;
-		background-size: cover;
-		background-image: image-url("magic/bgs/hdr_landsberger.jpg");
-}
 
 .pic-bottom {
 	display: block; display: inline-block; position: relative;

data/vendor/assets/stylesheets/magic/helper/_dots.scss

@@ -118,67 +118,3 @@
 
 
 
-.numbered_time_line {
-    display: block; position: relative;
-    
-    .numbered_line {
-        display: block; position: relative;
-        text-align: left;
-        padding: 6px 0 6px 50px;
-        margin: 0 0 40px;
-        
-        .number_dot {
-            position: absolute;
-            left: 0; top: 0;
-            background: $brand-color;
-            border: none;
-            line-height: 40px;
-            font-weight: 300;
-        }
-        p {
-            margin: 0;
-            line-height: 28px;
-            color: #333 !important;
-            font-weight: 400;
-        }
-    }
-    
-    &:before {
-        display: block; position: absolute;
-        margin: 0; padding: 0;
-        content: "";
-        top: 0; left: 19px; bottom: 0; width: 2px;
-        background: $brand-color;
-    }
-    
-}
-
-
-
-// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
-@include responsiveStep-sm {
-
-    .numbered_time_line {
-        .numbered_line {
-            &:nth-child(even) { 
-                text-align: right;
-                margin-right: 50%; 
-                padding: 6px 30px 6px 0px;
-                .number_dot { left: auto; right: -20px; }
-            }
-            &:nth-child(odd) { 
-                margin-left: 50%; 
-                padding: 6px 0px 6px 30px;
-                .number_dot { left: -20px; }
-            }
-        }
-        &:before {
-            margin-left: -1px;
-            left: 50%;
-        }
-    
-    }
-
-}
-
-

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

@@ -4,11 +4,6 @@ html, body, #body {
 	// overflow-y: auto;
 }
 
-
-$fullpageBrightBG:    rgba(255,255,255,.42)     !default;
-$fullpageDarkBG:      rgba(0,0,0,.23)           !default;
-
-
 .fullpage-table, div.table {
 	width: 100%;
 	display: block;
@@ -22,14 +17,10 @@ $fullpageDarkBG:      rgba(0,0,0,.23)           !default;
 		}
 	}
   
-  .header-cell, .footer-cell, .content-cell { 
+  .header-cell, .footer-cell { 
     padding: 20px 0; 
-    &.xs, &.flat { padding: 0; }
-    &.sm { padding: 10px 0; }
-    &.lg { padding: 30px 0; }
-    &.xl { padding: 40px 0; }
-    &.bright {  background: $fullpageBrightBG; }
-    &.dark {    background: $fullpageDarkBG; }
+    background: rgba(255,255,255,.42);
+    &.dark { background: rgba(0,0,0,.23); }
   }
   
 }

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

@@ -1,35 +1,40 @@
 .section {
-  display: block; position: relative;
-  margin: 0; 
-  padding: $section-padding 0;
-  // background: $white;
-  text-align: center;
+    display: block; position: relative;
+    margin: 0; 
+    padding: $section-padding 0;
+    // background: $white;
+    text-align: center;
     
 	font-size: $font-size-base;
-  
 	.corset, .container { background: inherit; }
 	
     
-  &.z, &.zindex, &.z-index { z-index: 1; }
+    &.z, &.zindex, &.z-index { z-index: 1; }
     
     
-  &.image {
-      &.fixed { background-attachment: fixed; /* position: static; */ z-index: 88; }
+    &.image {
+        &.fixed { background-attachment: fixed; /* position: static; */ z-index: 88; }
         
-      background-color: transparent;
-  		background-position: center center;
-  		background-repeat: no-repeat;
-  		background-size: cover;
-  		background-image: url('http://lorempixel.com/g/1200/500/nature/');
-		  .corset, .container { background: transparent; }
-  }
-  
-  &.noise {
-      .corset, .container { background: transparent; }
-  }
+        background-color: transparent;
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: cover;
+		background-image: url('http://lorempixel.com/g/1200/500/nature/');
+		
+		// &.fixed { 
+		//     background: transparent image-url('magic/bgs/hdr_landsberger.jpg') no-repeat center center fixed; 
+		//     background-size: cover; 
+		// }
+		
+		.corset, .container { background: transparent; }
+    }
     
+    &.noise {
+        .corset, .container { background: transparent; }
+    }
     
-  // 
+    
+    // 
 	//   Header Section
 	// 
 	&.head {
@@ -51,55 +56,55 @@
 	// 
 	//   Sections with shine
 	// 
-  &.shine-top {
-      z-index: 1;
-      overflow: hidden;
-      &:before {
-          display: block; position: absolute; content: ""; z-index: 11;
-          margin: 0; padding: 0;
-          bottom: 100%; left: 10%; right: 10%; height: 100px;
-          @include spezial_radius( 500px / 20px );
-          @include box-shadow( 0 5px 20px 0 rgba(0,0,0,.23) );
-      }
-  }
-  &.shine-bottom {
-      z-index: 1;
-      overflow: hidden;
-      &:after {
-          display: block; position: absolute; content: ""; z-index: 11;
-          margin: 0; padding: 0;
-          top: 100%; left: 10%; right: 10%; height: 100px;
-          @include spezial_radius( 500px / 20px );
-          @include box-shadow( 0 -5px 20px 0 rgba(0,0,0,.23) );
-      }
-  }
+    &.shine-top {
+        z-index: 1;
+        overflow: hidden;
+        &:before {
+            display: block; position: absolute; content: ""; z-index: 11;
+            margin: 0; padding: 0;
+            bottom: 100%; left: 10%; right: 10%; height: 100px;
+            @include spezial_radius( 500px / 20px );
+            @include box-shadow( 0 5px 20px 0 rgba(0,0,0,.23) );
+        }
+    }
+    &.shine-bottom {
+        z-index: 1;
+        overflow: hidden;
+        &:after {
+            display: block; position: absolute; content: ""; z-index: 11;
+            margin: 0; padding: 0;
+            top: 100%; left: 10%; right: 10%; height: 100px;
+            @include spezial_radius( 500px / 20px );
+            @include box-shadow( 0 -5px 20px 0 rgba(0,0,0,.23) );
+        }
+    }
     
 
 	// 
 	//   Border Stylez
 	// 
-  &.hard-top {
-      border-top: solid 1px $main-border-color;
-      @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
-  }
+    &.hard-top {
+        border-top: solid 1px $main-border-color;
+        @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
+    }
 	&.hard-bottom {
-      border-bottom: solid 1px rgba(255,255,255,.75);
-      @include box-shadow( inset 0 -1px 1px 0 $main-border-color );
-  }
+        border-bottom: solid 1px rgba(255,255,255,.75);
+        @include box-shadow( inset 0 -1px 1px 0 $main-border-color );
+    }
 	&.hard-top.hard-bottom {
-		  @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), inset 0 -1px 1px 0 $main-border-color );
+		@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), inset 0 -1px 1px 0 $main-border-color );
 	}
 	
 	&.dotted-top {
-      border-top: dotted 2px $gray-light;
-      @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
-  }
+        border-top: dotted 2px $gray-light;
+        @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
+    }
 	&.dotted-bottom {
-      border-bottom: dotted 2px $gray-light;
-      @include box-shadow( 0 1px 1px 0 rgba(255,255,255,.75) );
-  }
+        border-bottom: dotted 2px $gray-light;
+        @include box-shadow( 0 1px 1px 0 rgba(255,255,255,.75) );
+    }
 	&.dotted-top, &.dotted-bottom {
-		  @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), 0 1px 1px 0 rgba(255,255,255,.75) );
+		@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), 0 1px 1px 0 rgba(255,255,255,.75) );
 	}
 	
 	// 
@@ -114,7 +119,7 @@
 	
 	&.flat { padding-top: 0; padding-bottom: 0; }
 	&.flat-top { padding-top: 0; }
-  &.flat-bottom { padding-bottom: 0; }
+    &.flat-bottom { padding-bottom: 0; }
 	
 	
 	// 
@@ -123,17 +128,17 @@
 	background: $section-background;
 	@include all_form_elements { background: $section-input-bg; }
 	
-  &.dark {
+    &.dark {
 		background: $section-dark-background;
 		.three-previews .preview { border-color: $main-border-color; }
 		@include all_form_elements { background: $section-dark-input-bg; }
-  }
-  &.black {
+    }
+    &.black {
 		background: #333;
 		color: #fff;
 		.three-previews .preview { border-color: $main-border-color; }
 		@include all_form_elements { background: $section-dark-input-bg; }
-  }
+    }
 	&.bright {
 		background: $section-bright-background;
 		@include all_form_elements { background: $section-bright-input-bg; }
@@ -146,9 +151,9 @@
 		background: $section-soft-background; 
 		@include all_form_elements { background: $section-soft-input-bg; }
 	}
-  &.blank { background: transparent; }
+    &.blank { background: transparent; }
     
-  &.one { 
+    &.one { 
 		background: $section-one-background; 
 		@include all_form_elements { background: $section-one-input-bg; }
 	}
@@ -166,49 +171,49 @@
 	//   Speech Section
 	// 
 	&.speech {
-      &:after {
-          display: block; position: absolute; content: "";
-          margin: 0; padding: 0;
-          width: 0; height: 0;
-          border: solid 10px transparent;
-          border-right:  solid 10px $section-background;
-          border-bottom: solid 10px $section-background;
-          bottom: -8px;
-          left: 50%;
-          margin-left: -8px;
-          @include rotation( 45 );
-          z-index: 99;
-      }
-      &.dark:after {
-          border-right:  solid 10px $section-dark-background;
-          border-bottom: solid 10px $section-dark-background;
-      }
-      &.bright:after {
-          border-right:  solid 10px $section-bright-background;
-          border-bottom: solid 10px $section-bright-background;
-      }
-      &.brand:after {
-          border-right:  solid 10px $section-brand-background;
-          border-bottom: solid 10px $section-brand-background;
-      }
-      &.soft:after {
-          border-right:  solid 10px $section-soft-background;
-          border-bottom: solid 10px $section-soft-background;
-      }
-      
-      &.one:after {
-          border-right:  solid 10px $section-one-background;
-          border-bottom: solid 10px $section-one-background;
-      }
-      &.two:after {
-          border-right:  solid 10px $section-two-background;
-          border-bottom: solid 10px $section-two-background;
-      }
-      &.three:after {
-          border-right:  solid 10px $section-three-background;
-          border-bottom: solid 10px $section-three-background;
-      }
-  }
+        &:after {
+            display: block; position: absolute; content: "";
+            margin: 0; padding: 0;
+            width: 0; height: 0;
+            border: solid 10px transparent;
+            border-right:  solid 10px $section-background;
+            border-bottom: solid 10px $section-background;
+            bottom: -8px;
+            left: 50%;
+            margin-left: -8px;
+            @include rotation( 45 );
+            z-index: 99;
+        }
+        &.dark:after {
+            border-right:  solid 10px $section-dark-background;
+            border-bottom: solid 10px $section-dark-background;
+        }
+        &.bright:after {
+            border-right:  solid 10px $section-bright-background;
+            border-bottom: solid 10px $section-bright-background;
+        }
+        &.brand:after {
+            border-right:  solid 10px $section-brand-background;
+            border-bottom: solid 10px $section-brand-background;
+        }
+        &.soft:after {
+            border-right:  solid 10px $section-soft-background;
+            border-bottom: solid 10px $section-soft-background;
+        }
+        
+        &.one:after {
+            border-right:  solid 10px $section-one-background;
+            border-bottom: solid 10px $section-one-background;
+        }
+        &.two:after {
+            border-right:  solid 10px $section-two-background;
+            border-bottom: solid 10px $section-two-background;
+        }
+        &.three:after {
+            border-right:  solid 10px $section-three-background;
+            border-bottom: solid 10px $section-three-background;
+        }
+    }
 	
 	
 	// 

metadata

@@ -1,201 +1,195 @@
 --- !ruby/object:Gem::Specification
 name: magic_stylez
 version: !ruby/object:Gem::Version
-  version: 0.0.330
+  version: 0.1.0
 platform: ruby
 authors:
 - Torsten Wetzel
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-11-20 00:00:00.000000000 Z
+date: 2017-04-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.1'
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '1.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '1.1'
 - !ruby/object:Gem::Dependency
   name: sass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.2'
 - !ruby/object:Gem::Dependency
   name: bootstrap-sass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - '='
       - !ruby/object:Gem::Version
-        version: 3.3.5.1
-    - - <
-      - !ruby/object:Gem::Version
-        version: '3.4'
+        version: 3.1.1.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: 3.3.5.1
-    - - <
+    - - '='
       - !ruby/object:Gem::Version
-        version: '3.4'
+        version: 3.1.1.1
 - !ruby/object:Gem::Dependency
   name: bourbon
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 3.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 3.0.0
 - !ruby/object:Gem::Dependency
   name: test-unit
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 2.5.5
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 2.5.5
 - !ruby/object:Gem::Dependency
   name: json
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 1.8.1
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 1.8.1
 - !ruby/object:Gem::Dependency
   name: sprockets-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 2.1.3
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 2.1.3
 - !ruby/object:Gem::Dependency
   name: jquery-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 3.1.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 3.1.0
 - !ruby/object:Gem::Dependency
   name: coffee-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: eco
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: uglifier
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 description: Lots of styles and helpers we used for several projects.
@@ -205,7 +199,7 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- .gitignore
+- ".gitignore"
 - Gemfile
 - MIT-LICENSE
 - README.md
@@ -477,17 +471,17 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.8
+rubygems_version: 2.6.11
 signing_key: 
 specification_version: 4
 summary: A set of sass helper depending on bourbon and bootstrap-sass.