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 CHANGED
@@ -1,15 +1,15 @@
1
1
  ---
2
2
  !binary "U0hBMQ==":
3
3
  metadata.gz: !binary |-
4
- NzhjZDU1NjMyNDI0MjJjNDg3M2VjZTczZjdlYmZiNTEwMWUyMzgzZA==
4
+ MmI5NjlmMWU2MzAxYTYwOWU1YTQwZDUxNTM0ZDQ2NTRlNjI5ODkxZQ==
5
5
  data.tar.gz: !binary |-
6
- YTUyOTFjYmQzOTNlYzgzNjA5ODdmNjg2YjE5M2VmN2Q4NDVhOGUxNQ==
6
+ YjY5NTBiNGUxNjU1OWE3ZmM0MDU2MjEzYTI2NzBmNGM1MDQyMzc2Mg==
7
7
  SHA512:
8
8
  metadata.gz: !binary |-
9
- MjBkNDY1ZDJjZmFmYmM0OTBlZTJlYTJjOTIxZGI5NTA5NDgxYTlhMTg5Nzdl
10
- NzkwOTZjMmFhZWNjOTBlM2M5YzI5ZjcyZmYzMDkxMzg1ODA5ZjlkNTFlNDg5
11
- NDIzZGJkOTg0ZWRlZDk5MDcyYjM2N2JmZmQwZmRiNWU3MjEwOTA=
9
+ ZjYxYjgzYzMzMjRhZGMwZDU3ZWRmMDIzZDM5NWE5YWM1OWM1ZDhjNGQwZmM0
10
+ MzJmMGUzODMwMmY4NWMzZDIzZmZhNWNiM2I5OWUxMWMzNTk4YzNlM2IxOWMy
11
+ MTc2ZGM2MzJmYzFhNTNlYjRkNDNlYmNmZjczYTYwMjE1NWYzYWM=
12
12
  data.tar.gz: !binary |-
13
- MDIzMWFmZmIzNTk4ODlmZDM3MTBmOTFlNmNkNWNlOTUyZWVhYmNiMjZlMjI0
14
- OGRiOGQ5NzY4ZTcyMzk5NjM5MzYwMmI1YmE3MGEyMGJiYzRiZTRhZThlYzk1
15
- ZmE5YTcxMDUyMzQzY2RiMzE0NjJjMTQwZGRlMjQzOGYxZmM0Mzc=
13
+ MjFmNTJhNzRlODY4OGI0ZjAyOWY5ZTEyMDFkOGNkZWRjYTJmMzEyMWUxMmEx
14
+ MGE2NjVlMmJlNjdiZTM4YTdjZTk2ZGEwMzk4NGY0ZDk5NDJhZTZjM2VkOThh
15
+ NTViYmFiNGNiNmZjODFjNzQwNzYxMzhjNDU4NTBkY2I4MTQxODg=
@@ -1,3 +1,3 @@
1
1
  module MagicStylez
2
- VERSION = "0.0.0.98"
2
+ VERSION = "0.0.0.99"
3
3
  end
data/test/dummy/README.md CHANGED
@@ -17,3 +17,9 @@ copy page-html ... because there is no page-caching in rails4 :(
17
17
  - /fixed-header
18
18
  - /responsive-slidebar
19
19
 
20
+
21
+ ## new
22
+
23
+ use to get cached pages:
24
+
25
+ /cache_pages
@@ -15,6 +15,8 @@
15
15
  //= require magic-stylez
16
16
  //= require assets
17
17
  //= require magic/render_eco
18
+ //= require magic/wrapped_fields
19
+ //= require magic/check_switch
18
20
  //= require app
19
21
  //- require_self
20
22
 
@@ -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
+ &lt;div class=&quot;check_switch active&quot;&gt;
93
+ &lt;input type=&quot;checkbox&quot; name=&quot;foobar&quot; id=&quot;foobar&quot; value=&quot;like&quot; checked&gt;
94
+ &lt;div class=&quot;switch_toggle&quot;&gt;&lt;/div&gt;
95
+ &lt;/div&gt;
96
+
97
+ &lt;div class=&quot;check_switch inactive&quot;&gt;
98
+ &lt;input type=&quot;checkbox&quot; name=&quot;foo&quot; id=&quot;foo&quot; value=&quot;like&quot;&gt;
99
+ &lt;div class=&quot;switch_toggle&quot;&gt;&lt;/div&gt;
100
+ &lt;/div&gt;
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
+ &lt;div class=&quot;radio_switch active&quot;&gt;
156
+ &lt;input type=&quot;radio&quot; name=&quot;like&quot; id=&quot;like_foo&quot; value=&quot;foo&quot; checked&gt;
157
+ &lt;div class=&quot;switch_toggle&quot;&gt;&lt;/div&gt;
158
+ &lt;/div&gt;
159
+
160
+ &lt;div class=&quot;radio_switch inactive&quot;&gt;
161
+ &lt;input type=&quot;radio&quot; name=&quot;like&quot; id=&quot;like_bar&quot; value=&quot;bar&quot;&gt;
162
+ &lt;div class=&quot;switch_toggle&quot;&gt;&lt;/div&gt;
163
+ &lt;/div&gt;
164
+ </code></pre>
165
+ <strong>IF you have multiple Radio-Groups on one page</strong> use data-radio and class!
166
+ <pre><code>
167
+ &lt;div class=&quot;radio_switch active radio-group1&quot; data-radio=&quot;radio-group1&quot;&gt;
168
+ &lt;input type=&quot;radio&quot; name=&quot;like&quot; id=&quot;like_foo&quot; value=&quot;foo&quot; checked&gt;
169
+ &lt;div class=&quot;switch_toggle&quot;&gt;&lt;/div&gt;
170
+ &lt;/div&gt;
171
+
172
+ &lt;div class=&quot;radio_switch inactive radio-group1&quot; data-radio=&quot;radio-group1&quot;&gt;
173
+ &lt;input type=&quot;radio&quot; name=&quot;like&quot; id=&quot;like_bar&quot; value=&quot;bar&quot;&gt;
174
+ &lt;div class=&quot;switch_toggle&quot;&gt;&lt;/div&gt;
175
+ &lt;/div&gt;
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
+ &lt;label for=&quot;email&quot; class=&quot;wrapping&quot;&gt;
56
+ &lt;span class=&quot;input-label&quot;&gt;Email&lt;/span&gt;
57
+ &lt;div class=&quot;input-wrapper email-wrapper&quot;&gt;
58
+ &lt;input type=&quot;email&quot; name=&quot;email&quot; id=&quot;email&quot; placeholder=&quot;Email&quot; /&gt;
59
+ &lt;/div&gt;
60
+ &lt;/label&gt;
61
+
62
+ &lt;label for=&quot;password&quot; class=&quot;wrapping&quot;&gt;
63
+ &lt;span class=&quot;input-label&quot;&gt;Password&lt;/span&gt;
64
+ &lt;div class=&quot;input-wrapper password-wrapper&quot;&gt;
65
+ &lt;input type=&quot;password&quot; name=&quot;password&quot; id=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
66
+ &lt;/div&gt;
67
+ &lt;/label&gt;
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
- display: block; position: relative; margin: 0; padding: 0;
117
- margin: 7px 0 0 7px;
118
- @include border-radius(100px);
119
- width: 30px;
120
- height: 15px;
121
- border: solid 1px #ccc;
122
- background: #c5c5c5;
123
- @include box-shadow( inset 0 1px 1px 0 rgba(0,0,0,.50) );
124
- .switch_toggle {
125
- display: block; position: relative; margin: 0; padding: 0;
126
- width: 17px; height: 17px;
127
- position: absolute;
128
- left: -2px; top: -2px;
129
- background: #fff;
130
- @include border-radius(100px);
131
- border: solid 1px #ccc;
132
- @include box-shadow( 0 1px 1px 0 rgba(0,0,0,.30) );
133
- @include linear-gradient(#ffffff, #e5e5e5);
134
- }
135
- }
136
-
137
-
138
- .check {
139
- display: block; position: relative;
140
- width: 30px;
141
- height: 28px;
142
- margin: -2px 2px;
143
- border: none;
144
- float: left;
145
- text-align: center;
146
- // clickable and disabled checkbox
147
- .checka {
148
- display: block;
149
- position: absolute;
150
- top: 9px; right: 10px; bottom: 9px; left: 9px;
151
- border: solid 1px #ccc;
152
- color: #ccc;
153
- i {
154
- display: none;
155
- margin: -3px -4px -3px 0;
156
- font-size: 15px;
157
- text-decoration: none;
158
- line-height: 22px;
159
- }
160
- &.checked i { display: block; }
161
- }
162
- // clickable checkbox
163
- a.checka {
164
- color: #aaa;
165
- border: solid 1px #999;
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-66fb1f2e4911509637ca00d3205577df.css" media="all" rel="stylesheet" />
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="IvGfPtPUiuJNaHBDLqqMiu0qOk4FWegdZWuIhvZQHH0=" name="csrf-token" />
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-66fb1f2e4911509637ca00d3205577df.css" media="all" rel="stylesheet" />
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="IvGfPtPUiuJNaHBDLqqMiu0qOk4FWegdZWuIhvZQHH0=" name="csrf-token" />
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-66fb1f2e4911509637ca00d3205577df.css" media="all" rel="stylesheet" />
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="IvGfPtPUiuJNaHBDLqqMiu0qOk4FWegdZWuIhvZQHH0=" name="csrf-token" />
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-66fb1f2e4911509637ca00d3205577df.css" media="all" rel="stylesheet" />
10
- <script src="//berlinmagic.github.io/magic_stylez/assets/application-cfc5eed747f12eef72cae6534cc5dedb.js"></script>
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="IvGfPtPUiuJNaHBDLqqMiu0qOk4FWegdZWuIhvZQHH0=" name="csrf-token" />
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-66fb1f2e4911509637ca00d3205577df.css" media="all" rel="stylesheet" />
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="IvGfPtPUiuJNaHBDLqqMiu0qOk4FWegdZWuIhvZQHH0=" name="csrf-token" />
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-66fb1f2e4911509637ca00d3205577df.css" media="all" rel="stylesheet" />
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="IvGfPtPUiuJNaHBDLqqMiu0qOk4FWegdZWuIhvZQHH0=" name="csrf-token" />
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
@@ -16,6 +16,8 @@
16
16
  #= require magic/circle_diagram
17
17
  #= require magic/helper
18
18
  #= require magic/collapse
19
+ #= require magic/check_switch
20
+ #= require magic/wrapped_fields
19
21
 
20
22
  icon = (icn) ->
21
23
  "<i class='icon icon-#{icn}'></i>"
@@ -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; }
@@ -2,6 +2,7 @@
2
2
  display: block; position: relative;
3
3
  margin: 0 1%;
4
4
  padding: 0;
5
+ overflow: hidden;
5
6
  .preview {
6
7
  display: block; position: relative;
7
8
  margin: 0 25%; min-height: 80px; z-index: 5; padding: 0;
@@ -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.98
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: 2016-04-21 00:00:00.000000000 Z
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