magic_stylez 0.0.0.91 → 0.0.0.92
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/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
|