magic_stylez 0.0.0.98 → 0.0.0.99
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +8 -8
- data/lib/magic_stylez/version.rb +1 -1
- data/test/dummy/README.md +6 -0
- data/test/dummy/app/assets/javascripts/application.js +2 -0
- data/test/dummy/app/assets/javascripts/views/content/check_switch.jst.eco +178 -0
- data/test/dummy/app/assets/javascripts/views/content/forms.jst.eco +2 -6
- data/test/dummy/app/assets/javascripts/views/content/wrapped_fields.jst.eco +105 -0
- data/test/dummy/app/assets/stylesheets/application.css.scss +56 -54
- 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/javascripts/magic/check_switch.js.coffee +25 -0
- data/vendor/assets/javascripts/magic/wrapped_fields.js.coffee +31 -0
- data/vendor/assets/javascripts/magic-stylez.js.coffee +2 -0
- data/vendor/assets/stylesheets/magic/content/_check_switch.scss +78 -0
- data/vendor/assets/stylesheets/magic/content/_wrapped_fields.scss +149 -0
- data/vendor/assets/stylesheets/magic/helper/_three_previews.scss +1 -0
- data/vendor/assets/stylesheets/magic-stylez.scss +2 -0
- metadata +10 -2
checksums.yaml
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
---
|
2
2
|
!binary "U0hBMQ==":
|
3
3
|
metadata.gz: !binary |-
|
4
|
-
|
4
|
+
MmI5NjlmMWU2MzAxYTYwOWU1YTQwZDUxNTM0ZDQ2NTRlNjI5ODkxZQ==
|
5
5
|
data.tar.gz: !binary |-
|
6
|
-
|
6
|
+
YjY5NTBiNGUxNjU1OWE3ZmM0MDU2MjEzYTI2NzBmNGM1MDQyMzc2Mg==
|
7
7
|
SHA512:
|
8
8
|
metadata.gz: !binary |-
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
ZjYxYjgzYzMzMjRhZGMwZDU3ZWRmMDIzZDM5NWE5YWM1OWM1ZDhjNGQwZmM0
|
10
|
+
MzJmMGUzODMwMmY4NWMzZDIzZmZhNWNiM2I5OWUxMWMzNTk4YzNlM2IxOWMy
|
11
|
+
MTc2ZGM2MzJmYzFhNTNlYjRkNDNlYmNmZjczYTYwMjE1NWYzYWM=
|
12
12
|
data.tar.gz: !binary |-
|
13
|
-
|
14
|
-
|
15
|
-
|
13
|
+
MjFmNTJhNzRlODY4OGI0ZjAyOWY5ZTEyMDFkOGNkZWRjYTJmMzEyMWUxMmEx
|
14
|
+
MGE2NjVlMmJlNjdiZTM4YTdjZTk2ZGEwMzk4NGY0ZDk5NDJhZTZjM2VkOThh
|
15
|
+
NTViYmFiNGNiNmZjODFjNzQwNzYxMzhjNDU4NTBkY2I4MTQxODg=
|
data/lib/magic_stylez/version.rb
CHANGED
data/test/dummy/README.md
CHANGED
@@ -0,0 +1,178 @@
|
|
1
|
+
<div class="section head">
|
2
|
+
<div class="corset">
|
3
|
+
<h1>Check-Switch <small>= Nice Checkboxes and Radios</small></h1>
|
4
|
+
</div>
|
5
|
+
</div>
|
6
|
+
|
7
|
+
<div class="section sctn-xs dark">
|
8
|
+
<div class="corset">
|
9
|
+
<h4>dependencies:</h4>
|
10
|
+
<table class="table table-no-head table-left table-condensed half-press">
|
11
|
+
<tr>
|
12
|
+
<td class="col-1">CSS: </td>
|
13
|
+
<td><code>@import "magic/content/check_switch";</code></td>
|
14
|
+
</tr>
|
15
|
+
<tr>
|
16
|
+
<td class="col-1">JS: </td>
|
17
|
+
<td><code>//= magic/check_switch</code></td>
|
18
|
+
</tr>
|
19
|
+
</table>
|
20
|
+
</div>
|
21
|
+
</div>
|
22
|
+
|
23
|
+
<div class="section hard-top">
|
24
|
+
<div class="corset tight">
|
25
|
+
|
26
|
+
<% label_col = "col-sm-9" %>
|
27
|
+
<% switch_col = "col-sm-3 right_text" %>
|
28
|
+
|
29
|
+
|
30
|
+
<div class="form-line">
|
31
|
+
<div class="line-field">
|
32
|
+
<div class="row no-press">
|
33
|
+
<div class="<%= label_col %>">
|
34
|
+
<label for="foobar" class="switch_label">Do you like Foobar</label>
|
35
|
+
</div>
|
36
|
+
<div class="<%= switch_col %>">
|
37
|
+
<div class="check_switch active">
|
38
|
+
<input type="checkbox" name="foobar" id="foobar" value="like" checked>
|
39
|
+
<div class="switch_toggle"></div>
|
40
|
+
</div>
|
41
|
+
</div>
|
42
|
+
</div>
|
43
|
+
</div>
|
44
|
+
<div class="line-description">
|
45
|
+
Decide if you like FOOBAR or not so much .. its all your descission
|
46
|
+
</div>
|
47
|
+
</div>
|
48
|
+
|
49
|
+
<hr class="half-press"/>
|
50
|
+
|
51
|
+
<div class="form-line">
|
52
|
+
<div class="line-field">
|
53
|
+
<div class="row no-press">
|
54
|
+
<div class="<%= label_col %>">
|
55
|
+
<label for="foo" class="switch_label">Do you like Foo</label>
|
56
|
+
</div>
|
57
|
+
<div class="<%= switch_col %>">
|
58
|
+
<div class="check_switch inactive">
|
59
|
+
<input type="checkbox" name="foo" id="foo" value="like">
|
60
|
+
<div class="switch_toggle"></div>
|
61
|
+
</div>
|
62
|
+
</div>
|
63
|
+
</div>
|
64
|
+
</div>
|
65
|
+
</div>
|
66
|
+
|
67
|
+
<hr class="half-press"/>
|
68
|
+
|
69
|
+
<div class="form-line">
|
70
|
+
<div class="line-field">
|
71
|
+
<div class="row no-press">
|
72
|
+
<div class="<%= label_col %>">
|
73
|
+
<label for="bar" class="switch_label">Do you like Bar</label>
|
74
|
+
</div>
|
75
|
+
<div class="<%= switch_col %>">
|
76
|
+
<div class="check_switch inactive">
|
77
|
+
<input type="checkbox" name="bar" id="bar" value="like">
|
78
|
+
<div class="switch_toggle"></div>
|
79
|
+
</div>
|
80
|
+
</div>
|
81
|
+
</div>
|
82
|
+
</div>
|
83
|
+
</div>
|
84
|
+
|
85
|
+
|
86
|
+
</div>
|
87
|
+
</div>
|
88
|
+
|
89
|
+
<div class="section dark shine-top">
|
90
|
+
<div class="corset">
|
91
|
+
<pre><code>
|
92
|
+
<div class="check_switch active">
|
93
|
+
<input type="checkbox" name="foobar" id="foobar" value="like" checked>
|
94
|
+
<div class="switch_toggle"></div>
|
95
|
+
</div>
|
96
|
+
|
97
|
+
<div class="check_switch inactive">
|
98
|
+
<input type="checkbox" name="foo" id="foo" value="like">
|
99
|
+
<div class="switch_toggle"></div>
|
100
|
+
</div>
|
101
|
+
</code></pre>
|
102
|
+
</div>
|
103
|
+
</div>
|
104
|
+
|
105
|
+
<div class="section hard-top">
|
106
|
+
<div class="corset tight">
|
107
|
+
|
108
|
+
<% label_col = "col-sm-11" %>
|
109
|
+
<% switch_col = "col-sm-1 left_text" %>
|
110
|
+
|
111
|
+
<div class="row no-press">
|
112
|
+
<div class="<%= switch_col %>">
|
113
|
+
<div class="radio_switch active liking">
|
114
|
+
<input type="radio" name="like" id="like_foobar" value="foobar" checked>
|
115
|
+
<div class="switch_toggle"></div>
|
116
|
+
</div>
|
117
|
+
</div>
|
118
|
+
<div class="<%= label_col %>">
|
119
|
+
<label for="like_foobar" class="switch_label">Do you like FooBar?</label>
|
120
|
+
</div>
|
121
|
+
</div>
|
122
|
+
<hr class="half-press"/>
|
123
|
+
|
124
|
+
<div class="row no-press">
|
125
|
+
<div class="<%= switch_col %>">
|
126
|
+
<div class="radio_switch inactive liking">
|
127
|
+
<input type="radio" name="like" id="like_foo" value="foo">
|
128
|
+
<div class="switch_toggle"></div>
|
129
|
+
</div>
|
130
|
+
</div>
|
131
|
+
<div class="<%= label_col %>">
|
132
|
+
<label for="like_foo" class="switch_label">Do you like Foo?</label>
|
133
|
+
</div>
|
134
|
+
</div>
|
135
|
+
<hr class="half-press"/>
|
136
|
+
|
137
|
+
<div class="row no-press">
|
138
|
+
<div class="<%= switch_col %>">
|
139
|
+
<div class="radio_switch inactive liking">
|
140
|
+
<input type="radio" name="like" id="like_bar" value="bar">
|
141
|
+
<div class="switch_toggle"></div>
|
142
|
+
</div>
|
143
|
+
</div>
|
144
|
+
<div class="<%= label_col %>">
|
145
|
+
<label for="like_bar" class="switch_label">Do you like Bar?</label>
|
146
|
+
</div>
|
147
|
+
</div>
|
148
|
+
|
149
|
+
</div>
|
150
|
+
</div>
|
151
|
+
|
152
|
+
<div class="section dark shine-top">
|
153
|
+
<div class="corset">
|
154
|
+
<pre><code>
|
155
|
+
<div class="radio_switch active">
|
156
|
+
<input type="radio" name="like" id="like_foo" value="foo" checked>
|
157
|
+
<div class="switch_toggle"></div>
|
158
|
+
</div>
|
159
|
+
|
160
|
+
<div class="radio_switch inactive">
|
161
|
+
<input type="radio" name="like" id="like_bar" value="bar">
|
162
|
+
<div class="switch_toggle"></div>
|
163
|
+
</div>
|
164
|
+
</code></pre>
|
165
|
+
<strong>IF you have multiple Radio-Groups on one page</strong> use data-radio and class!
|
166
|
+
<pre><code>
|
167
|
+
<div class="radio_switch active radio-group1" data-radio="radio-group1">
|
168
|
+
<input type="radio" name="like" id="like_foo" value="foo" checked>
|
169
|
+
<div class="switch_toggle"></div>
|
170
|
+
</div>
|
171
|
+
|
172
|
+
<div class="radio_switch inactive radio-group1" data-radio="radio-group1">
|
173
|
+
<input type="radio" name="like" id="like_bar" value="bar">
|
174
|
+
<div class="switch_toggle"></div>
|
175
|
+
</div>
|
176
|
+
</code></pre>
|
177
|
+
</div>
|
178
|
+
</div>
|
@@ -106,15 +106,11 @@
|
|
106
106
|
<label>check_switch</label>
|
107
107
|
</div>
|
108
108
|
<div class="col-sm-3 press">
|
109
|
-
<div class="check_switch">
|
109
|
+
<div class="check_switch inactive">
|
110
|
+
<input type="checkbox" name="checker" value="on">
|
110
111
|
<div class="switch_toggle"></div>
|
111
112
|
</div>
|
112
113
|
</div>
|
113
|
-
<div class="col-sm-4 press">
|
114
|
-
<div class="check">
|
115
|
-
<a href="#" class="checka"><i class="icon-ok"></i></a>
|
116
|
-
</div>
|
117
|
-
</div>
|
118
114
|
</div>
|
119
115
|
<div class="row">
|
120
116
|
<div class="col-sm-5 press">
|
@@ -0,0 +1,105 @@
|
|
1
|
+
<div class="section head">
|
2
|
+
<div class="corset">
|
3
|
+
<h1>Wrapped Fields</h1>
|
4
|
+
</div>
|
5
|
+
</div>
|
6
|
+
|
7
|
+
<div class="section sctn-xs dark">
|
8
|
+
<div class="corset">
|
9
|
+
<h4>dependencies:</h4>
|
10
|
+
<table class="table table-no-head table-left table-condensed half-press">
|
11
|
+
<tr>
|
12
|
+
<td>CSS: </td>
|
13
|
+
<td class="col-12">
|
14
|
+
<code>@import "magic/content/wrapped_fields";</code>
|
15
|
+
</td>
|
16
|
+
</tr>
|
17
|
+
<tr>
|
18
|
+
<td>JS: </td>
|
19
|
+
<td class="col-12">
|
20
|
+
<code>//= magic/wrapped_fields</code>
|
21
|
+
</td>
|
22
|
+
</tr>
|
23
|
+
</table>
|
24
|
+
</div>
|
25
|
+
</div>
|
26
|
+
|
27
|
+
<div class="section hard-top">
|
28
|
+
<div class="corset tight">
|
29
|
+
|
30
|
+
<label for="sample-email" class="wrapping">
|
31
|
+
<span class="input-label">Email</span>
|
32
|
+
<div class="input-wrapper email-wrapper">
|
33
|
+
<input type="text" name="onefield" placeholder="Email" />
|
34
|
+
</div>
|
35
|
+
</label>
|
36
|
+
<label for="bla" class="wrapping">
|
37
|
+
<span class="input-label">Password</span>
|
38
|
+
<div class="input-wrapper password-wrapper">
|
39
|
+
<input type="text" name="bla" id="bla" placeholder="Password" />
|
40
|
+
</div>
|
41
|
+
</label>
|
42
|
+
|
43
|
+
<br/>
|
44
|
+
|
45
|
+
<div class="well sm">
|
46
|
+
Not a password-field to stop browsers from autofill
|
47
|
+
</div>
|
48
|
+
|
49
|
+
</div>
|
50
|
+
</div>
|
51
|
+
|
52
|
+
<div class="section dark shine-top">
|
53
|
+
<div class="corset">
|
54
|
+
<pre><code>
|
55
|
+
<label for="email" class="wrapping">
|
56
|
+
<span class="input-label">Email</span>
|
57
|
+
<div class="input-wrapper email-wrapper">
|
58
|
+
<input type="email" name="email" id="email" placeholder="Email" />
|
59
|
+
</div>
|
60
|
+
</label>
|
61
|
+
|
62
|
+
<label for="password" class="wrapping">
|
63
|
+
<span class="input-label">Password</span>
|
64
|
+
<div class="input-wrapper password-wrapper">
|
65
|
+
<input type="password" name="password" id="password" placeholder="Password" />
|
66
|
+
</div>
|
67
|
+
</label>
|
68
|
+
</code></pre>
|
69
|
+
</div>
|
70
|
+
</div>
|
71
|
+
|
72
|
+
<div class="section hard-top">
|
73
|
+
<div class="corset tight">
|
74
|
+
|
75
|
+
<label for="number" class="wrapping">
|
76
|
+
<span class="input-label">Card-Number</span>
|
77
|
+
<span class="Card-Type"></span>
|
78
|
+
<div class="input-wrapper number-wrapper">
|
79
|
+
<input type="number" name="number" id="number" placeholder="Card-Number" />
|
80
|
+
</div>
|
81
|
+
</label>
|
82
|
+
|
83
|
+
<div class="row">
|
84
|
+
<div class="col-sm-6 left_text">
|
85
|
+
<label for="expiration" class="wrapping">
|
86
|
+
<span class="input-label">Expiration</span>
|
87
|
+
<div class="input-wrapper date-wrapper">
|
88
|
+
<input type="text" name="expiration" placeholder="Expiration" />
|
89
|
+
</div>
|
90
|
+
</label>
|
91
|
+
</div>
|
92
|
+
<div class="col-sm-6">
|
93
|
+
<label for="cvv" class="wrapping">
|
94
|
+
<span class="input-label">CVV</span>
|
95
|
+
<div class="input-wrapper cvv-wrapper">
|
96
|
+
<input type="text" name="cvv" id="cvv" placeholder="CVV" />
|
97
|
+
</div>
|
98
|
+
</label>
|
99
|
+
</div>
|
100
|
+
</div>
|
101
|
+
|
102
|
+
</div>
|
103
|
+
</div>
|
104
|
+
|
105
|
+
|
@@ -1,4 +1,6 @@
|
|
1
1
|
@import "magic-stylez";
|
2
|
+
@import "magic/content/wrapped_fields";
|
3
|
+
@import "magic/content/check_switch";
|
2
4
|
|
3
5
|
html, body {
|
4
6
|
width: 100%; height: 100%;
|
@@ -112,60 +114,60 @@ body.aside-on {
|
|
112
114
|
|
113
115
|
|
114
116
|
|
115
|
-
.check_switch {
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
}
|
136
|
-
|
137
|
-
|
138
|
-
.check {
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
}
|
168
|
-
|
117
|
+
// .check_switch {
|
118
|
+
// display: block; position: relative; margin: 0; padding: 0;
|
119
|
+
// margin: 7px 0 0 7px;
|
120
|
+
// @include border-radius(100px);
|
121
|
+
// width: 30px;
|
122
|
+
// height: 15px;
|
123
|
+
// border: solid 1px #ccc;
|
124
|
+
// background: #c5c5c5;
|
125
|
+
// @include box-shadow( inset 0 1px 1px 0 rgba(0,0,0,.50) );
|
126
|
+
// .switch_toggle {
|
127
|
+
// display: block; position: relative; margin: 0; padding: 0;
|
128
|
+
// width: 17px; height: 17px;
|
129
|
+
// position: absolute;
|
130
|
+
// left: -2px; top: -2px;
|
131
|
+
// background: #fff;
|
132
|
+
// @include border-radius(100px);
|
133
|
+
// border: solid 1px #ccc;
|
134
|
+
// @include box-shadow( 0 1px 1px 0 rgba(0,0,0,.30) );
|
135
|
+
// @include linear-gradient(#ffffff, #e5e5e5);
|
136
|
+
// }
|
137
|
+
// }
|
138
|
+
//
|
139
|
+
//
|
140
|
+
// .check {
|
141
|
+
// display: block; position: relative;
|
142
|
+
// width: 30px;
|
143
|
+
// height: 28px;
|
144
|
+
// margin: -2px 2px;
|
145
|
+
// border: none;
|
146
|
+
// float: left;
|
147
|
+
// text-align: center;
|
148
|
+
// // clickable and disabled checkbox
|
149
|
+
// .checka {
|
150
|
+
// display: block;
|
151
|
+
// position: absolute;
|
152
|
+
// top: 9px; right: 10px; bottom: 9px; left: 9px;
|
153
|
+
// border: solid 1px #ccc;
|
154
|
+
// color: #ccc;
|
155
|
+
// i {
|
156
|
+
// display: none;
|
157
|
+
// margin: -3px -4px -3px 0;
|
158
|
+
// font-size: 15px;
|
159
|
+
// text-decoration: none;
|
160
|
+
// line-height: 22px;
|
161
|
+
// }
|
162
|
+
// &.checked i { display: block; }
|
163
|
+
// }
|
164
|
+
// // clickable checkbox
|
165
|
+
// a.checka {
|
166
|
+
// color: #aaa;
|
167
|
+
// border: solid 1px #999;
|
168
|
+
// }
|
169
|
+
// }
|
170
|
+
//
|
169
171
|
|
170
172
|
|
171
173
|
|
@@ -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-14c97798eff4cce70d07a3603ea854eb.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="e/dYgvlKn55ZphI1hLRIxMwda5K9yt42tg/seWDlF0s=" 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-14c97798eff4cce70d07a3603ea854eb.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="e/dYgvlKn55ZphI1hLRIxMwda5K9yt42tg/seWDlF0s=" 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-14c97798eff4cce70d07a3603ea854eb.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="e/dYgvlKn55ZphI1hLRIxMwda5K9yt42tg/seWDlF0s=" 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-14c97798eff4cce70d07a3603ea854eb.css" media="all" rel="stylesheet" />
|
10
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/application-7e480321bc971b6721abff0c07088c54.js"></script>
|
11
11
|
<meta content="authenticity_token" name="csrf-param" />
|
12
|
-
<meta content="
|
12
|
+
<meta content="e/dYgvlKn55ZphI1hLRIxMwda5K9yt42tg/seWDlF0s=" 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" />
|
@@ -45,12 +45,14 @@
|
|
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
47
|
<li><a class="app_lnk lst_lnk" data-target="content/buttons_nice" href="#">Buttons Nice</a></li>
|
48
|
+
<li><a class="app_lnk lst_lnk" data-target="content/check_switch" href="#">Check Switch</a></li>
|
48
49
|
<li><a class="app_lnk lst_lnk" data-target="content/forms" href="#">Forms</a></li>
|
49
50
|
<li><a class="app_lnk lst_lnk" data-target="content/helper" href="#">Helper</a></li>
|
50
51
|
<li><a class="app_lnk lst_lnk" data-target="content/inputs" href="#">Inputs</a></li>
|
51
52
|
<li><a class="app_lnk lst_lnk" data-target="content/labels" href="#">Labels</a></li>
|
52
53
|
<li><a class="app_lnk lst_lnk" data-target="content/pictures" href="#">Pictures</a></li>
|
53
54
|
<li><a class="app_lnk lst_lnk" data-target="content/tables" href="#">Tables</a></li>
|
55
|
+
<li><a class="app_lnk lst_lnk" data-target="content/wrapped_fields" href="#">Wrapped Fields</a></li>
|
54
56
|
</ul>
|
55
57
|
</li>
|
56
58
|
<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-14c97798eff4cce70d07a3603ea854eb.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="e/dYgvlKn55ZphI1hLRIxMwda5K9yt42tg/seWDlF0s=" 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-14c97798eff4cce70d07a3603ea854eb.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="e/dYgvlKn55ZphI1hLRIxMwda5K9yt42tg/seWDlF0s=" 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 = {};
|
@@ -0,0 +1,25 @@
|
|
1
|
+
$ ->
|
2
|
+
|
3
|
+
$('body').on 'click', '.check_switch', (event) ->
|
4
|
+
if $(@).hasClass("active")
|
5
|
+
$(@).removeClass("active")
|
6
|
+
$(@).find("input").prop(checked: false)
|
7
|
+
else
|
8
|
+
$(@).addClass("active")
|
9
|
+
$(@).find("input").prop(checked: true)
|
10
|
+
# $(@).closest("form").find(".btn.hidden").hide().removeClass("hidden").show()
|
11
|
+
# $(@).closest("form").find(".btn.disabled").hide().removeClass("disabled").show()
|
12
|
+
|
13
|
+
|
14
|
+
$('body').on 'click', '.radio_switch', (event) ->
|
15
|
+
if $(@).attr("data-radio")
|
16
|
+
radios = $(".radio_switch.#{ $(@).attr("data-radio") }")
|
17
|
+
else
|
18
|
+
radios = $(".radio_switch")
|
19
|
+
radios.each ->
|
20
|
+
$(@).removeClass("active")
|
21
|
+
$(@).find("input").prop(checked: false)
|
22
|
+
$(@).find("input").trigger("change")
|
23
|
+
$(@).addClass("active")
|
24
|
+
$(@).find("input").prop(checked: true)
|
25
|
+
$(@).find("input").trigger("change")
|
@@ -0,0 +1,31 @@
|
|
1
|
+
## nice labeled inputs
|
2
|
+
|
3
|
+
labelHander = (input) ->
|
4
|
+
label = input.closest('label')
|
5
|
+
window.setTimeout (->
|
6
|
+
hasValue = if input.val().length > 0 then true else false
|
7
|
+
if hasValue
|
8
|
+
label.addClass "has-value"
|
9
|
+
else
|
10
|
+
label.removeClass "has-value"
|
11
|
+
return
|
12
|
+
), 10
|
13
|
+
return
|
14
|
+
|
15
|
+
$ ->
|
16
|
+
|
17
|
+
if $("label.wrapping").length > 0
|
18
|
+
$("label.wrapping input, label.wrapping select").each ->
|
19
|
+
labelHander( $(@) )
|
20
|
+
$("body").on "focus", "label.wrapping input, label.wrapping select", ->
|
21
|
+
inpt = $(@)
|
22
|
+
inpt.closest('label').addClass "has-focus"
|
23
|
+
labelHander inpt
|
24
|
+
$("body").on "keydown", "label.wrapping input", ->
|
25
|
+
labelHander( $(@) )
|
26
|
+
$("body").on "change", "label.wrapping select", ->
|
27
|
+
labelHander( $(@) )
|
28
|
+
$("body").on "blur", "label.wrapping input, label.wrapping select", ->
|
29
|
+
inpt = $(@)
|
30
|
+
inpt.closest('label').removeClass "has-focus"
|
31
|
+
labelHander inpt
|
@@ -0,0 +1,78 @@
|
|
1
|
+
.check_switch {
|
2
|
+
display: block; display: inline-block; position: relative;
|
3
|
+
margin: 2px 3px; padding: 0;
|
4
|
+
border-radius: 100px;
|
5
|
+
width: 34px;
|
6
|
+
height: 18px;
|
7
|
+
border: solid 1px #ccc;
|
8
|
+
background: #c5c5c5;
|
9
|
+
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.5);
|
10
|
+
cursor: pointer;
|
11
|
+
.switch_toggle {
|
12
|
+
display: block; position: relative;
|
13
|
+
margin: 0; padding: 0;
|
14
|
+
width: 20px; height: 20px;
|
15
|
+
position: absolute;
|
16
|
+
left: -2px;
|
17
|
+
top: -2px;
|
18
|
+
background: #fff;
|
19
|
+
border-radius: 100px;
|
20
|
+
border: solid 1px #ccc;
|
21
|
+
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
|
22
|
+
background-color: #ffffff;
|
23
|
+
background-image: -webkit-linear-gradient(#ffffff, #e5e5e5);
|
24
|
+
background-image: linear-gradient(#ffffff, #e5e5e5);
|
25
|
+
}
|
26
|
+
|
27
|
+
input { display: none; }
|
28
|
+
|
29
|
+
&.on, &.active {
|
30
|
+
|
31
|
+
background: $brand-success;
|
32
|
+
.switch_toggle{
|
33
|
+
left: auto;
|
34
|
+
right: -2px;
|
35
|
+
}
|
36
|
+
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
.radio_switch {
|
41
|
+
display: block; display: inline-block; position: relative;
|
42
|
+
margin: 4px 3px; padding: 0;
|
43
|
+
border-radius: 100px;
|
44
|
+
width: 16px; height: 16px;
|
45
|
+
border: solid 1px #ccc;
|
46
|
+
background: #c5c5c5;
|
47
|
+
box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.5);
|
48
|
+
cursor: pointer;
|
49
|
+
.switch_toggle {
|
50
|
+
display: block; position: relative;
|
51
|
+
margin: 0; padding: 0;
|
52
|
+
width: 4px; height: 4px;
|
53
|
+
position: absolute;
|
54
|
+
left: 5px;
|
55
|
+
top: 5px;
|
56
|
+
background: transparent;
|
57
|
+
border-radius: 100px;
|
58
|
+
border: none;
|
59
|
+
}
|
60
|
+
|
61
|
+
input { display: none; }
|
62
|
+
|
63
|
+
&.on, &.active {
|
64
|
+
|
65
|
+
background: $brand-success;
|
66
|
+
.switch_toggle{
|
67
|
+
background: #fff;
|
68
|
+
opacity: .3;
|
69
|
+
}
|
70
|
+
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
label.switch_label {
|
75
|
+
display: block; position: relative;
|
76
|
+
margin: 0; padding: 0;
|
77
|
+
line-height: 28px;
|
78
|
+
}
|
@@ -0,0 +1,149 @@
|
|
1
|
+
// Braintree Form styles
|
2
|
+
label.wrapping {
|
3
|
+
|
4
|
+
@include transition( background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95), color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) );
|
5
|
+
// border-top: solid 1px #DEE2E5;
|
6
|
+
border-bottom: solid 1px #DEE2E5;
|
7
|
+
color: #6E787F;
|
8
|
+
cursor: pointer;
|
9
|
+
display: block;
|
10
|
+
font-size: 16px;
|
11
|
+
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
12
|
+
|
13
|
+
// padding: 12px 14px;
|
14
|
+
padding: 8px 12px;
|
15
|
+
|
16
|
+
position: relative;
|
17
|
+
// margin-top: -11px;
|
18
|
+
margin: 0;
|
19
|
+
width: 100%;
|
20
|
+
text-align: left;
|
21
|
+
z-index: 1;
|
22
|
+
.input-label {
|
23
|
+
@include transition( opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) );
|
24
|
+
color: #999;
|
25
|
+
display: block;
|
26
|
+
// font-size: 12px;
|
27
|
+
// margin-bottom: 4px;
|
28
|
+
font-size: 14px;
|
29
|
+
margin-bottom: 6px;
|
30
|
+
font-weight: 300;
|
31
|
+
line-height: 1;
|
32
|
+
|
33
|
+
opacity: 0;
|
34
|
+
}
|
35
|
+
.Card-Type {
|
36
|
+
color: #6E787F;
|
37
|
+
display: block;
|
38
|
+
position: absolute;
|
39
|
+
font-weight: bold;
|
40
|
+
top: 12px;
|
41
|
+
right: 14px;
|
42
|
+
font-size: 12px;
|
43
|
+
line-height: 1;
|
44
|
+
}
|
45
|
+
&.has-focus {
|
46
|
+
background-color: #fff;
|
47
|
+
cursor: text;
|
48
|
+
z-index: 2;
|
49
|
+
.input-wrapper:after { color: #393536; }
|
50
|
+
.input-label { color: #000; }
|
51
|
+
}
|
52
|
+
&.has-value {
|
53
|
+
.input-label { opacity: 1; }
|
54
|
+
}
|
55
|
+
|
56
|
+
|
57
|
+
.label {
|
58
|
+
display: block;
|
59
|
+
font-size: 16px;
|
60
|
+
color: #6E787F;
|
61
|
+
padding: 8px 12px;
|
62
|
+
text-align: left;
|
63
|
+
}
|
64
|
+
|
65
|
+
input, select {
|
66
|
+
background-color: transparent !important;
|
67
|
+
display: block;
|
68
|
+
border: none;
|
69
|
+
color: #000;
|
70
|
+
cursor: pointer;
|
71
|
+
font-size: 16px;
|
72
|
+
outline: none;
|
73
|
+
line-height: 1;
|
74
|
+
font-weight: 300;
|
75
|
+
width: 100%;
|
76
|
+
height: 20px;
|
77
|
+
|
78
|
+
@include placeholder {
|
79
|
+
color: #aaa;
|
80
|
+
line-height: 1;
|
81
|
+
}
|
82
|
+
|
83
|
+
&:focus {
|
84
|
+
@include placeholder { color: #999; }
|
85
|
+
}
|
86
|
+
|
87
|
+
&:-webkit-autofill { background: transparent !important; }
|
88
|
+
|
89
|
+
}
|
90
|
+
|
91
|
+
.input-wrapper {
|
92
|
+
position: relative;
|
93
|
+
}
|
94
|
+
|
95
|
+
.input-wrapper iframe {
|
96
|
+
height: 18px !important;
|
97
|
+
}
|
98
|
+
|
99
|
+
.amount-wrapper, .number-wrapper, .password-wrapper, .email-wrapper, .cvv-wrapper, .date-wrapper {
|
100
|
+
input, iframe, select {
|
101
|
+
@include transition( transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.2s ease );
|
102
|
+
@include transform( translateX(-23px) );
|
103
|
+
padding: 0 23px;
|
104
|
+
}
|
105
|
+
&:after {
|
106
|
+
@include transition( opacity 0.2s ease );
|
107
|
+
@include transform( translateY(-50%) );
|
108
|
+
color: #393536;
|
109
|
+
display: inline-block;
|
110
|
+
line-height: 1;
|
111
|
+
left: 0px;
|
112
|
+
opacity: 0;
|
113
|
+
position: absolute;
|
114
|
+
// top: 50%;
|
115
|
+
top: 11px;
|
116
|
+
font-size: 120%;
|
117
|
+
|
118
|
+
font-family: orderlifticonsregular;
|
119
|
+
font-style: normal;
|
120
|
+
|
121
|
+
// make icons thinner in webkit (white icons on dark background)
|
122
|
+
text-shadow: 0 0 0 rgba(0,0,0,.01);
|
123
|
+
-webkit-font-smoothing: antialiased;
|
124
|
+
text-rendering: optimizelegibility;
|
125
|
+
}
|
126
|
+
}
|
127
|
+
.amount-wrapper:after { content: "\20AC"; }
|
128
|
+
.number-wrapper:after { content: "\f09e"; }
|
129
|
+
.password-wrapper:after { content: "\f027"; }
|
130
|
+
.cvv-wrapper:after { content: "\f027"; }
|
131
|
+
.email-wrapper:after { content: "\f009"; }
|
132
|
+
.date-wrapper:after { content: "\f10b"; }
|
133
|
+
|
134
|
+
|
135
|
+
// active state
|
136
|
+
&.has-focus, &.has-value {
|
137
|
+
.amount-wrapper, .number-wrapper, .password-wrapper, .email-wrapper, .cvv-wrapper, .date-wrapper {
|
138
|
+
input, iframe, select {
|
139
|
+
@include transform( translateX(0) );
|
140
|
+
}
|
141
|
+
&:after { opacity: 1; }
|
142
|
+
}
|
143
|
+
}
|
144
|
+
|
145
|
+
|
146
|
+
|
147
|
+
}
|
148
|
+
|
149
|
+
label.wrapping + label.wrapping { border-top: none; }
|
@@ -48,6 +48,7 @@
|
|
48
48
|
@import "magic/content/box";
|
49
49
|
@import "magic/content/buttons";
|
50
50
|
@import "magic/content/buttons_nice";
|
51
|
+
@import "magic/content/check_switch";
|
51
52
|
@import "magic/content/forms";
|
52
53
|
@import "magic/content/helper";
|
53
54
|
@import "magic/content/icons";
|
@@ -58,6 +59,7 @@
|
|
58
59
|
@import "magic/content/panel";
|
59
60
|
@import "magic/content/pix";
|
60
61
|
@import "magic/content/tables";
|
62
|
+
@import "magic/content/wrapped_fields";
|
61
63
|
|
62
64
|
|
63
65
|
// load helper
|
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.99
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Torsten Wetzel
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2017-04-12 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -242,12 +242,14 @@ files:
|
|
242
242
|
- test/dummy/app/assets/javascripts/views/content/box.jst.eco
|
243
243
|
- test/dummy/app/assets/javascripts/views/content/buttons.jst.eco
|
244
244
|
- test/dummy/app/assets/javascripts/views/content/buttons_nice.jst.eco
|
245
|
+
- test/dummy/app/assets/javascripts/views/content/check_switch.jst.eco
|
245
246
|
- test/dummy/app/assets/javascripts/views/content/forms.jst.eco
|
246
247
|
- test/dummy/app/assets/javascripts/views/content/helper.jst.eco
|
247
248
|
- test/dummy/app/assets/javascripts/views/content/inputs.jst.eco
|
248
249
|
- test/dummy/app/assets/javascripts/views/content/labels.jst.eco
|
249
250
|
- test/dummy/app/assets/javascripts/views/content/pictures.jst.eco
|
250
251
|
- test/dummy/app/assets/javascripts/views/content/tables.jst.eco
|
252
|
+
- test/dummy/app/assets/javascripts/views/content/wrapped_fields.jst.eco
|
251
253
|
- test/dummy/app/assets/javascripts/views/effects/flip.jst.eco
|
252
254
|
- test/dummy/app/assets/javascripts/views/effects/noise.jst.eco
|
253
255
|
- test/dummy/app/assets/javascripts/views/effects/reflections.jst.eco
|
@@ -393,6 +395,7 @@ files:
|
|
393
395
|
- vendor/assets/images/magic/pix/owerk.jpg
|
394
396
|
- vendor/assets/javascripts/magic-min.js.coffee
|
395
397
|
- vendor/assets/javascripts/magic-stylez.js.coffee
|
398
|
+
- vendor/assets/javascripts/magic/check_switch.js.coffee
|
396
399
|
- vendor/assets/javascripts/magic/circle_diagram.js.coffee
|
397
400
|
- vendor/assets/javascripts/magic/collapse.js.coffee
|
398
401
|
- vendor/assets/javascripts/magic/ext/affix.js
|
@@ -400,6 +403,7 @@ files:
|
|
400
403
|
- vendor/assets/javascripts/magic/ext/rails-ujs.js
|
401
404
|
- vendor/assets/javascripts/magic/helper.js.coffee
|
402
405
|
- vendor/assets/javascripts/magic/render_eco.js.coffee
|
406
|
+
- vendor/assets/javascripts/magic/wrapped_fields.js.coffee
|
403
407
|
- vendor/assets/stylesheets/corporate/_colors.scss
|
404
408
|
- vendor/assets/stylesheets/corporate/_fonts.scss
|
405
409
|
- vendor/assets/stylesheets/corporate/_variables.scss
|
@@ -410,6 +414,7 @@ files:
|
|
410
414
|
- vendor/assets/stylesheets/magic/content/_box.scss
|
411
415
|
- vendor/assets/stylesheets/magic/content/_buttons.scss
|
412
416
|
- vendor/assets/stylesheets/magic/content/_buttons_nice.scss
|
417
|
+
- vendor/assets/stylesheets/magic/content/_check_switch.scss
|
413
418
|
- vendor/assets/stylesheets/magic/content/_forms.scss
|
414
419
|
- vendor/assets/stylesheets/magic/content/_helper.scss
|
415
420
|
- vendor/assets/stylesheets/magic/content/_icons.scss
|
@@ -420,6 +425,7 @@ files:
|
|
420
425
|
- vendor/assets/stylesheets/magic/content/_panel.scss
|
421
426
|
- vendor/assets/stylesheets/magic/content/_pix.scss
|
422
427
|
- vendor/assets/stylesheets/magic/content/_tables.scss
|
428
|
+
- vendor/assets/stylesheets/magic/content/_wrapped_fields.scss
|
423
429
|
- vendor/assets/stylesheets/magic/effects/_flip.scss
|
424
430
|
- vendor/assets/stylesheets/magic/effects/_noise.scss
|
425
431
|
- vendor/assets/stylesheets/magic/effects/_reflections.scss
|
@@ -511,12 +517,14 @@ test_files:
|
|
511
517
|
- test/dummy/app/assets/javascripts/views/content/box.jst.eco
|
512
518
|
- test/dummy/app/assets/javascripts/views/content/buttons.jst.eco
|
513
519
|
- test/dummy/app/assets/javascripts/views/content/buttons_nice.jst.eco
|
520
|
+
- test/dummy/app/assets/javascripts/views/content/check_switch.jst.eco
|
514
521
|
- test/dummy/app/assets/javascripts/views/content/forms.jst.eco
|
515
522
|
- test/dummy/app/assets/javascripts/views/content/helper.jst.eco
|
516
523
|
- test/dummy/app/assets/javascripts/views/content/inputs.jst.eco
|
517
524
|
- test/dummy/app/assets/javascripts/views/content/labels.jst.eco
|
518
525
|
- test/dummy/app/assets/javascripts/views/content/pictures.jst.eco
|
519
526
|
- test/dummy/app/assets/javascripts/views/content/tables.jst.eco
|
527
|
+
- test/dummy/app/assets/javascripts/views/content/wrapped_fields.jst.eco
|
520
528
|
- test/dummy/app/assets/javascripts/views/effects/flip.jst.eco
|
521
529
|
- test/dummy/app/assets/javascripts/views/effects/noise.jst.eco
|
522
530
|
- test/dummy/app/assets/javascripts/views/effects/reflections.jst.eco
|