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.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/lib/magic_stylez/version.rb +1 -1
  3. data/test/dummy/app/assets/javascripts/views/content/buttons.jst.eco +99 -1
  4. data/test/dummy/app/assets/javascripts/views/content/forms.jst.eco +11 -2
  5. data/test/dummy/app/assets/javascripts/views/content/labels.jst.eco +48 -0
  6. data/test/dummy/app/assets/stylesheets/corporate/_colors.scss +21 -2
  7. data/test/dummy/app/assets/stylesheets/corporate/_variables.scss +5 -7
  8. data/test/dummy/app/controllers/front_controller.rb +14 -1
  9. data/test/dummy/app/views/templates/slidebar-subnav.html.erb +1 -1
  10. data/test/dummy/config/routes.rb +1 -0
  11. data/test/dummy/public/html/aside-nav.html +12 -104
  12. data/test/dummy/public/html/fixed-header.html +21 -13
  13. data/test/dummy/public/html/fixed-subnav.html +21 -35
  14. data/test/dummy/public/html/index.html +4 -4
  15. data/test/dummy/public/html/slidebar-header.html +2 -3
  16. data/test/dummy/public/html/slidebar-subnav.html +3 -26
  17. data/vendor/assets/stylesheets/corporate/_colors.scss +21 -3
  18. data/vendor/assets/stylesheets/corporate/_variables.scss +5 -7
  19. data/vendor/assets/stylesheets/magic/content/_aside_nav.scss +2 -2
  20. data/vendor/assets/stylesheets/magic/content/_buttons.scss +28 -18
  21. data/vendor/assets/stylesheets/magic/content/_buttons_nice.scss +40 -0
  22. data/vendor/assets/stylesheets/magic/content/_forms.scss +1 -0
  23. data/vendor/assets/stylesheets/magic/content/_labels.scss +48 -0
  24. data/vendor/assets/stylesheets/magic/content/_navbar.scss +14 -1
  25. data/vendor/assets/stylesheets/magic/content/_notice.scss +5 -5
  26. data/vendor/assets/stylesheets/magic/lib/_helper.scss +78 -0
  27. data/vendor/assets/stylesheets/magic-stylez.scss +2 -0
  28. metadata +5 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 24107f97901b4f995b6346a3f7d2cd42b2c88479
4
- data.tar.gz: 98e8f4d8cc516ee9f8e2cc3d171103e15c785d0a
3
+ metadata.gz: 8d00e710fed082818b9b8763893857e0a8c5073b
4
+ data.tar.gz: 1b281e36c317d05f3a6f7299c64dec04e385ebb6
5
5
  SHA512:
6
- metadata.gz: 965d386bdfd78607e0389397c5a589edf7b734252063677468f89d72a8b422d2855ccdda40b46be3ba73bd6a68f463ebdf1a4c078cdc3c5a62ac5dfb9947d437
7
- data.tar.gz: 55cd688a3c0ce998affc5700bc701fc98d1b06eb58596e359fdd258edae1b3fafc2df9c841b46faed1cd27f3983d28a5bfd979f7d4e7d1f2a089a91aae9cad0f
6
+ metadata.gz: 376198b110e5e4280d7b29b9659035f24f2201eaa6afc4ba5f705e037a09a187459ffb1fdcb50fa9ffd6c274741b15fff95d19f738eb0be83d27a68323e95fb5
7
+ data.tar.gz: 6f598fe55ee115da66f7e86db89e06c9fb97b3365080585b8e4685588d827cc00a2d21169658e62e004a653ebac22b2470403e211e987d7c82abed99776b378e
@@ -1,3 +1,3 @@
1
1
  module MagicStylez
2
- VERSION = "0.0.0.48"
2
+ VERSION = "0.0.0.49"
3
3
  end
@@ -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/responsive-slidebar", layout: "blank"
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>
@@ -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-aa2461ae49c57b2ee5e558b0844b9816.css" media="all" rel="stylesheet" />
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="viUaKXlZN0Q+5iy1LIBbyZbruD+ptSR/duC/Qxed/Vs=" name="csrf-token" />
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="with_aside_nav with_important_notice fixed-nav-lg">
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:&nbsp; <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 &nbsp;</th>
111
- <td>with_aside_nav with_important_notice fixed-nav-lg</td>
112
- </tr>
113
- <tr>
114
- <th>navbar &nbsp;</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 dark">
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/aside_nav";</code>
163
- <code>@import "magic/content/notice";</code>
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> &nbsp; Smaller your screen to see the Slidebar !! &nbsp; <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-aa2461ae49c57b2ee5e558b0844b9816.css" media="all" rel="stylesheet" />
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="viUaKXlZN0Q+5iy1LIBbyZbruD+ptSR/duC/Qxed/Vs=" name="csrf-token" />
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-xl">
17
- <div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-xl" role="navigation">
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" data-toggle="collapse" data-target="#front-main-nav-colapse">
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="#">Jobs</a></li>
34
- <li><a href="#">Jobs</a></li>
35
- <li><a class="btn btn-success" href="#">Jobs</a></li>
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
- Hallo <b class="caret"></b>
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>usual twbs header plus some improvements</h1>
57
+ <h1>Responsive Slidebar</h1>
58
58
  <br/>
59
- <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>
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> &nbsp; Smaller your screen to see the Slidebar !! &nbsp; <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-aa2461ae49c57b2ee5e558b0844b9816.css" media="all" rel="stylesheet" />
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="viUaKXlZN0Q+5iy1LIBbyZbruD+ptSR/duC/Qxed/Vs=" name="csrf-token" />
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-xl fixed-sub-nav">
17
- <div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-xl" role="navigation">
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" data-toggle="collapse" data-target="#front-main-nav-colapse">
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="#">Jobs</a></li>
34
- <li><a href="#">Jobs</a></li>
35
- <li><a class="btn btn-success" href="#">Jobs</a></li>
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
- Hallo <b class="caret"></b>
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>usual twbs header plus some improvements</h1>
57
+ <h1>Responsive Slidebar</h1>
80
58
  <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>
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> &nbsp; Smaller your screen to see the Slidebar !! &nbsp; <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-aa2461ae49c57b2ee5e558b0844b9816.css" media="all" rel="stylesheet" />
7
- <script src="//berlinmagic.github.io/magic_stylez/assets/application-16272649a1669aa854ba145f7b19f4e2.js"></script>
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="viUaKXlZN0Q+5iy1LIBbyZbruD+ptSR/duC/Qxed/Vs=" name="csrf-token" />
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-aa2461ae49c57b2ee5e558b0844b9816.css" media="all" rel="stylesheet" />
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="viUaKXlZN0Q+5iy1LIBbyZbruD+ptSR/duC/Qxed/Vs=" name="csrf-token" />
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-aa2461ae49c57b2ee5e558b0844b9816.css" media="all" rel="stylesheet" />
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="viUaKXlZN0Q+5iy1LIBbyZbruD+ptSR/duC/Qxed/Vs=" name="csrf-token" />
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 fixed-sub-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, .nav.navbar-nav.navbar-sub-nav { left: $aside-nav-width; }
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, .nav.navbar-nav.navbar-sub-nav { left: $aside-nav-width; }
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
- // Nice Buttons
149
- .btn-facebook-nice, .btn-google-nice, .btn-twitter-nice, .btn-paypal-nice {
150
- color: #fff;
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-facebook-nice {
159
- @include btn-with-gradient($btn-facebook-color, $facebook-gradient-top, $facebook-gradient-bottom, $btn-facebook-border);
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
- .btn-twitter-nice {
165
- @include btn-with-gradient($btn-twitter-color, $twitter-gradient-top, $twitter-gradient-bottom, $btn-twitter-border);
166
- }
167
- .btn-paypal-nice {
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); }
@@ -46,6 +46,7 @@
46
46
  text-align: left;
47
47
  @include box-shadow( none );
48
48
  }
49
+ &.flat .input-group-addon { @include horizontal-padding(0); }
49
50
  }
50
51
 
51
52
 
@@ -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 .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; }
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.48
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