magic_stylez 0.0.0.66 → 0.0.0.67
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/app.js.coffee +60 -0
- data/test/dummy/app/assets/javascripts/application.js +2 -0
- data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +30 -1
- data/test/dummy/app/assets/javascripts/views/layout/at_first.jst.eco +61 -0
- data/test/dummy/app/assets/javascripts/views/layout/fullpage_table.jst.eco +9 -0
- data/test/dummy/app/assets/javascripts/views/layout/section.jst.eco +37 -8
- data/test/dummy/app/assets/javascripts/views/templates/aside-nav.jst.eco +1 -1
- data/test/dummy/app/assets/stylesheets/application.css.scss +50 -7
- data/test/dummy/app/assets/stylesheets/corporate/_variables.scss +16 -0
- data/test/dummy/app/views/front/_aside.html.erb +1 -1
- data/test/dummy/app/views/front/start.html.erb +31 -1
- 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 +35 -4
- 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/rails-ujs.js +479 -0
- data/vendor/assets/stylesheets/corporate/_variables.scss +5 -4
- data/vendor/assets/stylesheets/magic/content/_buttons.scss +1 -0
- data/vendor/assets/stylesheets/magic/content/_navbar.scss +7 -3
- data/vendor/assets/stylesheets/magic/layout/_section.scss +11 -5
- data/vendor/assets/stylesheets/magic/lib/_cross_browser.scss +2 -0
- data/vendor/assets/stylesheets/magic/xxx/_body.scss +4 -2
- data/vendor/assets/stylesheets/magic/xxx/_header.scss +2 -1
- data/vendor/assets/stylesheets/magic-min.scss +0 -1
- data/vendor/assets/stylesheets/magic-stylez.scss +0 -1
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 91e4cfcf4bad44d1665d34a1431601d8f3650bcb
|
|
4
|
+
data.tar.gz: ff7f56a73a8fab49a563fddc990128a377cd2b3c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ae49781715fdc6b28400ed4d2143e890fa278a8d47c2b746429ecad119ae11062e68c052ba34fb261ad78dd50488cf84772b78d0655dff424d1b3c887098c6b2
|
|
7
|
+
data.tar.gz: d6b41adae4a7a74e9bdf5babe68c05f3b70f95fa6fc439400d148a7a4e9da4b223b472dad51a5d00b611a9a4aa80767712ba1fec55d1c7db2039aa8d958bc81c
|
data/lib/magic_stylez/version.rb
CHANGED
|
@@ -10,6 +10,54 @@ loadCircles = ->
|
|
|
10
10
|
else if $('.circle-diagram').length > 0
|
|
11
11
|
window.circleDiagram = new CircleDiagram( circle: $('.circle-diagram') )
|
|
12
12
|
|
|
13
|
+
build_paralax = (el) ->
|
|
14
|
+
console.log "build_paralax", el
|
|
15
|
+
## Create the background image holder ##
|
|
16
|
+
el.prepend("<div class='px_bg_holder'></div>")
|
|
17
|
+
el.find(".px_bg_holder").css(
|
|
18
|
+
"background-image" : el.css("background-image")
|
|
19
|
+
"background-position" : "center center"
|
|
20
|
+
"background-repeat" : "no-repeat"
|
|
21
|
+
"background-size" : "cover"
|
|
22
|
+
"position" : "absolute"
|
|
23
|
+
"height" : $(window).height()
|
|
24
|
+
"width" : $(window).width()
|
|
25
|
+
)
|
|
26
|
+
## We will remove the background at all ##
|
|
27
|
+
el.css("background","none")
|
|
28
|
+
el.css("overflow","hidden")
|
|
29
|
+
|
|
30
|
+
$("body").scroll ->
|
|
31
|
+
console.log "Scrolling"
|
|
32
|
+
# bg_pos = $("#app_content").offset().top + el.offset().top;
|
|
33
|
+
console.log if el.hasClass("responsive-hero") then el.closest(".fullpage-table").position().top else el.position().top
|
|
34
|
+
bg_pos = ($("#app_content").offset().top + if el.hasClass("responsive-hero") then el.closest(".fullpage-table").position().top else el.position().top)
|
|
35
|
+
console.log "bg_pos #{ bg_pos }"
|
|
36
|
+
if bg_pos < $(window).height()
|
|
37
|
+
bg_pos = bg_pos - (bg_pos / 10)
|
|
38
|
+
|
|
39
|
+
el.find(".px_bg_holder").css(
|
|
40
|
+
"top" : "#{ bg_pos * -1 }px"
|
|
41
|
+
)
|
|
42
|
+
$(window).resize ->
|
|
43
|
+
$(".px_bg_holder").css(
|
|
44
|
+
"height" : $(window).height()
|
|
45
|
+
"width" : $(window).width()
|
|
46
|
+
)
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
load_paralax = ->
|
|
50
|
+
if $(".section.image.fixed").length > 0
|
|
51
|
+
$(".section.image.fixed").each ->
|
|
52
|
+
build_paralax( $(@) )
|
|
53
|
+
|
|
54
|
+
if $(".responsive-hero.fixed-bg").length > 0
|
|
55
|
+
$(".responsive-hero.fixed-bg").each ->
|
|
56
|
+
build_paralax( $(@) )
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
13
61
|
|
|
14
62
|
|
|
15
63
|
navigate = ->
|
|
@@ -31,6 +79,7 @@ navigate = ->
|
|
|
31
79
|
lnk.addClass("active")
|
|
32
80
|
$("body").removeClass("aside-on")
|
|
33
81
|
loadCircles()
|
|
82
|
+
load_paralax()
|
|
34
83
|
$("#current-view-name").text( lnk.text() )
|
|
35
84
|
currentPath = path
|
|
36
85
|
|
|
@@ -39,6 +88,17 @@ navigate = ->
|
|
|
39
88
|
$ ->
|
|
40
89
|
|
|
41
90
|
navigate()
|
|
91
|
+
|
|
92
|
+
$(document).scroll ->
|
|
93
|
+
console.log "window SCROLL"
|
|
94
|
+
|
|
95
|
+
$("body").scroll ->
|
|
96
|
+
console.log "app_content SCROLL"
|
|
97
|
+
|
|
98
|
+
$("#main_template").scroll ->
|
|
99
|
+
console.log "main_template SCROLL"
|
|
100
|
+
|
|
101
|
+
|
|
42
102
|
|
|
43
103
|
$("body").on "click", "#mobile_header", ->
|
|
44
104
|
$("body").toggleClass("aside-on")
|
|
@@ -67,7 +67,10 @@ CSS:
|
|
|
67
67
|
|
|
68
68
|
<div class="section hard-top">
|
|
69
69
|
<div class="corset tight">
|
|
70
|
-
<h2 class="loud">
|
|
70
|
+
<h2 class="loud">NEWs</h2>
|
|
71
|
+
<hr/>
|
|
72
|
+
<p class="loud"><i class="olicons-hide-filter"></i> <em>rail-ujs.js</em> file optimized for splitted and divided buttons</p>
|
|
73
|
+
<pre><code>//= require magic/ext/rails-ujs</code></pre>
|
|
71
74
|
<hr/>
|
|
72
75
|
<p class="highlight"><i class="olicons-hide-filter"></i> magic-styles update generator</p>
|
|
73
76
|
<p class="loud"><i class="olicons-hide-filter"></i> in the process I often add new variables to the corporate files</p>
|
|
@@ -76,6 +79,19 @@ CSS:
|
|
|
76
79
|
<pre><code>$ rails g magic_stylez:update</code></pre>
|
|
77
80
|
<br/>
|
|
78
81
|
<br/>
|
|
82
|
+
<h4>Changes when update to <small>0.0.0.67</small>:</h4>
|
|
83
|
+
<ul>
|
|
84
|
+
<li>changed some names in <em>corporate/varriables</em>!</li>
|
|
85
|
+
</ul>
|
|
86
|
+
<p>
|
|
87
|
+
With Version <strong>0.0.0.67</strong> Sections have more bootstrap like name, like <code>.section.section-xs</code> instead of <code>.section.compact</code>.
|
|
88
|
+
<br/>
|
|
89
|
+
Also some variables changed, so <code>$section-flatted-padding</code> becomes <code>$section-sm-padding</code>.
|
|
90
|
+
<br/>
|
|
91
|
+
<br/>
|
|
92
|
+
If you update to <strong>>= 0.0.0.67</strong> be sure to run: $ <code>rails g magic_stylez:update</code> !!!
|
|
93
|
+
</p>
|
|
94
|
+
<hr/>
|
|
79
95
|
<h4>Changes when update to <small>0.0.0.55</small>:</h4>
|
|
80
96
|
<ul>
|
|
81
97
|
<li><em>corporate/typo</em> is removed!</li>
|
|
@@ -85,6 +101,19 @@ CSS:
|
|
|
85
101
|
</div>
|
|
86
102
|
</div>
|
|
87
103
|
|
|
104
|
+
<div class="section hard-top">
|
|
105
|
+
<div class="corset tight">
|
|
106
|
+
<h3 class="loud">On to / To Do</h3>
|
|
107
|
+
<hr/>
|
|
108
|
+
<p class="highlight"><i class="icomoon-checkbox-unchecked"></i> update gem to work with new bootstrap structure (<em>outside vendor folder</em>)</p>
|
|
109
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> small paralax plugin to fix fixed-background problem on chrome</p>
|
|
110
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> optimize code, variables</p>
|
|
111
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> clean up unused or double csss</p>
|
|
112
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> learn english :)</p>
|
|
113
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> improve documentation</p>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
88
117
|
<div class="section hard-top">
|
|
89
118
|
<div class="corset tight">
|
|
90
119
|
<h3>Thanks</h3>
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<div class="section head">
|
|
2
|
+
<div class="corset">
|
|
3
|
+
<h1>How to use Magic-Styles for Layouts</h1>
|
|
4
|
+
</div>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="section">
|
|
7
|
+
<div class="corset">
|
|
8
|
+
<p class="loud">Magic-Styles uses 2 main elements for layouts, <em>.section</em> and <em>.corset</em></p>
|
|
9
|
+
<pre><code>
|
|
10
|
+
<div class="section ..">
|
|
11
|
+
<div class="corset ..">
|
|
12
|
+
.. your section content goes here ...
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
</code></pre>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<div class="section sctn-sm">
|
|
20
|
+
<div class="corset">
|
|
21
|
+
<h2>.section</h2>
|
|
22
|
+
<p class="loud">
|
|
23
|
+
Sections are the vertical spacer for content <em>(use different classes to change behavior)</em>
|
|
24
|
+
</p>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div class="section sctn-sm">
|
|
29
|
+
<div class="corset">
|
|
30
|
+
<h2>.corset</h2>
|
|
31
|
+
<p class="loud">
|
|
32
|
+
Corsets are the horizontal spacer for content <em>(use different classes to change behavior)</em>
|
|
33
|
+
</p>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<div class="section sctn-sm">
|
|
38
|
+
<div class="corset">
|
|
39
|
+
<h2>.fullpage-table</h2>
|
|
40
|
+
<p class="loud">
|
|
41
|
+
Fullpage-Tables are always fullscreen elements, great for landing pages with fullpage banner
|
|
42
|
+
</p>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div class="section sctn-sm">
|
|
47
|
+
<div class="corset">
|
|
48
|
+
<h2>.layout-table</h2>
|
|
49
|
+
<p class="loud">
|
|
50
|
+
They are like <em>row</em>s but with vertical alliment.
|
|
51
|
+
<br/>
|
|
52
|
+
So content can be allways middled .. or .. boxes they allways have the same height
|
|
53
|
+
</p>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<div class="section">
|
|
58
|
+
<div class="corset">
|
|
59
|
+
<br/>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
@@ -10,6 +10,11 @@
|
|
|
10
10
|
<div class="banner-content">
|
|
11
11
|
<div class="corset">
|
|
12
12
|
<p class="loud">This is a fullpage-table, it allways uses fullpage-height<br/>(if content fits in).</p>
|
|
13
|
+
<div class="well">
|
|
14
|
+
surounding element (i.e. body) needs the following <em>css</em>:
|
|
15
|
+
<br/>
|
|
16
|
+
<code>width: 100%; height: 100%;</code>
|
|
17
|
+
</div>
|
|
13
18
|
</div>
|
|
14
19
|
</div>
|
|
15
20
|
|
|
@@ -55,6 +60,10 @@
|
|
|
55
60
|
<div class="banner-content">
|
|
56
61
|
<div class="corset">
|
|
57
62
|
<p class="loud">This is a fullpage-table, it allways uses fullpage-height<br/>(if content fits in).</p>
|
|
63
|
+
<br/>
|
|
64
|
+
<div class="well">
|
|
65
|
+
<strong>!!!</strong> fixed background doesn't work on chrome browser (Version 35.x - 39.x) <strong>!!!</strong>
|
|
66
|
+
</div>
|
|
58
67
|
</div>
|
|
59
68
|
</div>
|
|
60
69
|
|
|
@@ -188,14 +188,27 @@
|
|
|
188
188
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
189
189
|
</div>
|
|
190
190
|
</div>
|
|
191
|
-
<div class="section image">
|
|
191
|
+
<div class="section image fixed">
|
|
192
192
|
<div class="corset">
|
|
193
|
-
<h4>.image</h4>
|
|
193
|
+
<h4>.image.fixed</h4>
|
|
194
194
|
<br/>
|
|
195
195
|
<p>with pictures makes more sensce ...</p>
|
|
196
|
+
<br/><br/><br/>
|
|
197
|
+
<br/><br/><br/>
|
|
198
|
+
<br/><br/><br/>
|
|
196
199
|
</div>
|
|
197
200
|
</div>
|
|
198
201
|
|
|
202
|
+
<div class="section black">
|
|
203
|
+
<div class="corset">
|
|
204
|
+
<h4>.black</h4>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
<div class="section black">
|
|
208
|
+
<div class="corset">
|
|
209
|
+
<h4>.black</h4>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
199
212
|
|
|
200
213
|
<div class="section">
|
|
201
214
|
<div class="corset">
|
|
@@ -215,24 +228,29 @@
|
|
|
215
228
|
<td>50px</td>
|
|
216
229
|
</tr>
|
|
217
230
|
<tr>
|
|
218
|
-
<th>.compact</th>
|
|
231
|
+
<th>.section-xs<br/>.sctn-xs<br/><span class="text-muted" title="depreacated!">.compact</span></th>
|
|
219
232
|
<td>10px</td>
|
|
220
233
|
<td>10px</td>
|
|
221
234
|
</tr>
|
|
222
235
|
<tr>
|
|
223
|
-
<th>.
|
|
236
|
+
<th>.section-sm<br/>.sctn-sm<br/><span class="text-muted" title="depreacated!">.flatted</span></th>
|
|
237
|
+
<td>30px</td>
|
|
238
|
+
<td>30px</td>
|
|
239
|
+
</tr>
|
|
240
|
+
<tr>
|
|
241
|
+
<th>.section-lg<br/>.sctn-lg<br/><span class="text-muted" title="depreacated!">.fat</span></th>
|
|
224
242
|
<td>80px</td>
|
|
225
243
|
<td>80px</td>
|
|
226
244
|
</tr>
|
|
227
245
|
<tr>
|
|
228
|
-
<th>.fatter</th>
|
|
246
|
+
<th>.section-xl<br/>.sctn-xl<br/><span class="text-muted" title="depreacated!">.fatter</span></th>
|
|
229
247
|
<td>120px</td>
|
|
230
248
|
<td>120px</td>
|
|
231
249
|
</tr>
|
|
232
250
|
<tr>
|
|
233
|
-
<th>.
|
|
234
|
-
<td>
|
|
235
|
-
<td>
|
|
251
|
+
<th>.section-xxl<br/>.sctn-xxl</th>
|
|
252
|
+
<td>200px</td>
|
|
253
|
+
<td>200px</td>
|
|
236
254
|
</tr>
|
|
237
255
|
<tr>
|
|
238
256
|
<th>.flat</th>
|
|
@@ -252,4 +270,15 @@
|
|
|
252
270
|
</tbody>
|
|
253
271
|
</table>
|
|
254
272
|
</div>
|
|
273
|
+
</div>
|
|
274
|
+
|
|
275
|
+
<div class="section black">
|
|
276
|
+
<div class="corset">
|
|
277
|
+
<h4>.black</h4>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
<div class="section black">
|
|
281
|
+
<div class="corset">
|
|
282
|
+
<h4>.black</h4>
|
|
283
|
+
</div>
|
|
255
284
|
</div>
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
@import "magic-stylez";
|
|
2
2
|
|
|
3
3
|
html, body {
|
|
4
|
-
width: 100%; height: 100%;
|
|
4
|
+
width: 100%; height: 100%;
|
|
5
5
|
background: #f3f2f2;
|
|
6
|
+
|
|
6
7
|
overflow-x: hidden;
|
|
8
|
+
|
|
9
|
+
position: relative;
|
|
10
|
+
// position: static;
|
|
11
|
+
|
|
7
12
|
}
|
|
8
13
|
body {
|
|
9
|
-
position: relative;
|
|
10
14
|
&.blank {
|
|
11
15
|
background: #fff;
|
|
12
16
|
}
|
|
@@ -16,8 +20,15 @@ body {
|
|
|
16
20
|
}
|
|
17
21
|
|
|
18
22
|
#app_content {
|
|
19
|
-
display: block;
|
|
23
|
+
display: block;
|
|
24
|
+
position: relative;
|
|
25
|
+
// position: static;
|
|
20
26
|
width: 100%; height: 100%;
|
|
27
|
+
|
|
28
|
+
z-index: 1;
|
|
29
|
+
|
|
30
|
+
@include gpu_render;
|
|
31
|
+
|
|
21
32
|
// margin-left: 220px;
|
|
22
33
|
// background: #333;
|
|
23
34
|
// .section {
|
|
@@ -42,9 +53,14 @@ body {
|
|
|
42
53
|
border-right: solid 1px #ccc;
|
|
43
54
|
overflow-y: scroll;
|
|
44
55
|
.btn { width: 90%; margin: 0 auto; }
|
|
45
|
-
|
|
46
|
-
|
|
56
|
+
|
|
57
|
+
// @include transform( translateZ( 0 ) );
|
|
58
|
+
// @include transform( translateX( -222px ) );
|
|
59
|
+
|
|
60
|
+
@include transform( translate(-220px,0) );
|
|
61
|
+
|
|
47
62
|
@include transition (all 0.5s ease-in-out);
|
|
63
|
+
|
|
48
64
|
}
|
|
49
65
|
|
|
50
66
|
|
|
@@ -62,7 +78,10 @@ body {
|
|
|
62
78
|
}
|
|
63
79
|
|
|
64
80
|
body.aside-on {
|
|
65
|
-
#aside {
|
|
81
|
+
#aside {
|
|
82
|
+
// @include transform( translateX( 0 ) );
|
|
83
|
+
@include transform( translate(0,0) );
|
|
84
|
+
}
|
|
66
85
|
#mobile_header { color: #069; }
|
|
67
86
|
}
|
|
68
87
|
|
|
@@ -79,7 +98,9 @@ body.aside-on {
|
|
|
79
98
|
@include single_shine( rgba(0,0,0,.23), 1, right, 10px );
|
|
80
99
|
display: block; position: fixed;
|
|
81
100
|
top: 0;
|
|
82
|
-
|
|
101
|
+
|
|
102
|
+
// @include transform( translateX( 0 ) );
|
|
103
|
+
@include transform( translate(0,0) );
|
|
83
104
|
}
|
|
84
105
|
|
|
85
106
|
#mobile_header {
|
|
@@ -322,3 +343,25 @@ ul.list {
|
|
|
322
343
|
}
|
|
323
344
|
|
|
324
345
|
|
|
346
|
+
|
|
347
|
+
|
|
348
|
+
|
|
349
|
+
|
|
350
|
+
|
|
351
|
+
/*only for webkit browsers*/
|
|
352
|
+
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
|
353
|
+
.section.image.fixed{
|
|
354
|
+
// background-size:auto;
|
|
355
|
+
// background-attachment: scroll;
|
|
356
|
+
z-index: 3;
|
|
357
|
+
background-position: center 0%;
|
|
358
|
+
@include backface-visibility(hidden);
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
|
|
363
|
+
|
|
364
|
+
|
|
365
|
+
|
|
366
|
+
|
|
367
|
+
|
|
@@ -766,3 +766,19 @@ $hr-border: $gray-lighter !default;
|
|
|
766
766
|
//** Horizontal offset for forms and lists.
|
|
767
767
|
$component-offset-horizontal: 180px !default;
|
|
768
768
|
|
|
769
|
+
|
|
770
|
+
|
|
771
|
+
|
|
772
|
+
// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
|
|
773
|
+
// magic_styles v-0.0.0.67 additional variables (2015-01-14 12:56)
|
|
774
|
+
// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
|
|
775
|
+
// line | style
|
|
776
|
+
/* 58 */ $section-xs-padding: 10px !default;
|
|
777
|
+
/* 59 */ $section-sm-padding: 30px !default;
|
|
778
|
+
/* 60 */ $section-lg-padding: 80px !default;
|
|
779
|
+
/* 61 */ $section-xl-padding: 120px !default;
|
|
780
|
+
/* 62 */ $section-xxl-padding: 200px !default;
|
|
781
|
+
/* 64 */ // depreacated
|
|
782
|
+
// # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
|
|
783
|
+
|
|
784
|
+
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
<ul class="sub_nav">
|
|
19
19
|
<% sub.each do |lnk, path| %>
|
|
20
20
|
<% unless Rails.env.production? && %w(reflections slide_boxes).include?( lnk.to_s ) %>
|
|
21
|
-
<li><%= link_to lnk.titleize, "#", class: "app_lnk lst_lnk", data: {target: path} %></li>
|
|
21
|
+
<li><%= link_to lnk == "at_first" ? "Introduction" : lnk.titleize, "#", class: "app_lnk lst_lnk", data: {target: path} %></li>
|
|
22
22
|
<% end %>
|
|
23
23
|
<% end %>
|
|
24
24
|
</ul>
|
|
@@ -68,7 +68,10 @@ CSS:
|
|
|
68
68
|
|
|
69
69
|
<div class="section hard-top">
|
|
70
70
|
<div class="corset tight">
|
|
71
|
-
<h2 class="loud">
|
|
71
|
+
<h2 class="loud">NEWs</h2>
|
|
72
|
+
<hr/>
|
|
73
|
+
<p class="loud"><i class="olicons-hide-filter"></i> <em>rail-ujs.js</em> file optimized for splitted and divided buttons</p>
|
|
74
|
+
<pre><code>//= require magic/ext/rails-ujs</code></pre>
|
|
72
75
|
<hr/>
|
|
73
76
|
<p class="highlight"><i class="olicons-hide-filter"></i> magic-styles update generator</p>
|
|
74
77
|
<p class="loud"><i class="olicons-hide-filter"></i> in the process I often add new variables to the corporate files</p>
|
|
@@ -77,6 +80,19 @@ CSS:
|
|
|
77
80
|
<pre><code>$ rails g magic_stylez:update</code></pre>
|
|
78
81
|
<br/>
|
|
79
82
|
<br/>
|
|
83
|
+
<h4>Changes when update to <small>0.0.0.67</small>:</h4>
|
|
84
|
+
<ul>
|
|
85
|
+
<li>changed some names in <em>corporate/varriables</em>!</li>
|
|
86
|
+
</ul>
|
|
87
|
+
<p>
|
|
88
|
+
With Version <strong>0.0.0.67</strong> Sections have more bootstrap like name, like <code>.section.section-xs</code> instead of <code>.section.compact</code>.
|
|
89
|
+
<br/>
|
|
90
|
+
Also some variables changed, so <code>$section-flatted-padding</code> becomes <code>$section-sm-padding</code>.
|
|
91
|
+
<br/>
|
|
92
|
+
<br/>
|
|
93
|
+
If you update to <strong>>= 0.0.0.67</strong> be sure to run: $ <code>rails g magic_stylez:update</code> !!!
|
|
94
|
+
</p>
|
|
95
|
+
<hr/>
|
|
80
96
|
<h4>Changes when update to <small>0.0.0.55</small>:</h4>
|
|
81
97
|
<ul>
|
|
82
98
|
<li><em>corporate/typo</em> is removed!</li>
|
|
@@ -87,6 +103,20 @@ CSS:
|
|
|
87
103
|
</div>
|
|
88
104
|
|
|
89
105
|
|
|
106
|
+
<div class="section hard-top">
|
|
107
|
+
<div class="corset tight">
|
|
108
|
+
<h3 class="loud">On to / To Do</h3>
|
|
109
|
+
<hr/>
|
|
110
|
+
<p class="highlight"><i class="icomoon-checkbox-unchecked"></i> update gem to work with new bootstrap structure (<em>outside vendor folder</em>)</p>
|
|
111
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> small paralax plugin to fix fixed-background problem on chrome</p>
|
|
112
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> optimize code, variables</p>
|
|
113
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> clean up unused or double csss</p>
|
|
114
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> learn english :)</p>
|
|
115
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> improve documentation</p>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
|
|
90
120
|
<div class="section hard-top">
|
|
91
121
|
<div class="corset tight">
|
|
92
122
|
<h3>Thanks</h3>
|
|
@@ -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-788d9ed1d184bbb91db637ecb8449a19.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="ejY5unK2faEpuNt0ZxLzOSrMpPGXx4NredOdpigf1jw=" 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-788d9ed1d184bbb91db637ecb8449a19.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="ejY5unK2faEpuNt0ZxLzOSrMpPGXx4NredOdpigf1jw=" 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-788d9ed1d184bbb91db637ecb8449a19.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="ejY5unK2faEpuNt0ZxLzOSrMpPGXx4NredOdpigf1jw=" 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-788d9ed1d184bbb91db637ecb8449a19.css" media="all" rel="stylesheet" />
|
|
10
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/application-c3b7957e5f540e923812984c19ad6a8d.js"></script>
|
|
11
11
|
<meta content="authenticity_token" name="csrf-param" />
|
|
12
|
-
<meta content="
|
|
12
|
+
<meta content="ejY5unK2faEpuNt0ZxLzOSrMpPGXx4NredOdpigf1jw=" 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" />
|
|
@@ -76,6 +76,7 @@
|
|
|
76
76
|
</li>
|
|
77
77
|
<li><a class="lst_lnk" href="#">Layout</a>
|
|
78
78
|
<ul class="sub_nav">
|
|
79
|
+
<li><a class="app_lnk lst_lnk" data-target="layout/at_first" href="#">Introduction</a></li>
|
|
79
80
|
<li><a class="app_lnk lst_lnk" data-target="layout/corset" href="#">Corset</a></li>
|
|
80
81
|
<li><a class="app_lnk lst_lnk" data-target="layout/fullpage_table" href="#">Fullpage Table</a></li>
|
|
81
82
|
<li><a class="app_lnk lst_lnk" data-target="layout/layout_table" href="#">Layout Table</a></li>
|
|
@@ -174,7 +175,10 @@ CSS:
|
|
|
174
175
|
|
|
175
176
|
<div class="section hard-top">
|
|
176
177
|
<div class="corset tight">
|
|
177
|
-
<h2 class="loud">
|
|
178
|
+
<h2 class="loud">NEWs</h2>
|
|
179
|
+
<hr/>
|
|
180
|
+
<p class="loud"><i class="olicons-hide-filter"></i> <em>rail-ujs.js</em> file optimized for splitted and divided buttons</p>
|
|
181
|
+
<pre><code>//= require magic/ext/rails-ujs</code></pre>
|
|
178
182
|
<hr/>
|
|
179
183
|
<p class="highlight"><i class="olicons-hide-filter"></i> magic-styles update generator</p>
|
|
180
184
|
<p class="loud"><i class="olicons-hide-filter"></i> in the process I often add new variables to the corporate files</p>
|
|
@@ -183,6 +187,19 @@ CSS:
|
|
|
183
187
|
<pre><code>$ rails g magic_stylez:update</code></pre>
|
|
184
188
|
<br/>
|
|
185
189
|
<br/>
|
|
190
|
+
<h4>Changes when update to <small>0.0.0.67</small>:</h4>
|
|
191
|
+
<ul>
|
|
192
|
+
<li>changed some names in <em>corporate/varriables</em>!</li>
|
|
193
|
+
</ul>
|
|
194
|
+
<p>
|
|
195
|
+
With Version <strong>0.0.0.67</strong> Sections have more bootstrap like name, like <code>.section.section-xs</code> instead of <code>.section.compact</code>.
|
|
196
|
+
<br/>
|
|
197
|
+
Also some variables changed, so <code>$section-flatted-padding</code> becomes <code>$section-sm-padding</code>.
|
|
198
|
+
<br/>
|
|
199
|
+
<br/>
|
|
200
|
+
If you update to <strong>>= 0.0.0.67</strong> be sure to run: $ <code>rails g magic_stylez:update</code> !!!
|
|
201
|
+
</p>
|
|
202
|
+
<hr/>
|
|
186
203
|
<h4>Changes when update to <small>0.0.0.55</small>:</h4>
|
|
187
204
|
<ul>
|
|
188
205
|
<li><em>corporate/typo</em> is removed!</li>
|
|
@@ -193,6 +210,20 @@ CSS:
|
|
|
193
210
|
</div>
|
|
194
211
|
|
|
195
212
|
|
|
213
|
+
<div class="section hard-top">
|
|
214
|
+
<div class="corset tight">
|
|
215
|
+
<h3 class="loud">On to / To Do</h3>
|
|
216
|
+
<hr/>
|
|
217
|
+
<p class="highlight"><i class="icomoon-checkbox-unchecked"></i> update gem to work with new bootstrap structure (<em>outside vendor folder</em>)</p>
|
|
218
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> small paralax plugin to fix fixed-background problem on chrome</p>
|
|
219
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> optimize code, variables</p>
|
|
220
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> clean up unused or double csss</p>
|
|
221
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> learn english :)</p>
|
|
222
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> improve documentation</p>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
|
|
196
227
|
<div class="section hard-top">
|
|
197
228
|
<div class="corset tight">
|
|
198
229
|
<h3>Thanks</h3>
|
|
@@ -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-788d9ed1d184bbb91db637ecb8449a19.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="ejY5unK2faEpuNt0ZxLzOSrMpPGXx4NredOdpigf1jw=" 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 = {};
|