magic_stylez 0.0.0.45 → 0.0.0.48
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/magic_stylez/version.rb +1 -1
- data/test/dummy/app/assets/javascripts/views/templates/fixed_subnav.jst.eco +5 -0
- data/test/dummy/app/assets/javascripts/views/templates/slidebar_header.jst.eco +5 -0
- data/test/dummy/app/assets/javascripts/views/templates/slidebar_subnav.jst.eco +5 -0
- data/test/dummy/app/assets/stylesheets/corporate/_variables.scss +6 -0
- data/test/dummy/app/controllers/front_controller.rb +1 -1
- data/test/dummy/app/views/templates/fixed-subnav.html.erb +79 -0
- data/test/dummy/app/views/templates/{responsive-slidebar.html.erb → slidebar-header.html.erb} +6 -0
- data/test/dummy/app/views/templates/slidebar-subnav.html.erb +88 -0
- data/test/dummy/public/html/aside-nav.html +2 -2
- data/test/dummy/public/html/fixed-header.html +2 -2
- data/test/dummy/public/html/fixed-subnav.html +182 -0
- data/test/dummy/public/html/index.html +6 -4
- data/test/dummy/public/html/{responsive-slidebar.html → slidebar-header.html} +8 -2
- data/test/dummy/public/html/slidebar-subnav.html +191 -0
- data/vendor/assets/stylesheets/corporate/_colors.scss +1 -0
- data/vendor/assets/stylesheets/corporate/_variables.scss +5 -1
- data/vendor/assets/stylesheets/magic/content/_aside_nav.scss +2 -2
- data/vendor/assets/stylesheets/magic/content/_navbar.scss +125 -7
- data/vendor/assets/stylesheets/magic/content/_notice.scss +21 -28
- data/vendor/assets/stylesheets/magic/layout/_corset.scss +2 -2
- metadata +20 -8
- data/test/dummy/app/assets/javascripts/views/templates/responsive_slidebar.jst.eco +0 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 24107f97901b4f995b6346a3f7d2cd42b2c88479
|
|
4
|
+
data.tar.gz: 98e8f4d8cc516ee9f8e2cc3d171103e15c785d0a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 965d386bdfd78607e0389397c5a589edf7b734252063677468f89d72a8b422d2855ccdda40b46be3ba73bd6a68f463ebdf1a4c078cdc3c5a62ac5dfb9947d437
|
|
7
|
+
data.tar.gz: 55cd688a3c0ce998affc5700bc701fc98d1b06eb58596e359fdd258edae1b3fafc2df9c841b46faed1cd27f3983d28a5bfd979f7d4e7d1f2a089a91aae9cad0f
|
data/lib/magic_stylez/version.rb
CHANGED
|
@@ -288,6 +288,12 @@ $navbar-height: 50px !default;
|
|
|
288
288
|
$navbar-height-lg: 60px !default;
|
|
289
289
|
$navbar-height-xl: 80px !default;
|
|
290
290
|
|
|
291
|
+
$subnav-height: 40px !default;
|
|
292
|
+
$subnav-background: #069 !default;
|
|
293
|
+
$subnav-color: #fff !default;
|
|
294
|
+
$subnav-hover-color: #ccc !default;
|
|
295
|
+
$subnav-active-color: #aaa !default;
|
|
296
|
+
|
|
291
297
|
$navbar-margin-bottom: $line-height-computed !default;
|
|
292
298
|
$navbar-border-radius: $border-radius-base !default;
|
|
293
299
|
$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
<body class="blank fixed-nav-xl fixed-sub-nav">
|
|
2
|
+
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-xl" role="navigation">
|
|
3
|
+
<div class="corset">
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
<div class="navbar-header">
|
|
8
|
+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#front-main-nav-colapse">
|
|
9
|
+
<span class="sr-only">Toggle navigation</span>
|
|
10
|
+
<span class="icon-bar"></span>
|
|
11
|
+
<span class="icon-bar"></span>
|
|
12
|
+
<span class="icon-bar"></span>
|
|
13
|
+
</button>
|
|
14
|
+
<%= link_to "Magic-Stylez", "#", class: "navbar-brand" %>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="collapse navbar-collapse" id="front-main-nav-colapse">
|
|
17
|
+
<ul class="nav navbar-nav navbar-left">
|
|
18
|
+
<li><%= link_to "Jobs", "#" %></li>
|
|
19
|
+
<li><%= link_to "Jobs", "#" %></li>
|
|
20
|
+
<li><%= link_to "Jobs", "#", class: "btn btn-success" %></li>
|
|
21
|
+
</ul>
|
|
22
|
+
<ul class="nav navbar-nav navbar-right">
|
|
23
|
+
<li class="dropdown">
|
|
24
|
+
<%= link_to "#", class: "dropdown-toggle", data: {toggle: "dropdown"} do %>
|
|
25
|
+
Hallo <b class="caret"></b>
|
|
26
|
+
<% end %>
|
|
27
|
+
<ul class="dropdown-menu">
|
|
28
|
+
<li><%= link_to "Link 1", "#" %></li>
|
|
29
|
+
<li><%= link_to "Link 2", "#" %></li>
|
|
30
|
+
<li><%= link_to "Link 3", "#" %></li>
|
|
31
|
+
</ul>
|
|
32
|
+
</li>
|
|
33
|
+
</ul>
|
|
34
|
+
<div class="clearfix"></div>
|
|
35
|
+
<div class="navbar-sub-nav">
|
|
36
|
+
|
|
37
|
+
<ul class="nav navbar-nav navbar-left">
|
|
38
|
+
<li><%= link_to "Link", "#" %></li>
|
|
39
|
+
<li><%= link_to "Link", "#" %></li>
|
|
40
|
+
|
|
41
|
+
</ul>
|
|
42
|
+
<ul class="nav navbar-nav navbar-right">
|
|
43
|
+
<li class="dropdown">
|
|
44
|
+
<%= link_to "#", class: "dropdown-toggle", data: {toggle: "dropdown"} do %>
|
|
45
|
+
Dropdown <b class="caret"></b>
|
|
46
|
+
<% end %>
|
|
47
|
+
<ul class="dropdown-menu">
|
|
48
|
+
<li><%= link_to "Link 1", "#" %></li>
|
|
49
|
+
<li><%= link_to "Link 2", "#" %></li>
|
|
50
|
+
<li><%= link_to "Link 3", "#" %></li>
|
|
51
|
+
</ul>
|
|
52
|
+
</li>
|
|
53
|
+
<li><%= link_to "Button", "#", class: "btn btn-success" %></li>
|
|
54
|
+
</ul>
|
|
55
|
+
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div class="main_content">
|
|
63
|
+
|
|
64
|
+
<div class="section brand">
|
|
65
|
+
<div class="corset">
|
|
66
|
+
<h1>usual twbs header plus some improvements</h1>
|
|
67
|
+
<br/>
|
|
68
|
+
<p class="loud">just niced up button alignment (no <em>.navbar-btn</em> needed) .. add sizes: <em>.navbar-xs, .navbar-sm, .navbar-lg, .navbar-xl</em></p>
|
|
69
|
+
<br/>
|
|
70
|
+
<h4>dependency:</h4>
|
|
71
|
+
<code>@import "magic/content/navbar";</code>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<%= render "templates/lorem" %>
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
</div>
|
|
79
|
+
</body>
|
data/test/dummy/app/views/templates/{responsive-slidebar.html.erb → slidebar-header.html.erb}
RENAMED
|
@@ -50,6 +50,12 @@
|
|
|
50
50
|
<br/>
|
|
51
51
|
<h4>dependency:</h4>
|
|
52
52
|
<code>@import "magic/content/navbar";</code>
|
|
53
|
+
<br/>
|
|
54
|
+
<br/>
|
|
55
|
+
<br/>
|
|
56
|
+
<div class="h3 center_text">
|
|
57
|
+
<i class="magicons-arrow-right"></i> Smaller your screen to see the Slidebar !! <i class="magicons-arrow-left"></i>
|
|
58
|
+
</div>
|
|
53
59
|
</div>
|
|
54
60
|
</div>
|
|
55
61
|
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
<body class="blank fixed-nav fixed-sub-nav">
|
|
2
|
+
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-slidebar" role="navigation">
|
|
3
|
+
<div class="corset">
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
<div class="navbar-header">
|
|
8
|
+
<button type="button" class="navbar-toggle slidebar-toggle" data-target="#front-main-nav-colapse">
|
|
9
|
+
<span class="sr-only">Toggle navigation</span>
|
|
10
|
+
<span class="icon-bar"></span>
|
|
11
|
+
<span class="icon-bar"></span>
|
|
12
|
+
<span class="icon-bar"></span>
|
|
13
|
+
</button>
|
|
14
|
+
<%= link_to "Magic-Stylez", "#", class: "navbar-brand" %>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="collapse navbar-collapse" id="front-main-nav-colapse">
|
|
17
|
+
<ul class="nav navbar-nav navbar-left">
|
|
18
|
+
<li><%= link_to "Link", "#" %></li>
|
|
19
|
+
<li><%= link_to "Link", "#" %></li>
|
|
20
|
+
|
|
21
|
+
</ul>
|
|
22
|
+
<ul class="nav navbar-nav navbar-right">
|
|
23
|
+
<li class="dropdown">
|
|
24
|
+
<%= link_to "#", class: "dropdown-toggle", data: {toggle: "dropdown"} do %>
|
|
25
|
+
Dropdown <b class="caret"></b>
|
|
26
|
+
<% end %>
|
|
27
|
+
<ul class="dropdown-menu">
|
|
28
|
+
<li><%= link_to "Link 1", "#" %></li>
|
|
29
|
+
<li><%= link_to "Link 2", "#" %></li>
|
|
30
|
+
<li><%= link_to "Link 3", "#" %></li>
|
|
31
|
+
</ul>
|
|
32
|
+
</li>
|
|
33
|
+
<li><%= link_to "Button", "#", class: "btn btn-success" %></li>
|
|
34
|
+
</ul>
|
|
35
|
+
<div class="clearfix"></div>
|
|
36
|
+
<div class="navbar-sub-nav">
|
|
37
|
+
|
|
38
|
+
<ul class="nav navbar-nav navbar-left">
|
|
39
|
+
<li><%= link_to "Link", "#" %></li>
|
|
40
|
+
<li><%= link_to "Link", "#" %></li>
|
|
41
|
+
|
|
42
|
+
</ul>
|
|
43
|
+
<ul class="nav navbar-nav navbar-right">
|
|
44
|
+
<li class="dropdown">
|
|
45
|
+
<%= link_to "#", class: "dropdown-toggle", data: {toggle: "dropdown"} do %>
|
|
46
|
+
Dropdown <b class="caret"></b>
|
|
47
|
+
<% end %>
|
|
48
|
+
<ul class="dropdown-menu">
|
|
49
|
+
<li><%= link_to "Link 1", "#" %></li>
|
|
50
|
+
<li><%= link_to "Link 2", "#" %></li>
|
|
51
|
+
<li><%= link_to "Link 3", "#" %></li>
|
|
52
|
+
</ul>
|
|
53
|
+
</li>
|
|
54
|
+
<li><%= link_to "Button", "#", class: "btn btn-success" %></li>
|
|
55
|
+
</ul>
|
|
56
|
+
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<div class="main_content">
|
|
64
|
+
|
|
65
|
+
<div class="section brand">
|
|
66
|
+
<div class="corset">
|
|
67
|
+
<h1>Responsive Slidebar</h1>
|
|
68
|
+
<br/>
|
|
69
|
+
<p class="loud">
|
|
70
|
+
Turns the usual twbs <em>navbar-collapse</em> into a nice slidebar. .. try it out:<br/>
|
|
71
|
+
make your screen smaller than 768px and press the header-toggle
|
|
72
|
+
</p>
|
|
73
|
+
<br/>
|
|
74
|
+
<h4>dependency:</h4>
|
|
75
|
+
<code>@import "magic/content/navbar";</code>
|
|
76
|
+
<br/>
|
|
77
|
+
<br/>
|
|
78
|
+
<br/>
|
|
79
|
+
<div class="h3 center_text">
|
|
80
|
+
<i class="magicons-arrow-right"></i> Smaller your screen to see the Slidebar !! <i class="magicons-arrow-left"></i>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<%= render "templates/lorem" %>
|
|
86
|
+
|
|
87
|
+
</div>
|
|
88
|
+
</body>
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<html>
|
|
4
4
|
<head>
|
|
5
5
|
<title>Magic-Stylez</title>
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-aa2461ae49c57b2ee5e558b0844b9816.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="viUaKXlZN0Q+5iy1LIBbyZbruD+ptSR/duC/Qxed/Vs=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<html>
|
|
4
4
|
<head>
|
|
5
5
|
<title>Magic-Stylez</title>
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-aa2461ae49c57b2ee5e558b0844b9816.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="viUaKXlZN0Q+5iy1LIBbyZbruD+ptSR/duC/Qxed/Vs=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
|
|
2
|
+
<!DOCTYPE html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<title>Magic-Stylez</title>
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-aa2461ae49c57b2ee5e558b0844b9816.css" media="all" rel="stylesheet" />
|
|
7
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
|
8
|
+
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
+
<meta content="viUaKXlZN0Q+5iy1LIBbyZbruD+ptSR/duC/Qxed/Vs=" name="csrf-token" />
|
|
10
|
+
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
|
+
<script type="text/javascript" charset="utf-8">
|
|
12
|
+
App = {};
|
|
13
|
+
App.Environment = "production";
|
|
14
|
+
</script>
|
|
15
|
+
</head>
|
|
16
|
+
<body class="blank fixed-nav-xl fixed-sub-nav">
|
|
17
|
+
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-xl" role="navigation">
|
|
18
|
+
<div class="corset">
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
<div class="navbar-header">
|
|
23
|
+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#front-main-nav-colapse">
|
|
24
|
+
<span class="sr-only">Toggle navigation</span>
|
|
25
|
+
<span class="icon-bar"></span>
|
|
26
|
+
<span class="icon-bar"></span>
|
|
27
|
+
<span class="icon-bar"></span>
|
|
28
|
+
</button>
|
|
29
|
+
<a class="navbar-brand" href="#">Magic-Stylez</a>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="collapse navbar-collapse" id="front-main-nav-colapse">
|
|
32
|
+
<ul class="nav navbar-nav navbar-left">
|
|
33
|
+
<li><a href="#">Jobs</a></li>
|
|
34
|
+
<li><a href="#">Jobs</a></li>
|
|
35
|
+
<li><a class="btn btn-success" href="#">Jobs</a></li>
|
|
36
|
+
</ul>
|
|
37
|
+
<ul class="nav navbar-nav navbar-right">
|
|
38
|
+
<li class="dropdown">
|
|
39
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
40
|
+
Hallo <b class="caret"></b>
|
|
41
|
+
</a> <ul class="dropdown-menu">
|
|
42
|
+
<li><a href="#">Link 1</a></li>
|
|
43
|
+
<li><a href="#">Link 2</a></li>
|
|
44
|
+
<li><a href="#">Link 3</a></li>
|
|
45
|
+
</ul>
|
|
46
|
+
</li>
|
|
47
|
+
</ul>
|
|
48
|
+
<div class="clearfix"></div>
|
|
49
|
+
<div class="navbar-sub-nav">
|
|
50
|
+
|
|
51
|
+
<ul class="nav navbar-nav navbar-left">
|
|
52
|
+
<li><a href="#">Link</a></li>
|
|
53
|
+
<li><a href="#">Link</a></li>
|
|
54
|
+
|
|
55
|
+
</ul>
|
|
56
|
+
<ul class="nav navbar-nav navbar-right">
|
|
57
|
+
<li class="dropdown">
|
|
58
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
59
|
+
Dropdown <b class="caret"></b>
|
|
60
|
+
</a> <ul class="dropdown-menu">
|
|
61
|
+
<li><a href="#">Link 1</a></li>
|
|
62
|
+
<li><a href="#">Link 2</a></li>
|
|
63
|
+
<li><a href="#">Link 3</a></li>
|
|
64
|
+
</ul>
|
|
65
|
+
</li>
|
|
66
|
+
<li><a class="btn btn-success" href="#">Button</a></li>
|
|
67
|
+
</ul>
|
|
68
|
+
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<div class="main_content">
|
|
76
|
+
|
|
77
|
+
<div class="section brand">
|
|
78
|
+
<div class="corset">
|
|
79
|
+
<h1>usual twbs header plus some improvements</h1>
|
|
80
|
+
<br/>
|
|
81
|
+
<p class="loud">just niced up button alignment (no <em>.navbar-btn</em> needed) .. add sizes: <em>.navbar-xs, .navbar-sm, .navbar-lg, .navbar-xl</em></p>
|
|
82
|
+
<br/>
|
|
83
|
+
<h4>dependency:</h4>
|
|
84
|
+
<code>@import "magic/content/navbar";</code>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
<div class="section">
|
|
91
|
+
<div class="corset">
|
|
92
|
+
<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>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="section shine-top">
|
|
97
|
+
<div class="corset">
|
|
98
|
+
<div class="row">
|
|
99
|
+
<div class="col-sm-6">
|
|
100
|
+
<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.</p>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="col-sm-6">
|
|
103
|
+
<p>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>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div class="section shine-top">
|
|
110
|
+
<div class="corset tight">
|
|
111
|
+
<div class="box">
|
|
112
|
+
<div class="header">
|
|
113
|
+
<h3>Some Form</h3>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="body">
|
|
116
|
+
<form action="#" method="get" accept-charset="utf-8" class="form">
|
|
117
|
+
<div class="row">
|
|
118
|
+
<div class="col-sm-5 press">
|
|
119
|
+
<label>Text-Field</label>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="col-sm-7 press">
|
|
122
|
+
<input type="text" class="form-control">
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="row">
|
|
126
|
+
<div class="col-sm-5 press">
|
|
127
|
+
<label>check_switch</label>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="col-sm-7 press">
|
|
130
|
+
<div class="check_switch">
|
|
131
|
+
<div class="switch_toggle"></div>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="row">
|
|
136
|
+
<div class="col-sm-5">
|
|
137
|
+
<label>check</label>
|
|
138
|
+
</div>
|
|
139
|
+
<div class="col-sm-7">
|
|
140
|
+
<div class="check">
|
|
141
|
+
<a href="#" class="checka"><i class="icon-ok"></i></a>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
<hr/>
|
|
146
|
+
<div class="row">
|
|
147
|
+
<div class="col-sm-4">
|
|
148
|
+
<button class="btn btn-success btn-splited" type="submit">
|
|
149
|
+
<span>Continue</span>
|
|
150
|
+
<span class="icn">→</span>
|
|
151
|
+
</button>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="col-sm-4">
|
|
154
|
+
<button class="btn btn-default btn-block" type="reset">
|
|
155
|
+
Reset
|
|
156
|
+
</button>
|
|
157
|
+
</div>
|
|
158
|
+
<div class="col-sm-4 press">
|
|
159
|
+
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
</form>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
<div class="section shine-top">
|
|
168
|
+
<div class="corset">
|
|
169
|
+
<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>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="section shine-top">
|
|
173
|
+
<div class="corset">
|
|
174
|
+
<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>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
</div>
|
|
180
|
+
</body>
|
|
181
|
+
|
|
182
|
+
</html>
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<html>
|
|
4
4
|
<head>
|
|
5
5
|
<title>Magic-Stylez</title>
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
7
|
-
<script src="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-aa2461ae49c57b2ee5e558b0844b9816.css" media="all" rel="stylesheet" />
|
|
7
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/application-16272649a1669aa854ba145f7b19f4e2.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="viUaKXlZN0Q+5iy1LIBbyZbruD+ptSR/duC/Qxed/Vs=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -64,7 +64,9 @@
|
|
|
64
64
|
<ul class="sub_nav">
|
|
65
65
|
<li><a class="app_lnk lst_lnk" data-target="templates/aside-nav" href="#">Aside Nav</a></li>
|
|
66
66
|
<li><a class="app_lnk lst_lnk" data-target="templates/fixed_header" href="#">Fixed Header</a></li>
|
|
67
|
-
<li><a class="app_lnk lst_lnk" data-target="templates/
|
|
67
|
+
<li><a class="app_lnk lst_lnk" data-target="templates/fixed_subnav" href="#">Fixed Subnav</a></li>
|
|
68
|
+
<li><a class="app_lnk lst_lnk" data-target="templates/slidebar_header" href="#">Slidebar Header</a></li>
|
|
69
|
+
<li><a class="app_lnk lst_lnk" data-target="templates/slidebar_subnav" href="#">Slidebar Subnav</a></li>
|
|
68
70
|
</ul>
|
|
69
71
|
</li>
|
|
70
72
|
</ul>
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<html>
|
|
4
4
|
<head>
|
|
5
5
|
<title>Magic-Stylez</title>
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-aa2461ae49c57b2ee5e558b0844b9816.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="viUaKXlZN0Q+5iy1LIBbyZbruD+ptSR/duC/Qxed/Vs=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -64,6 +64,12 @@
|
|
|
64
64
|
<br/>
|
|
65
65
|
<h4>dependency:</h4>
|
|
66
66
|
<code>@import "magic/content/navbar";</code>
|
|
67
|
+
<br/>
|
|
68
|
+
<br/>
|
|
69
|
+
<br/>
|
|
70
|
+
<div class="h3 center_text">
|
|
71
|
+
<i class="magicons-arrow-right"></i> Smaller your screen to see the Slidebar !! <i class="magicons-arrow-left"></i>
|
|
72
|
+
</div>
|
|
67
73
|
</div>
|
|
68
74
|
</div>
|
|
69
75
|
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
|
|
2
|
+
<!DOCTYPE html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<title>Magic-Stylez</title>
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-aa2461ae49c57b2ee5e558b0844b9816.css" media="all" rel="stylesheet" />
|
|
7
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
|
8
|
+
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
+
<meta content="viUaKXlZN0Q+5iy1LIBbyZbruD+ptSR/duC/Qxed/Vs=" name="csrf-token" />
|
|
10
|
+
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
|
+
<script type="text/javascript" charset="utf-8">
|
|
12
|
+
App = {};
|
|
13
|
+
App.Environment = "production";
|
|
14
|
+
</script>
|
|
15
|
+
</head>
|
|
16
|
+
<body class="blank fixed-nav fixed-sub-nav">
|
|
17
|
+
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-slidebar" role="navigation">
|
|
18
|
+
<div class="corset">
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
<div class="navbar-header">
|
|
23
|
+
<button type="button" class="navbar-toggle slidebar-toggle" data-target="#front-main-nav-colapse">
|
|
24
|
+
<span class="sr-only">Toggle navigation</span>
|
|
25
|
+
<span class="icon-bar"></span>
|
|
26
|
+
<span class="icon-bar"></span>
|
|
27
|
+
<span class="icon-bar"></span>
|
|
28
|
+
</button>
|
|
29
|
+
<a class="navbar-brand" href="#">Magic-Stylez</a>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="collapse navbar-collapse" id="front-main-nav-colapse">
|
|
32
|
+
<ul class="nav navbar-nav navbar-left">
|
|
33
|
+
<li><a href="#">Link</a></li>
|
|
34
|
+
<li><a href="#">Link</a></li>
|
|
35
|
+
|
|
36
|
+
</ul>
|
|
37
|
+
<ul class="nav navbar-nav navbar-right">
|
|
38
|
+
<li class="dropdown">
|
|
39
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
40
|
+
Dropdown <b class="caret"></b>
|
|
41
|
+
</a> <ul class="dropdown-menu">
|
|
42
|
+
<li><a href="#">Link 1</a></li>
|
|
43
|
+
<li><a href="#">Link 2</a></li>
|
|
44
|
+
<li><a href="#">Link 3</a></li>
|
|
45
|
+
</ul>
|
|
46
|
+
</li>
|
|
47
|
+
<li><a class="btn btn-success" href="#">Button</a></li>
|
|
48
|
+
</ul>
|
|
49
|
+
<div class="clearfix"></div>
|
|
50
|
+
<div class="navbar-sub-nav">
|
|
51
|
+
|
|
52
|
+
<ul class="nav navbar-nav navbar-left">
|
|
53
|
+
<li><a href="#">Link</a></li>
|
|
54
|
+
<li><a href="#">Link</a></li>
|
|
55
|
+
|
|
56
|
+
</ul>
|
|
57
|
+
<ul class="nav navbar-nav navbar-right">
|
|
58
|
+
<li class="dropdown">
|
|
59
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
60
|
+
Dropdown <b class="caret"></b>
|
|
61
|
+
</a> <ul class="dropdown-menu">
|
|
62
|
+
<li><a href="#">Link 1</a></li>
|
|
63
|
+
<li><a href="#">Link 2</a></li>
|
|
64
|
+
<li><a href="#">Link 3</a></li>
|
|
65
|
+
</ul>
|
|
66
|
+
</li>
|
|
67
|
+
<li><a class="btn btn-success" href="#">Button</a></li>
|
|
68
|
+
</ul>
|
|
69
|
+
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<div class="main_content">
|
|
77
|
+
|
|
78
|
+
<div class="section brand">
|
|
79
|
+
<div class="corset">
|
|
80
|
+
<h1>Responsive Slidebar</h1>
|
|
81
|
+
<br/>
|
|
82
|
+
<p class="loud">
|
|
83
|
+
Turns the usual twbs <em>navbar-collapse</em> into a nice slidebar. .. try it out:<br/>
|
|
84
|
+
make your screen smaller than 768px and press the header-toggle
|
|
85
|
+
</p>
|
|
86
|
+
<br/>
|
|
87
|
+
<h4>dependency:</h4>
|
|
88
|
+
<code>@import "magic/content/navbar";</code>
|
|
89
|
+
<br/>
|
|
90
|
+
<br/>
|
|
91
|
+
<br/>
|
|
92
|
+
<div class="h3 center_text">
|
|
93
|
+
<i class="magicons-arrow-right"></i> Smaller your screen to see the Slidebar !! <i class="magicons-arrow-left"></i>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
<div class="section">
|
|
101
|
+
<div class="corset">
|
|
102
|
+
<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>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<div class="section shine-top">
|
|
107
|
+
<div class="corset">
|
|
108
|
+
<div class="row">
|
|
109
|
+
<div class="col-sm-6">
|
|
110
|
+
<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.</p>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="col-sm-6">
|
|
113
|
+
<p>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>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<div class="section shine-top">
|
|
120
|
+
<div class="corset tight">
|
|
121
|
+
<div class="box">
|
|
122
|
+
<div class="header">
|
|
123
|
+
<h3>Some Form</h3>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="body">
|
|
126
|
+
<form action="#" method="get" accept-charset="utf-8" class="form">
|
|
127
|
+
<div class="row">
|
|
128
|
+
<div class="col-sm-5 press">
|
|
129
|
+
<label>Text-Field</label>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="col-sm-7 press">
|
|
132
|
+
<input type="text" class="form-control">
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="row">
|
|
136
|
+
<div class="col-sm-5 press">
|
|
137
|
+
<label>check_switch</label>
|
|
138
|
+
</div>
|
|
139
|
+
<div class="col-sm-7 press">
|
|
140
|
+
<div class="check_switch">
|
|
141
|
+
<div class="switch_toggle"></div>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="row">
|
|
146
|
+
<div class="col-sm-5">
|
|
147
|
+
<label>check</label>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="col-sm-7">
|
|
150
|
+
<div class="check">
|
|
151
|
+
<a href="#" class="checka"><i class="icon-ok"></i></a>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
<hr/>
|
|
156
|
+
<div class="row">
|
|
157
|
+
<div class="col-sm-4">
|
|
158
|
+
<button class="btn btn-success btn-splited" type="submit">
|
|
159
|
+
<span>Continue</span>
|
|
160
|
+
<span class="icn">→</span>
|
|
161
|
+
</button>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="col-sm-4">
|
|
164
|
+
<button class="btn btn-default btn-block" type="reset">
|
|
165
|
+
Reset
|
|
166
|
+
</button>
|
|
167
|
+
</div>
|
|
168
|
+
<div class="col-sm-4 press">
|
|
169
|
+
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
</form>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="section shine-top">
|
|
178
|
+
<div class="corset">
|
|
179
|
+
<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>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
<div class="section shine-top">
|
|
183
|
+
<div class="corset">
|
|
184
|
+
<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>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
</div>
|
|
189
|
+
</body>
|
|
190
|
+
|
|
191
|
+
</html>
|
|
@@ -288,7 +288,11 @@ $navbar-height: 50px !default;
|
|
|
288
288
|
$navbar-height-lg: 60px !default;
|
|
289
289
|
$navbar-height-xl: 80px !default;
|
|
290
290
|
|
|
291
|
-
$subnav-height:
|
|
291
|
+
$subnav-height: 40px !default;
|
|
292
|
+
$subnav-background: #069 !default;
|
|
293
|
+
$subnav-color: #fff !default;
|
|
294
|
+
$subnav-hover-color: #ccc !default;
|
|
295
|
+
$subnav-active-color: #aaa !default;
|
|
292
296
|
|
|
293
297
|
$navbar-margin-bottom: $line-height-computed !default;
|
|
294
298
|
$navbar-border-radius: $border-radius-base !default;
|
|
@@ -120,11 +120,11 @@
|
|
|
120
120
|
padding-left: $aside-nav-width;
|
|
121
121
|
|
|
122
122
|
.application_notice { margin-left: $aside-nav-width; }
|
|
123
|
-
.fixed-top, .navbar-fixed-top { left: $aside-nav-width; }
|
|
123
|
+
.fixed-top, .navbar-fixed-top, .nav.navbar-nav.navbar-sub-nav { left: $aside-nav-width; }
|
|
124
124
|
|
|
125
125
|
&.aside_next_header {
|
|
126
126
|
#nav-aside { top: 0; }
|
|
127
|
-
.fixed-top, .navbar-fixed-top { left: $aside-nav-width; }
|
|
127
|
+
.fixed-top, .navbar-fixed-top, .nav.navbar-nav.navbar-sub-nav { left: $aside-nav-width; }
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
&.aside_under_header {
|
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
// $navbar-height-xl: 80px !default;
|
|
9
9
|
//
|
|
10
10
|
// $subnav-height: 50px !default;
|
|
11
|
+
// $subnav-background: #069 !default;
|
|
12
|
+
// $subnav-color: #fff !default;
|
|
11
13
|
//
|
|
12
14
|
// $navbar-margin-bottom: $line-height-computed !default;
|
|
13
15
|
// $navbar-border-radius: $border-radius-base !default;
|
|
@@ -94,6 +96,11 @@
|
|
|
94
96
|
}
|
|
95
97
|
|
|
96
98
|
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
|
|
97
104
|
body, #body, #container, .main-content, .main_content {
|
|
98
105
|
|
|
99
106
|
&.fixed-nav-xs { padding-top: $navbar-height-xs; }
|
|
@@ -136,14 +143,125 @@ body, #body, #container, .main-content, .main_content {
|
|
|
136
143
|
}
|
|
137
144
|
}
|
|
138
145
|
|
|
146
|
+
.navbar-sub-nav {
|
|
147
|
+
display: block;
|
|
148
|
+
float: none;
|
|
149
|
+
}
|
|
150
|
+
|
|
139
151
|
|
|
140
|
-
@
|
|
152
|
+
@mixin calculate_subnav_position( $that-header-height: 50px ) {
|
|
153
|
+
&.fixed-sub-nav { padding-top: $subnav-height + $that-header-height; }
|
|
154
|
+
.navbar-sub-nav { top: $that-header-height; }
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
@include responsiveStep-sm {
|
|
158
|
+
|
|
159
|
+
.navbar-sub-nav {
|
|
160
|
+
$padHorizontal: floor(($subnav-height - $line-height-computed) / 2);
|
|
161
|
+
$lineHeight: $subnav-height - $padHorizontal * 2;
|
|
162
|
+
|
|
163
|
+
display: block; position: relative;
|
|
164
|
+
margin: 0; padding: 0;
|
|
165
|
+
|
|
166
|
+
height: $subnav-height;
|
|
167
|
+
min-height: $subnav-height;
|
|
168
|
+
|
|
169
|
+
position: fixed;
|
|
170
|
+
left: 0;
|
|
171
|
+
right: 0;
|
|
172
|
+
top: 100%;
|
|
173
|
+
margin-top: 1px;
|
|
174
|
+
|
|
175
|
+
background: $subnav-background;
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
// a:not(.btn) { }
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
&, & > .nav.navbar-nav {
|
|
184
|
+
list-style: none;
|
|
185
|
+
|
|
186
|
+
&, & > li, & > li > a { color: $subnav-color; }
|
|
187
|
+
& > li > a:hover { color: $subnav-hover-color; }
|
|
188
|
+
& > li > a:active { color: $subnav-active-color; }
|
|
189
|
+
& > li {
|
|
190
|
+
float: left;
|
|
191
|
+
position: relative;
|
|
192
|
+
display: block;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
& > .open > a {
|
|
196
|
+
background: darken($subnav-background, 5%);
|
|
197
|
+
color: #fff;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
& > li > a, & > a {
|
|
201
|
+
|
|
202
|
+
display: block; position: relative;
|
|
203
|
+
padding: $padHorizontal $navbar-padding-horizontal;
|
|
204
|
+
line-height: $lineHeight;
|
|
205
|
+
|
|
206
|
+
&.btn {
|
|
207
|
+
@if ($lineHeight + 10) > ($subnav-height - 5) {
|
|
208
|
+
margin: 4px 5px;
|
|
209
|
+
@include vertical-padding( $padHorizontal - 5px );
|
|
210
|
+
line-height: $lineHeight;
|
|
211
|
+
} @else {
|
|
212
|
+
margin: #{$padHorizontal - 6px} 5px;
|
|
213
|
+
@include vertical-padding( 5px );
|
|
214
|
+
line-height: $lineHeight;
|
|
215
|
+
|
|
216
|
+
@if ($lineHeight + 16) < ($subnav-height - 5) {
|
|
217
|
+
&.btn-lg {
|
|
218
|
+
margin: #{$padHorizontal - 9px} 5px;
|
|
219
|
+
@include vertical-padding( 8px );
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
&.btn-sm {
|
|
224
|
+
margin: #{$padHorizontal - 4px} 5px;
|
|
225
|
+
@include vertical-padding( 3px );
|
|
226
|
+
}
|
|
227
|
+
&.btn-xs {
|
|
228
|
+
margin: #{$padHorizontal - 2px} 5px;
|
|
229
|
+
@include vertical-padding( 1px );
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
}
|
|
141
240
|
|
|
142
241
|
body, #body, #container, .main-content, .main_content {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
&.fixed-
|
|
146
|
-
&.fixed-
|
|
147
|
-
&.fixed-
|
|
242
|
+
|
|
243
|
+
&.fixed-nav-xs { @include calculate_subnav_position( $navbar-height-xs ); }
|
|
244
|
+
&.fixed-nav-sm { @include calculate_subnav_position( $navbar-height-sm ); }
|
|
245
|
+
&.fixed-nav { @include calculate_subnav_position( $navbar-height ); }
|
|
246
|
+
&.fixed-nav-lg { @include calculate_subnav_position( $navbar-height-lg ); }
|
|
247
|
+
&.fixed-nav-xl { @include calculate_subnav_position( $navbar-height-xl ); }
|
|
248
|
+
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.corset .navbar-sub-nav { @include horizontal-padding( 5% ); }
|
|
252
|
+
|
|
253
|
+
.navbar.navbar-fixed-top {
|
|
254
|
+
.navbar-collapse {
|
|
255
|
+
.nav.navbar-nav.navbar-left { margin-left: -15px; }
|
|
256
|
+
.nav.navbar-nav.navbar-right { margin-right: -15px; }
|
|
257
|
+
}
|
|
258
|
+
.navbar-header { margin-left: -15px; }
|
|
259
|
+
.navbar-header + .navbar-collapse > .nav.navbar-nav.navbar-left { margin-left: 0; }
|
|
148
260
|
}
|
|
149
|
-
|
|
261
|
+
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
@include responsiveStep-lg {
|
|
265
|
+
.corset .navbar-sub-nav { @include horizontal-padding( 10% ); }
|
|
266
|
+
}
|
|
267
|
+
|
|
@@ -38,10 +38,10 @@
|
|
|
38
38
|
@mixin calculate_notice_top( $that-header-height: 50px ) {
|
|
39
39
|
padding-top: $important-notice-height + $that-header-height;
|
|
40
40
|
.application_notice { top: $application-notice-top + $important-notice-height + $that-header-height; }
|
|
41
|
-
&.fixed-sub-nav {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
41
|
+
// &.fixed-sub-nav {
|
|
42
|
+
// padding-top: $important-notice-height + $that-header-height + $subnav-height;
|
|
43
|
+
// .application_notice { top: $application-notice-top + $important-notice-height + $that-header-height + $subnav-height; }
|
|
44
|
+
// }
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
|
|
@@ -59,30 +59,11 @@ body, #body, #container, .main-content, .main_content {
|
|
|
59
59
|
|
|
60
60
|
.application_notice { top: $application-notice-top + $important-notice-height; }
|
|
61
61
|
|
|
62
|
-
&.fixed-nav-xs { @include calculate_notice_top( $navbar-height-xs );
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
// .application_notice { top: $application-notice-top + $important-notice-height + $navbar-height-xs; }
|
|
68
|
-
// }
|
|
69
|
-
}
|
|
70
|
-
&.fixed-nav-sm { @include calculate_notice_top( $navbar-height-sm );
|
|
71
|
-
// padding-top: $important-notice-height + $navbar-height-sm;
|
|
72
|
-
// .application_notice { top: $application-notice-top + $important-notice-height + $navbar-height-sm; }
|
|
73
|
-
}
|
|
74
|
-
&.fixed-nav { @include calculate_notice_top( $navbar-height );
|
|
75
|
-
// padding-top: $important-notice-height + $navbar-height;
|
|
76
|
-
// .application_notice { top: $application-notice-top + $important-notice-height + $navbar-height; }
|
|
77
|
-
}
|
|
78
|
-
&.fixed-nav-lg { @include calculate_notice_top( $navbar-height-lg );
|
|
79
|
-
// padding-top: $important-notice-height + $navbar-height-lg;
|
|
80
|
-
// .application_notice { top: $application-notice-top + $important-notice-height + $navbar-height-lg; }
|
|
81
|
-
}
|
|
82
|
-
&.fixed-nav-xl { @include calculate_notice_top( $navbar-height-xl );
|
|
83
|
-
// padding-top: $important-notice-height + $navbar-height-xl;
|
|
84
|
-
// .application_notice { top: $application-notice-top + $important-notice-height + $navbar-height-xl; }
|
|
85
|
-
}
|
|
62
|
+
&.fixed-nav-xs { @include calculate_notice_top( $navbar-height-xs ); }
|
|
63
|
+
&.fixed-nav-sm { @include calculate_notice_top( $navbar-height-sm ); }
|
|
64
|
+
&.fixed-nav { @include calculate_notice_top( $navbar-height ); }
|
|
65
|
+
&.fixed-nav-lg { @include calculate_notice_top( $navbar-height-lg ); }
|
|
66
|
+
&.fixed-nav-xl { @include calculate_notice_top( $navbar-height-xl ); }
|
|
86
67
|
|
|
87
68
|
.fixed-top, .navbar-fixed-top { top: $important-notice-height; }
|
|
88
69
|
|
|
@@ -99,6 +80,18 @@ body, #body, #container, .main-content, .main_content {
|
|
|
99
80
|
|
|
100
81
|
#nav-aside { top: $important-notice-height; }
|
|
101
82
|
|
|
83
|
+
&.fixed-nav-xs.fixed-sub-nav { @include calculate_notice_top( $navbar-height-xs + $subnav-height ); }
|
|
84
|
+
&.fixed-nav-sm.fixed-sub-nav { @include calculate_notice_top( $navbar-height-sm + $subnav-height ); }
|
|
85
|
+
&.fixed-nav.fixed-sub-nav { @include calculate_notice_top( $navbar-height + $subnav-height ); }
|
|
86
|
+
&.fixed-nav-lg.fixed-sub-nav { @include calculate_notice_top( $navbar-height-lg + $subnav-height ); }
|
|
87
|
+
&.fixed-nav-xl.fixed-sub-nav { @include calculate_notice_top( $navbar-height-xl + $subnav-height ); }
|
|
88
|
+
|
|
89
|
+
&.fixed-nav-xs .nav.navbar-nav.navbar-sub-nav { top: $important-notice-height + $navbar-height-xs; }
|
|
90
|
+
&.fixed-nav-sm .nav.navbar-nav.navbar-sub-nav { top: $important-notice-height + $navbar-height-sm; }
|
|
91
|
+
&.fixed-nav .nav.navbar-nav.navbar-sub-nav { top: $important-notice-height + $navbar-height; }
|
|
92
|
+
&.fixed-nav-lg .nav.navbar-nav.navbar-sub-nav { top: $important-notice-height + $navbar-height-lg; }
|
|
93
|
+
&.fixed-nav-xl .nav.navbar-nav.navbar-sub-nav { top: $important-notice-height + $navbar-height-xl; }
|
|
94
|
+
|
|
102
95
|
}
|
|
103
96
|
}
|
|
104
97
|
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
// min-width: 320px;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
@
|
|
33
|
+
@include responsiveStep-sm {
|
|
34
34
|
|
|
35
35
|
.corset {
|
|
36
36
|
&, &.tight, &.extra-tight, &.ultra-tight, &.full {
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
@
|
|
48
|
+
@include responsiveStep-lg {
|
|
49
49
|
|
|
50
50
|
.corset {
|
|
51
51
|
width: 80% !important;
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: magic_stylez
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.0.
|
|
4
|
+
version: 0.0.0.48
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Torsten Wetzel
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-09-
|
|
11
|
+
date: 2014-09-16 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -240,7 +240,9 @@ files:
|
|
|
240
240
|
- test/dummy/app/assets/javascripts/views/layout/slide_boxes.jst.eco
|
|
241
241
|
- test/dummy/app/assets/javascripts/views/templates/aside-nav.jst.eco
|
|
242
242
|
- test/dummy/app/assets/javascripts/views/templates/fixed_header.jst.eco
|
|
243
|
-
- test/dummy/app/assets/javascripts/views/templates/
|
|
243
|
+
- test/dummy/app/assets/javascripts/views/templates/fixed_subnav.jst.eco
|
|
244
|
+
- test/dummy/app/assets/javascripts/views/templates/slidebar_header.jst.eco
|
|
245
|
+
- test/dummy/app/assets/javascripts/views/templates/slidebar_subnav.jst.eco
|
|
244
246
|
- test/dummy/app/assets/stylesheets/application.css.scss
|
|
245
247
|
- test/dummy/app/assets/stylesheets/corporate/_colors.scss
|
|
246
248
|
- test/dummy/app/assets/stylesheets/corporate/_fonts.scss
|
|
@@ -261,7 +263,9 @@ files:
|
|
|
261
263
|
- test/dummy/app/views/templates/_lorem.html.erb
|
|
262
264
|
- test/dummy/app/views/templates/aside-nav.html.erb
|
|
263
265
|
- test/dummy/app/views/templates/fixed-header.html.erb
|
|
264
|
-
- test/dummy/app/views/templates/
|
|
266
|
+
- test/dummy/app/views/templates/fixed-subnav.html.erb
|
|
267
|
+
- test/dummy/app/views/templates/slidebar-header.html.erb
|
|
268
|
+
- test/dummy/app/views/templates/slidebar-subnav.html.erb
|
|
265
269
|
- test/dummy/bin/bundle
|
|
266
270
|
- test/dummy/bin/rails
|
|
267
271
|
- test/dummy/bin/rake
|
|
@@ -292,8 +296,10 @@ files:
|
|
|
292
296
|
- test/dummy/public/favicon.png
|
|
293
297
|
- test/dummy/public/html/aside-nav.html
|
|
294
298
|
- test/dummy/public/html/fixed-header.html
|
|
299
|
+
- test/dummy/public/html/fixed-subnav.html
|
|
295
300
|
- test/dummy/public/html/index.html
|
|
296
|
-
- test/dummy/public/html/
|
|
301
|
+
- test/dummy/public/html/slidebar-header.html
|
|
302
|
+
- test/dummy/public/html/slidebar-subnav.html
|
|
297
303
|
- test/magic_stylez_test.rb
|
|
298
304
|
- test/test_helper.rb
|
|
299
305
|
- vendor/assets/filter/magic/filter.svg
|
|
@@ -449,7 +455,9 @@ test_files:
|
|
|
449
455
|
- test/dummy/app/assets/javascripts/views/layout/slide_boxes.jst.eco
|
|
450
456
|
- test/dummy/app/assets/javascripts/views/templates/aside-nav.jst.eco
|
|
451
457
|
- test/dummy/app/assets/javascripts/views/templates/fixed_header.jst.eco
|
|
452
|
-
- test/dummy/app/assets/javascripts/views/templates/
|
|
458
|
+
- test/dummy/app/assets/javascripts/views/templates/fixed_subnav.jst.eco
|
|
459
|
+
- test/dummy/app/assets/javascripts/views/templates/slidebar_header.jst.eco
|
|
460
|
+
- test/dummy/app/assets/javascripts/views/templates/slidebar_subnav.jst.eco
|
|
453
461
|
- test/dummy/app/assets/stylesheets/application.css.scss
|
|
454
462
|
- test/dummy/app/assets/stylesheets/corporate/_colors.scss
|
|
455
463
|
- test/dummy/app/assets/stylesheets/corporate/_fonts.scss
|
|
@@ -470,7 +478,9 @@ test_files:
|
|
|
470
478
|
- test/dummy/app/views/templates/_lorem.html.erb
|
|
471
479
|
- test/dummy/app/views/templates/aside-nav.html.erb
|
|
472
480
|
- test/dummy/app/views/templates/fixed-header.html.erb
|
|
473
|
-
- test/dummy/app/views/templates/
|
|
481
|
+
- test/dummy/app/views/templates/fixed-subnav.html.erb
|
|
482
|
+
- test/dummy/app/views/templates/slidebar-header.html.erb
|
|
483
|
+
- test/dummy/app/views/templates/slidebar-subnav.html.erb
|
|
474
484
|
- test/dummy/bin/bundle
|
|
475
485
|
- test/dummy/bin/rails
|
|
476
486
|
- test/dummy/bin/rake
|
|
@@ -501,7 +511,9 @@ test_files:
|
|
|
501
511
|
- test/dummy/public/favicon.png
|
|
502
512
|
- test/dummy/public/html/aside-nav.html
|
|
503
513
|
- test/dummy/public/html/fixed-header.html
|
|
514
|
+
- test/dummy/public/html/fixed-subnav.html
|
|
504
515
|
- test/dummy/public/html/index.html
|
|
505
|
-
- test/dummy/public/html/
|
|
516
|
+
- test/dummy/public/html/slidebar-header.html
|
|
517
|
+
- test/dummy/public/html/slidebar-subnav.html
|
|
506
518
|
- test/magic_stylez_test.rb
|
|
507
519
|
- test/test_helper.rb
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<iframe src="<%= "#{rootPath()}responsive-slidebar" %>" name="SELFHTML_in_a_box" id="mainFrame">
|
|
2
|
-
<p>Sorry, your Browser doesn't like Frames.
|
|
3
|
-
But we would need an iframe to show the template stuff
|
|
4
|
-
<a href="/responsive-slidebar">Responsive Slidebar</a></p>
|
|
5
|
-
</iframe>
|