magic_stylez 0.0.0.36 → 0.0.0.37

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 624549e2c9ebdd63e0530d8a6a0e22ecaec58ec0
-  data.tar.gz: 9a6c2e6f354046d8e1a358771e3c13161d991e78
+  metadata.gz: b8f9284ecc90df3548387988c83d49d0fc75e40d
+  data.tar.gz: be61780840cbd81c2aa1d31078bae4f5121e2841
 SHA512:
-  metadata.gz: 62b125276a6d460463af594baacd7de6e5245d5850f3a8bb376b123f768251522bceba881598d2ce48815af6e5e25004e632ba560c403e228117709596c84887
-  data.tar.gz: 26b666a9c19298dd9af155cb1866303959c9ea242afa5154b522fc46aa60163a3bafe289fe4a545734068739b341c2ac2f8e80ccf30910be059f2ccd40e897fd
+  metadata.gz: 3251bb7e692fd1cb8eb62e3e344dd9cf6a110b83022d804eaa80a98b74febda9d79beb0b9330a71a34fbeff933cd313e50631dcda7b188ffbade32fab624613c
+  data.tar.gz: 0ee4d9aca8d539fde8b1b9fbb42f63fcac009f3e28d44b792741387ef80e026041b4ba0bb6aef51ed8ceabb47463a55afe797dbcaf035a9bf35fe9ba33097d0d

data/lib/magic_stylez/version.rb

@@ -1,3 +1,3 @@
 module MagicStylez
-  VERSION = "0.0.0.36"
+  VERSION = "0.0.0.37"
 end

data/test/dummy/README.md

@@ -0,0 +1,19 @@
+## Magic-Styles dummy app
+
+### Used to compile styles
+
+This app is used to compile the assets via sprockets for GH-Pages.
+
+
+### Usage:
+
+bundle exec rake assets:precompile RAILS_ENV=production
+
+rails s -p production
+
+copy page-html ... because there is no page-caching in rails4 :(
+
+- /
+- /fixed-header
+- /responsive-slidebar
+

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

@@ -36,6 +36,10 @@ navigate = ->
 
 $ ->
 
+  $("body").on "click", ".hide_da_notice", ->
+    $("body").removeClass("with_important_notice")
+    false
+
   $("body").on "click", ".lst_lnk", ->
     # nav = $(@).closest(".nav")
     nav = $(@).closest(".nav_list")

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

@@ -0,0 +1,20 @@
+# This is a manifest file that'll be compiled into application.js, which will include all the files
+# listed below.
+#
+# Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+# or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+#
+# It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+# compiled file.
+#
+# Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
+# about supported directives.
+#
+#= require jquery
+#= require magic-min
+
+$ ->
+
+  $("body").on "click", ".hide_da_notice", ->
+    $("body").toggleClass("with_important_notice")
+    false

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

@@ -18,7 +18,7 @@
           <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!">
+              <button class="btn btn-success btn-block help_arrow" data-text="Go click me!">
                 Click Me
               </button>
             </div>
@@ -63,7 +63,7 @@
           <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!">
+              <button class="btn btn-success btn-block help_arrow" data-text="Go click me!">
                 Click Me
               </button>
             </div>

data/test/dummy/app/assets/javascripts/views/templates/aside-nav.jst.eco

@@ -0,0 +1,5 @@
+<iframe src="<%= "#{rootPath()}aside-nav" %>" name="SELFHTML_in_a_box" id="mainFrame">
+  <p>Sorry, your Browser doesn't like Frames.
+  But we would need an iframe to show the template stuff
+  <a href="/aside-nav">Aside Nav</a></p>
+</iframe>

data/test/dummy/app/assets/javascripts/views/templates/fixed_header.jst.eco

@@ -1,5 +1,5 @@
 <iframe src="<%= "#{rootPath()}fixed-header" %>" name="SELFHTML_in_a_box" id="mainFrame">
   <p>Sorry, your Browser doesn't like Frames.
   But we would need an iframe to show the template stuff
-  <a href="../../../index.htm">SELFHTML</a></p>
+  <a href="/fixed-header">Fixed Header</a></p>
 </iframe>

data/test/dummy/app/assets/javascripts/views/templates/responsive_slidebar.jst.eco

@@ -1,5 +1,5 @@
 <iframe src="<%= "#{rootPath()}responsive-slidebar" %>" name="SELFHTML_in_a_box" id="mainFrame">
   <p>Sorry, your Browser doesn't like Frames.
   But we would need an iframe to show the template stuff
-  <a href="../../../index.htm">SELFHTML</a></p>
+  <a href="/responsive-slidebar">Responsive Slidebar</a></p>
 </iframe>

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

@@ -2,16 +2,16 @@
 
 html, body {
 	width: 100%; height: 100%; position: relative;
-	margin: 0; padding: 0;
 	background: #f3f2f2;
 }
 body {
 	position: relative;
-	padding: 0 0 0 220px;
 	&.blank {
-		margin: 0; padding: 0;
 		background: #fff;
 	}
+	&.main_template {
+	    padding: 0 0 0 220px;
+	}
 }
 
 #app_content {
@@ -91,6 +91,17 @@ body {
 	// 	padding: 10px 0;
 	// }
 	// .banner-footer { background: rgba(0,0,0,.23); }
+	
+	// http://lorempixel.com/g/1200/500/nature/
+	
+	&.lorempixel {
+		background-color: rgba(255,255,255,.50);
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: cover;
+		background-image: image-url('http://lorempixel.com/g/1200/500/nature/');
+	}
+	
 }
 
 

data/test/dummy/app/assets/stylesheets/corporate/_fonts.scss

@@ -95,6 +95,7 @@ $magicHandwritten: 		'Gloria Hallelujah', cursive;
 $smallReadFont: $magicCondensedSans;
 $readFont: $magicSans;
 $bigFont: $magicSans;
+$alternateBigFont: $magicSans;
 $dekoFont: $magicHandwritten;
 
 
@@ -102,11 +103,13 @@ $dekoFont: $magicHandwritten;
 @mixin smallReadFont { font-family: $smallReadFont; }
 @mixin readFont { font-family: $readFont; }
 @mixin bigFont { font-family: $bigFont; }
+@mixin alternateBigFont { font-family: $alternateBigFont; }
 @mixin dekoFont { font-family: $dekoFont; }
 
 .smallReadFont { @include smallReadFont; }
 .readFont { @include readFont; }
 .bigFont { @include bigFont; }
+.alternateBigFont { @include alternateBigFont; }
 .dekoFont { @include dekoFont; }
 
 
@@ -117,6 +120,7 @@ $dekoFont: $magicHandwritten;
 
 
 
+
 // C S S - F O N T S 
 
 @mixin eingabeText { font-family: $lucida-grande; }

data/test/dummy/app/assets/stylesheets/corporate/_typo.scss

@@ -75,6 +75,8 @@ div, ul, ol, li, p, span {
 		font-weight: 600;
 		font-size: ceil($font-size-base * $loud-factor);
 	}
+	&.bold { font-weight: bold; }
+	&.thin { font-weight: 200; }
 }
 
 ul, ol, li, p, span, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {

data/test/dummy/app/assets/stylesheets/corporate/_variables.scss

@@ -47,6 +47,55 @@ $border-radius-large:       6px !default;
 $border-radius-small:       3px !default;
 
 
+// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
+//   Sections
+// 
+
+// Padding
+$section-padding:                    50px !default;
+$section-head-padding:               10px !default;
+$section-compact-padding:            10px !default;
+$section-flatted-padding:            30px !default;
+$section-fat-padding:                80px !default;
+$section-fatter-padding:             120px !default;
+
+
+
+// Colors
+$section-background:                 $main-bg !default;
+$section-input-bg:                   $white !default;
+
+$section-head-background:            #fff !default;
+$section-head-input-bg:              $main-bg !default;
+$section-head-color:                 $brand-color !default;
+$section-head-small-color:           $gray-light !default;
+
+$section-dark-background:            $dark-bg !default;
+$section-dark-input-bg:              $white !default;
+
+$section-bright-background:          $bright-bg !default;
+$section-bright-input-bg:            $main-bg !default;
+
+$section-brand-background:           $brand-bg !default;
+$section-brand-input-bg:             $white !default;
+
+$section-soft-background:            $soft-bg !default;
+$section-soft-input-bg:              $white !default;
+
+
+$section-head-line-height:           30px !default;
+$section-head-font-size:             20px !default;
+
+// Reset margin of first and last childs, so section controls spacing
+$section-reset-child-spacing:        true !default;
+$section-reset-row-child-spacing:    true !default;
+$section-reset-table-child-spacing:  true !default;
+
+
+// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // 
+
+
+
 //** Width of the `border` for generating carets that indicator dropdowns.
 $caret-width-base:          4px !default;
 //** Carets increase slightly in size for larger components.
@@ -90,6 +139,8 @@ $zindex-dropdown:          1000 !default;
 $zindex-popover:           1060 !default;
 $zindex-tooltip:           1070 !default;
 $zindex-navbar-fixed:      1030 !default;
+$zindex-aside-nav:         1030 !default;
+$zindex-important-notice:  1020 !default;
 $zindex-modal-background:  1040 !default;
 $zindex-modal:             1050 !default;
 
@@ -168,12 +219,55 @@ $container-large-desktop:      ((1140px + $grid-gutter-width)) !default;
 $container-lg:                 $container-large-desktop !default;
 
 
+
+
+//== Important Notice
+//
+//##
+$important-notice-height:               30px !default;
+
+$important-notice-top:                  0px !default;
+$important-notice-bottom:               auto !default;
+
+$important-notice-font-size:            16px !default;
+$important-notice-font-weight:          300 !default;
+$important-notice-link-weight:          600 !default;
+
+$important-notice-bg:                   #e5e5e5 !default;
+$important-notice-color:                #333 !default;
+$important-notice-link-color:           $important-notice-color !default;
+
+$important-notice-warning-bg:           #e3d396 !default;
+$important-notice-warning-color:        #cc3300 !default;
+$important-notice-warning-link-color:   $important-notice-warning-color !default;
+
+$important-notice-alert-bg:             #db321a !default;
+$important-notice-alert-color:          #fff !default;
+$important-notice-alert-link-color:     $important-notice-alert-color !default;
+
+
+//== Aside-Navigation
+//
+//##
+$aside-nav-width:                    50px !default;
+$aside-nav-btn-height:               50px !default;
+$aside-nav-avatar-height:            60px !default;
+
+$aside-nav-background:               #e1e1e1 !default;
+$aside-nav-border-color:             #cccccc !default;
+
+
 //== Navbar
 //
 //##
 
 // Basics of a navbar
+$navbar-height-xs:                 30px !default;
+$navbar-height-sm:                 40px !default;
 $navbar-height:                    50px !default;
+$navbar-height-lg:                 60px !default;
+$navbar-height-xl:                 80px !default;
+
 $navbar-margin-bottom:             $line-height-computed !default;
 $navbar-border-radius:             $border-radius-base !default;
 $navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;

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

@@ -1,6 +1,6 @@
 class FrontController < ApplicationController
   
-  TEMPLATES = %w(responsive-slidebar fixed-header)
+  TEMPLATES = %w(responsive-slidebar fixed-header aside-nav)
   
   def start
     Rails.logger.info "Front - Start"

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

@@ -35,7 +35,7 @@
   </div>
 </div>
 
-<div class="main_content fixed-nav">
+<div class="main_content">
   
   
   <div class="section brand">

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

@@ -11,7 +11,7 @@
     App.Environment = "<%= Rails.env.to_s %>";
   </script>
 </head>
-<body>
+<body class="main_template">
   <%= render "front/aside" %>
   <div class="clearfix"></div>
   <div id="app_content">

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

@@ -11,7 +11,5 @@
     App.Environment = "<%= Rails.env.to_s %>";
   </script>
 </head>
-<body class="blank">
-    <%= yield %>
-</body>
+<%= yield %>
 </html>

data/test/dummy/app/views/templates/aside-nav.html.erb

@@ -0,0 +1,137 @@
+<body class="with_aside_nav with_important_notice fixed-nav-lg">
+  
+  <div class="important_notice development">
+    <div class="row">
+      <div class="col-xs-2" style="font-size: 24px;">
+        <i class="magicons-info-round"></i>
+      </div>
+      <div class="col-xs-8">
+        Diese Seite ist nur eine Demo, bitte nutzen Sie:&nbsp; <a href="http://berlinmagic.github.io/magic_stylez/">magic_stylez</a>
+      </div>
+      <div class="col-xs-2" style="font-size: 24px;">
+        <i class="magicons-info-round"></i>
+      </div>
+    </div>
+  </div>
+  
+  <div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-lg navbar-slidebar" role="navigation">
+    <div class="corset">
+    
+  
+  
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle slidebar-toggle" data-target="#front-main-nav-colapse">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <%= link_to "Magic-Stylez", "#", class: "navbar-brand" %>
+      </div>
+      <div class="collapse navbar-collapse" id="front-main-nav-colapse">
+        <ul class="nav navbar-nav navbar-left">
+          <li><%= link_to "Link", "#" %></li>
+          <li><%= link_to "Link", "#" %></li>
+        
+        </ul>
+        <ul class="nav navbar-nav navbar-right">
+          <li class="dropdown">
+              <%= link_to "#", class: "dropdown-toggle", data: {toggle: "dropdown"} do %>
+                Dropdown <b class="caret"></b>
+              <% end %>
+              <ul class="dropdown-menu">
+                  <li><%= link_to "Link 1", "#" %></li>
+                  <li><%= link_to "Link 2", "#" %></li>
+                  <li><%= link_to "Link 3", "#" %></li>
+              </ul>
+          </li>
+          <li><%= link_to "Button", "#", class: "btn btn-success" %></li>
+        </ul>
+      </div>
+    
+    </div>
+  </div>
+
+  <div id="nav-aside" class="fixed-left">
+    <div class="inner-aside">
+    
+      <div class="aside-btn user-pic">
+        <img alt="User Picture" src="http://lorempixel.com/g/50/60/people/" />
+      </div>
+    
+      <a class="aside-btn" href="#" title="Dashboard">
+        <i class='glyphicon glyphicon-home'></i>
+      </a>    
+      <a class="aside-btn active" href="#" title="Settings">
+        <i class='glyphicon glyphicon-cog'></i>
+      </a>    
+      <a class="aside-btn" href="#" title="Inbox">
+        <i class='glyphicon glyphicon-inbox'></i>
+      </a> 
+      <a class="aside-btn" href="#" title="Pictures">
+        <i class='glyphicon glyphicon-picture'></i>
+      </a> 
+    
+    </div>
+  </div>
+
+
+
+
+<div class="fullpage-table" id="banner-one">
+      <div class="table-row">
+        <div class="banner-box responsive-hero with-footer with-header fill lorempixel" style="background-image: url('http://lorempixel.com/g/1200/500/nature/')">
+          <div class="banner-header">
+            <div class="corset">
+              <h1 class="loud">Responsive Aside-Nav</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 hide_da_notice" data-text="Turn off notice!">
+                    Click Me
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+      
+        </div>
+      </div>
+    </div>
+
+  <div class="main_content">
+    
+    
+    
+    
+    
+  
+    <div class="section dark">
+      <div class="corset">
+        <h1>Responsive Slidebar</h1>
+        <br/>
+        <p class="loud">
+          Turns the usual twbs <em>navbar-collapse</em> into a nice slidebar. .. try it out:<br/>
+          make your screen smaller than 768px and press the header-toggle
+        </p>
+        <br/>
+        <h4>dependency:</h4> 
+        <code>@import "magic/content/navbar";</code>
+      </div>
+    </div>
+  
+    <%= render "templates/lorem" %>
+  
+  </div>
+</body>