magic_stylez 0.0.0.90 → 0.0.0.91
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|