magic_stylez 0.0.0.91 → 0.0.0.92
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/magic_stylez/version.rb +1 -1
- data/test/dummy/app/assets/javascripts/views/effects/flip.jst.eco +69 -0
- data/test/dummy/app/assets/javascripts/views/helper/dots.jst.eco +94 -0
- data/test/dummy/public/html/aside-nav.html +2 -2
- data/test/dummy/public/html/fixed-header.html +2 -2
- data/test/dummy/public/html/fixed-subnav.html +2 -2
- data/test/dummy/public/html/index.html +5 -3
- data/test/dummy/public/html/slidebar-header.html +2 -2
- data/test/dummy/public/html/slidebar-subnav.html +2 -2
- data/vendor/assets/stylesheets/magic/content/_buttons.scss +16 -89
- data/vendor/assets/stylesheets/magic/effects/_flip.scss +105 -0
- data/vendor/assets/stylesheets/magic/helper/_dots.scss +66 -9
- data/vendor/assets/stylesheets/magic/lib/_colors.scss +80 -1
- data/vendor/assets/stylesheets/magic-stylez.scss +1 -0
- metadata +6 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1c091d00000282df09c6c8c213055f2c8139be81
|
|
4
|
+
data.tar.gz: ab0116b5ce32397064b80057455a1545109f7386
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0f46b2bdb028629a15c98cbade40bd0e512c7ac5ada0085b4c9b0cb4b70d595ccf98fc59c5c9767e068a84f8851fa2cb3513b9fb2139531e6b012e0fc44f2939
|
|
7
|
+
data.tar.gz: f62b9460e7de69609dc07d73090509786073c16f55270116165c358a794120ef36b04856b3c5483a772bd7a1ba4025c4e2178ecd6c8ced9064764cca76ff9142
|
data/lib/magic_stylez/version.rb
CHANGED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<div class="section head">
|
|
2
|
+
<div class="corset">
|
|
3
|
+
<h1>Flip - Effect</h1>
|
|
4
|
+
</div>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div class="section dark flatted">
|
|
8
|
+
<div class="corset">
|
|
9
|
+
<h4>dependency:</h4>
|
|
10
|
+
<code>@import "magic/effects/flip";</code>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
<div class="section">
|
|
16
|
+
<div class="corset top">
|
|
17
|
+
|
|
18
|
+
<div class="row">
|
|
19
|
+
<div class="col-sm-6">
|
|
20
|
+
<h4>Usual</h4>
|
|
21
|
+
<p>Reacts on hover</p>
|
|
22
|
+
<div class="flip-container">
|
|
23
|
+
<div class="front">
|
|
24
|
+
Hallo Welt
|
|
25
|
+
</div>
|
|
26
|
+
<div class="back">
|
|
27
|
+
Hello World
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="col-sm-6">
|
|
32
|
+
<h4>Infinite</h4>
|
|
33
|
+
<p>Allways flips</p>
|
|
34
|
+
<div class="flip-container infinite">
|
|
35
|
+
<div class="front">
|
|
36
|
+
Hallo Welt
|
|
37
|
+
</div>
|
|
38
|
+
<div class="back">
|
|
39
|
+
Hello World
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="col-sm-6">
|
|
45
|
+
<h4>Usual with Image</h4>
|
|
46
|
+
<p>Reacts on hover</p>
|
|
47
|
+
<div class="flip-container">
|
|
48
|
+
<div class="front bg"></div>
|
|
49
|
+
<div class="back bg"></div>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="col-sm-6">
|
|
53
|
+
<h4>Infinite with Image</h4>
|
|
54
|
+
<p>Allways flips</p>
|
|
55
|
+
<div class="flip-container infinite">
|
|
56
|
+
<div class="front bg"></div>
|
|
57
|
+
<div class="back bg"></div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<div class="section sctn-xl">
|
|
66
|
+
<div class="corset">
|
|
67
|
+
<br/>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
<div class="section head">
|
|
2
|
+
<div class="corset">
|
|
3
|
+
<h1>Dots</h1>
|
|
4
|
+
</div>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div class="section dark flatted">
|
|
8
|
+
<div class="corset">
|
|
9
|
+
<h4>dependency:</h4>
|
|
10
|
+
<code>@import "magic/helper/dots";</code>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<div class="section hard-top">
|
|
15
|
+
<div class="corset center_text">
|
|
16
|
+
|
|
17
|
+
<div class="row">
|
|
18
|
+
|
|
19
|
+
<div class="col-sm-3">
|
|
20
|
+
<div class="dot dot-<%= x %>"></div>
|
|
21
|
+
.dot
|
|
22
|
+
<div class="clearfix"></div>
|
|
23
|
+
<br/>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
|
|
27
|
+
<div class="col-sm-3">
|
|
28
|
+
<div class="dot dot-<%= x %>"></div>
|
|
29
|
+
.dot.dot-<%= x %>
|
|
30
|
+
<div class="clearfix"></div>
|
|
31
|
+
<br/>
|
|
32
|
+
</div>
|
|
33
|
+
<% end %>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="section head">
|
|
41
|
+
<div class="corset">
|
|
42
|
+
<h1>Number-Dots</h1>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div class="section hard-top">
|
|
47
|
+
<div class="corset center_text">
|
|
48
|
+
|
|
49
|
+
<div class="row">
|
|
50
|
+
<% for x in [1,2,3,4]: %>
|
|
51
|
+
<div class="col-sm-3">
|
|
52
|
+
<div class="number_dot"><%= x %></div>
|
|
53
|
+
</div>
|
|
54
|
+
<% end %>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div class="section hard-top">
|
|
62
|
+
<div class="corset center_text">
|
|
63
|
+
|
|
64
|
+
<h3>Sizes</h3>
|
|
65
|
+
|
|
66
|
+
<div class="row">
|
|
67
|
+
<% for x, i in ["xs", "sm", "", "lg", "xl", "xxl"]: %>
|
|
68
|
+
<div class="col-sm-2">
|
|
69
|
+
<div class="number_dot dot-brand<%= if x != "" then " dot-#{x}" else "" %>"><%= i + 1 %></div>
|
|
70
|
+
<div class="clearfix"></div>
|
|
71
|
+
<p><%= if x != "" then ".dot-#{x}" else "" %></p>
|
|
72
|
+
</div>
|
|
73
|
+
<% end %>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<br/>
|
|
77
|
+
|
|
78
|
+
<h3>Colors</h3>
|
|
79
|
+
|
|
80
|
+
<div class="row">
|
|
81
|
+
<% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
|
|
82
|
+
<div class="col-sm-2">
|
|
83
|
+
<div class="number_dot dot-lg dot-<%= x %>"><%= i + 1 %></div>
|
|
84
|
+
<div class="clearfix"></div>
|
|
85
|
+
<p>.dot-<%= x %></p>
|
|
86
|
+
</div>
|
|
87
|
+
<% end %>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-6fa65cdca06ba480799771fa7ce427c0.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="4iKc6BQLVwXDg4Rwn9o1I1F6jZ6jp9/m7+I/Q+hA2rE=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-6fa65cdca06ba480799771fa7ce427c0.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="4iKc6BQLVwXDg4Rwn9o1I1F6jZ6jp9/m7+I/Q+hA2rE=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-6fa65cdca06ba480799771fa7ce427c0.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="4iKc6BQLVwXDg4Rwn9o1I1F6jZ6jp9/m7+I/Q+hA2rE=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
7
7
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
8
8
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
9
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
10
|
-
<script src="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
9
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-6fa65cdca06ba480799771fa7ce427c0.css" media="all" rel="stylesheet" />
|
|
10
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/application-778b5fd8f0c3bc7383c504fd8e06e4a2.js"></script>
|
|
11
11
|
<meta content="authenticity_token" name="csrf-param" />
|
|
12
|
-
<meta content="
|
|
12
|
+
<meta content="4iKc6BQLVwXDg4Rwn9o1I1F6jZ6jp9/m7+I/Q+hA2rE=" name="csrf-token" />
|
|
13
13
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
14
14
|
<link href="//berlinmagic.github.io/magic_stylez/assets/ico/favicon-f1706407301f788c54691b6995f60a8f.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
|
|
15
15
|
<link href="//berlinmagic.github.io/magic_stylez/assets/ico/favicon-f34b54df445838a4f6bdac98bd904570.png" rel="shortcut icon" type="image/png" />
|
|
@@ -44,10 +44,12 @@
|
|
|
44
44
|
<li><a class="app_lnk lst_lnk" data-target="content/banner" href="#">Banner</a></li>
|
|
45
45
|
<li><a class="app_lnk lst_lnk" data-target="content/box" href="#">Box</a></li>
|
|
46
46
|
<li><a class="app_lnk lst_lnk" data-target="content/buttons" href="#">Buttons</a></li>
|
|
47
|
+
<li><a class="app_lnk lst_lnk" data-target="content/buttons_nice" href="#">Buttons Nice</a></li>
|
|
47
48
|
<li><a class="app_lnk lst_lnk" data-target="content/forms" href="#">Forms</a></li>
|
|
48
49
|
<li><a class="app_lnk lst_lnk" data-target="content/helper" href="#">Helper</a></li>
|
|
49
50
|
<li><a class="app_lnk lst_lnk" data-target="content/inputs" href="#">Inputs</a></li>
|
|
50
51
|
<li><a class="app_lnk lst_lnk" data-target="content/labels" href="#">Labels</a></li>
|
|
52
|
+
<li><a class="app_lnk lst_lnk" data-target="content/pictures" href="#">Pictures</a></li>
|
|
51
53
|
</ul>
|
|
52
54
|
</li>
|
|
53
55
|
<li><a class="lst_lnk" href="#">Effects</a>
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-6fa65cdca06ba480799771fa7ce427c0.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="4iKc6BQLVwXDg4Rwn9o1I1F6jZ6jp9/m7+I/Q+hA2rE=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-6fa65cdca06ba480799771fa7ce427c0.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="4iKc6BQLVwXDg4Rwn9o1I1F6jZ6jp9/m7+I/Q+hA2rE=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -122,104 +122,31 @@
|
|
|
122
122
|
&.btn-blank-soft { @include btn-blank-variant($btn-default-color, transparentize($btn-default-border, .50), #fff); }
|
|
123
123
|
&.btn-blur { @include btn-blur-variant( $btn-default-color, $btn-default-bg, $btn-default-border ); }
|
|
124
124
|
}
|
|
125
|
-
.btn-primary {
|
|
126
|
-
@include btn-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
|
|
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); }
|
|
129
|
-
&.btn-blur { @include btn-blur-variant( $btn-primary-color, $btn-primary-bg, $btn-primary-border ); }
|
|
130
|
-
}
|
|
131
|
-
// Success appears as green
|
|
132
|
-
.btn-success {
|
|
133
|
-
@include btn-variant($btn-success-color, $btn-success-bg, $btn-success-border);
|
|
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); }
|
|
136
|
-
&.btn-blur { @include btn-blur-variant( $btn-success-color, $btn-success-bg, $btn-success-border ); }
|
|
137
|
-
}
|
|
138
|
-
// Info appears as blue-green
|
|
139
|
-
.btn-info {
|
|
140
|
-
@include btn-variant($btn-info-color, $btn-info-bg, $btn-info-border);
|
|
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); }
|
|
143
|
-
&.btn-blur { @include btn-blur-variant( $btn-info-color, $btn-info-bg, $btn-info-border ); }
|
|
144
|
-
}
|
|
145
|
-
// Warning appears as orange
|
|
146
|
-
.btn-warning {
|
|
147
|
-
@include btn-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
|
|
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); }
|
|
150
|
-
&.btn-blur { @include btn-blur-variant( $btn-warning-color, $btn-warning-bg, $btn-warning-border ); }
|
|
151
|
-
}
|
|
152
|
-
// Danger and error appear as red
|
|
153
|
-
.btn-danger {
|
|
154
|
-
@include btn-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
|
|
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); }
|
|
157
|
-
&.btn-blur { @include btn-blur-variant( $btn-danger-color, $btn-danger-bg, $btn-danger-border ); }
|
|
158
|
-
}
|
|
159
125
|
|
|
160
|
-
|
|
161
|
-
|
|
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); }
|
|
164
|
-
&.btn-blur { @include btn-blur-variant( $btn-brand-color, $btn-brand-bg, $btn-brand-border ); }
|
|
165
|
-
}
|
|
126
|
+
$whiteBgButtons: primary success danger brand facebook google twitter paypal one two three;
|
|
127
|
+
$darkBgButtons: info warning;
|
|
166
128
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
&.btn-blur { @include btn-blur-variant( $btn-facebook-color, $btn-facebook-bg, $btn-facebook-border ); }
|
|
175
|
-
}
|
|
176
|
-
.btn-google {
|
|
177
|
-
@include btn-variant($btn-google-color, $btn-google-bg, $btn-google-border);
|
|
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); }
|
|
180
|
-
&.btn-blur { @include btn-blur-variant( $btn-google-color, $btn-google-bg, $btn-google-border ); }
|
|
181
|
-
}
|
|
182
|
-
.btn-twitter {
|
|
183
|
-
@include btn-variant($btn-twitter-color, $btn-twitter-bg, $btn-twitter-border);
|
|
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); }
|
|
186
|
-
&.btn-blur { @include btn-blur-variant( $btn-twitter-color, $btn-twitter-bg, $btn-twitter-border ); }
|
|
187
|
-
}
|
|
188
|
-
.btn-paypal {
|
|
189
|
-
@include btn-variant($btn-paypal-color, $btn-paypal-bg, $btn-paypal-border);
|
|
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); }
|
|
192
|
-
&.btn-blur { @include btn-blur-variant( $btn-paypal-color, $btn-paypal-bg, $btn-paypal-border ); }
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
.btn-one {
|
|
197
|
-
@include btn-variant($btn-one-color, $btn-one-bg, $btn-one-border);
|
|
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); }
|
|
200
|
-
&.btn-blur { @include btn-blur-variant( $btn-one-color, $btn-one-bg, $btn-one-border ); }
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.btn-two {
|
|
204
|
-
@include btn-variant($btn-two-color, $btn-two-bg, $btn-two-border);
|
|
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); }
|
|
207
|
-
&.btn-blur { @include btn-blur-variant( $btn-two-color, $btn-two-bg, $btn-two-border ); }
|
|
129
|
+
@each $thatBtn in $whiteBgButtons {
|
|
130
|
+
.btn-#{$thatBtn} {
|
|
131
|
+
@include btn-variant(map-get($appColorz, btn-#{$thatBtn}-color), map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border));
|
|
132
|
+
&.btn-blank { @include btn-blank-variant(map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border), #fff); }
|
|
133
|
+
&.btn-blank-soft { @include btn-blank-variant(map-get($appColorz, btn-#{$thatBtn}-bg), transparentize(map-get($appColorz, btn-#{$thatBtn}-border), .50), #fff); }
|
|
134
|
+
&.btn-blur { @include btn-blur-variant(map-get($appColorz, btn-#{$thatBtn}-color), map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border) ); }
|
|
135
|
+
}
|
|
208
136
|
}
|
|
209
137
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
138
|
+
@each $thatBtn in $darkBgButtons {
|
|
139
|
+
.btn-#{$thatBtn} {
|
|
140
|
+
@include btn-variant(map-get($appColorz, btn-#{$thatBtn}-color), map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border));
|
|
141
|
+
&.btn-blank { @include btn-blank-variant(map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border), #444); }
|
|
142
|
+
&.btn-blank-soft { @include btn-blank-variant(map-get($appColorz, btn-#{$thatBtn}-bg), transparentize(map-get($appColorz, btn-#{$thatBtn}-border), .50), #444); }
|
|
143
|
+
&.btn-blur { @include btn-blur-variant(map-get($appColorz, btn-#{$thatBtn}-color), map-get($appColorz, btn-#{$thatBtn}-bg), map-get($appColorz, btn-#{$thatBtn}-border) ); }
|
|
144
|
+
}
|
|
215
145
|
}
|
|
216
146
|
|
|
217
147
|
|
|
218
148
|
|
|
219
149
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
150
|
.btn-link {
|
|
224
151
|
color: $link-color !important;
|
|
225
152
|
background-color: transparent !important;
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
@keyframes rotating {
|
|
2
|
+
from { transform: rotateY(0deg); }
|
|
3
|
+
to { transform: rotateY(360deg); }
|
|
4
|
+
}
|
|
5
|
+
@keyframes backrotating {
|
|
6
|
+
from { transform: rotateY(-180deg); }
|
|
7
|
+
to { transform: rotateY(180deg); }
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// http://davidwalsh.name/css-flip
|
|
11
|
+
|
|
12
|
+
/* entire container, keeps perspective */
|
|
13
|
+
.flip-container {
|
|
14
|
+
perspective: 1000;
|
|
15
|
+
transform-style: preserve-3d;
|
|
16
|
+
margin: 0 auto;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.flip-container, .front, .back {
|
|
20
|
+
width: 200px;
|
|
21
|
+
height: 200px;
|
|
22
|
+
// border-radius: 100px;
|
|
23
|
+
padding: 20px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* flip speed goes here */
|
|
27
|
+
.flipper {
|
|
28
|
+
transition: 0.6s;
|
|
29
|
+
transform-style: preserve-3d;
|
|
30
|
+
|
|
31
|
+
position: relative;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* hide back of pane during swap */
|
|
35
|
+
.front, .back {
|
|
36
|
+
backface-visibility: hidden;
|
|
37
|
+
transition: 0.6s;
|
|
38
|
+
transform-style: preserve-3d;
|
|
39
|
+
|
|
40
|
+
position: absolute;
|
|
41
|
+
top: 0;
|
|
42
|
+
left: 0;
|
|
43
|
+
border: solid 1px #ccc;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* UPDATED! front pane, placed above back */
|
|
47
|
+
.front {
|
|
48
|
+
z-index: 2;
|
|
49
|
+
transform: rotateY(0deg);
|
|
50
|
+
background: #fff;
|
|
51
|
+
&.bg {
|
|
52
|
+
background-size: cover;
|
|
53
|
+
background-image: image-url("magic/bgs/rain-flower.jpg");
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* back, initially hidden pane */
|
|
58
|
+
.back {
|
|
59
|
+
transform: rotateY(-180deg);
|
|
60
|
+
background: #ccc;
|
|
61
|
+
&.bg {
|
|
62
|
+
background-size: cover;
|
|
63
|
+
background-image: image-url("magic/bgs/seucide.jpg");
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
/* UPDATED! flip the pane when hovered */
|
|
70
|
+
.flip-container:hover .back {
|
|
71
|
+
transform: rotateY(0deg);
|
|
72
|
+
}
|
|
73
|
+
.flip-container:hover .front {
|
|
74
|
+
transform: rotateY(180deg);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
$rotationSpeed: 1.2s;
|
|
78
|
+
|
|
79
|
+
.flip-container.infinite .front { animation: rotating $rotationSpeed linear infinite; }
|
|
80
|
+
.flip-container.infinite .back { animation: backrotating $rotationSpeed linear infinite; }
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
/*
|
|
89
|
+
Some vertical flip updates
|
|
90
|
+
*/
|
|
91
|
+
.vertical.flip-container {
|
|
92
|
+
position: relative;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.vertical .back {
|
|
96
|
+
transform: rotateX(180deg);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.vertical.flip-container:hover .back {
|
|
100
|
+
transform: rotateX(0deg);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.vertical.flip-container:hover .front {
|
|
104
|
+
transform: rotateX(180deg);
|
|
105
|
+
}
|
|
@@ -3,24 +3,81 @@
|
|
|
3
3
|
width: 10px; height: 10px;
|
|
4
4
|
@include border-radius( 15px );
|
|
5
5
|
border: solid 1px $main-border-color;
|
|
6
|
-
&.ok { background: #55b8f7; border: solid 1px darken( #55b8f7, 10% ); }
|
|
7
|
-
&.warning { background: #f9a538; border: solid 1px darken( #f9a538, 10% ); }
|
|
8
6
|
}
|
|
9
7
|
|
|
10
8
|
|
|
11
|
-
.number_dot {
|
|
9
|
+
.number_dot, .number-dot, .nmbr_dot, .nmbr-dot {
|
|
12
10
|
display: inline-block;
|
|
13
|
-
height:
|
|
14
|
-
line-height:
|
|
15
|
-
width: 92px;
|
|
11
|
+
height: 40px; width: 40px;
|
|
12
|
+
line-height: 36px;
|
|
16
13
|
text-align: center;
|
|
17
14
|
@include border-radius( 100px );
|
|
18
15
|
@include box-shadow (inset 0 1px 1px 0 rgba(51,102,153,0.4));
|
|
19
16
|
text-shadow: 0 2px rgba(51,102,153,0.4);
|
|
20
|
-
border: solid
|
|
17
|
+
border: solid 2px #fff;
|
|
21
18
|
color: #fff;
|
|
22
19
|
background-color: $pink;
|
|
23
|
-
font-size:
|
|
20
|
+
font-size: 22px;
|
|
24
21
|
font-weight: 800;
|
|
25
22
|
margin: 0 auto $general-vertical-spacing-half;
|
|
26
|
-
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
&.sm {
|
|
28
|
+
height: 24px;
|
|
29
|
+
line-height: 20px;
|
|
30
|
+
width: 24px;
|
|
31
|
+
border: solid 1px #fff;
|
|
32
|
+
font-size: 18px;
|
|
33
|
+
margin: 0 5px 0 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&.dot-xs {
|
|
37
|
+
height: 20px; width: 20px;
|
|
38
|
+
line-height: 18px;
|
|
39
|
+
border-width: 1px;
|
|
40
|
+
font-size: 14px;
|
|
41
|
+
}
|
|
42
|
+
&.dot-sm {
|
|
43
|
+
height: 30px; width: 30px;
|
|
44
|
+
line-height: 26px;
|
|
45
|
+
border-width: 1px;
|
|
46
|
+
font-size: 18px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&.dot-lg {
|
|
50
|
+
height: 60px; width: 60px;
|
|
51
|
+
line-height: 54px;
|
|
52
|
+
border-width: 3px;
|
|
53
|
+
font-size: 34px;
|
|
54
|
+
}
|
|
55
|
+
&.dot-xl {
|
|
56
|
+
height: 92px; width: 92px;
|
|
57
|
+
line-height: 82px;
|
|
58
|
+
border-width: 5px;
|
|
59
|
+
font-size: 40px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&.dot-xxl {
|
|
63
|
+
height: 120px; width: 120px;
|
|
64
|
+
line-height: 108px;
|
|
65
|
+
border-width: 5px;
|
|
66
|
+
font-size: 80px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
.dot, .number_dot, .number-dot, .nmbr_dot, .nmbr-dot {
|
|
73
|
+
@each $current-color in $colorClasses {
|
|
74
|
+
&.dot-#{$current-color} {
|
|
75
|
+
background-color: map-get($appColorz, btn-#{$current-color}-bg);
|
|
76
|
+
color: map-get($appColorz, btn-#{$current-color}-color);
|
|
77
|
+
border-color: map-get($appColorz, btn-#{$current-color}-border);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
@@ -44,5 +44,84 @@ $appColorz: (
|
|
|
44
44
|
orange: $orange,
|
|
45
45
|
pink: $pink,
|
|
46
46
|
purple: $purple,
|
|
47
|
-
violett: $violett
|
|
47
|
+
violett: $violett,
|
|
48
|
+
|
|
49
|
+
main-bg: $main-bg,
|
|
50
|
+
body-bg: $body-bg,
|
|
51
|
+
dark-bg: $dark-bg,
|
|
52
|
+
soft-bg: $soft-bg,
|
|
53
|
+
blue-bg: $blue-bg,
|
|
54
|
+
|
|
55
|
+
bright-bg: $bright-bg,
|
|
56
|
+
brand-bg: $brand-bg,
|
|
57
|
+
brand-one-bg: $brand-one-bg,
|
|
58
|
+
brand-two-bg: $brand-two-bg,
|
|
59
|
+
brand-three-bg: $brand-three-bg,
|
|
60
|
+
|
|
61
|
+
text-color: $text-color,
|
|
62
|
+
link-color: $link-color,
|
|
63
|
+
link-hover-color: $link-hover-color,
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
btn-default-color: $btn-default-color,
|
|
67
|
+
btn-default-bg: $btn-default-bg,
|
|
68
|
+
btn-default-border: $btn-default-border,
|
|
69
|
+
|
|
70
|
+
btn-primary-color: $btn-primary-color,
|
|
71
|
+
btn-primary-bg: $btn-primary-bg,
|
|
72
|
+
btn-primary-border: $btn-primary-border,
|
|
73
|
+
|
|
74
|
+
btn-success-color: $btn-success-color,
|
|
75
|
+
btn-success-bg: $btn-success-bg,
|
|
76
|
+
btn-success-border: $btn-success-border,
|
|
77
|
+
|
|
78
|
+
btn-info-color: $btn-info-color,
|
|
79
|
+
btn-info-bg: $btn-info-bg,
|
|
80
|
+
btn-info-border: $btn-info-border,
|
|
81
|
+
|
|
82
|
+
btn-warning-color: $btn-warning-color,
|
|
83
|
+
btn-warning-bg: $btn-warning-bg,
|
|
84
|
+
btn-warning-border: $btn-warning-border,
|
|
85
|
+
|
|
86
|
+
btn-danger-color: $btn-danger-color,
|
|
87
|
+
btn-danger-bg: $btn-danger-bg,
|
|
88
|
+
btn-danger-border: $btn-danger-border,
|
|
89
|
+
|
|
90
|
+
btn-link-disabled-color: $btn-link-disabled-color,
|
|
91
|
+
|
|
92
|
+
btn-brand-color: $btn-brand-color,
|
|
93
|
+
btn-brand-bg: $btn-brand-bg,
|
|
94
|
+
btn-brand-border: $btn-brand-border,
|
|
95
|
+
|
|
96
|
+
btn-one-color: $btn-one-color,
|
|
97
|
+
btn-one-bg: $btn-one-bg,
|
|
98
|
+
btn-one-border: $btn-one-border,
|
|
99
|
+
|
|
100
|
+
btn-two-color: $btn-two-color,
|
|
101
|
+
btn-two-bg: $btn-two-bg,
|
|
102
|
+
btn-two-border: $btn-two-border,
|
|
103
|
+
|
|
104
|
+
btn-three-color: $btn-three-color,
|
|
105
|
+
btn-three-bg: $btn-three-bg,
|
|
106
|
+
btn-three-border: $btn-three-border,
|
|
107
|
+
|
|
108
|
+
btn-facebook-color: $btn-facebook-color,
|
|
109
|
+
btn-facebook-bg: $btn-facebook-bg,
|
|
110
|
+
btn-facebook-border: $btn-facebook-border,
|
|
111
|
+
|
|
112
|
+
btn-google-color: $btn-google-color,
|
|
113
|
+
btn-google-bg: $btn-google-bg,
|
|
114
|
+
btn-google-border: $btn-google-border,
|
|
115
|
+
|
|
116
|
+
btn-paypal-color: $btn-paypal-color,
|
|
117
|
+
btn-paypal-bg: $btn-paypal-bg,
|
|
118
|
+
btn-paypal-border: $btn-paypal-border,
|
|
119
|
+
|
|
120
|
+
btn-twitter-color: $btn-twitter-color,
|
|
121
|
+
btn-twitter-bg: $btn-twitter-bg,
|
|
122
|
+
btn-twitter-border: $btn-twitter-border
|
|
123
|
+
|
|
124
|
+
|
|
48
125
|
);
|
|
126
|
+
|
|
127
|
+
$colorClasses: "default" "success" "info" "warning" "danger" "brand" "one" "two" "three" "facebook" "google" "twitter" "paypal";
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: magic_stylez
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.0.
|
|
4
|
+
version: 0.0.0.92
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Torsten Wetzel
|
|
@@ -247,6 +247,7 @@ files:
|
|
|
247
247
|
- test/dummy/app/assets/javascripts/views/content/inputs.jst.eco
|
|
248
248
|
- test/dummy/app/assets/javascripts/views/content/labels.jst.eco
|
|
249
249
|
- test/dummy/app/assets/javascripts/views/content/pictures.jst.eco
|
|
250
|
+
- test/dummy/app/assets/javascripts/views/effects/flip.jst.eco
|
|
250
251
|
- test/dummy/app/assets/javascripts/views/effects/noise.jst.eco
|
|
251
252
|
- test/dummy/app/assets/javascripts/views/effects/reflections.jst.eco
|
|
252
253
|
- test/dummy/app/assets/javascripts/views/effects/shadows.jst.eco
|
|
@@ -254,6 +255,7 @@ files:
|
|
|
254
255
|
- test/dummy/app/assets/javascripts/views/helper/arrow_infos.jst.eco
|
|
255
256
|
- test/dummy/app/assets/javascripts/views/helper/crossed_text.jst.eco
|
|
256
257
|
- test/dummy/app/assets/javascripts/views/helper/divider.jst.eco
|
|
258
|
+
- test/dummy/app/assets/javascripts/views/helper/dots.jst.eco
|
|
257
259
|
- test/dummy/app/assets/javascripts/views/helper/sass_helper.jst.eco
|
|
258
260
|
- test/dummy/app/assets/javascripts/views/helper/text.jst.eco
|
|
259
261
|
- test/dummy/app/assets/javascripts/views/helper/three_previews.jst.eco
|
|
@@ -416,6 +418,7 @@ files:
|
|
|
416
418
|
- vendor/assets/stylesheets/magic/content/_panel.scss
|
|
417
419
|
- vendor/assets/stylesheets/magic/content/_pix.scss
|
|
418
420
|
- vendor/assets/stylesheets/magic/content/_tables.scss
|
|
421
|
+
- vendor/assets/stylesheets/magic/effects/_flip.scss
|
|
419
422
|
- vendor/assets/stylesheets/magic/effects/_noise.scss
|
|
420
423
|
- vendor/assets/stylesheets/magic/effects/_reflections.scss
|
|
421
424
|
- vendor/assets/stylesheets/magic/effects/_shadows.scss
|
|
@@ -510,6 +513,7 @@ test_files:
|
|
|
510
513
|
- test/dummy/app/assets/javascripts/views/content/inputs.jst.eco
|
|
511
514
|
- test/dummy/app/assets/javascripts/views/content/labels.jst.eco
|
|
512
515
|
- test/dummy/app/assets/javascripts/views/content/pictures.jst.eco
|
|
516
|
+
- test/dummy/app/assets/javascripts/views/effects/flip.jst.eco
|
|
513
517
|
- test/dummy/app/assets/javascripts/views/effects/noise.jst.eco
|
|
514
518
|
- test/dummy/app/assets/javascripts/views/effects/reflections.jst.eco
|
|
515
519
|
- test/dummy/app/assets/javascripts/views/effects/shadows.jst.eco
|
|
@@ -517,6 +521,7 @@ test_files:
|
|
|
517
521
|
- test/dummy/app/assets/javascripts/views/helper/arrow_infos.jst.eco
|
|
518
522
|
- test/dummy/app/assets/javascripts/views/helper/crossed_text.jst.eco
|
|
519
523
|
- test/dummy/app/assets/javascripts/views/helper/divider.jst.eco
|
|
524
|
+
- test/dummy/app/assets/javascripts/views/helper/dots.jst.eco
|
|
520
525
|
- test/dummy/app/assets/javascripts/views/helper/sass_helper.jst.eco
|
|
521
526
|
- test/dummy/app/assets/javascripts/views/helper/text.jst.eco
|
|
522
527
|
- test/dummy/app/assets/javascripts/views/helper/three_previews.jst.eco
|