magic_stylez 0.0.0.77 → 0.0.0.78
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 +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
|