magic_stylez 0.0.0.98 → 0.0.0.99
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 +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
|