magic_stylez 0.0.0.77 → 0.0.0.78
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/magic_stylez/version.rb +1 -1
- data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +18 -0
- data/test/dummy/app/assets/javascripts/views/helper/divider.jst.eco +142 -5
- data/test/dummy/app/assets/stylesheets/corporate/_variables.scss +17 -0
- data/test/dummy/app/views/front/start.html.erb +18 -0
- data/test/dummy/public/html/aside-nav.html +2 -2
- data/test/dummy/public/html/fixed-header.html +2 -2
- data/test/dummy/public/html/fixed-subnav.html +2 -2
- data/test/dummy/public/html/index.html +21 -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/ext/affix.js +103 -0
- data/vendor/assets/javascripts/magic/ext/affix2.js +131 -0
- data/vendor/assets/stylesheets/corporate/_variables.scss +11 -0
- data/vendor/assets/stylesheets/magic/helper/_divider.scss +44 -28
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2a66ae584243e3c5862039217410b03b8968cfd5
|
|
4
|
+
data.tar.gz: 4bfea5785913ba2b6095725464543c52478b04d8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 009530089aaf1ed979780bf98221944ea17052072469936e48d4f82ccf5bd5071f5a3fe663f4b6a7fb7cbddf33bf19d08a89da13cd86abbc6409c5e81beb0416
|
|
7
|
+
data.tar.gz: 57a9421b5cecf90b813a71155710df26ac439c2709fc14a5dcf0eb89841db2c38b0d572ce3fd15964035d955d2b1b2f1afb82b660b59ef464e2d9ee0494ef92e
|
data/lib/magic_stylez/version.rb
CHANGED
|
@@ -79,6 +79,23 @@ CSS:
|
|
|
79
79
|
<pre><code>$ rails g magic_stylez:update</code></pre>
|
|
80
80
|
<br/>
|
|
81
81
|
<br/>
|
|
82
|
+
<h4>Changes when update to <small>0.0.0.78</small>:</h4>
|
|
83
|
+
<ul>
|
|
84
|
+
<li>add divider variables in <em>corporate/varriables</em>!</li>
|
|
85
|
+
</ul>
|
|
86
|
+
<p>
|
|
87
|
+
Dividers are completely rewritten and now have transparent backgrounds, so you can place them on any element.
|
|
88
|
+
<br/>
|
|
89
|
+
Also some variables added:
|
|
90
|
+
</p>
|
|
91
|
+
<ul>
|
|
92
|
+
<li><code>$divider-horizontal-spacing</code>, <code>$divider-vertical-spacing</code> => spacing</li>
|
|
93
|
+
<li><code>$divider-top-color</code>, <code>$divider-bottom-color</code> => line-colors for <em>.divider</em> and <em>hr</em></li>
|
|
94
|
+
</ul>
|
|
95
|
+
<p>
|
|
96
|
+
If you update to <strong>>= 0.0.0.78</strong> be sure to run: $ <code>rails g magic_stylez:update</code> !!!
|
|
97
|
+
</p>
|
|
98
|
+
<hr/>
|
|
82
99
|
<h4>Changes when update to <small>0.0.0.67</small>:</h4>
|
|
83
100
|
<ul>
|
|
84
101
|
<li>changed some names in <em>corporate/varriables</em>!</li>
|
|
@@ -106,6 +123,7 @@ CSS:
|
|
|
106
123
|
<h3 class="loud">On to / To Do</h3>
|
|
107
124
|
<hr/>
|
|
108
125
|
<p class="highlight"><i class="icomoon-checkbox-unchecked"></i> update gem to work with new bootstrap structure (<em>outside vendor folder</em>)</p>
|
|
126
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> npm & bower compatiblity</p>
|
|
109
127
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> small paralax plugin to fix fixed-background problem on chrome</p>
|
|
110
128
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> optimize code, variables</p>
|
|
111
129
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> clean up unused or double csss</p>
|
|
@@ -15,16 +15,21 @@
|
|
|
15
15
|
<div class="corset center_text">
|
|
16
16
|
<p class="loud press">Divider are a nice hr-like text divider:</p>
|
|
17
17
|
|
|
18
|
-
<div class="divider
|
|
18
|
+
<div class="divider">
|
|
19
19
|
<span class="name">I'm a divider :)</span>
|
|
20
20
|
</div>
|
|
21
21
|
|
|
22
|
-
<p class="loud
|
|
22
|
+
<p class="loud">There are many usecases for dividers</p>
|
|
23
23
|
|
|
24
|
-
<div class="divider half
|
|
24
|
+
<div class="divider half">
|
|
25
25
|
<span class="name">I'm a .half divider</span>
|
|
26
26
|
</div>
|
|
27
27
|
|
|
28
|
+
<p class="loud">There are many usecases for dividers</p>
|
|
29
|
+
|
|
30
|
+
<div class="divider tight">
|
|
31
|
+
<span class="name">I'm a .tight divider</span>
|
|
32
|
+
</div>
|
|
28
33
|
|
|
29
34
|
|
|
30
35
|
</div>
|
|
@@ -67,6 +72,10 @@
|
|
|
67
72
|
</div>
|
|
68
73
|
</div>
|
|
69
74
|
|
|
75
|
+
<div class="divider tight">
|
|
76
|
+
<span class="name">isn't it nice</span>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
70
79
|
</div>
|
|
71
80
|
</div>
|
|
72
81
|
|
|
@@ -79,11 +88,139 @@
|
|
|
79
88
|
|
|
80
89
|
<div class="section shine-top">
|
|
81
90
|
<div class="corset">
|
|
91
|
+
<p>In HTML</p>
|
|
82
92
|
<pre>
|
|
83
93
|
<code>
|
|
84
94
|
<div class="divider"><br/> <span>or</span><br/> </div>
|
|
95
|
+
|
|
96
|
+
- or -
|
|
97
|
+
|
|
98
|
+
<div class="divider"><br/> <h2>Huge Divider</h2><br/> </div>
|
|
99
|
+
|
|
100
|
+
( all text ellements: h1 h2 h3 h4 h5 h6 p span ... )
|
|
101
|
+
</code>
|
|
102
|
+
</pre>
|
|
103
|
+
<br/>
|
|
104
|
+
<p>Change colors depending on parent <small>SASS</small></p>
|
|
105
|
+
<pre>
|
|
106
|
+
<code>
|
|
107
|
+
.your-colored-parent {
|
|
108
|
+
hr, .divider > *:before, .divider > *:after {
|
|
109
|
+
border-top: solid 1px rgba(0,0,0,.23);
|
|
110
|
+
border-bottom: solid 1px rgba(255,255,255,.42);
|
|
111
|
+
}
|
|
112
|
+
.divider > * { color: red; }
|
|
113
|
+
}
|
|
85
114
|
</code>
|
|
86
115
|
</pre>
|
|
87
|
-
<
|
|
116
|
+
<br/>
|
|
117
|
+
<br/>
|
|
118
|
+
<p class="loud crossed" data-text="Not needed for v0.0.0.78 upwards">Parent box needs background!</p>
|
|
119
|
+
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<div class="section bright">
|
|
124
|
+
<div class="corset">
|
|
125
|
+
<h3>It is transparent! so background doesn't matter <small>after v.0.0.0.78</small></h3>
|
|
88
126
|
</div>
|
|
89
|
-
</div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div class="section dark">
|
|
130
|
+
<div class="corset">
|
|
131
|
+
<h4>.dark</h4>
|
|
132
|
+
<div class="divider tight">
|
|
133
|
+
<span>.divider.tight <small>span</small></span>
|
|
134
|
+
</div>
|
|
135
|
+
<div class="divider">
|
|
136
|
+
<h3>.divider <small>h3</small></h3>
|
|
137
|
+
</div>
|
|
138
|
+
<div class="divider half">
|
|
139
|
+
<p class="lead">.divider.half <small>p.lead</small></p>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="section bright">
|
|
144
|
+
<div class="corset">
|
|
145
|
+
<h4>.bright</h4>
|
|
146
|
+
<div class="divider tight">
|
|
147
|
+
<span>.divider.tight <small>span</small></span>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="divider">
|
|
150
|
+
<h3>.divider <small>h3</small></h3>
|
|
151
|
+
</div>
|
|
152
|
+
<div class="divider half">
|
|
153
|
+
<p class="lead">.divider.half <small>p.lead</small></p>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="section brand">
|
|
158
|
+
<div class="corset">
|
|
159
|
+
<h4>.brand</h4>
|
|
160
|
+
<div class="divider tight">
|
|
161
|
+
<span>.divider.tight <small>span</small></span>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="divider">
|
|
164
|
+
<h3>.divider <small>h3</small></h3>
|
|
165
|
+
</div>
|
|
166
|
+
<div class="divider half">
|
|
167
|
+
<p class="lead">.divider.half <small>p.lead</small></p>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
<div class="section one">
|
|
172
|
+
<div class="corset">
|
|
173
|
+
<h4>.one</h4>
|
|
174
|
+
<div class="divider tight">
|
|
175
|
+
<span>.divider.tight <small>span</small></span>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="divider">
|
|
178
|
+
<h3>.divider <small>h3</small></h3>
|
|
179
|
+
</div>
|
|
180
|
+
<div class="divider half">
|
|
181
|
+
<p class="lead">.divider.half <small>p.lead</small></p>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
<div class="section two">
|
|
186
|
+
<div class="corset">
|
|
187
|
+
<h4>.two</h4>
|
|
188
|
+
<div class="divider tight">
|
|
189
|
+
<span>.divider.tight <small>span</small></span>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="divider">
|
|
192
|
+
<h3>.divider <small>h3</small></h3>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="divider half">
|
|
195
|
+
<p class="lead">.divider.half <small>p.lead</small></p>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
<div class="section three">
|
|
200
|
+
<div class="corset">
|
|
201
|
+
<h4>.three</h4>
|
|
202
|
+
<div class="divider tight">
|
|
203
|
+
<span>.divider.tight <small>span</small></span>
|
|
204
|
+
</div>
|
|
205
|
+
<div class="divider">
|
|
206
|
+
<h3>.divider <small>h3</small></h3>
|
|
207
|
+
</div>
|
|
208
|
+
<div class="divider half">
|
|
209
|
+
<p class="lead">.divider.half <small>p.lead</small></p>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
</div>
|
|
213
|
+
<div class="section blank">
|
|
214
|
+
<div class="corset">
|
|
215
|
+
<h4>.blank</h4>
|
|
216
|
+
<div class="divider tight">
|
|
217
|
+
<span>.divider.tight <small>span</small></span>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="divider">
|
|
220
|
+
<h3>.divider <small>h3</small></h3>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="divider half">
|
|
223
|
+
<p class="lead">.divider.half <small>p.lead</small></p>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
@@ -782,3 +782,20 @@ $component-offset-horizontal: 180px !default;
|
|
|
782
782
|
// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
|
|
783
783
|
|
|
784
784
|
|
|
785
|
+
|
|
786
|
+
|
|
787
|
+
|
|
788
|
+
// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
|
|
789
|
+
// magic_styles v-0.0.0.78 additional variables (2015-03-06 11:41)
|
|
790
|
+
// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
|
|
791
|
+
// line | style
|
|
792
|
+
/* 236 */ //== Divider
|
|
793
|
+
/* 238 */ // -----|< - >|your text|< - >|------
|
|
794
|
+
/* 239 */ $divider-horizontal-spacing: 20px !default;
|
|
795
|
+
/* 240 */ // for .divider and hr elements
|
|
796
|
+
/* 241 */ $divider-vertical-spacing: $line-height-computed !default;
|
|
797
|
+
/* 242 */ $divider-top-color: rgba(0,0,0,.23) !default;
|
|
798
|
+
/* 243 */ $divider-bottom-color: rgba(255,255,255,.65) !default;
|
|
799
|
+
// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
|
|
800
|
+
|
|
801
|
+
|
|
@@ -80,6 +80,23 @@ CSS:
|
|
|
80
80
|
<pre><code>$ rails g magic_stylez:update</code></pre>
|
|
81
81
|
<br/>
|
|
82
82
|
<br/>
|
|
83
|
+
<h4>Changes when update to <small>0.0.0.78</small>:</h4>
|
|
84
|
+
<ul>
|
|
85
|
+
<li>add divider variables in <em>corporate/varriables</em>!</li>
|
|
86
|
+
</ul>
|
|
87
|
+
<p>
|
|
88
|
+
Dividers are completely rewritten and now have transparent backgrounds, so you can place them on any element.
|
|
89
|
+
<br/>
|
|
90
|
+
Also some variables added:
|
|
91
|
+
</p>
|
|
92
|
+
<ul>
|
|
93
|
+
<li><code>$divider-horizontal-spacing</code>, <code>$divider-vertical-spacing</code> => spacing</li>
|
|
94
|
+
<li><code>$divider-top-color</code>, <code>$divider-bottom-color</code> => line-colors for <em>.divider</em> and <em>hr</em></li>
|
|
95
|
+
</ul>
|
|
96
|
+
<p>
|
|
97
|
+
If you update to <strong>>= 0.0.0.78</strong> be sure to run: $ <code>rails g magic_stylez:update</code> !!!
|
|
98
|
+
</p>
|
|
99
|
+
<hr/>
|
|
83
100
|
<h4>Changes when update to <small>0.0.0.67</small>:</h4>
|
|
84
101
|
<ul>
|
|
85
102
|
<li>changed some names in <em>corporate/varriables</em>!</li>
|
|
@@ -108,6 +125,7 @@ CSS:
|
|
|
108
125
|
<h3 class="loud">On to / To Do</h3>
|
|
109
126
|
<hr/>
|
|
110
127
|
<p class="highlight"><i class="icomoon-checkbox-unchecked"></i> update gem to work with new bootstrap structure (<em>outside vendor folder</em>)</p>
|
|
128
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> npm & bower compatiblity</p>
|
|
111
129
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> small paralax plugin to fix fixed-background problem on chrome</p>
|
|
112
130
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> optimize code, variables</p>
|
|
113
131
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> clean up unused or double csss</p>
|
|
@@ -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-054f69d51cbc524a78885a902ecbec30.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="dE8f09ah8NHH2L12Dt3l6c112i2pWIF159rfTLS/zNA=" 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-054f69d51cbc524a78885a902ecbec30.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="dE8f09ah8NHH2L12Dt3l6c112i2pWIF159rfTLS/zNA=" 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-054f69d51cbc524a78885a902ecbec30.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="dE8f09ah8NHH2L12Dt3l6c112i2pWIF159rfTLS/zNA=" 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-054f69d51cbc524a78885a902ecbec30.css" media="all" rel="stylesheet" />
|
|
10
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/application-31a5146a73f26bc3449bb52eba4c89f2.js"></script>
|
|
11
11
|
<meta content="authenticity_token" name="csrf-param" />
|
|
12
|
-
<meta content="
|
|
12
|
+
<meta content="dE8f09ah8NHH2L12Dt3l6c112i2pWIF159rfTLS/zNA=" 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" />
|
|
@@ -190,6 +190,23 @@ CSS:
|
|
|
190
190
|
<pre><code>$ rails g magic_stylez:update</code></pre>
|
|
191
191
|
<br/>
|
|
192
192
|
<br/>
|
|
193
|
+
<h4>Changes when update to <small>0.0.0.78</small>:</h4>
|
|
194
|
+
<ul>
|
|
195
|
+
<li>add divider variables in <em>corporate/varriables</em>!</li>
|
|
196
|
+
</ul>
|
|
197
|
+
<p>
|
|
198
|
+
Dividers are completely rewritten and now have transparent backgrounds, so you can place them on any element.
|
|
199
|
+
<br/>
|
|
200
|
+
Also some variables added:
|
|
201
|
+
</p>
|
|
202
|
+
<ul>
|
|
203
|
+
<li><code>$divider-horizontal-spacing</code>, <code>$divider-vertical-spacing</code> => spacing</li>
|
|
204
|
+
<li><code>$divider-top-color</code>, <code>$divider-bottom-color</code> => line-colors for <em>.divider</em> and <em>hr</em></li>
|
|
205
|
+
</ul>
|
|
206
|
+
<p>
|
|
207
|
+
If you update to <strong>>= 0.0.0.78</strong> be sure to run: $ <code>rails g magic_stylez:update</code> !!!
|
|
208
|
+
</p>
|
|
209
|
+
<hr/>
|
|
193
210
|
<h4>Changes when update to <small>0.0.0.67</small>:</h4>
|
|
194
211
|
<ul>
|
|
195
212
|
<li>changed some names in <em>corporate/varriables</em>!</li>
|
|
@@ -218,6 +235,7 @@ CSS:
|
|
|
218
235
|
<h3 class="loud">On to / To Do</h3>
|
|
219
236
|
<hr/>
|
|
220
237
|
<p class="highlight"><i class="icomoon-checkbox-unchecked"></i> update gem to work with new bootstrap structure (<em>outside vendor folder</em>)</p>
|
|
238
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> npm & bower compatiblity</p>
|
|
221
239
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> small paralax plugin to fix fixed-background problem on chrome</p>
|
|
222
240
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> optimize code, variables</p>
|
|
223
241
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> clean up unused or double csss</p>
|
|
@@ -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-054f69d51cbc524a78885a902ecbec30.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="dE8f09ah8NHH2L12Dt3l6c112i2pWIF159rfTLS/zNA=" 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-054f69d51cbc524a78885a902ecbec30.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-f61f67c5c51c1b2adbcfdfc46056dabb.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="dE8f09ah8NHH2L12Dt3l6c112i2pWIF159rfTLS/zNA=" 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,103 @@
|
|
|
1
|
+
/* ==========================================================
|
|
2
|
+
* bootstrap-affix.js v2.1.0
|
|
3
|
+
* http://twitter.github.com/bootstrap/javascript.html#affix
|
|
4
|
+
* ==========================================================
|
|
5
|
+
* Copyright 2012 Twitter, Inc.
|
|
6
|
+
*
|
|
7
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
8
|
+
* you may not use this file except in compliance with the License.
|
|
9
|
+
* You may obtain a copy of the License at
|
|
10
|
+
*
|
|
11
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
12
|
+
*
|
|
13
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
14
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
15
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
16
|
+
* See the License for the specific language governing permissions and
|
|
17
|
+
* limitations under the License.
|
|
18
|
+
* ========================================================== */
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
!function ($) {
|
|
22
|
+
|
|
23
|
+
"use strict"; // jshint ;_;
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
/* AFFIX CLASS DEFINITION
|
|
27
|
+
* ====================== */
|
|
28
|
+
|
|
29
|
+
var Affix = function (element, options) {
|
|
30
|
+
this.options = $.extend({}, $.fn.affix.defaults, options)
|
|
31
|
+
this.$window = $(window).on('scroll.affix.data-api', $.proxy(this.checkPosition, this))
|
|
32
|
+
this.$element = $(element)
|
|
33
|
+
this.checkPosition()
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
Affix.prototype.checkPosition = function () {
|
|
37
|
+
if (!this.$element.is(':visible')) return
|
|
38
|
+
|
|
39
|
+
var scrollHeight = $(document).height()
|
|
40
|
+
, scrollTop = this.$window.scrollTop()
|
|
41
|
+
, position = this.$element.offset()
|
|
42
|
+
, offset = this.options.offset
|
|
43
|
+
, offsetBottom = offset.bottom
|
|
44
|
+
, offsetTop = offset.top
|
|
45
|
+
, reset = 'affix affix-top affix-bottom'
|
|
46
|
+
, affix
|
|
47
|
+
|
|
48
|
+
if (typeof offset != 'object') offsetBottom = offsetTop = offset
|
|
49
|
+
if (typeof offsetTop == 'function') offsetTop = offset.top()
|
|
50
|
+
if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()
|
|
51
|
+
|
|
52
|
+
affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ?
|
|
53
|
+
false : offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ?
|
|
54
|
+
'bottom' : offsetTop != null && scrollTop <= offsetTop ?
|
|
55
|
+
'top' : false
|
|
56
|
+
|
|
57
|
+
if (this.affixed === affix) return
|
|
58
|
+
|
|
59
|
+
this.affixed = affix
|
|
60
|
+
this.unpin = affix == 'bottom' ? position.top - scrollTop : null
|
|
61
|
+
this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : ''))
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
/* AFFIX PLUGIN DEFINITION
|
|
66
|
+
* ======================= */
|
|
67
|
+
|
|
68
|
+
$.fn.affix = function (option) {
|
|
69
|
+
return this.each(function () {
|
|
70
|
+
var $this = $(this)
|
|
71
|
+
, data = $this.data('affix')
|
|
72
|
+
, options = typeof option == 'object' && option
|
|
73
|
+
if (!data) $this.data('affix', (data = new Affix(this, options)))
|
|
74
|
+
if (typeof option == 'string') data[option]()
|
|
75
|
+
})
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
$.fn.affix.Constructor = Affix
|
|
79
|
+
|
|
80
|
+
$.fn.affix.defaults = {
|
|
81
|
+
offset: 0
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
/* AFFIX DATA-API
|
|
86
|
+
* ============== */
|
|
87
|
+
|
|
88
|
+
$(window).on('load', function () {
|
|
89
|
+
$('[data-spy="affix"]').each(function () {
|
|
90
|
+
var $spy = $(this)
|
|
91
|
+
, data = $spy.data()
|
|
92
|
+
|
|
93
|
+
data.offset = data.offset || {}
|
|
94
|
+
|
|
95
|
+
data.offsetBottom && (data.offset.bottom = data.offsetBottom)
|
|
96
|
+
data.offsetTop && (data.offset.top = data.offsetTop)
|
|
97
|
+
|
|
98
|
+
$spy.affix(data)
|
|
99
|
+
})
|
|
100
|
+
})
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
}(window.jQuery);
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
/* ==========================================================
|
|
2
|
+
* bootstrap-affix.js v2.1.0
|
|
3
|
+
* http://twitter.github.com/bootstrap/javascript.html#affix
|
|
4
|
+
* ==========================================================
|
|
5
|
+
* Copyright 2012 Twitter, Inc.
|
|
6
|
+
*
|
|
7
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
8
|
+
* you may not use this file except in compliance with the License.
|
|
9
|
+
* You may obtain a copy of the License at
|
|
10
|
+
*
|
|
11
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
12
|
+
*
|
|
13
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
14
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
15
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
16
|
+
* See the License for the specific language governing permissions and
|
|
17
|
+
* limitations under the License.
|
|
18
|
+
* ========================================================== */
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
!function ($) {
|
|
22
|
+
|
|
23
|
+
"use strict"; // jshint ;_;
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
/* AFFIX CLASS DEFINITION
|
|
27
|
+
* ====================== */
|
|
28
|
+
|
|
29
|
+
var Affix = function (element, options) {
|
|
30
|
+
this.options = $.extend({}, $.fn.affix.defaults, options)
|
|
31
|
+
this.$window = $("#body").on('scroll.affix.data-api', $.proxy(this.checkPosition, this))
|
|
32
|
+
this.$element = $(element)
|
|
33
|
+
this.checkPosition()
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
Affix.prototype.checkPosition = function () {
|
|
37
|
+
if (!this.$element.is(':visible')) return
|
|
38
|
+
|
|
39
|
+
// console.log( "AFFIX: ", $("#body").scrollTop(), $("#body").width(), this.options )
|
|
40
|
+
|
|
41
|
+
var scrollHeight = $("#body").height()
|
|
42
|
+
, width = $("#body").width()
|
|
43
|
+
, scrollTop = $("#body").scrollTop()
|
|
44
|
+
, position = this.$element.offset()
|
|
45
|
+
, offset = this.options.offset
|
|
46
|
+
, offsetBottom = offset.bottom
|
|
47
|
+
, offsetTop = offset.top
|
|
48
|
+
, reset = 'affix affix-top affix-bottom'
|
|
49
|
+
, affix
|
|
50
|
+
|
|
51
|
+
if (typeof offset != 'object') offsetBottom = offsetTop = offset
|
|
52
|
+
if (typeof offsetTop == 'function') offsetTop = offset.top()
|
|
53
|
+
if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()
|
|
54
|
+
|
|
55
|
+
affix = this.unpin != null && (scrollTop + this.unpin <= position.top) && (width > 780) ?
|
|
56
|
+
false : offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ?
|
|
57
|
+
'bottom' : offsetTop != null && scrollTop <= offsetTop ?
|
|
58
|
+
'top' : false
|
|
59
|
+
|
|
60
|
+
if (this.affixed === affix) return
|
|
61
|
+
|
|
62
|
+
this.affixed = affix
|
|
63
|
+
this.unpin = affix == 'bottom' ? position.top - scrollTop : null
|
|
64
|
+
this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : ''))
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
/* AFFIX PLUGIN DEFINITION
|
|
69
|
+
* ======================= */
|
|
70
|
+
|
|
71
|
+
$.fn.affix = function (option) {
|
|
72
|
+
return this.each(function () {
|
|
73
|
+
var $this = $(this)
|
|
74
|
+
, data = $this.data('affix')
|
|
75
|
+
, options = typeof option == 'object' && option
|
|
76
|
+
if (!data) $this.data('affix', (data = new Affix(this, options)))
|
|
77
|
+
if (typeof option == 'string') data[option]()
|
|
78
|
+
})
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
$.fn.affix.Constructor = Affix
|
|
82
|
+
|
|
83
|
+
$.fn.affix.defaults = {
|
|
84
|
+
offset: 0
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
/* AFFIX DATA-API
|
|
89
|
+
* ============== */
|
|
90
|
+
|
|
91
|
+
$(window).on('load', function () {
|
|
92
|
+
|
|
93
|
+
$('[data-spy="affix"]').each(function () {
|
|
94
|
+
var $spy = $(this)
|
|
95
|
+
, data = $spy.data()
|
|
96
|
+
|
|
97
|
+
data.offset = data.offset || {}
|
|
98
|
+
|
|
99
|
+
data.offsetBottom && (data.offset.bottom = data.offsetBottom)
|
|
100
|
+
data.offsetTop && (data.offset.top = data.offsetTop)
|
|
101
|
+
|
|
102
|
+
$spy.affix(data)
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
/*
|
|
106
|
+
* Clamped-width.
|
|
107
|
+
* Usage:
|
|
108
|
+
* <div data-clampedwidth=".myParent">This long content will force clamped width</div>
|
|
109
|
+
*
|
|
110
|
+
* Author: LV
|
|
111
|
+
*/
|
|
112
|
+
$('[data-clampedwidth]').each(function () {
|
|
113
|
+
var elem = $(this);
|
|
114
|
+
// if ( elem.data('clampedwidth') == "true" ) {
|
|
115
|
+
var parentPanel = elem.parent();
|
|
116
|
+
// } else {
|
|
117
|
+
// var parentPanel = elem.data('clampedwidth');
|
|
118
|
+
// }
|
|
119
|
+
var resizeFn = function () {
|
|
120
|
+
var sideBarNavWidth = $(parentPanel).width() - parseInt(elem.css('paddingLeft')) - parseInt(elem.css('paddingRight')) - parseInt(elem.css('marginLeft')) - parseInt(elem.css('marginRight')) - parseInt(elem.css('borderLeftWidth')) - parseInt(elem.css('borderRightWidth'));
|
|
121
|
+
elem.css('width', sideBarNavWidth);
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
resizeFn();
|
|
125
|
+
$(window).resize(resizeFn);
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
})
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
}(window.jQuery);
|
|
@@ -232,6 +232,17 @@ $container-lg: $container-large-desktop !default;
|
|
|
232
232
|
|
|
233
233
|
|
|
234
234
|
|
|
235
|
+
|
|
236
|
+
//== Divider
|
|
237
|
+
//
|
|
238
|
+
// -----|< - >|your text|< - >|------
|
|
239
|
+
$divider-horizontal-spacing: 20px !default;
|
|
240
|
+
// for .divider and hr elements
|
|
241
|
+
$divider-vertical-spacing: $line-height-computed !default;
|
|
242
|
+
$divider-top-color: rgba(0,0,0,.23) !default;
|
|
243
|
+
$divider-bottom-color: rgba(255,255,255,.65) !default;
|
|
244
|
+
|
|
245
|
+
|
|
235
246
|
//== Application Notice
|
|
236
247
|
//
|
|
237
248
|
//##
|
|
@@ -1,43 +1,59 @@
|
|
|
1
1
|
.divider {
|
|
2
|
-
|
|
2
|
+
display: block; position: relative;
|
|
3
3
|
padding: 0;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
top: 50%; height: 0;
|
|
21
|
-
left: 0; right: 0;
|
|
22
|
-
z-index: 1;
|
|
23
|
-
}
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
text-align: center;
|
|
6
|
+
&, & > * { background: transparent; }
|
|
7
|
+
& > * {
|
|
8
|
+
display: block; display: inline-block; position: relative;
|
|
9
|
+
margin: 0 auto; padding: 0 $divider-horizontal-spacing;
|
|
10
|
+
|
|
11
|
+
&:before, &:after {
|
|
12
|
+
display: block; position: absolute; content: "";
|
|
13
|
+
margin: 0 auto; padding: 0;
|
|
14
|
+
top: 50%;
|
|
15
|
+
width: 750px; // make it big to fill big screens as well
|
|
16
|
+
}
|
|
17
|
+
&:before { left: 100%; }
|
|
18
|
+
&:after { right: 100%; }
|
|
19
|
+
}
|
|
24
20
|
}
|
|
25
21
|
|
|
26
22
|
hr {
|
|
27
23
|
display: block; position: relative;
|
|
28
|
-
|
|
29
|
-
padding: 0;
|
|
24
|
+
margin: 0; padding: 0;
|
|
30
25
|
height: 0;
|
|
31
|
-
border: none;
|
|
32
26
|
}
|
|
33
27
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
28
|
+
|
|
29
|
+
// margin
|
|
30
|
+
hr, .divider { @include vertical-margin( $divider-vertical-spacing ); }
|
|
31
|
+
|
|
32
|
+
// line-colors
|
|
33
|
+
hr, .divider > *:before, .divider > *:after {
|
|
34
|
+
border: none;
|
|
35
|
+
border-top: solid 1px $divider-top-color;
|
|
36
|
+
border-bottom: solid 1px $divider-bottom-color;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// sizes
|
|
40
|
+
hr, .divider {
|
|
41
|
+
|
|
42
|
+
&.half, &.tight { @include horizontal-margin( auto ); }
|
|
43
|
+
&.half { width: 50%; }
|
|
44
|
+
&.tight { width: 80%; }
|
|
45
|
+
|
|
46
|
+
&.no-press { margin: 0; }
|
|
47
|
+
&.no-press-top, &.no-top-press { margin-top: 0; }
|
|
48
|
+
&.no-press-top, &.no-top-press { margin-bottom: 0; }
|
|
49
|
+
|
|
50
|
+
&.half-press, &.press-half { @include vertical-margin( $divider-vertical-spacing / 2 ); }
|
|
51
|
+
|
|
52
|
+
|
|
38
53
|
}
|
|
39
54
|
|
|
40
55
|
|
|
56
|
+
|
|
41
57
|
.section {
|
|
42
58
|
|
|
43
59
|
.divider & > * { background: $main-bg; }
|
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.78
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Torsten Wetzel
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2015-03-
|
|
11
|
+
date: 2015-03-06 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -365,6 +365,8 @@ files:
|
|
|
365
365
|
- vendor/assets/javascripts/magic-stylez.js.coffee
|
|
366
366
|
- vendor/assets/javascripts/magic/circle_diagram.js.coffee
|
|
367
367
|
- vendor/assets/javascripts/magic/collapse.js.coffee
|
|
368
|
+
- vendor/assets/javascripts/magic/ext/affix.js
|
|
369
|
+
- vendor/assets/javascripts/magic/ext/affix2.js
|
|
368
370
|
- vendor/assets/javascripts/magic/ext/rails-ujs.js
|
|
369
371
|
- vendor/assets/javascripts/magic/helper.js.coffee
|
|
370
372
|
- vendor/assets/javascripts/magic/render_eco.js.coffee
|