magic_stylez 0.0.0.48 → 0.0.0.49
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/content/buttons.jst.eco +99 -1
- data/test/dummy/app/assets/javascripts/views/content/forms.jst.eco +11 -2
- data/test/dummy/app/assets/javascripts/views/content/labels.jst.eco +48 -0
- data/test/dummy/app/assets/stylesheets/corporate/_colors.scss +21 -2
- data/test/dummy/app/assets/stylesheets/corporate/_variables.scss +5 -7
- data/test/dummy/app/controllers/front_controller.rb +14 -1
- data/test/dummy/app/views/templates/slidebar-subnav.html.erb +1 -1
- data/test/dummy/config/routes.rb +1 -0
- data/test/dummy/public/html/aside-nav.html +12 -104
- data/test/dummy/public/html/fixed-header.html +21 -13
- data/test/dummy/public/html/fixed-subnav.html +21 -35
- data/test/dummy/public/html/index.html +4 -4
- data/test/dummy/public/html/slidebar-header.html +2 -3
- data/test/dummy/public/html/slidebar-subnav.html +3 -26
- data/vendor/assets/stylesheets/corporate/_colors.scss +21 -3
- data/vendor/assets/stylesheets/corporate/_variables.scss +5 -7
- data/vendor/assets/stylesheets/magic/content/_aside_nav.scss +2 -2
- data/vendor/assets/stylesheets/magic/content/_buttons.scss +28 -18
- data/vendor/assets/stylesheets/magic/content/_buttons_nice.scss +40 -0
- data/vendor/assets/stylesheets/magic/content/_forms.scss +1 -0
- data/vendor/assets/stylesheets/magic/content/_labels.scss +48 -0
- data/vendor/assets/stylesheets/magic/content/_navbar.scss +14 -1
- data/vendor/assets/stylesheets/magic/content/_notice.scss +5 -5
- data/vendor/assets/stylesheets/magic/lib/_helper.scss +78 -0
- data/vendor/assets/stylesheets/magic-stylez.scss +2 -0
- metadata +5 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8d00e710fed082818b9b8763893857e0a8c5073b
|
4
|
+
data.tar.gz: 1b281e36c317d05f3a6f7299c64dec04e385ebb6
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 376198b110e5e4280d7b29b9659035f24f2201eaa6afc4ba5f705e037a09a187459ffb1fdcb50fa9ffd6c274741b15fff95d19f738eb0be83d27a68323e95fb5
|
7
|
+
data.tar.gz: 6f598fe55ee115da66f7e86db89e06c9fb97b3365080585b8e4685588d827cc00a2d21169658e62e004a653ebac22b2470403e211e987d7c82abed99776b378e
|
data/lib/magic_stylez/version.rb
CHANGED
@@ -7,7 +7,8 @@
|
|
7
7
|
<div class="section dark flatted">
|
8
8
|
<div class="corset">
|
9
9
|
<h4>dependency:</h4>
|
10
|
-
<code>@import "magic/content/buttons";</code
|
10
|
+
<code>@import "magic/content/buttons";</code><br/>
|
11
|
+
<code>@import "magic/content/buttons_nice";</code>
|
11
12
|
</div>
|
12
13
|
</div>
|
13
14
|
|
@@ -24,6 +25,15 @@
|
|
24
25
|
</div>
|
25
26
|
</div>
|
26
27
|
|
28
|
+
<div class="btn btn-success btn-blank btn-lg btn-splited">
|
29
|
+
<div class="text">
|
30
|
+
.btn-splited.btn-blank
|
31
|
+
</div>
|
32
|
+
<div class="icn">
|
33
|
+
<i class="magicons-caret-right"></i>
|
34
|
+
</div>
|
35
|
+
</div>
|
36
|
+
|
27
37
|
<div class="btn btn-default btn-lg btn-block btn-splited half">
|
28
38
|
<div class="icn">
|
29
39
|
<i class="olicons-message-full"></i>
|
@@ -32,6 +42,14 @@
|
|
32
42
|
.btn-splited.half
|
33
43
|
</div>
|
34
44
|
</div>
|
45
|
+
<div class="btn btn-default btn-blank btn-lg btn-block btn-splited half">
|
46
|
+
<div class="icn">
|
47
|
+
<i class="olicons-message-full"></i>
|
48
|
+
</div>
|
49
|
+
<div class="text">
|
50
|
+
.btn-splited.half
|
51
|
+
</div>
|
52
|
+
</div>
|
35
53
|
|
36
54
|
<div class="btn btn-primary btn-lg btn-block btn-divided">
|
37
55
|
<div class="icn">
|
@@ -41,6 +59,14 @@
|
|
41
59
|
.btn-divided
|
42
60
|
</div>
|
43
61
|
</div>
|
62
|
+
<div class="btn btn-primary btn-blank btn-lg btn-block btn-divided">
|
63
|
+
<div class="icn">
|
64
|
+
<i class="olicons-overview"></i>
|
65
|
+
</div>
|
66
|
+
<div class="text">
|
67
|
+
.btn-divided.btn-blank
|
68
|
+
</div>
|
69
|
+
</div>
|
44
70
|
|
45
71
|
<div class="btn btn-warning btn-block btn-divided half">
|
46
72
|
<div class="icn">
|
@@ -63,6 +89,18 @@
|
|
63
89
|
</div>
|
64
90
|
</div>
|
65
91
|
|
92
|
+
<div class="btn btn-danger btn-blank btn-sm btn-divided">
|
93
|
+
<div class="icn">
|
94
|
+
<i class="olicons-contact-data"></i>
|
95
|
+
</div>
|
96
|
+
<div class="text">
|
97
|
+
.btn-divided
|
98
|
+
</div>
|
99
|
+
<div class="icn">
|
100
|
+
<i class="olicons-male"></i>
|
101
|
+
</div>
|
102
|
+
</div>
|
103
|
+
|
66
104
|
<div class="btn btn-default btn-xs btn-splited">
|
67
105
|
<div class="icn">
|
68
106
|
<i class="olicons-ok"></i>
|
@@ -134,3 +172,63 @@
|
|
134
172
|
<p class="loud">tag of inner element doesn't matter just the element conaining the icon need class <strong>.icn</strong></p>
|
135
173
|
</div>
|
136
174
|
</div>
|
175
|
+
|
176
|
+
<div class="section flat-bottom hard-top">
|
177
|
+
<div class="corset">
|
178
|
+
<h2>Available Colors</h2>
|
179
|
+
</div>
|
180
|
+
</div>
|
181
|
+
|
182
|
+
<div class="section">
|
183
|
+
<div class="corset">
|
184
|
+
<div class="row">
|
185
|
+
<% dflt_btns = ["default", "success", "primary", "info", "warning", "danger"] %>
|
186
|
+
<% scl_btns = ["facebook", "google", "paypal", "twitter"] %>
|
187
|
+
<% brnd_btns = ["brand"] %>
|
188
|
+
<% cstm_btns = ["one", "two", "three"] %>
|
189
|
+
|
190
|
+
<% buttons = { default: dflt_btns, socials: scl_btns, brand: brnd_btns, custom: cstm_btns } %>
|
191
|
+
<div class="col-md-4">
|
192
|
+
<h4 class="center_text">Flat</h4>
|
193
|
+
<% for key, value of buttons: %>
|
194
|
+
<hr/>
|
195
|
+
<h5 class="center_text"><%= key %></h5>
|
196
|
+
<% for btn, i in value: %>
|
197
|
+
<div class="btn btn-<%= btn %> btn-lg btn-block">
|
198
|
+
.btn-<%= btn %>
|
199
|
+
</div>
|
200
|
+
<% end %>
|
201
|
+
<% end %>
|
202
|
+
</div>
|
203
|
+
<div class="col-md-4">
|
204
|
+
<h4 class="center_text">Blank</h4>
|
205
|
+
<% for key, value of buttons: %>
|
206
|
+
<hr/>
|
207
|
+
<h5 class="center_text"><%= key %></h5>
|
208
|
+
<% for btn, i in value: %>
|
209
|
+
<div class="btn btn-<%= btn %> btn-blank btn-lg btn-block">
|
210
|
+
.btn-<%= btn %> + .btn-blank
|
211
|
+
</div>
|
212
|
+
<% end %>
|
213
|
+
<% end %>
|
214
|
+
</div>
|
215
|
+
|
216
|
+
<div class="col-md-4">
|
217
|
+
<h4 class="center_text">Nice</h4>
|
218
|
+
<% for key, value of buttons: %>
|
219
|
+
<hr/>
|
220
|
+
<h5 class="center_text"><%= key %></h5>
|
221
|
+
<% for btn, i in value: %>
|
222
|
+
<div class="btn btn-<%= btn %>-nice btn-lg btn-block">
|
223
|
+
.btn-<%= btn %>-nice
|
224
|
+
</div>
|
225
|
+
<% end %>
|
226
|
+
<% end %>
|
227
|
+
</div>
|
228
|
+
</div>
|
229
|
+
</div>
|
230
|
+
</div>
|
231
|
+
|
232
|
+
<br/>
|
233
|
+
<br/>
|
234
|
+
<br/>
|
@@ -14,7 +14,7 @@
|
|
14
14
|
<div class="section hard-top">
|
15
15
|
<div class="corset tight">
|
16
16
|
|
17
|
-
<div class="input-group labeled">
|
17
|
+
<div class="input-group labeled press">
|
18
18
|
<div class="input-group-addon">
|
19
19
|
<input id="that_check_box" name="user[remember_me]" type="checkbox" value="1">
|
20
20
|
</div>
|
@@ -23,7 +23,7 @@
|
|
23
23
|
</label>
|
24
24
|
</div>
|
25
25
|
|
26
|
-
<div class="input-group">
|
26
|
+
<div class="input-group press">
|
27
27
|
<div class="input-group-addon">
|
28
28
|
<input id="that_check_box2" name="user[remember_me]" type="checkbox" value="1">
|
29
29
|
</div>
|
@@ -32,6 +32,15 @@
|
|
32
32
|
</label>
|
33
33
|
</div>
|
34
34
|
|
35
|
+
<div class="input-group labeled flat press">
|
36
|
+
<div class="input-group-addon">
|
37
|
+
<input id="that_check_box3" name="user[remember_me]" type="checkbox" value="1">
|
38
|
+
</div>
|
39
|
+
<label for="that_check_box3" class="form-control">
|
40
|
+
This is a input-group .labeled .flat
|
41
|
+
</label>
|
42
|
+
</div>
|
43
|
+
|
35
44
|
</div>
|
36
45
|
</div>
|
37
46
|
|
@@ -0,0 +1,48 @@
|
|
1
|
+
<div class="section flat-bottom hard-top">
|
2
|
+
<div class="corset">
|
3
|
+
<h2>Available Colors</h2>
|
4
|
+
</div>
|
5
|
+
</div>
|
6
|
+
|
7
|
+
<div class="section">
|
8
|
+
<div class="corset">
|
9
|
+
<div class="row">
|
10
|
+
<% dflt_btns = ["default", "success", "primary", "info", "warning", "danger"] %>
|
11
|
+
<% brnd_btns = ["brand"] %>
|
12
|
+
<% cstm_btns = ["one", "two", "three"] %>
|
13
|
+
|
14
|
+
<% buttons = { default: dflt_btns, brand: brnd_btns, custom: cstm_btns } %>
|
15
|
+
<div class="col-md-6">
|
16
|
+
<h4 class="center_text">Flat</h4>
|
17
|
+
<% for key, value of buttons: %>
|
18
|
+
<hr/>
|
19
|
+
<h5 class="center_text"><%= key %></h5>
|
20
|
+
<% for btn, i in value: %>
|
21
|
+
<p class="loud">
|
22
|
+
Some text ..
|
23
|
+
<span class="label label-<%= btn %>">.label-<%= btn %></span>
|
24
|
+
</p>
|
25
|
+
<% end %>
|
26
|
+
<% end %>
|
27
|
+
</div>
|
28
|
+
<div class="col-md-6">
|
29
|
+
<h4 class="center_text">Blank</h4>
|
30
|
+
<% for key, value of buttons: %>
|
31
|
+
<hr/>
|
32
|
+
<h5 class="center_text"><%= key %></h5>
|
33
|
+
<% for btn, i in value: %>
|
34
|
+
<p class="loud">
|
35
|
+
Some text ..
|
36
|
+
<span class="label label-<%= btn %> label-blank">.label-<%= btn %> + .label-blank</span>
|
37
|
+
</p>
|
38
|
+
<% end %>
|
39
|
+
<% end %>
|
40
|
+
</div>
|
41
|
+
|
42
|
+
</div>
|
43
|
+
</div>
|
44
|
+
</div>
|
45
|
+
|
46
|
+
<br/>
|
47
|
+
<br/>
|
48
|
+
<br/>
|
@@ -43,8 +43,12 @@ $brand-success: #006600 !default; // twbs-default: #5cb85c
|
|
43
43
|
$brand-info: #0099cc !default; // twbs-default: #5bc0de
|
44
44
|
$brand-warning: #f0ad4e !default; // twbs-default: #f0ad4e
|
45
45
|
$brand-danger: #d9534f !default; // twbs-default: #d9534f
|
46
|
-
|
47
|
-
|
46
|
+
// -------------------------
|
47
|
+
// Custom colors
|
48
|
+
// -------------------------
|
49
|
+
$brand-one: #ff00cc !default;
|
50
|
+
$brand-two: #00ffcc !default;
|
51
|
+
$brand-three: #cc6699 !default;
|
48
52
|
|
49
53
|
|
50
54
|
|
@@ -123,6 +127,21 @@ $btn-brand-color: #fff !default;
|
|
123
127
|
$btn-brand-bg: $brand-color !default;
|
124
128
|
$btn-brand-border: darken($btn-brand-bg, 5%) !default;
|
125
129
|
|
130
|
+
// Custom - Buttons
|
131
|
+
$btn-one-color: #fff !default;
|
132
|
+
$btn-one-bg: $brand-one !default;
|
133
|
+
$btn-one-border: darken($btn-one-bg, 5%) !default;
|
134
|
+
|
135
|
+
$btn-two-color: #fff !default;
|
136
|
+
$btn-two-bg: $brand-two !default;
|
137
|
+
$btn-two-border: darken($btn-two-bg, 5%) !default;
|
138
|
+
|
139
|
+
$btn-three-color: #fff !default;
|
140
|
+
$btn-three-bg: $brand-three !default;
|
141
|
+
$btn-three-border: darken($btn-three-bg, 5%) !default;
|
142
|
+
|
143
|
+
|
144
|
+
|
126
145
|
// -------------------------
|
127
146
|
// Social Buttons
|
128
147
|
// -------------------------
|
@@ -453,20 +453,18 @@ $popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%
|
|
453
453
|
//== Labels
|
454
454
|
//
|
455
455
|
//##
|
456
|
-
|
457
|
-
//** Default label background color
|
458
456
|
$label-default-bg: $gray-light !default;
|
459
|
-
//** Primary label background color
|
460
457
|
$label-primary-bg: $brand-primary !default;
|
461
|
-
//** Success label background color
|
462
458
|
$label-success-bg: $brand-success !default;
|
463
|
-
//** Info label background color
|
464
459
|
$label-info-bg: $brand-info !default;
|
465
|
-
//** Warning label background color
|
466
460
|
$label-warning-bg: $brand-warning !default;
|
467
|
-
//** Danger label background color
|
468
461
|
$label-danger-bg: $brand-danger !default;
|
469
462
|
|
463
|
+
$label-brand-bg: $brand-color !default;
|
464
|
+
$label-one-bg: $brand-one !default;
|
465
|
+
$label-two-bg: $brand-two !default;
|
466
|
+
$label-three-bg: $brand-three !default;
|
467
|
+
|
470
468
|
//** Default label text color
|
471
469
|
$label-color: #fff !default;
|
472
470
|
//** Default text color of a linked label
|
@@ -11,8 +11,21 @@ class FrontController < ApplicationController
|
|
11
11
|
if params[:template] && TEMPLATES.include?(params[:template].to_s)
|
12
12
|
render "templates/#{params[:template]}", layout: "blank"
|
13
13
|
else
|
14
|
-
render "templates/
|
14
|
+
render "templates/slidebar-header", layout: "blank"
|
15
15
|
end
|
16
16
|
end
|
17
17
|
|
18
|
+
def cache
|
19
|
+
directory = "#{Rails.root}/public/html/"
|
20
|
+
TEMPLATES.each do |tmpl|
|
21
|
+
File.open(File.join(directory, "#{tmpl}.html"), 'w') do |f|
|
22
|
+
f.puts render_to_string("templates/slidebar-header", layout: "blank")
|
23
|
+
end
|
24
|
+
end
|
25
|
+
File.open(File.join(directory, "index.html"), 'w') do |f|
|
26
|
+
f.puts render_to_string("front/start")
|
27
|
+
end
|
28
|
+
redirect_to root_path, notice: "Caching is done!"
|
29
|
+
end
|
30
|
+
|
18
31
|
end
|
@@ -13,7 +13,7 @@
|
|
13
13
|
</button>
|
14
14
|
<%= link_to "Magic-Stylez", "#", class: "navbar-brand" %>
|
15
15
|
</div>
|
16
|
-
<div class="collapse navbar-collapse" id="front-main-nav-colapse">
|
16
|
+
<div class="collapse navbar-collapse navbar-bordered" id="front-main-nav-colapse">
|
17
17
|
<ul class="nav navbar-nav navbar-left">
|
18
18
|
<li><%= link_to "Link", "#" %></li>
|
19
19
|
<li><%= link_to "Link", "#" %></li>
|
data/test/dummy/config/routes.rb
CHANGED
@@ -10,6 +10,7 @@ Rails.application.routes.draw do
|
|
10
10
|
# get 'templates/:template' => 'front#templates'
|
11
11
|
# get 'templates' => 'front#templates'
|
12
12
|
|
13
|
+
get "cache_pages" => 'front#cache'
|
13
14
|
|
14
15
|
# The priority is based upon order of creation: first created -> highest priority.
|
15
16
|
# See how all your routes lay out with "rake routes".
|
@@ -1,35 +1,19 @@
|
|
1
|
-
|
2
1
|
<!DOCTYPE html>
|
3
2
|
<html>
|
4
3
|
<head>
|
5
4
|
<title>Magic-Stylez</title>
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
5
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-57aad5a9e01c8d83b852a8a16505deec.css" media="all" rel="stylesheet" />
|
7
6
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
8
7
|
<meta content="authenticity_token" name="csrf-param" />
|
9
|
-
<meta content="
|
8
|
+
<meta content="Mc/6708N7wWBYlcbnEIO44AgiWL9ylPwqxCGWP8mRZg=" name="csrf-token" />
|
10
9
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
11
10
|
<script type="text/javascript" charset="utf-8">
|
12
11
|
App = {};
|
13
12
|
App.Environment = "production";
|
14
13
|
</script>
|
15
14
|
</head>
|
16
|
-
<body class="
|
17
|
-
|
18
|
-
<div class="important_notice warning">
|
19
|
-
<div class="row">
|
20
|
-
<div class="col-xs-2" style="font-size: 24px;">
|
21
|
-
<i class="magicons-info-round"></i>
|
22
|
-
</div>
|
23
|
-
<div class="col-xs-8">
|
24
|
-
Example pictures from: <a href="http://lorempixel.com/" target="_blank">lorempixel.com</a>
|
25
|
-
</div>
|
26
|
-
<div class="col-xs-2" style="font-size: 24px;">
|
27
|
-
<i class="magicons-info-round"></i>
|
28
|
-
</div>
|
29
|
-
</div>
|
30
|
-
</div>
|
31
|
-
|
32
|
-
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-lg navbar-slidebar" role="navigation">
|
15
|
+
<body class="blank fixed-nav">
|
16
|
+
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-slidebar" role="navigation">
|
33
17
|
<div class="corset">
|
34
18
|
|
35
19
|
|
@@ -66,90 +50,9 @@
|
|
66
50
|
</div>
|
67
51
|
</div>
|
68
52
|
|
69
|
-
<div id="nav-aside" class="fixed-left">
|
70
|
-
<div class="inner-aside">
|
71
|
-
|
72
|
-
<div class="aside-btn user-pic">
|
73
|
-
<img alt="User Picture" src="http://lorempixel.com/g/50/60/people/" />
|
74
|
-
</div>
|
75
|
-
|
76
|
-
<a class="aside-btn" href="#" title="Dashboard">
|
77
|
-
<i class='glyphicon glyphicon-home'></i>
|
78
|
-
</a>
|
79
|
-
<a class="aside-btn active" href="#" title="Settings">
|
80
|
-
<i class='glyphicon glyphicon-cog'></i>
|
81
|
-
</a>
|
82
|
-
<a class="aside-btn" href="#" title="Inbox">
|
83
|
-
<i class='glyphicon glyphicon-inbox'></i>
|
84
|
-
</a>
|
85
|
-
<a class="aside-btn" href="#" title="Pictures">
|
86
|
-
<i class='glyphicon glyphicon-picture'></i>
|
87
|
-
</a>
|
88
|
-
|
89
|
-
</div>
|
90
|
-
</div>
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
<div class="fullpage-table" id="banner-one">
|
96
|
-
<div class="table-row">
|
97
|
-
<div class="banner-box responsive-hero with-footer with-header fill lorempixel" style="background-image: url('http://lorempixel.com/g/1200/500/nature/')">
|
98
|
-
<div class="banner-header">
|
99
|
-
<div class="corset">
|
100
|
-
<h1 class="loud">Responsive Aside-Nav</h1>
|
101
|
-
</div>
|
102
|
-
</div>
|
103
|
-
|
104
|
-
<div class="banner-content">
|
105
|
-
<div class="corset">
|
106
|
-
<br/>
|
107
|
-
<div class="box blur">
|
108
|
-
<table class="name">
|
109
|
-
<tr>
|
110
|
-
<th>body </th>
|
111
|
-
<td>with_aside_nav with_important_notice fixed-nav-lg</td>
|
112
|
-
</tr>
|
113
|
-
<tr>
|
114
|
-
<th>navbar </th>
|
115
|
-
<td>navbar navbar-default navbar-fixed-top navbar-lg navbar-slidebar</td>
|
116
|
-
</tr>
|
117
|
-
</table>
|
118
|
-
</div>
|
119
|
-
</div>
|
120
|
-
</div>
|
121
|
-
|
122
|
-
<div class="banner-footer" id="sign_up_banner">
|
123
|
-
<div class="corset">
|
124
|
-
<div class="row">
|
125
|
-
<div class="col-sm-4 col-sm-offset-1">
|
126
|
-
<!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
|
127
|
-
<button class="btn btn-success btn-block help_arrow hide_da_notice" data-text="Hide notice!">
|
128
|
-
toggle Notice
|
129
|
-
</button>
|
130
|
-
</div>
|
131
|
-
<div class="col-sm-4 col-sm-offset-2">
|
132
|
-
<!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
|
133
|
-
<button class="btn btn-default btn-block help_arrow get_some_borders" data-text="click!">
|
134
|
-
toggle Borders
|
135
|
-
</button>
|
136
|
-
</div>
|
137
|
-
</div>
|
138
|
-
</div>
|
139
|
-
</div>
|
140
|
-
|
141
|
-
</div>
|
142
|
-
</div>
|
143
|
-
</div>
|
144
|
-
|
145
53
|
<div class="main_content">
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
54
|
|
152
|
-
<div class="section
|
55
|
+
<div class="section brand">
|
153
56
|
<div class="corset">
|
154
57
|
<h1>Responsive Slidebar</h1>
|
155
58
|
<br/>
|
@@ -159,8 +62,13 @@
|
|
159
62
|
</p>
|
160
63
|
<br/>
|
161
64
|
<h4>dependency:</h4>
|
162
|
-
<code>@import "magic/content/
|
163
|
-
<
|
65
|
+
<code>@import "magic/content/navbar";</code>
|
66
|
+
<br/>
|
67
|
+
<br/>
|
68
|
+
<br/>
|
69
|
+
<div class="h3 center_text">
|
70
|
+
<i class="magicons-arrow-right"></i> Smaller your screen to see the Slidebar !! <i class="magicons-arrow-left"></i>
|
71
|
+
</div>
|
164
72
|
</div>
|
165
73
|
</div>
|
166
74
|
|
@@ -1,26 +1,25 @@
|
|
1
|
-
|
2
1
|
<!DOCTYPE html>
|
3
2
|
<html>
|
4
3
|
<head>
|
5
4
|
<title>Magic-Stylez</title>
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
5
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-57aad5a9e01c8d83b852a8a16505deec.css" media="all" rel="stylesheet" />
|
7
6
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
8
7
|
<meta content="authenticity_token" name="csrf-param" />
|
9
|
-
<meta content="
|
8
|
+
<meta content="Mc/6708N7wWBYlcbnEIO44AgiWL9ylPwqxCGWP8mRZg=" name="csrf-token" />
|
10
9
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
11
10
|
<script type="text/javascript" charset="utf-8">
|
12
11
|
App = {};
|
13
12
|
App.Environment = "production";
|
14
13
|
</script>
|
15
14
|
</head>
|
16
|
-
<body class="blank fixed-nav
|
17
|
-
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-
|
15
|
+
<body class="blank fixed-nav">
|
16
|
+
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-slidebar" role="navigation">
|
18
17
|
<div class="corset">
|
19
18
|
|
20
19
|
|
21
20
|
|
22
21
|
<div class="navbar-header">
|
23
|
-
<button type="button" class="navbar-toggle
|
22
|
+
<button type="button" class="navbar-toggle slidebar-toggle" data-target="#front-main-nav-colapse">
|
24
23
|
<span class="sr-only">Toggle navigation</span>
|
25
24
|
<span class="icon-bar"></span>
|
26
25
|
<span class="icon-bar"></span>
|
@@ -30,20 +29,21 @@
|
|
30
29
|
</div>
|
31
30
|
<div class="collapse navbar-collapse" id="front-main-nav-colapse">
|
32
31
|
<ul class="nav navbar-nav navbar-left">
|
33
|
-
<li><a href="#">
|
34
|
-
<li><a href="#">
|
35
|
-
|
32
|
+
<li><a href="#">Link</a></li>
|
33
|
+
<li><a href="#">Link</a></li>
|
34
|
+
|
36
35
|
</ul>
|
37
36
|
<ul class="nav navbar-nav navbar-right">
|
38
37
|
<li class="dropdown">
|
39
38
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
40
|
-
|
39
|
+
Dropdown <b class="caret"></b>
|
41
40
|
</a> <ul class="dropdown-menu">
|
42
41
|
<li><a href="#">Link 1</a></li>
|
43
42
|
<li><a href="#">Link 2</a></li>
|
44
43
|
<li><a href="#">Link 3</a></li>
|
45
44
|
</ul>
|
46
45
|
</li>
|
46
|
+
<li><a class="btn btn-success" href="#">Button</a></li>
|
47
47
|
</ul>
|
48
48
|
</div>
|
49
49
|
|
@@ -54,12 +54,21 @@
|
|
54
54
|
|
55
55
|
<div class="section brand">
|
56
56
|
<div class="corset">
|
57
|
-
<h1>
|
57
|
+
<h1>Responsive Slidebar</h1>
|
58
58
|
<br/>
|
59
|
-
<p class="loud">
|
59
|
+
<p class="loud">
|
60
|
+
Turns the usual twbs <em>navbar-collapse</em> into a nice slidebar. .. try it out:<br/>
|
61
|
+
make your screen smaller than 768px and press the header-toggle
|
62
|
+
</p>
|
60
63
|
<br/>
|
61
64
|
<h4>dependency:</h4>
|
62
65
|
<code>@import "magic/content/navbar";</code>
|
66
|
+
<br/>
|
67
|
+
<br/>
|
68
|
+
<br/>
|
69
|
+
<div class="h3 center_text">
|
70
|
+
<i class="magicons-arrow-right"></i> Smaller your screen to see the Slidebar !! <i class="magicons-arrow-left"></i>
|
71
|
+
</div>
|
63
72
|
</div>
|
64
73
|
</div>
|
65
74
|
|
@@ -152,7 +161,6 @@
|
|
152
161
|
<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>
|
153
162
|
</div>
|
154
163
|
</div>
|
155
|
-
|
156
164
|
|
157
165
|
</div>
|
158
166
|
</body>
|
@@ -1,26 +1,25 @@
|
|
1
|
-
|
2
1
|
<!DOCTYPE html>
|
3
2
|
<html>
|
4
3
|
<head>
|
5
4
|
<title>Magic-Stylez</title>
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
5
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-57aad5a9e01c8d83b852a8a16505deec.css" media="all" rel="stylesheet" />
|
7
6
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
8
7
|
<meta content="authenticity_token" name="csrf-param" />
|
9
|
-
<meta content="
|
8
|
+
<meta content="Mc/6708N7wWBYlcbnEIO44AgiWL9ylPwqxCGWP8mRZg=" name="csrf-token" />
|
10
9
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
11
10
|
<script type="text/javascript" charset="utf-8">
|
12
11
|
App = {};
|
13
12
|
App.Environment = "production";
|
14
13
|
</script>
|
15
14
|
</head>
|
16
|
-
<body class="blank fixed-nav
|
17
|
-
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-
|
15
|
+
<body class="blank fixed-nav">
|
16
|
+
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-slidebar" role="navigation">
|
18
17
|
<div class="corset">
|
19
18
|
|
20
19
|
|
21
20
|
|
22
21
|
<div class="navbar-header">
|
23
|
-
<button type="button" class="navbar-toggle
|
22
|
+
<button type="button" class="navbar-toggle slidebar-toggle" data-target="#front-main-nav-colapse">
|
24
23
|
<span class="sr-only">Toggle navigation</span>
|
25
24
|
<span class="icon-bar"></span>
|
26
25
|
<span class="icon-bar"></span>
|
@@ -30,43 +29,22 @@
|
|
30
29
|
</div>
|
31
30
|
<div class="collapse navbar-collapse" id="front-main-nav-colapse">
|
32
31
|
<ul class="nav navbar-nav navbar-left">
|
33
|
-
<li><a href="#">
|
34
|
-
<li><a href="#">
|
35
|
-
|
32
|
+
<li><a href="#">Link</a></li>
|
33
|
+
<li><a href="#">Link</a></li>
|
34
|
+
|
36
35
|
</ul>
|
37
36
|
<ul class="nav navbar-nav navbar-right">
|
38
37
|
<li class="dropdown">
|
39
38
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
40
|
-
|
39
|
+
Dropdown <b class="caret"></b>
|
41
40
|
</a> <ul class="dropdown-menu">
|
42
41
|
<li><a href="#">Link 1</a></li>
|
43
42
|
<li><a href="#">Link 2</a></li>
|
44
43
|
<li><a href="#">Link 3</a></li>
|
45
44
|
</ul>
|
46
45
|
</li>
|
46
|
+
<li><a class="btn btn-success" href="#">Button</a></li>
|
47
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
48
|
</div>
|
71
49
|
|
72
50
|
</div>
|
@@ -76,12 +54,21 @@
|
|
76
54
|
|
77
55
|
<div class="section brand">
|
78
56
|
<div class="corset">
|
79
|
-
<h1>
|
57
|
+
<h1>Responsive Slidebar</h1>
|
80
58
|
<br/>
|
81
|
-
<p class="loud">
|
59
|
+
<p class="loud">
|
60
|
+
Turns the usual twbs <em>navbar-collapse</em> into a nice slidebar. .. try it out:<br/>
|
61
|
+
make your screen smaller than 768px and press the header-toggle
|
62
|
+
</p>
|
82
63
|
<br/>
|
83
64
|
<h4>dependency:</h4>
|
84
65
|
<code>@import "magic/content/navbar";</code>
|
66
|
+
<br/>
|
67
|
+
<br/>
|
68
|
+
<br/>
|
69
|
+
<div class="h3 center_text">
|
70
|
+
<i class="magicons-arrow-right"></i> Smaller your screen to see the Slidebar !! <i class="magicons-arrow-left"></i>
|
71
|
+
</div>
|
85
72
|
</div>
|
86
73
|
</div>
|
87
74
|
|
@@ -174,7 +161,6 @@
|
|
174
161
|
<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
162
|
</div>
|
176
163
|
</div>
|
177
|
-
|
178
164
|
|
179
165
|
</div>
|
180
166
|
</body>
|
@@ -1,12 +1,11 @@
|
|
1
|
-
|
2
1
|
<!DOCTYPE html>
|
3
2
|
<html>
|
4
3
|
<head>
|
5
4
|
<title>Magic-Stylez</title>
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
7
|
-
<script src="//berlinmagic.github.io/magic_stylez/assets/application-
|
5
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-57aad5a9e01c8d83b852a8a16505deec.css" media="all" rel="stylesheet" />
|
6
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/application-0f7b4393eed52dca4ecec8d36e95122e.js"></script>
|
8
7
|
<meta content="authenticity_token" name="csrf-param" />
|
9
|
-
<meta content="
|
8
|
+
<meta content="Mc/6708N7wWBYlcbnEIO44AgiWL9ylPwqxCGWP8mRZg=" name="csrf-token" />
|
10
9
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
11
10
|
<script type="text/javascript" charset="utf-8">
|
12
11
|
App = {};
|
@@ -24,6 +23,7 @@
|
|
24
23
|
<li><a class="app_lnk lst_lnk" data-target="content/buttons" href="#">Buttons</a></li>
|
25
24
|
<li><a class="app_lnk lst_lnk" data-target="content/forms" href="#">Forms</a></li>
|
26
25
|
<li><a class="app_lnk lst_lnk" data-target="content/inputs" href="#">Inputs</a></li>
|
26
|
+
<li><a class="app_lnk lst_lnk" data-target="content/labels" href="#">Labels</a></li>
|
27
27
|
</ul>
|
28
28
|
</li>
|
29
29
|
<li><a class="lst_lnk" href="#">Effects</a>
|
@@ -1,12 +1,11 @@
|
|
1
|
-
|
2
1
|
<!DOCTYPE html>
|
3
2
|
<html>
|
4
3
|
<head>
|
5
4
|
<title>Magic-Stylez</title>
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
5
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-57aad5a9e01c8d83b852a8a16505deec.css" media="all" rel="stylesheet" />
|
7
6
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
8
7
|
<meta content="authenticity_token" name="csrf-param" />
|
9
|
-
<meta content="
|
8
|
+
<meta content="Mc/6708N7wWBYlcbnEIO44AgiWL9ylPwqxCGWP8mRZg=" name="csrf-token" />
|
10
9
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
11
10
|
<script type="text/javascript" charset="utf-8">
|
12
11
|
App = {};
|
@@ -1,19 +1,18 @@
|
|
1
|
-
|
2
1
|
<!DOCTYPE html>
|
3
2
|
<html>
|
4
3
|
<head>
|
5
4
|
<title>Magic-Stylez</title>
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
5
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-57aad5a9e01c8d83b852a8a16505deec.css" media="all" rel="stylesheet" />
|
7
6
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
8
7
|
<meta content="authenticity_token" name="csrf-param" />
|
9
|
-
<meta content="
|
8
|
+
<meta content="Mc/6708N7wWBYlcbnEIO44AgiWL9ylPwqxCGWP8mRZg=" name="csrf-token" />
|
10
9
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
11
10
|
<script type="text/javascript" charset="utf-8">
|
12
11
|
App = {};
|
13
12
|
App.Environment = "production";
|
14
13
|
</script>
|
15
14
|
</head>
|
16
|
-
<body class="blank fixed-nav
|
15
|
+
<body class="blank fixed-nav">
|
17
16
|
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-slidebar" role="navigation">
|
18
17
|
<div class="corset">
|
19
18
|
|
@@ -46,28 +45,6 @@
|
|
46
45
|
</li>
|
47
46
|
<li><a class="btn btn-success" href="#">Button</a></li>
|
48
47
|
</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
48
|
</div>
|
72
49
|
|
73
50
|
</div>
|
@@ -43,9 +43,12 @@ $brand-success: #006600 !default; // twbs-default: #5cb85c
|
|
43
43
|
$brand-info: #0099cc !default; // twbs-default: #5bc0de
|
44
44
|
$brand-warning: #f0ad4e !default; // twbs-default: #f0ad4e
|
45
45
|
$brand-danger: #d9534f !default; // twbs-default: #d9534f
|
46
|
-
|
47
|
-
|
48
|
-
|
46
|
+
// -------------------------
|
47
|
+
// Custom colors
|
48
|
+
// -------------------------
|
49
|
+
$brand-one: #ff00cc !default;
|
50
|
+
$brand-two: #00ffcc !default;
|
51
|
+
$brand-three: #cc6699 !default;
|
49
52
|
|
50
53
|
|
51
54
|
|
@@ -124,6 +127,21 @@ $btn-brand-color: #fff !default;
|
|
124
127
|
$btn-brand-bg: $brand-color !default;
|
125
128
|
$btn-brand-border: darken($btn-brand-bg, 5%) !default;
|
126
129
|
|
130
|
+
// Custom - Buttons
|
131
|
+
$btn-one-color: #fff !default;
|
132
|
+
$btn-one-bg: $brand-one !default;
|
133
|
+
$btn-one-border: darken($btn-one-bg, 5%) !default;
|
134
|
+
|
135
|
+
$btn-two-color: #fff !default;
|
136
|
+
$btn-two-bg: $brand-two !default;
|
137
|
+
$btn-two-border: darken($btn-two-bg, 5%) !default;
|
138
|
+
|
139
|
+
$btn-three-color: #fff !default;
|
140
|
+
$btn-three-bg: $brand-three !default;
|
141
|
+
$btn-three-border: darken($btn-three-bg, 5%) !default;
|
142
|
+
|
143
|
+
|
144
|
+
|
127
145
|
// -------------------------
|
128
146
|
// Social Buttons
|
129
147
|
// -------------------------
|
@@ -453,20 +453,18 @@ $popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%
|
|
453
453
|
//== Labels
|
454
454
|
//
|
455
455
|
//##
|
456
|
-
|
457
|
-
//** Default label background color
|
458
456
|
$label-default-bg: $gray-light !default;
|
459
|
-
//** Primary label background color
|
460
457
|
$label-primary-bg: $brand-primary !default;
|
461
|
-
//** Success label background color
|
462
458
|
$label-success-bg: $brand-success !default;
|
463
|
-
//** Info label background color
|
464
459
|
$label-info-bg: $brand-info !default;
|
465
|
-
//** Warning label background color
|
466
460
|
$label-warning-bg: $brand-warning !default;
|
467
|
-
//** Danger label background color
|
468
461
|
$label-danger-bg: $brand-danger !default;
|
469
462
|
|
463
|
+
$label-brand-bg: $brand-color !default;
|
464
|
+
$label-one-bg: $brand-one !default;
|
465
|
+
$label-two-bg: $brand-two !default;
|
466
|
+
$label-three-bg: $brand-three !default;
|
467
|
+
|
470
468
|
//** Default label text color
|
471
469
|
$label-color: #fff !default;
|
472
470
|
//** Default text color of a linked label
|
@@ -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, .
|
123
|
+
.fixed-top, .navbar-fixed-top, .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, .
|
127
|
+
.fixed-top, .navbar-fixed-top, .navbar-sub-nav { left: $aside-nav-width; }
|
128
128
|
}
|
129
129
|
|
130
130
|
&.aside_under_header {
|
@@ -104,70 +104,80 @@
|
|
104
104
|
// --------------------------------------------------
|
105
105
|
.btn-default {
|
106
106
|
@include btn-variant($btn-default-color, $btn-default-bg, $btn-default-border);
|
107
|
+
&.btn-blank { @include btn-blank-variant($btn-default-color, $btn-default-border, #fff); }
|
107
108
|
}
|
108
109
|
.btn-primary {
|
109
110
|
@include btn-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
|
111
|
+
&.btn-blank { @include btn-blank-variant($btn-primary-bg, $btn-primary-border, #fff); }
|
110
112
|
}
|
111
113
|
// Success appears as green
|
112
114
|
.btn-success {
|
113
115
|
@include btn-variant($btn-success-color, $btn-success-bg, $btn-success-border);
|
116
|
+
&.btn-blank { @include btn-blank-variant($btn-success-bg, $btn-success-border, #fff); }
|
114
117
|
}
|
115
118
|
// Info appears as blue-green
|
116
119
|
.btn-info {
|
117
120
|
@include btn-variant($btn-info-color, $btn-info-bg, $btn-info-border);
|
121
|
+
&.btn-blank { @include btn-blank-variant($btn-info-bg, $btn-info-border, #444); }
|
118
122
|
}
|
119
123
|
// Warning appears as orange
|
120
124
|
.btn-warning {
|
121
125
|
@include btn-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
|
126
|
+
&.btn-blank { @include btn-blank-variant($btn-warning-bg, $btn-warning-border, #444); }
|
122
127
|
}
|
123
128
|
// Danger and error appear as red
|
124
129
|
.btn-danger {
|
125
130
|
@include btn-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
|
131
|
+
&.btn-blank { @include btn-blank-variant($btn-danger-bg, $btn-danger-border, #fff); }
|
126
132
|
}
|
127
133
|
|
128
134
|
.btn-brand {
|
129
135
|
@include btn-variant($btn-brand-color, $btn-brand-bg, $btn-brand-border);
|
136
|
+
&.btn-blank { @include btn-blank-variant($btn-brand-bg, $btn-brand-border, #fff); }
|
130
137
|
}
|
131
138
|
|
132
139
|
|
140
|
+
|
133
141
|
// Socials
|
134
142
|
.btn-facebook {
|
135
143
|
@include btn-variant($btn-facebook-color, $btn-facebook-bg, $btn-facebook-border);
|
144
|
+
&.btn-blank { @include btn-blank-variant($btn-facebook-bg, $btn-facebook-border, #fff); }
|
136
145
|
}
|
137
146
|
.btn-google {
|
138
147
|
@include btn-variant($btn-google-color, $btn-google-bg, $btn-google-border);
|
148
|
+
&.btn-blank { @include btn-blank-variant($btn-google-bg, $btn-google-border, #fff); }
|
139
149
|
}
|
140
150
|
.btn-twitter {
|
141
151
|
@include btn-variant($btn-twitter-color, $btn-twitter-bg, $btn-twitter-border);
|
152
|
+
&.btn-blank { @include btn-blank-variant($btn-twitter-bg, $btn-twitter-border, #fff); }
|
142
153
|
}
|
143
154
|
.btn-paypal {
|
144
155
|
@include btn-variant($btn-paypal-color, $btn-paypal-bg, $btn-paypal-border);
|
156
|
+
&.btn-blank { @include btn-blank-variant($btn-paypal-bg, $btn-paypal-border, #fff); }
|
145
157
|
}
|
146
158
|
|
147
159
|
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42), 0 1px 1px 0 rgba(0,0,0,.42) );
|
152
|
-
&.btn-icn, & > .btn-icn {
|
153
|
-
@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42), 0 1px 1px 0 rgba(0,0,0,.42), inset -1px 0 1px 0 rgba(255,255,255,.32) );
|
154
|
-
}
|
155
|
-
&:hover { color: #fff; }
|
160
|
+
.btn-one {
|
161
|
+
@include btn-variant($btn-one-color, $btn-one-bg, $btn-one-border);
|
162
|
+
&.btn-blank { @include btn-blank-variant($btn-one-bg, $btn-one-border, #fff); }
|
156
163
|
}
|
157
164
|
|
158
|
-
.btn-
|
159
|
-
@include btn-
|
160
|
-
}
|
161
|
-
.btn-google-nice {
|
162
|
-
@include btn-with-gradient($btn-google-color, $google-gradient-top, $google-gradient-bottom, $btn-google-border);
|
165
|
+
.btn-two {
|
166
|
+
@include btn-variant($btn-two-color, $btn-two-bg, $btn-two-border);
|
167
|
+
&.btn-blank { @include btn-blank-variant($btn-two-bg, $btn-two-border, #fff); }
|
163
168
|
}
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
@include btn-with-gradient($btn-paypal-color, $paypal-gradient-top, $paypal-gradient-bottom, $btn-paypal-border);
|
169
|
+
|
170
|
+
.btn-three {
|
171
|
+
@include btn-variant($btn-three-color, $btn-three-bg, $btn-three-border);
|
172
|
+
&.btn-blank { @include btn-blank-variant($btn-three-bg, $btn-three-border, #fff); }
|
169
173
|
}
|
170
174
|
|
175
|
+
|
176
|
+
|
177
|
+
|
178
|
+
|
179
|
+
|
180
|
+
|
171
181
|
.btn-link {
|
172
182
|
color: $link-color !important;
|
173
183
|
background-color: transparent !important;
|
@@ -0,0 +1,40 @@
|
|
1
|
+
// Nice Buttons
|
2
|
+
.btn-default-nice, .btn-success-nice, .btn-primary-nice, .btn-facebook-nice, .btn-info-nice, .btn-warning-nice, .btn-danger-nice,
|
3
|
+
.btn-brand-nice, .btn-one-nice, .btn-two-nice, .btn-three-nice,
|
4
|
+
.btn-google-nice, .btn-twitter-nice, .btn-paypal-nice {
|
5
|
+
color: #fff;
|
6
|
+
@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42), 0 1px 1px 0 rgba(0,0,0,.42) );
|
7
|
+
&.btn-icn, & > .btn-icn {
|
8
|
+
@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42), 0 1px 1px 0 rgba(0,0,0,.42), inset -1px 0 1px 0 rgba(255,255,255,.32) );
|
9
|
+
}
|
10
|
+
&:hover { color: #fff; }
|
11
|
+
}
|
12
|
+
|
13
|
+
.btn-facebook-nice {
|
14
|
+
@include btn-with-gradient($btn-facebook-color, $facebook-gradient-top, $facebook-gradient-bottom, $btn-facebook-border);
|
15
|
+
}
|
16
|
+
.btn-google-nice {
|
17
|
+
@include btn-with-gradient($btn-google-color, $google-gradient-top, $google-gradient-bottom, $btn-google-border);
|
18
|
+
}
|
19
|
+
.btn-twitter-nice {
|
20
|
+
@include btn-with-gradient($btn-twitter-color, $twitter-gradient-top, $twitter-gradient-bottom, $btn-twitter-border);
|
21
|
+
}
|
22
|
+
.btn-paypal-nice {
|
23
|
+
@include btn-with-gradient($btn-paypal-color, $paypal-gradient-top, $paypal-gradient-bottom, $btn-paypal-border);
|
24
|
+
}
|
25
|
+
|
26
|
+
|
27
|
+
|
28
|
+
.btn-default-nice { @include default-btn-with-gradient($btn-default-color, $btn-default-bg, $btn-default-border); }
|
29
|
+
.btn-success-nice { @include default-btn-with-gradient($btn-success-color, $btn-success-bg, $btn-success-border); }
|
30
|
+
.btn-primary-nice { @include default-btn-with-gradient($btn-primary-color, $btn-primary-bg, $btn-primary-border); }
|
31
|
+
.btn-info-nice { @include default-btn-with-gradient($btn-info-color, $btn-info-bg, $btn-info-border); }
|
32
|
+
.btn-warning-nice { @include default-btn-with-gradient($btn-warning-color, $btn-warning-bg, $btn-warning-border); }
|
33
|
+
.btn-danger-nice { @include default-btn-with-gradient($btn-danger-color, $btn-danger-bg, $btn-danger-border); }
|
34
|
+
|
35
|
+
.btn-brand-nice { @include default-btn-with-gradient($btn-brand-color, $btn-brand-bg, $btn-brand-border); }
|
36
|
+
|
37
|
+
|
38
|
+
.btn-one-nice { @include default-btn-with-gradient($btn-one-color, $btn-one-bg, $btn-one-border); }
|
39
|
+
.btn-two-nice { @include default-btn-with-gradient($btn-two-color, $btn-two-bg, $btn-two-border); }
|
40
|
+
.btn-three-nice { @include default-btn-with-gradient($btn-three-color, $btn-three-bg, $btn-three-border); }
|
@@ -0,0 +1,48 @@
|
|
1
|
+
.label-default {
|
2
|
+
@include label-variant($label-default-bg);
|
3
|
+
&.label-blank { @include label-blank-variant( $label-default-bg ); }
|
4
|
+
}
|
5
|
+
|
6
|
+
.label-primary {
|
7
|
+
@include label-variant($label-primary-bg);
|
8
|
+
&.label-blank { @include label-blank-variant( $label-primary-bg ); }
|
9
|
+
}
|
10
|
+
|
11
|
+
.label-success {
|
12
|
+
@include label-variant($label-success-bg);
|
13
|
+
&.label-blank { @include label-blank-variant( $label-success-bg ); }
|
14
|
+
}
|
15
|
+
|
16
|
+
.label-info {
|
17
|
+
@include label-variant($label-info-bg);
|
18
|
+
&.label-blank { @include label-blank-variant( $label-info-bg ); }
|
19
|
+
}
|
20
|
+
|
21
|
+
.label-warning {
|
22
|
+
@include label-variant($label-warning-bg);
|
23
|
+
&.label-blank { @include label-blank-variant( $label-warning-bg ); }
|
24
|
+
}
|
25
|
+
|
26
|
+
.label-danger {
|
27
|
+
@include label-variant($label-danger-bg);
|
28
|
+
&.label-blank { @include label-blank-variant( $label-danger-bg ); }
|
29
|
+
}
|
30
|
+
|
31
|
+
.label-brand {
|
32
|
+
@include label-variant($label-brand-bg);
|
33
|
+
&.label-blank { @include label-blank-variant( $label-brand-bg ); }
|
34
|
+
}
|
35
|
+
|
36
|
+
.label-one {
|
37
|
+
@include label-variant($label-one-bg);
|
38
|
+
&.label-blank { @include label-blank-variant( $label-one-bg ); }
|
39
|
+
}
|
40
|
+
.label-two {
|
41
|
+
@include label-variant($label-two-bg);
|
42
|
+
&.label-blank { @include label-blank-variant( $label-two-bg ); }
|
43
|
+
}
|
44
|
+
.label-three {
|
45
|
+
@include label-variant($label-three-bg);
|
46
|
+
&.label-blank { @include label-blank-variant( $label-three-bg ); }
|
47
|
+
}
|
48
|
+
|
@@ -95,7 +95,7 @@
|
|
95
95
|
|
96
96
|
}
|
97
97
|
|
98
|
-
|
98
|
+
.navbar.navbar-fixed-top { margin: 0; }
|
99
99
|
|
100
100
|
|
101
101
|
|
@@ -156,6 +156,19 @@ body, #body, #container, .main-content, .main_content {
|
|
156
156
|
|
157
157
|
@include responsiveStep-sm {
|
158
158
|
|
159
|
+
.navbar-bordered {
|
160
|
+
& > .navbar-nav.navbar-left, & > .navbar-nav.navbar-right {
|
161
|
+
& > li + & > li {
|
162
|
+
border-left: solid 1px $main-border-color;
|
163
|
+
}
|
164
|
+
}
|
165
|
+
}
|
166
|
+
.navbar-header + .navbar-collapse {
|
167
|
+
&.navbar-bordered, .navbar-bordered {
|
168
|
+
& > .nav.navbar-nav.navbar-left > li { border-left: solid 1px $main-border-color; }
|
169
|
+
}
|
170
|
+
}
|
171
|
+
|
159
172
|
.navbar-sub-nav {
|
160
173
|
$padHorizontal: floor(($subnav-height - $line-height-computed) / 2);
|
161
174
|
$lineHeight: $subnav-height - $padHorizontal * 2;
|
@@ -86,11 +86,11 @@ body, #body, #container, .main-content, .main_content {
|
|
86
86
|
&.fixed-nav-lg.fixed-sub-nav { @include calculate_notice_top( $navbar-height-lg + $subnav-height ); }
|
87
87
|
&.fixed-nav-xl.fixed-sub-nav { @include calculate_notice_top( $navbar-height-xl + $subnav-height ); }
|
88
88
|
|
89
|
-
&.fixed-nav-xs .
|
90
|
-
&.fixed-nav-sm .
|
91
|
-
&.fixed-nav .
|
92
|
-
&.fixed-nav-lg .
|
93
|
-
&.fixed-nav-xl .
|
89
|
+
&.fixed-nav-xs .navbar-sub-nav { top: $important-notice-height + $navbar-height-xs; }
|
90
|
+
&.fixed-nav-sm .navbar-sub-nav { top: $important-notice-height + $navbar-height-sm; }
|
91
|
+
&.fixed-nav .navbar-sub-nav { top: $important-notice-height + $navbar-height; }
|
92
|
+
&.fixed-nav-lg .navbar-sub-nav { top: $important-notice-height + $navbar-height-lg; }
|
93
|
+
&.fixed-nav-xl .navbar-sub-nav { top: $important-notice-height + $navbar-height-xl; }
|
94
94
|
|
95
95
|
}
|
96
96
|
}
|
@@ -64,6 +64,81 @@
|
|
64
64
|
}
|
65
65
|
}
|
66
66
|
|
67
|
+
// Button helper for blank buttons
|
68
|
+
@mixin btn-blank-variant( $color, $border, $badge-color: #fff ) {
|
69
|
+
color: $color !important;
|
70
|
+
background-color: transparent !important;
|
71
|
+
border-color: $border !important;
|
72
|
+
|
73
|
+
&:hover,
|
74
|
+
&:focus,
|
75
|
+
&:active,
|
76
|
+
&.active,
|
77
|
+
.open > &.dropdown-toggle {
|
78
|
+
color: darken($color, 12%) !important;
|
79
|
+
background-color: transparent !important;
|
80
|
+
border-color: darken($border, 12%) !important;
|
81
|
+
}
|
82
|
+
&:active,
|
83
|
+
&.active,
|
84
|
+
.open > &.dropdown-toggle {
|
85
|
+
background-color: transparent !important;
|
86
|
+
border-color: darken($border, 10%) !important;
|
87
|
+
}
|
88
|
+
&:active,
|
89
|
+
&.active,
|
90
|
+
.open > &.dropdown-toggle {
|
91
|
+
background-image: none;
|
92
|
+
}
|
93
|
+
&.disabled,
|
94
|
+
&[disabled],
|
95
|
+
fieldset[disabled] & {
|
96
|
+
&,
|
97
|
+
&:hover,
|
98
|
+
&:focus,
|
99
|
+
&:active,
|
100
|
+
&.active {
|
101
|
+
color: lighten($color, 10%) !important;
|
102
|
+
background-color: transparent !important;
|
103
|
+
border-color: lighten($border, 10%) !important;
|
104
|
+
}
|
105
|
+
}
|
106
|
+
|
107
|
+
.badge {
|
108
|
+
color: #fff;
|
109
|
+
background-color: $color;
|
110
|
+
}
|
111
|
+
}
|
112
|
+
|
113
|
+
// Labels
|
114
|
+
// -------------------------
|
115
|
+
@mixin label-variant( $background, $color: $label-color, $color-hover: $label-link-hover-color ) {
|
116
|
+
background-color: $background;
|
117
|
+
color: $color;
|
118
|
+
&[href] {
|
119
|
+
&:hover,
|
120
|
+
&:focus {
|
121
|
+
color: $label-link-hover-color;
|
122
|
+
background-color: darken($background, 10%);
|
123
|
+
}
|
124
|
+
}
|
125
|
+
}
|
126
|
+
|
127
|
+
@mixin label-blank-variant( $color ) {
|
128
|
+
background-color: transparent;
|
129
|
+
color: $color;
|
130
|
+
border: solid 1px $color;
|
131
|
+
&[href] {
|
132
|
+
&:hover,
|
133
|
+
&:focus {
|
134
|
+
color: darken($color, 10%);
|
135
|
+
border: solid 1px darken($color, 10%);
|
136
|
+
background-color: transparent;
|
137
|
+
}
|
138
|
+
}
|
139
|
+
}
|
140
|
+
|
141
|
+
|
67
142
|
|
68
143
|
// Button helper from twbs ..changed
|
69
144
|
@mixin btn-with-gradient($color, $top-bg, $bottom-bg, $border) {
|
@@ -109,6 +184,9 @@
|
|
109
184
|
background-color: $color;
|
110
185
|
}
|
111
186
|
}
|
187
|
+
@mixin default-btn-with-gradient($color, $bg, $border) {
|
188
|
+
@include btn-with-gradient($color, lighten($bg, 7%), darken($bg, 7%), $border);
|
189
|
+
}
|
112
190
|
|
113
191
|
|
114
192
|
|
@@ -40,10 +40,12 @@
|
|
40
40
|
@import "magic/content/banner";
|
41
41
|
@import "magic/content/box";
|
42
42
|
@import "magic/content/buttons";
|
43
|
+
@import "magic/content/buttons_nice";
|
43
44
|
@import "magic/content/forms";
|
44
45
|
@import "magic/content/helper";
|
45
46
|
@import "magic/content/icons";
|
46
47
|
@import "magic/content/inputs";
|
48
|
+
@import "magic/content/labels";
|
47
49
|
@import "magic/content/navbar";
|
48
50
|
@import "magic/content/notice";
|
49
51
|
@import "magic/content/panel";
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
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.49
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Torsten Wetzel
|
@@ -222,6 +222,7 @@ files:
|
|
222
222
|
- test/dummy/app/assets/javascripts/views/content/buttons.jst.eco
|
223
223
|
- test/dummy/app/assets/javascripts/views/content/forms.jst.eco
|
224
224
|
- test/dummy/app/assets/javascripts/views/content/inputs.jst.eco
|
225
|
+
- test/dummy/app/assets/javascripts/views/content/labels.jst.eco
|
225
226
|
- test/dummy/app/assets/javascripts/views/effects/reflections.jst.eco
|
226
227
|
- test/dummy/app/assets/javascripts/views/effects/shadows.jst.eco
|
227
228
|
- test/dummy/app/assets/javascripts/views/elements/circle_diagram.jst.eco
|
@@ -362,10 +363,12 @@ files:
|
|
362
363
|
- vendor/assets/stylesheets/magic/content/_banner.scss
|
363
364
|
- vendor/assets/stylesheets/magic/content/_box.scss
|
364
365
|
- vendor/assets/stylesheets/magic/content/_buttons.scss
|
366
|
+
- vendor/assets/stylesheets/magic/content/_buttons_nice.scss
|
365
367
|
- vendor/assets/stylesheets/magic/content/_forms.scss
|
366
368
|
- vendor/assets/stylesheets/magic/content/_helper.scss
|
367
369
|
- vendor/assets/stylesheets/magic/content/_icons.scss
|
368
370
|
- vendor/assets/stylesheets/magic/content/_inputs.scss
|
371
|
+
- vendor/assets/stylesheets/magic/content/_labels.scss
|
369
372
|
- vendor/assets/stylesheets/magic/content/_navbar.scss
|
370
373
|
- vendor/assets/stylesheets/magic/content/_notice.scss
|
371
374
|
- vendor/assets/stylesheets/magic/content/_panel.scss
|
@@ -437,6 +440,7 @@ test_files:
|
|
437
440
|
- test/dummy/app/assets/javascripts/views/content/buttons.jst.eco
|
438
441
|
- test/dummy/app/assets/javascripts/views/content/forms.jst.eco
|
439
442
|
- test/dummy/app/assets/javascripts/views/content/inputs.jst.eco
|
443
|
+
- test/dummy/app/assets/javascripts/views/content/labels.jst.eco
|
440
444
|
- test/dummy/app/assets/javascripts/views/effects/reflections.jst.eco
|
441
445
|
- test/dummy/app/assets/javascripts/views/effects/shadows.jst.eco
|
442
446
|
- test/dummy/app/assets/javascripts/views/elements/circle_diagram.jst.eco
|