magic_stylez 0.0.0.90 → 0.0.0.91
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/images/pix/avatar.jpg +0 -0
- data/test/dummy/app/assets/images/pix/company.jpg +0 -0
- data/test/dummy/app/assets/images/pix/logo.jpg +0 -0
- data/test/dummy/app/assets/images/pix/magic_logo.jpg +0 -0
- data/test/dummy/app/assets/images/pix/magic_logo.png +0 -0
- data/test/dummy/app/assets/images/pix/men.jpg +0 -0
- data/test/dummy/app/assets/images/pix/odw.jpg +0 -0
- data/test/dummy/app/assets/images/pix/owerk.jpg +0 -0
- data/test/dummy/app/assets/javascripts/assets.js.coffee.erb +2 -0
- data/test/dummy/app/assets/javascripts/views/content/buttons.jst.eco +23 -9
- data/test/dummy/app/assets/javascripts/views/content/buttons_nice.jst.eco +97 -0
- data/test/dummy/app/assets/javascripts/views/content/labels.jst.eco +35 -9
- data/test/dummy/app/assets/javascripts/views/content/pictures.jst.eco +115 -0
- data/vendor/assets/images/magic/pix/avatar.jpg +0 -0
- data/vendor/assets/images/magic/pix/company.jpg +0 -0
- data/vendor/assets/images/magic/pix/logo.jpg +0 -0
- data/vendor/assets/images/magic/pix/magic.jpg +0 -0
- data/vendor/assets/images/magic/pix/magic.png +0 -0
- data/vendor/assets/images/magic/pix/men.jpg +0 -0
- data/vendor/assets/images/magic/pix/odw.jpg +0 -0
- data/vendor/assets/images/magic/pix/owerk.jpg +0 -0
- data/vendor/assets/stylesheets/magic/content/_buttons.scss +14 -0
- data/vendor/assets/stylesheets/magic/content/_labels.scss +20 -0
- data/vendor/assets/stylesheets/magic/content/_pix.scss +53 -0
- data/vendor/assets/stylesheets/magic/icons/bettericons.scss +7 -0
- data/vendor/assets/stylesheets/magic/lib/_helper.scss +14 -0
- metadata +30 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 19a4d0d575efedf6cd308f6b27f382ad0285a325
|
|
4
|
+
data.tar.gz: 5fe8429e58f4d06b7db894400e95c349b1a267a7
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a8b4f98e1f207549f361b7a6d37b0d28fc3a9e3be276383782f3b803356ba251a015b1d3ed9e86ef95b7d534a511e789411d4e881f98cbcc8bb476c67f090505
|
|
7
|
+
data.tar.gz: a33616b484fdd5522721f6985ec497a5adb6d16253bcc99194ce954e42a1d7f2e1fa055c4541321aa9d6cb2dc97bfbb04d3d6ad568bb36eba2583362dcb8c718
|
data/lib/magic_stylez/version.rb
CHANGED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -7,8 +7,7 @@
|
|
|
7
7
|
<div class="section dark flatted">
|
|
8
8
|
<div class="corset">
|
|
9
9
|
<h4>dependency:</h4>
|
|
10
|
-
<code>@import "magic/content/buttons";</code
|
|
11
|
-
<code>@import "magic/content/buttons_nice";</code>
|
|
10
|
+
<code>@import "magic/content/buttons";</code>
|
|
12
11
|
</div>
|
|
13
12
|
</div>
|
|
14
13
|
|
|
@@ -126,7 +125,7 @@
|
|
|
126
125
|
<div class="section">
|
|
127
126
|
<div class="corset">
|
|
128
127
|
<div class="row">
|
|
129
|
-
<div class="col-md-
|
|
128
|
+
<div class="col-md-4">
|
|
130
129
|
<h4 class="center_text">Flat</h4>
|
|
131
130
|
<hr/>
|
|
132
131
|
<% buttons = ["facebook", "google", "paypal", "twitter"]%>
|
|
@@ -141,12 +140,27 @@
|
|
|
141
140
|
</div>
|
|
142
141
|
<% end%>
|
|
143
142
|
</div>
|
|
144
|
-
<div class="col-md-
|
|
145
|
-
<h4 class="center_text">
|
|
143
|
+
<div class="col-md-4">
|
|
144
|
+
<h4 class="center_text">Blank</h4>
|
|
146
145
|
<hr/>
|
|
147
146
|
<% buttons = ["facebook", "google", "paypal", "twitter"]%>
|
|
148
147
|
<% for btn, i in buttons: %>
|
|
149
|
-
<div class="btn btn-<%= btn
|
|
148
|
+
<div class="btn btn-<%= btn %> btn-blank btn-lg btn-divided">
|
|
149
|
+
<div class="icn">
|
|
150
|
+
<i class="icomoon-<%= if btn == "google" then "googleplus" else btn %>"></i>
|
|
151
|
+
</div>
|
|
152
|
+
<div class="text">
|
|
153
|
+
.btn-<%= btn %>-nice
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
<% end%>
|
|
157
|
+
</div>
|
|
158
|
+
<div class="col-md-4">
|
|
159
|
+
<h4 class="center_text">Blur</h4>
|
|
160
|
+
<hr/>
|
|
161
|
+
<% buttons = ["facebook", "google", "paypal", "twitter"]%>
|
|
162
|
+
<% for btn, i in buttons: %>
|
|
163
|
+
<div class="btn btn-<%= btn %> btn-blur btn-lg btn-divided">
|
|
150
164
|
<div class="icn">
|
|
151
165
|
<i class="icomoon-<%= if btn == "google" then "googleplus" else btn %>"></i>
|
|
152
166
|
</div>
|
|
@@ -227,13 +241,13 @@
|
|
|
227
241
|
</div>
|
|
228
242
|
|
|
229
243
|
<div class="col-md-3">
|
|
230
|
-
<h4 class="center_text">
|
|
244
|
+
<h4 class="center_text">blank-soft</h4>
|
|
231
245
|
<% for key, value of buttons: %>
|
|
232
246
|
<hr/>
|
|
233
247
|
<h5 class="center_text"><%= key %></h5>
|
|
234
248
|
<% for btn, i in value: %>
|
|
235
|
-
<div class="btn btn-<%= btn
|
|
236
|
-
.btn
|
|
249
|
+
<div class="btn btn-<%= btn %> btn-blank-soft btn-lg btn-block">
|
|
250
|
+
.btn-blank-soft
|
|
237
251
|
</div>
|
|
238
252
|
<% end %>
|
|
239
253
|
<% end %>
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
<div class="section head">
|
|
2
|
+
<div class="corset">
|
|
3
|
+
<h1>(Old School-) Gradient Buttons</h1>
|
|
4
|
+
</div>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div class="section dark flatted">
|
|
8
|
+
<div class="corset">
|
|
9
|
+
<h4>dependency:</h4>
|
|
10
|
+
<code>@import "magic/content/buttons_nice";</code>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
<div class="section flat-bottom hard-top">
|
|
16
|
+
<div class="corset">
|
|
17
|
+
<h2>Available Colors</h2>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div class="section">
|
|
22
|
+
<div class="corset">
|
|
23
|
+
<div class="row">
|
|
24
|
+
<% dflt_btns = ["default", "success", "primary", "info", "warning", "danger"] %>
|
|
25
|
+
<% scl_btns = ["facebook", "google", "paypal", "twitter"] %>
|
|
26
|
+
<% brnd_btns = ["brand"] %>
|
|
27
|
+
<% cstm_btns = ["one", "two", "three"] %>
|
|
28
|
+
|
|
29
|
+
<% buttons = { default: dflt_btns, socials: scl_btns, brand: brnd_btns, custom: cstm_btns } %>
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
<% for key, value of buttons: %>
|
|
34
|
+
<div class="col-md-3">
|
|
35
|
+
<h5 class="center_text"><%= key %></h5>
|
|
36
|
+
<% for btn, i in value: %>
|
|
37
|
+
<div class="btn btn-<%= btn %>-nice btn-lg btn-block">
|
|
38
|
+
.btn-<%= btn %>-nice
|
|
39
|
+
</div>
|
|
40
|
+
<% end %>
|
|
41
|
+
</div>
|
|
42
|
+
<% end %>
|
|
43
|
+
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="section">
|
|
49
|
+
<div class="corset">
|
|
50
|
+
<div class="row">
|
|
51
|
+
<div class="col-md-6">
|
|
52
|
+
<h4 class="center_text">Nice</h4>
|
|
53
|
+
<hr/>
|
|
54
|
+
<% buttons = ["facebook", "google", "paypal", "twitter"]%>
|
|
55
|
+
<% for btn, i in buttons: %>
|
|
56
|
+
<div class="btn btn-<%= btn %>-nice btn-lg btn-divided">
|
|
57
|
+
<div class="icn">
|
|
58
|
+
<i class="icomoon-<%= if btn == "google" then "googleplus" else btn %>"></i>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="text">
|
|
61
|
+
.btn-<%= btn %>-nice
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
<% end%>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<div class="section">
|
|
71
|
+
<div class="corset">
|
|
72
|
+
<h2>Special Classes:</h2>
|
|
73
|
+
<% btns = ["btn-xs", "btn-sm", "", "btn-lg", "btn-xl"] %>
|
|
74
|
+
<h4>Round</h4>
|
|
75
|
+
<% for btn in btns: %>
|
|
76
|
+
<button class="btn btn-success btn-round <%= btn %>">
|
|
77
|
+
.btn-round + .<%= btn %>
|
|
78
|
+
</button>
|
|
79
|
+
<% end %>
|
|
80
|
+
<h4>Borderless</h4>
|
|
81
|
+
<% for btn in btns: %>
|
|
82
|
+
<button class="btn btn-success btn-borderless btn-blur <%= btn %>">
|
|
83
|
+
.btn-borderless + .<%= btn %>
|
|
84
|
+
</button>
|
|
85
|
+
<% end %>
|
|
86
|
+
<h4>Width</h4>
|
|
87
|
+
<% for btn in btns: %>
|
|
88
|
+
<button class="btn btn-primary btn-width <%= btn %>">
|
|
89
|
+
.btn-width + .<%= btn %>
|
|
90
|
+
</button>
|
|
91
|
+
<% end %>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<br/>
|
|
96
|
+
<br/>
|
|
97
|
+
<br/>
|
|
@@ -5,40 +5,66 @@
|
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
7
|
<div class="section">
|
|
8
|
-
<div class="corset">
|
|
8
|
+
<div class="corset full">
|
|
9
9
|
<div class="row">
|
|
10
10
|
<% dflt_btns = ["default", "success", "primary", "info", "warning", "danger"] %>
|
|
11
11
|
<% brnd_btns = ["brand"] %>
|
|
12
12
|
<% cstm_btns = ["one", "two", "three"] %>
|
|
13
13
|
|
|
14
|
+
<% colClass = "col-md-6 col-lg-4" %>
|
|
15
|
+
|
|
14
16
|
<% buttons = { default: dflt_btns, brand: brnd_btns, custom: cstm_btns } %>
|
|
15
|
-
<div class="
|
|
16
|
-
<h4
|
|
17
|
+
<div class="<%= colClass %>">
|
|
18
|
+
<h4>Flat</h4>
|
|
17
19
|
<% for key, value of buttons: %>
|
|
18
20
|
<hr/>
|
|
19
|
-
<h5
|
|
21
|
+
<h5><%= key %></h5>
|
|
20
22
|
<% for btn, i in value: %>
|
|
21
23
|
<p class="loud">
|
|
22
|
-
Some text ..
|
|
23
24
|
<span class="label label-<%= btn %>">.label-<%= btn %></span>
|
|
24
25
|
</p>
|
|
25
26
|
<% end %>
|
|
26
27
|
<% end %>
|
|
27
28
|
</div>
|
|
28
|
-
<div class="
|
|
29
|
-
<h4
|
|
29
|
+
<div class="<%= colClass %>">
|
|
30
|
+
<h4>Blank</h4>
|
|
30
31
|
<% for key, value of buttons: %>
|
|
31
32
|
<hr/>
|
|
32
|
-
<h5
|
|
33
|
+
<h5><%= key %></h5>
|
|
33
34
|
<% for btn, i in value: %>
|
|
34
35
|
<p class="loud">
|
|
35
|
-
Some text ..
|
|
36
36
|
<span class="label label-<%= btn %> label-blank">.label-<%= btn %> + .label-blank</span>
|
|
37
37
|
</p>
|
|
38
38
|
<% end %>
|
|
39
39
|
<% end %>
|
|
40
40
|
</div>
|
|
41
41
|
|
|
42
|
+
<div class="<%= colClass %>">
|
|
43
|
+
<h4>Blank - Soft</h4>
|
|
44
|
+
<% for key, value of buttons: %>
|
|
45
|
+
<hr/>
|
|
46
|
+
<h5><%= key %></h5>
|
|
47
|
+
<% for btn, i in value: %>
|
|
48
|
+
<p class="loud">
|
|
49
|
+
<span class="label label-<%= btn %> label-blank-soft">.label-<%= btn %> + .label-blank-soft</span>
|
|
50
|
+
</p>
|
|
51
|
+
<% end %>
|
|
52
|
+
<% end %>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div class="<%= colClass %>">
|
|
56
|
+
<h4>Round</h4>
|
|
57
|
+
<% for key, value of buttons: %>
|
|
58
|
+
<hr/>
|
|
59
|
+
<h5><%= key %></h5>
|
|
60
|
+
<% for btn, i in value: %>
|
|
61
|
+
<p class="loud">
|
|
62
|
+
<span class="label label-<%= btn %> label-round">.label-<%= btn %> + .label-round</span>
|
|
63
|
+
</p>
|
|
64
|
+
<% end %>
|
|
65
|
+
<% end %>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
42
68
|
</div>
|
|
43
69
|
</div>
|
|
44
70
|
</div>
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
<div class="section head">
|
|
2
|
+
<div class="corset">
|
|
3
|
+
<h1>Pictures .. <small>Images and Image-helpers</small></h1>
|
|
4
|
+
</div>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div class="section dark flatted">
|
|
8
|
+
<div class="corset">
|
|
9
|
+
<h4>dependency:</h4>
|
|
10
|
+
<code>@import "magic/content/pix";</code>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<div class="section">
|
|
15
|
+
<div class="corset">
|
|
16
|
+
|
|
17
|
+
<h4>Avatar <code>.avatar</code></h4>
|
|
18
|
+
<p>Round Image in different sizes</p>
|
|
19
|
+
<div class="row">
|
|
20
|
+
<% for size in ["xs", "sm", "", "lg", "xl", "xxl"]: %>
|
|
21
|
+
<div class="col-xs-4 col-sm-2">
|
|
22
|
+
<code>.avatar<%= if size != "" then ".#{size}" else "" %></code>
|
|
23
|
+
<div class="clearfix"></div>
|
|
24
|
+
<img src="<%= assetPath("magic/pix/avatar.jpg") %>" class="avatar <%= size %>" />
|
|
25
|
+
<div class="clearfix"></div>
|
|
26
|
+
</div>
|
|
27
|
+
<% end %>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<br/>
|
|
31
|
+
|
|
32
|
+
<h4>Logo <code>.logo</code></h4>
|
|
33
|
+
<p>Rounded Image in different sizes</p>
|
|
34
|
+
<div class="row">
|
|
35
|
+
<% for size in ["xs", "sm", "", "lg", "xl", "xxl"]: %>
|
|
36
|
+
<div class="col-xs-4 col-sm-2">
|
|
37
|
+
<code>.logo<%= if size != "" then ".#{size}" else "" %></code>
|
|
38
|
+
<div class="clearfix"></div>
|
|
39
|
+
<img src="<%= assetPath("magic/pix/magic.jpg") %>" class="logo <%= size %>" />
|
|
40
|
+
<div class="clearfix"></div>
|
|
41
|
+
</div>
|
|
42
|
+
<% end %>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="section hard-top">
|
|
49
|
+
<div class="corset tight">
|
|
50
|
+
|
|
51
|
+
<h4>Image Cards <code>.image_card</code> | <code>.image-card</code></h4>
|
|
52
|
+
<p>For Images with Text, like Avatars or Projects.</p>
|
|
53
|
+
<div class="image_card">
|
|
54
|
+
<img src="<%= assetPath("magic/pix/magic.jpg") %>" />
|
|
55
|
+
<p>Text one</p>
|
|
56
|
+
<p>Text two</p>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div class="section hard-top">
|
|
63
|
+
<div class="corset tight">
|
|
64
|
+
|
|
65
|
+
<h4>Responsive <code>.responsive</code></h4>
|
|
66
|
+
<p>Responsive Image, allways uses 100% of available width.</p>
|
|
67
|
+
<img src="<%= assetPath("magic/bgs/rain-flower.jpg") %>" class="responsive" />
|
|
68
|
+
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
<div class="section hard-top">
|
|
74
|
+
<div class="corset tight">
|
|
75
|
+
|
|
76
|
+
<h4>Pic-List <code>ul.pic-list</code></h4>
|
|
77
|
+
<ul class="pic-list">
|
|
78
|
+
<li>
|
|
79
|
+
<div>
|
|
80
|
+
<div class="pic">
|
|
81
|
+
<img src="<%= assetPath("magic/pix/magic.jpg") %>" class="responsive" />
|
|
82
|
+
</div>
|
|
83
|
+
<div class="facts">
|
|
84
|
+
<div class="head">
|
|
85
|
+
Head - Text
|
|
86
|
+
</div>
|
|
87
|
+
<div class="body">
|
|
88
|
+
Body - Text
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</li>
|
|
93
|
+
<li>
|
|
94
|
+
<div>
|
|
95
|
+
<div class="pic">
|
|
96
|
+
<img src="<%= assetPath("magic/pix/magic.jpg") %>" class="responsive" />
|
|
97
|
+
</div>
|
|
98
|
+
<div class="facts">
|
|
99
|
+
<div class="head">
|
|
100
|
+
Head - Text
|
|
101
|
+
</div>
|
|
102
|
+
<div class="body">
|
|
103
|
+
Body - Text
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</li>
|
|
108
|
+
</ul>
|
|
109
|
+
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<br/>
|
|
114
|
+
<br/>
|
|
115
|
+
<br/>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -119,41 +119,48 @@
|
|
|
119
119
|
.btn-default {
|
|
120
120
|
@include btn-variant($btn-default-color, $btn-default-bg, $btn-default-border);
|
|
121
121
|
&.btn-blank { @include btn-blank-variant($btn-default-color, $btn-default-border, #fff); }
|
|
122
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-default-color, transparentize($btn-default-border, .50), #fff); }
|
|
122
123
|
&.btn-blur { @include btn-blur-variant( $btn-default-color, $btn-default-bg, $btn-default-border ); }
|
|
123
124
|
}
|
|
124
125
|
.btn-primary {
|
|
125
126
|
@include btn-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
|
|
126
127
|
&.btn-blank { @include btn-blank-variant($btn-primary-bg, $btn-primary-border, #fff); }
|
|
128
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-primary-bg, transparentize($btn-primary-border, .50), #fff); }
|
|
127
129
|
&.btn-blur { @include btn-blur-variant( $btn-primary-color, $btn-primary-bg, $btn-primary-border ); }
|
|
128
130
|
}
|
|
129
131
|
// Success appears as green
|
|
130
132
|
.btn-success {
|
|
131
133
|
@include btn-variant($btn-success-color, $btn-success-bg, $btn-success-border);
|
|
132
134
|
&.btn-blank { @include btn-blank-variant($btn-success-bg, $btn-success-border, #fff); }
|
|
135
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-success-bg, transparentize($btn-success-border, .50), #fff); }
|
|
133
136
|
&.btn-blur { @include btn-blur-variant( $btn-success-color, $btn-success-bg, $btn-success-border ); }
|
|
134
137
|
}
|
|
135
138
|
// Info appears as blue-green
|
|
136
139
|
.btn-info {
|
|
137
140
|
@include btn-variant($btn-info-color, $btn-info-bg, $btn-info-border);
|
|
138
141
|
&.btn-blank { @include btn-blank-variant($btn-info-bg, $btn-info-border, #444); }
|
|
142
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-info-bg, transparentize($btn-info-border, .50), #fff); }
|
|
139
143
|
&.btn-blur { @include btn-blur-variant( $btn-info-color, $btn-info-bg, $btn-info-border ); }
|
|
140
144
|
}
|
|
141
145
|
// Warning appears as orange
|
|
142
146
|
.btn-warning {
|
|
143
147
|
@include btn-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
|
|
144
148
|
&.btn-blank { @include btn-blank-variant($btn-warning-bg, $btn-warning-border, #444); }
|
|
149
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-warning-bg, transparentize($btn-warning-border, .50), #fff); }
|
|
145
150
|
&.btn-blur { @include btn-blur-variant( $btn-warning-color, $btn-warning-bg, $btn-warning-border ); }
|
|
146
151
|
}
|
|
147
152
|
// Danger and error appear as red
|
|
148
153
|
.btn-danger {
|
|
149
154
|
@include btn-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
|
|
150
155
|
&.btn-blank { @include btn-blank-variant($btn-danger-bg, $btn-danger-border, #fff); }
|
|
156
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-danger-bg, transparentize($btn-danger-border, .50), #fff); }
|
|
151
157
|
&.btn-blur { @include btn-blur-variant( $btn-danger-color, $btn-danger-bg, $btn-danger-border ); }
|
|
152
158
|
}
|
|
153
159
|
|
|
154
160
|
.btn-brand {
|
|
155
161
|
@include btn-variant($btn-brand-color, $btn-brand-bg, $btn-brand-border);
|
|
156
162
|
&.btn-blank { @include btn-blank-variant($btn-brand-bg, $btn-brand-border, #fff); }
|
|
163
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-brand-bg, transparentize($btn-brand-border, .50), #fff); }
|
|
157
164
|
&.btn-blur { @include btn-blur-variant( $btn-brand-color, $btn-brand-bg, $btn-brand-border ); }
|
|
158
165
|
}
|
|
159
166
|
|
|
@@ -163,21 +170,25 @@
|
|
|
163
170
|
.btn-facebook {
|
|
164
171
|
@include btn-variant($btn-facebook-color, $btn-facebook-bg, $btn-facebook-border);
|
|
165
172
|
&.btn-blank { @include btn-blank-variant($btn-facebook-bg, $btn-facebook-border, #fff); }
|
|
173
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-facebook-bg, transparentize($btn-facebook-border, .50), #fff); }
|
|
166
174
|
&.btn-blur { @include btn-blur-variant( $btn-facebook-color, $btn-facebook-bg, $btn-facebook-border ); }
|
|
167
175
|
}
|
|
168
176
|
.btn-google {
|
|
169
177
|
@include btn-variant($btn-google-color, $btn-google-bg, $btn-google-border);
|
|
170
178
|
&.btn-blank { @include btn-blank-variant($btn-google-bg, $btn-google-border, #fff); }
|
|
179
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-google-bg, transparentize($btn-google-border, .50), #fff); }
|
|
171
180
|
&.btn-blur { @include btn-blur-variant( $btn-google-color, $btn-google-bg, $btn-google-border ); }
|
|
172
181
|
}
|
|
173
182
|
.btn-twitter {
|
|
174
183
|
@include btn-variant($btn-twitter-color, $btn-twitter-bg, $btn-twitter-border);
|
|
175
184
|
&.btn-blank { @include btn-blank-variant($btn-twitter-bg, $btn-twitter-border, #fff); }
|
|
185
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-twitter-bg, transparentize($btn-twitter-border, .50), #fff); }
|
|
176
186
|
&.btn-blur { @include btn-blur-variant( $btn-twitter-color, $btn-twitter-bg, $btn-twitter-border ); }
|
|
177
187
|
}
|
|
178
188
|
.btn-paypal {
|
|
179
189
|
@include btn-variant($btn-paypal-color, $btn-paypal-bg, $btn-paypal-border);
|
|
180
190
|
&.btn-blank { @include btn-blank-variant($btn-paypal-bg, $btn-paypal-border, #fff); }
|
|
191
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-paypal-bg, transparentize($btn-paypal-border, .50), #fff); }
|
|
181
192
|
&.btn-blur { @include btn-blur-variant( $btn-paypal-color, $btn-paypal-bg, $btn-paypal-border ); }
|
|
182
193
|
}
|
|
183
194
|
|
|
@@ -185,18 +196,21 @@
|
|
|
185
196
|
.btn-one {
|
|
186
197
|
@include btn-variant($btn-one-color, $btn-one-bg, $btn-one-border);
|
|
187
198
|
&.btn-blank { @include btn-blank-variant($btn-one-bg, $btn-one-border, #fff); }
|
|
199
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-one-bg, transparentize($btn-one-border, .50), #fff); }
|
|
188
200
|
&.btn-blur { @include btn-blur-variant( $btn-one-color, $btn-one-bg, $btn-one-border ); }
|
|
189
201
|
}
|
|
190
202
|
|
|
191
203
|
.btn-two {
|
|
192
204
|
@include btn-variant($btn-two-color, $btn-two-bg, $btn-two-border);
|
|
193
205
|
&.btn-blank { @include btn-blank-variant($btn-two-bg, $btn-two-border, #fff); }
|
|
206
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-two-bg, transparentize($btn-two-border, .50), #fff); }
|
|
194
207
|
&.btn-blur { @include btn-blur-variant( $btn-two-color, $btn-two-bg, $btn-two-border ); }
|
|
195
208
|
}
|
|
196
209
|
|
|
197
210
|
.btn-three {
|
|
198
211
|
@include btn-variant($btn-three-color, $btn-three-bg, $btn-three-border);
|
|
199
212
|
&.btn-blank { @include btn-blank-variant($btn-three-bg, $btn-three-border, #fff); }
|
|
213
|
+
&.btn-blank-soft { @include btn-blank-variant($btn-three-bg, transparentize($btn-three-border, .50), #fff); }
|
|
200
214
|
&.btn-blur { @include btn-blur-variant( $btn-three-color, $btn-three-bg, $btn-three-border ); }
|
|
201
215
|
}
|
|
202
216
|
|
|
@@ -5,48 +5,68 @@
|
|
|
5
5
|
.label-default {
|
|
6
6
|
@include label-variant($label-default-bg);
|
|
7
7
|
&.label-blank { @include label-blank-variant( $label-default-bg ); }
|
|
8
|
+
&.label-blank-soft { @include label-blank-soft-variant( $label-default-bg ); }
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
.label-primary {
|
|
11
12
|
@include label-variant($label-primary-bg);
|
|
12
13
|
&.label-blank { @include label-blank-variant( $label-primary-bg ); }
|
|
14
|
+
&.label-blank-soft { @include label-blank-soft-variant( $label-primary-bg ); }
|
|
13
15
|
}
|
|
14
16
|
|
|
15
17
|
.label-success {
|
|
16
18
|
@include label-variant($label-success-bg);
|
|
17
19
|
&.label-blank { @include label-blank-variant( $label-success-bg ); }
|
|
20
|
+
&.label-blank-soft { @include label-blank-soft-variant( $label-success-bg ); }
|
|
18
21
|
}
|
|
19
22
|
|
|
20
23
|
.label-info {
|
|
21
24
|
@include label-variant($label-info-bg);
|
|
22
25
|
&.label-blank { @include label-blank-variant( $label-info-bg ); }
|
|
26
|
+
&.label-blank-soft { @include label-blank-soft-variant( $label-info-bg ); }
|
|
23
27
|
}
|
|
24
28
|
|
|
25
29
|
.label-warning {
|
|
26
30
|
@include label-variant($label-warning-bg);
|
|
27
31
|
&.label-blank { @include label-blank-variant( $label-warning-bg ); }
|
|
32
|
+
&.label-blank-soft { @include label-blank-soft-variant( $label-warning-bg ); }
|
|
28
33
|
}
|
|
29
34
|
|
|
30
35
|
.label-danger {
|
|
31
36
|
@include label-variant($label-danger-bg);
|
|
32
37
|
&.label-blank { @include label-blank-variant( $label-danger-bg ); }
|
|
38
|
+
&.label-blank-soft { @include label-blank-soft-variant( $label-danger-bg ); }
|
|
33
39
|
}
|
|
34
40
|
|
|
35
41
|
.label-brand {
|
|
36
42
|
@include label-variant($label-brand-bg);
|
|
37
43
|
&.label-blank { @include label-blank-variant( $label-brand-bg ); }
|
|
44
|
+
&.label-blank-soft { @include label-blank-soft-variant( $label-brand-bg ); }
|
|
38
45
|
}
|
|
39
46
|
|
|
40
47
|
.label-one {
|
|
41
48
|
@include label-variant($label-one-bg);
|
|
42
49
|
&.label-blank { @include label-blank-variant( $label-one-bg ); }
|
|
50
|
+
&.label-blank-soft { @include label-blank-soft-variant( $label-one-bg ); }
|
|
43
51
|
}
|
|
44
52
|
.label-two {
|
|
45
53
|
@include label-variant($label-two-bg);
|
|
46
54
|
&.label-blank { @include label-blank-variant( $label-two-bg ); }
|
|
55
|
+
&.label-blank-soft { @include label-blank-soft-variant( $label-two-bg ); }
|
|
47
56
|
}
|
|
48
57
|
.label-three {
|
|
49
58
|
@include label-variant($label-three-bg);
|
|
50
59
|
&.label-blank { @include label-blank-variant( $label-three-bg ); }
|
|
60
|
+
&.label-blank-soft { @include label-blank-soft-variant( $label-three-bg ); }
|
|
51
61
|
}
|
|
52
62
|
|
|
63
|
+
|
|
64
|
+
.label.label-round {
|
|
65
|
+
border-radius: 50px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.label.label-width {
|
|
69
|
+
padding-left: 20px; padding-right: 20px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
|
|
@@ -63,6 +63,59 @@
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
img.responsive {
|
|
69
|
+
width: 100%; max-width: 100%;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
img.avatar, img.logo {
|
|
73
|
+
width: 30px;
|
|
74
|
+
vertical-align: top;
|
|
75
|
+
display: inline-block;
|
|
76
|
+
&.big {
|
|
77
|
+
max-width: 120px;
|
|
78
|
+
border-radius: 80px;
|
|
79
|
+
}
|
|
80
|
+
&.xs { width: 18px; }
|
|
81
|
+
&.sm { width: 24px; }
|
|
82
|
+
&.lg { width: 40px; }
|
|
83
|
+
&.xl { width: 60px; }
|
|
84
|
+
&.xxl { width: 80px; }
|
|
85
|
+
}
|
|
86
|
+
img.avatar { border-radius: 60px; }
|
|
87
|
+
img.logo { border-radius: 5px; }
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
img.flag { width: 30px; box-shadow: 0 0 3px 0 #999; }
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
.image-card, .image_card {
|
|
96
|
+
display: block; position: relative;
|
|
97
|
+
margin: 0; padding: 0 0 0 #{ $line-height-computed * 2 + 8px };
|
|
98
|
+
color: #444;
|
|
99
|
+
img {
|
|
100
|
+
display: block; position: absolute;
|
|
101
|
+
top: 0; left: 0;
|
|
102
|
+
width: $line-height-computed * 2;
|
|
103
|
+
}
|
|
104
|
+
p {
|
|
105
|
+
line-height: $line-height-computed;
|
|
106
|
+
margin: 0;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
a.image-card, a.image_card {
|
|
111
|
+
text-decoration: none;
|
|
112
|
+
&:hover {
|
|
113
|
+
text-decoration: none;
|
|
114
|
+
color: $blue;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
|
|
66
119
|
// responsive background:
|
|
67
120
|
|
|
68
121
|
// background-color: rgba(255,255,255,.50);
|
|
@@ -59,6 +59,13 @@ $bettericons-class-name: "bettericon";
|
|
|
59
59
|
font-variant: normal;
|
|
60
60
|
text-transform: none;
|
|
61
61
|
line-height: 1;
|
|
62
|
+
|
|
63
|
+
/* Make them bigger =========== */
|
|
64
|
+
font-size: 1.4em;
|
|
65
|
+
vertical-align: middle;
|
|
66
|
+
line-height: .9em;
|
|
67
|
+
&:before { vertical-align: text-top; }
|
|
68
|
+
|
|
62
69
|
/* Better Font Rendering =========== */
|
|
63
70
|
-webkit-font-smoothing: antialiased;
|
|
64
71
|
-moz-osx-font-smoothing: grayscale;
|
|
@@ -148,6 +148,20 @@
|
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
150
|
|
|
151
|
+
@mixin label-blank-soft-variant( $color ) {
|
|
152
|
+
background-color: transparent;
|
|
153
|
+
color: $color;
|
|
154
|
+
border: solid 1px transparentize($color, .60);;
|
|
155
|
+
&[href] {
|
|
156
|
+
&:hover,
|
|
157
|
+
&:focus {
|
|
158
|
+
color: darken($color, 10%);
|
|
159
|
+
border: solid 1px transparentize($color, .42);
|
|
160
|
+
background-color: transparent;
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
151
165
|
|
|
152
166
|
|
|
153
167
|
// Button helper from twbs ..changed
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: magic_stylez
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.0.
|
|
4
|
+
version: 0.0.0.91
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Torsten Wetzel
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-04-
|
|
11
|
+
date: 2016-04-07 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -224,6 +224,14 @@ files:
|
|
|
224
224
|
- test/dummy/app/assets/images/ico/favicon.png
|
|
225
225
|
- test/dummy/app/assets/images/logo.jpg
|
|
226
226
|
- test/dummy/app/assets/images/logo.png
|
|
227
|
+
- test/dummy/app/assets/images/pix/avatar.jpg
|
|
228
|
+
- test/dummy/app/assets/images/pix/company.jpg
|
|
229
|
+
- test/dummy/app/assets/images/pix/logo.jpg
|
|
230
|
+
- test/dummy/app/assets/images/pix/magic_logo.jpg
|
|
231
|
+
- test/dummy/app/assets/images/pix/magic_logo.png
|
|
232
|
+
- test/dummy/app/assets/images/pix/men.jpg
|
|
233
|
+
- test/dummy/app/assets/images/pix/odw.jpg
|
|
234
|
+
- test/dummy/app/assets/images/pix/owerk.jpg
|
|
227
235
|
- test/dummy/app/assets/javascripts/app.js.coffee
|
|
228
236
|
- test/dummy/app/assets/javascripts/application.js
|
|
229
237
|
- test/dummy/app/assets/javascripts/assets.js.coffee.erb
|
|
@@ -233,10 +241,12 @@ files:
|
|
|
233
241
|
- test/dummy/app/assets/javascripts/views/content/banner.jst.eco
|
|
234
242
|
- test/dummy/app/assets/javascripts/views/content/box.jst.eco
|
|
235
243
|
- test/dummy/app/assets/javascripts/views/content/buttons.jst.eco
|
|
244
|
+
- test/dummy/app/assets/javascripts/views/content/buttons_nice.jst.eco
|
|
236
245
|
- test/dummy/app/assets/javascripts/views/content/forms.jst.eco
|
|
237
246
|
- test/dummy/app/assets/javascripts/views/content/helper.jst.eco
|
|
238
247
|
- test/dummy/app/assets/javascripts/views/content/inputs.jst.eco
|
|
239
248
|
- test/dummy/app/assets/javascripts/views/content/labels.jst.eco
|
|
249
|
+
- test/dummy/app/assets/javascripts/views/content/pictures.jst.eco
|
|
240
250
|
- test/dummy/app/assets/javascripts/views/effects/noise.jst.eco
|
|
241
251
|
- test/dummy/app/assets/javascripts/views/effects/reflections.jst.eco
|
|
242
252
|
- test/dummy/app/assets/javascripts/views/effects/shadows.jst.eco
|
|
@@ -369,6 +379,14 @@ files:
|
|
|
369
379
|
- vendor/assets/images/magic/helper/crossed.png
|
|
370
380
|
- vendor/assets/images/magic/helper/hero_buy.png
|
|
371
381
|
- vendor/assets/images/magic/helper/white_10.png
|
|
382
|
+
- vendor/assets/images/magic/pix/avatar.jpg
|
|
383
|
+
- vendor/assets/images/magic/pix/company.jpg
|
|
384
|
+
- vendor/assets/images/magic/pix/logo.jpg
|
|
385
|
+
- vendor/assets/images/magic/pix/magic.jpg
|
|
386
|
+
- vendor/assets/images/magic/pix/magic.png
|
|
387
|
+
- vendor/assets/images/magic/pix/men.jpg
|
|
388
|
+
- vendor/assets/images/magic/pix/odw.jpg
|
|
389
|
+
- vendor/assets/images/magic/pix/owerk.jpg
|
|
372
390
|
- vendor/assets/javascripts/magic-min.js.coffee
|
|
373
391
|
- vendor/assets/javascripts/magic-stylez.js.coffee
|
|
374
392
|
- vendor/assets/javascripts/magic/circle_diagram.js.coffee
|
|
@@ -469,6 +487,14 @@ test_files:
|
|
|
469
487
|
- test/dummy/app/assets/images/ico/favicon.png
|
|
470
488
|
- test/dummy/app/assets/images/logo.jpg
|
|
471
489
|
- test/dummy/app/assets/images/logo.png
|
|
490
|
+
- test/dummy/app/assets/images/pix/avatar.jpg
|
|
491
|
+
- test/dummy/app/assets/images/pix/company.jpg
|
|
492
|
+
- test/dummy/app/assets/images/pix/logo.jpg
|
|
493
|
+
- test/dummy/app/assets/images/pix/magic_logo.jpg
|
|
494
|
+
- test/dummy/app/assets/images/pix/magic_logo.png
|
|
495
|
+
- test/dummy/app/assets/images/pix/men.jpg
|
|
496
|
+
- test/dummy/app/assets/images/pix/odw.jpg
|
|
497
|
+
- test/dummy/app/assets/images/pix/owerk.jpg
|
|
472
498
|
- test/dummy/app/assets/javascripts/app.js.coffee
|
|
473
499
|
- test/dummy/app/assets/javascripts/application.js
|
|
474
500
|
- test/dummy/app/assets/javascripts/assets.js.coffee.erb
|
|
@@ -478,10 +504,12 @@ test_files:
|
|
|
478
504
|
- test/dummy/app/assets/javascripts/views/content/banner.jst.eco
|
|
479
505
|
- test/dummy/app/assets/javascripts/views/content/box.jst.eco
|
|
480
506
|
- test/dummy/app/assets/javascripts/views/content/buttons.jst.eco
|
|
507
|
+
- test/dummy/app/assets/javascripts/views/content/buttons_nice.jst.eco
|
|
481
508
|
- test/dummy/app/assets/javascripts/views/content/forms.jst.eco
|
|
482
509
|
- test/dummy/app/assets/javascripts/views/content/helper.jst.eco
|
|
483
510
|
- test/dummy/app/assets/javascripts/views/content/inputs.jst.eco
|
|
484
511
|
- test/dummy/app/assets/javascripts/views/content/labels.jst.eco
|
|
512
|
+
- test/dummy/app/assets/javascripts/views/content/pictures.jst.eco
|
|
485
513
|
- test/dummy/app/assets/javascripts/views/effects/noise.jst.eco
|
|
486
514
|
- test/dummy/app/assets/javascripts/views/effects/reflections.jst.eco
|
|
487
515
|
- test/dummy/app/assets/javascripts/views/effects/shadows.jst.eco
|