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 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