magic_stylez 0.0.0.27 → 0.0.0.28
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +24 -2
- data/lib/generators/magic_stylez/install_generator.rb +56 -0
- data/lib/magic_stylez/version.rb +1 -1
- data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +43 -15
- data/test/dummy/app/assets/javascripts/views/content/{_box.jst.eco → box.jst.eco} +0 -0
- data/test/dummy/app/assets/javascripts/views/elements/buttons.jst.eco +8 -8
- data/test/dummy/app/assets/javascripts/views/elements/circle_diagram.jst.eco +7 -2
- data/test/dummy/app/assets/javascripts/views/elements/inputs.jst.eco +6 -6
- data/test/dummy/app/assets/javascripts/views/helper/arrow_infos.jst.eco +7 -4
- data/test/dummy/app/assets/javascripts/views/helper/crossed_text.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/helper/divider.jst.eco +12 -5
- data/test/dummy/app/assets/javascripts/views/helper/three_previews.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/icons/glyphicons.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/icons/icomoon.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/icons/magicons.jst.eco +8 -1
- data/test/dummy/app/assets/javascripts/views/icons/olicons.jst.eco +8 -1
- data/test/dummy/app/assets/stylesheets/application.css.scss +1 -3
- data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_colors.scss +28 -22
- data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_fonts.scss +5 -0
- data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_typo.scss +14 -8
- data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_variables.scss +6 -0
- data/test/dummy/app/views/front/_aside.html.erb +3 -1
- data/test/dummy/app/views/front/start.html.erb +49 -27
- data/test/dummy/app/views/templates/fixed-header.html.erb +4 -4
- data/test/dummy/public/html/{fixed-header.html.erb → fixed-header.html} +6 -6
- data/test/dummy/public/html/index.html +65 -45
- data/test/dummy/public/html/{responsive-slidebar.html.erb → responsive-slidebar.html} +2 -2
- data/vendor/assets/stylesheets/corporate/_colors.scss +285 -0
- data/vendor/assets/stylesheets/corporate/_fonts.scss +157 -0
- data/vendor/assets/stylesheets/corporate/_typo.scss +85 -0
- data/vendor/assets/stylesheets/corporate/_variables.scss +640 -0
- data/vendor/assets/stylesheets/magic-min.scss +62 -0
- data/vendor/assets/stylesheets/magic/content/_buttons.scss +25 -1
- data/vendor/assets/stylesheets/magic/content/_forms.scss +25 -0
- data/vendor/assets/stylesheets/magic/content/_inputs.scss +4 -0
- data/vendor/assets/stylesheets/magic/content/_navbar.scss +67 -0
- data/vendor/assets/stylesheets/magic/helper/_divider.scss +48 -20
- data/vendor/assets/stylesheets/magic/layout/_section.scss +33 -32
- data/vendor/assets/stylesheets/magic/lib/_helper.scss +68 -0
- data/vendor/assets/stylesheets/magic/lib/_twbs.scss +4 -4
- metadata +21 -11
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2604b92598681e084f115c2c17583a37b798244e
|
4
|
+
data.tar.gz: b96a41ee41fe954be9b6916d5e7fe942e4cdf342
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2bd6cf50f4d1c01b255f27f7393bfb8d319770c5cef81d80e033e06ccf4a9ca5ac94bb0ee815c104d476dd4460fb2102e0b99d88d94018d9975b927645dff46f
|
7
|
+
data.tar.gz: a1c023a289e79f62140f50d4c6b4a1a495632148975318c64188ec72ff04ab635bb8ace6d861522680328e57e5ec6fb60e24f57f61a8c7974b92ad27efb4133e
|
data/README.md
CHANGED
@@ -9,8 +9,30 @@
|
|
9
9
|
- [bourbon](http://bourbon.io/)
|
10
10
|
|
11
11
|
|
12
|
-
|
13
|
-
|
12
|
+
## Usage
|
13
|
+
|
14
|
+
- add the gem
|
15
|
+
```ruby
|
16
|
+
gem "magic_stylez"
|
17
|
+
```
|
18
|
+
- run the generator
|
19
|
+
```ruby
|
20
|
+
$ rails g magic_stylez:install
|
21
|
+
```
|
22
|
+
- add to stylesheets
|
23
|
+
```sass
|
24
|
+
@import 'magic-stylez'; // import all
|
25
|
+
@import 'magic-min'; // import basic
|
26
|
+
```
|
27
|
+
```css
|
28
|
+
//= 'magic-stylez'; /* import all */
|
29
|
+
//= 'magic-min'; /* import basic */
|
30
|
+
```
|
31
|
+
- add to javascripts:
|
32
|
+
```javascript
|
33
|
+
//= 'magic-stylez'; /* import all */
|
34
|
+
//= 'magic-min'; /* import basic */
|
35
|
+
```
|
14
36
|
|
15
37
|
|
16
38
|
|
@@ -0,0 +1,56 @@
|
|
1
|
+
# encoding: utf-8
|
2
|
+
module MagicStylez
|
3
|
+
module Generators
|
4
|
+
class InstallGenerator < ::Rails::Generators::Base
|
5
|
+
include Thor::Actions
|
6
|
+
|
7
|
+
desc "Creates a corporate folder to customize magic-stylez."
|
8
|
+
|
9
|
+
source_root("#{::MagicStylez::Rails::Engine.root}")
|
10
|
+
destination_root = "#{::Rails.root}"
|
11
|
+
|
12
|
+
def initial_desc
|
13
|
+
puts(' * * * * * * * * * * * * * * * * * * * * * * * * * * ')
|
14
|
+
puts(' - - - - - - - - - - M A G I C S T Y L E Z - - - - - - - - - - ')
|
15
|
+
puts(' * * * * * * * * * * * * * * * * * * * * * * * * * * ')
|
16
|
+
end
|
17
|
+
|
18
|
+
def copy_corporate
|
19
|
+
puts("...")
|
20
|
+
empty_directory "app/assets/stylesheets/corporate"
|
21
|
+
%w(colors fonts typo variables).each do |that|
|
22
|
+
copy_file "vendor/assets/stylesheets/corporate/_#{that}.scss", "app/assets/stylesheets/corporate/_#{that}.scss"
|
23
|
+
end
|
24
|
+
puts("...")
|
25
|
+
end
|
26
|
+
|
27
|
+
def end_desc
|
28
|
+
puts("========================================================================================================")
|
29
|
+
puts("- - - - - - - - M A G I C S T Y L E Z - - - - - - - -")
|
30
|
+
puts("--------------------------------------------------------------------------------------------------------")
|
31
|
+
puts(" . . . T O D O s: . . . ")
|
32
|
+
puts(" . . . . . . ")
|
33
|
+
puts(" . . . -> add magic-styles to your app's stylesheets! . . . ")
|
34
|
+
puts(" . . . . . . ")
|
35
|
+
puts(" . . . sass: @import 'magic-stylez'; // import all . . . ")
|
36
|
+
puts(" . . . @import 'magic-min'; // import basic . . . ")
|
37
|
+
puts(" . . . . . . ")
|
38
|
+
puts(" . . . css: //= 'magic-stylez'; // import all . . . ")
|
39
|
+
puts(" . . . //= 'magic-min'; // import basic . . . ")
|
40
|
+
puts(" . . . . . . ")
|
41
|
+
puts(" . . . . . . ")
|
42
|
+
puts(" . . . -> add magic-styles to your app's javascripts! . . . ")
|
43
|
+
puts(" . . . . . . ")
|
44
|
+
puts(" . . . //= 'magic-stylez'; // import all . . . ")
|
45
|
+
puts(" . . . //= 'magic-min'; // import basic . . . ")
|
46
|
+
puts(" . . . . . . ")
|
47
|
+
puts(" . . . -> check the documentation for possible stuff . . . ")
|
48
|
+
puts(" . . . . . . ")
|
49
|
+
puts(" . . . http://berlinmagic.github.io/magic_stylez/ . . . ")
|
50
|
+
puts(" . . . . . . ")
|
51
|
+
puts("========================================================================================================")
|
52
|
+
end
|
53
|
+
|
54
|
+
end
|
55
|
+
end
|
56
|
+
end
|
data/lib/magic_stylez/version.rb
CHANGED
@@ -16,44 +16,72 @@
|
|
16
16
|
|
17
17
|
|
18
18
|
<div class="section flatted">
|
19
|
-
<div class="corset">
|
19
|
+
<div class="corset tight">
|
20
20
|
<p class="loud"><em>Some style helpers used in a lot of our apps.</em></p>
|
21
21
|
</div>
|
22
22
|
</div>
|
23
23
|
|
24
|
-
<div class="section
|
24
|
+
<div class="section hard-top">
|
25
25
|
<div class="corset center_text">
|
26
26
|
<h2>Warning</h2>
|
27
|
-
<p class="loud">This Gem is still work in process
|
27
|
+
<p class="loud">This Gem is still work in process!</p>
|
28
28
|
<p class="loud">Its just the start to outsource my style framework (I mostly rebuild for every app).</p>
|
29
29
|
<p class="loud">It is mostly driven by my own habits, so I don't know if its usefull for others.</p>
|
30
30
|
</div>
|
31
31
|
</div>
|
32
32
|
|
33
|
-
<div class="section
|
34
|
-
<div class="corset">
|
33
|
+
<div class="section hard-top">
|
34
|
+
<div class="corset tight">
|
35
35
|
<h3>Dependencies</h3>
|
36
|
-
<ul class="list">
|
36
|
+
<ul class="list loud">
|
37
37
|
<li><a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a></li>
|
38
38
|
<li><a href="http://bourbon.io/" target="_blank">bourbon</a></li>
|
39
39
|
</ul>
|
40
|
+
<p>(both are allready included)</p>
|
40
41
|
</div>
|
41
42
|
</div>
|
42
43
|
|
43
|
-
<div class="section
|
44
|
-
<div class="corset">
|
44
|
+
<div class="section hard-top">
|
45
|
+
<div class="corset tight">
|
46
|
+
<h3 class="loud">Usage</h3>
|
47
|
+
<hr/>
|
48
|
+
<p class="highlight"><i class="olicons-hide-filter"></i> add the gem to your applications gemfile</p>
|
49
|
+
<pre><code>gem "magic_stylez"</code></pre>
|
50
|
+
<br/>
|
51
|
+
<p class="highlight"><i class="olicons-hide-filter"></i> run the generator</p>
|
52
|
+
<pre><code>$ rails g magic_stylez:install</code></pre>
|
53
|
+
<br/>
|
54
|
+
<p class="highlight"><i class="olicons-hide-filter"></i> add to stylesheets</p>
|
55
|
+
<pre><code>SASS:
|
56
|
+
@import 'magic-stylez'; // import all
|
57
|
+
@import 'magic-min'; // import basic
|
58
|
+
CSS:
|
59
|
+
//= 'magic-stylez'; /* import all */
|
60
|
+
//= 'magic-min'; /* import basic */</code></pre>
|
61
|
+
<br/>
|
62
|
+
<p class="highlight"><i class="olicons-hide-filter"></i> add to javascripts</p>
|
63
|
+
<pre><code> //= 'magic-stylez'; /* import all */
|
64
|
+
//= 'magic-min'; /* import basic */</code></pre>
|
65
|
+
</div>
|
66
|
+
</div>
|
67
|
+
|
68
|
+
|
69
|
+
<div class="section hard-top">
|
70
|
+
<div class="corset tight">
|
45
71
|
<h3>Thanks</h3>
|
46
72
|
<p class="loud">
|
47
|
-
A lot of code for this gem is taken from <a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a>,
|
48
|
-
so thank you guys for the great work
|
73
|
+
A lot of code for this gem is taken from <a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a>,
|
74
|
+
so thank you guys for the great work.
|
75
|
+
</p>
|
76
|
+
<p class="loud">
|
49
77
|
Same goes for <a href="http://bourbon.io/" target="_blank">bourbon</a> thanks for a lightweight helper set.
|
50
78
|
</p>
|
51
79
|
<p class="loud">Also thanks to all the people, how share their knowlegde on <a href="http://stackoverflow.com/" target="_blank">stackoverflow</a>.</p>
|
52
80
|
</div>
|
53
81
|
</div>
|
54
82
|
|
55
|
-
<div class="section
|
56
|
-
<div class="corset">
|
83
|
+
<div class="section hard-top">
|
84
|
+
<div class="corset tight">
|
57
85
|
<h3>Authors</h3>
|
58
86
|
<ul class="list">
|
59
87
|
<li><a href="http://twetzel.github.io/" target="_blank">Torsten Wetzel</a></li>
|
@@ -62,8 +90,8 @@
|
|
62
90
|
</div>
|
63
91
|
</div>
|
64
92
|
|
65
|
-
<div class="section
|
66
|
-
<div class="corset">
|
93
|
+
<div class="section hard-top">
|
94
|
+
<div class="corset tight">
|
67
95
|
<h3>License</h3>
|
68
96
|
<p class="loud">MIT-License</p>
|
69
97
|
</div>
|
@@ -74,7 +102,7 @@
|
|
74
102
|
|
75
103
|
|
76
104
|
|
77
|
-
<div class="section shine-top
|
105
|
+
<div class="section shine-top flatted">
|
78
106
|
<div class="corset">
|
79
107
|
<p class="center_text">© 2014 Torsten Wetzel (berlinmagic UG)</p>
|
80
108
|
</div>
|
File without changes
|
@@ -10,7 +10,7 @@
|
|
10
10
|
<div class="corset tight">
|
11
11
|
|
12
12
|
|
13
|
-
<div class="btn btn-success btn-lg btn-
|
13
|
+
<div class="btn btn-success btn-lg btn-splited">
|
14
14
|
<div class="text">
|
15
15
|
.btn-splited
|
16
16
|
</div>
|
@@ -19,7 +19,7 @@
|
|
19
19
|
</div>
|
20
20
|
</div>
|
21
21
|
|
22
|
-
<div class="btn btn-default btn-lg btn-block btn-splited half
|
22
|
+
<div class="btn btn-default btn-lg btn-block btn-splited half">
|
23
23
|
<div class="icn">
|
24
24
|
<i class="icomoon-globe"></i>
|
25
25
|
</div>
|
@@ -28,7 +28,7 @@
|
|
28
28
|
</div>
|
29
29
|
</div>
|
30
30
|
|
31
|
-
<div class="btn btn-primary btn-lg btn-block btn-divided
|
31
|
+
<div class="btn btn-primary btn-lg btn-block btn-divided">
|
32
32
|
<div class="icn">
|
33
33
|
<i class="icomoon-globe"></i>
|
34
34
|
</div>
|
@@ -37,7 +37,7 @@
|
|
37
37
|
</div>
|
38
38
|
</div>
|
39
39
|
|
40
|
-
<div class="btn btn-warning btn-block btn-divided half
|
40
|
+
<div class="btn btn-warning btn-block btn-divided half">
|
41
41
|
<div class="icn">
|
42
42
|
<i class="icomoon-globe"></i>
|
43
43
|
</div>
|
@@ -46,7 +46,7 @@
|
|
46
46
|
</div>
|
47
47
|
</div>
|
48
48
|
|
49
|
-
<div class="btn btn-danger btn-sm btn-divided
|
49
|
+
<div class="btn btn-danger btn-sm btn-divided">
|
50
50
|
<div class="icn">
|
51
51
|
<i class="icomoon-rocket"></i>
|
52
52
|
</div>
|
@@ -58,7 +58,7 @@
|
|
58
58
|
</div>
|
59
59
|
</div>
|
60
60
|
|
61
|
-
<div class="btn btn-danger btn-xs btn-divided
|
61
|
+
<div class="btn btn-danger btn-xs btn-divided">
|
62
62
|
<div class="icn">
|
63
63
|
<i class="icomoon-rocket"></i>
|
64
64
|
</div>
|
@@ -88,7 +88,7 @@
|
|
88
88
|
<hr/>
|
89
89
|
<% buttons = ["facebook", "google", "paypal", "twitter"]%>
|
90
90
|
<% for btn, i in buttons: %>
|
91
|
-
<div class="btn btn-<%= btn %> btn-lg btn-divided
|
91
|
+
<div class="btn btn-<%= btn %> btn-lg btn-divided">
|
92
92
|
<div class="icn">
|
93
93
|
<i class="icomoon-<%= if btn == "google" then "googleplus" else btn %>"></i>
|
94
94
|
</div>
|
@@ -103,7 +103,7 @@
|
|
103
103
|
<hr/>
|
104
104
|
<% buttons = ["facebook", "google", "paypal", "twitter"]%>
|
105
105
|
<% for btn, i in buttons: %>
|
106
|
-
<div class="btn btn-<%= btn %>-nice btn-lg btn-divided
|
106
|
+
<div class="btn btn-<%= btn %>-nice btn-lg btn-divided">
|
107
107
|
<div class="icn">
|
108
108
|
<i class="icomoon-<%= if btn == "google" then "googleplus" else btn %>"></i>
|
109
109
|
</div>
|
@@ -4,9 +4,14 @@
|
|
4
4
|
</div>
|
5
5
|
</div>
|
6
6
|
|
7
|
+
<div class="section dark flatted">
|
8
|
+
<div class="corset">
|
9
|
+
<h4>dependency:</h4>
|
10
|
+
<code>@import "magic/elements/circle_diagram";</code>
|
11
|
+
</div>
|
12
|
+
</div>
|
7
13
|
|
8
|
-
|
9
|
-
<div class="section">
|
14
|
+
<div class="section hard-top">
|
10
15
|
<div class="corset tight">
|
11
16
|
|
12
17
|
<div class="row">
|
@@ -9,28 +9,28 @@
|
|
9
9
|
<div class="section">
|
10
10
|
<div class="corset tight">
|
11
11
|
|
12
|
-
<div class="inpt-splited input-lg
|
12
|
+
<div class="inpt-splited input-lg">
|
13
13
|
<span class="icn"><i class="icomoon-mail2"></i></span>
|
14
14
|
<div class="inpt">
|
15
15
|
<input placeholder="E-Mail" type="email" value="">
|
16
16
|
</div>
|
17
17
|
</div>
|
18
18
|
|
19
|
-
<div class="inpt-splited
|
19
|
+
<div class="inpt-splited">
|
20
20
|
<span class="icn"><i class="icomoon-mail2"></i></span>
|
21
21
|
<div class="inpt">
|
22
22
|
<input placeholder="E-Mail" type="email" value="">
|
23
23
|
</div>
|
24
24
|
</div>
|
25
25
|
|
26
|
-
<div class="inpt-splited input-sm
|
26
|
+
<div class="inpt-splited input-sm">
|
27
27
|
<span class="icn"><i class="icomoon-mail2"></i></span>
|
28
28
|
<div class="inpt">
|
29
29
|
<input placeholder="E-Mail" type="email" value="">
|
30
30
|
</div>
|
31
31
|
</div>
|
32
32
|
|
33
|
-
<div class="inpt-splited input-xs half
|
33
|
+
<div class="inpt-splited input-xs half">
|
34
34
|
<span class="icn"><i class="icomoon-mail2"></i></span>
|
35
35
|
<div class="inpt">
|
36
36
|
<input placeholder="E-Mail" type="email" value="">
|
@@ -133,7 +133,7 @@
|
|
133
133
|
<div class="corset tight">
|
134
134
|
<div class="row">
|
135
135
|
<div class="col-sm-4">
|
136
|
-
<div class="inpt-splited
|
136
|
+
<div class="inpt-splited">
|
137
137
|
<span class="icn"><i class="icomoon-mail2"></i></span>
|
138
138
|
<div class="inpt">
|
139
139
|
<input placeholder="Email" type="email" value="">
|
@@ -141,7 +141,7 @@
|
|
141
141
|
</div>
|
142
142
|
</div>
|
143
143
|
<div class="col-sm-4">
|
144
|
-
<div class="inpt-splited
|
144
|
+
<div class="inpt-splited">
|
145
145
|
<span class="icn"><i class="icomoon-lock"></i></span>
|
146
146
|
<div class="inpt">
|
147
147
|
<input placeholder="Password" type="password" value="">
|
@@ -4,15 +4,18 @@
|
|
4
4
|
</div>
|
5
5
|
</div>
|
6
6
|
|
7
|
-
<div class="section">
|
7
|
+
<div class="section dark flatted">
|
8
8
|
<div class="corset">
|
9
|
-
|
9
|
+
<h4>dependency:</h4>
|
10
|
+
<code>@import "magic/helper/arrow_hints";</code>
|
10
11
|
</div>
|
11
12
|
</div>
|
12
13
|
|
13
|
-
<div class="section
|
14
|
+
<div class="section hard-top">
|
14
15
|
<div class="corset center_text">
|
15
|
-
|
16
|
+
<br/>
|
17
|
+
<br/>
|
18
|
+
<br/>
|
16
19
|
<button class="btn btn-success help_arrow" data-text=".help_arrow">
|
17
20
|
Some element
|
18
21
|
</button>
|
@@ -4,7 +4,14 @@
|
|
4
4
|
</div>
|
5
5
|
</div>
|
6
6
|
|
7
|
-
<div class="section
|
7
|
+
<div class="section dark flatted">
|
8
|
+
<div class="corset">
|
9
|
+
<h4>dependency:</h4>
|
10
|
+
<code>@import "magic/helper/crossed";</code>
|
11
|
+
</div>
|
12
|
+
</div>
|
13
|
+
|
14
|
+
<div class="section hard-top fat">
|
8
15
|
<div class="corset">
|
9
16
|
|
10
17
|
<h2>Write your layouts faster with the <span class="crossed" data-text="power">help</span> of magic_stylez.</h2>
|
@@ -4,7 +4,14 @@
|
|
4
4
|
</div>
|
5
5
|
</div>
|
6
6
|
|
7
|
-
<div class="section">
|
7
|
+
<div class="section dark flatted">
|
8
|
+
<div class="corset">
|
9
|
+
<h4>dependency:</h4>
|
10
|
+
<code>@import "magic/helper/divider";</code>
|
11
|
+
</div>
|
12
|
+
</div>
|
13
|
+
|
14
|
+
<div class="section hard-top">
|
8
15
|
<div class="corset center_text">
|
9
16
|
<p class="loud press">Divider are a nice hr-like text divider:</p>
|
10
17
|
|
@@ -30,6 +37,8 @@
|
|
30
37
|
</div>
|
31
38
|
</div>
|
32
39
|
|
40
|
+
|
41
|
+
|
33
42
|
<div class="section">
|
34
43
|
<div class="corset tight center_text">
|
35
44
|
|
@@ -41,19 +50,17 @@
|
|
41
50
|
Sign in with Facebook
|
42
51
|
</div>
|
43
52
|
</div>
|
44
|
-
<br/>
|
45
53
|
<div class="divider">
|
46
54
|
<span>or</span>
|
47
55
|
</div>
|
48
|
-
<
|
49
|
-
<div class="inpt-splited input-lg press">
|
56
|
+
<div class="inpt-splited input-lg">
|
50
57
|
<span class="icn"><i class="icomoon-mail2"></i></span>
|
51
58
|
<div class="inpt">
|
52
59
|
<input placeholder="Email" type="email" value="">
|
53
60
|
</div>
|
54
61
|
</div>
|
55
62
|
|
56
|
-
<div class="inpt-splited input-lg
|
63
|
+
<div class="inpt-splited input-lg">
|
57
64
|
<span class="icn"><i class="icomoon-key"></i></span>
|
58
65
|
<div class="inpt">
|
59
66
|
<input placeholder="Password" type="password" value="">
|
@@ -4,7 +4,14 @@
|
|
4
4
|
</div>
|
5
5
|
</div>
|
6
6
|
|
7
|
-
<div class="section
|
7
|
+
<div class="section dark flatted">
|
8
|
+
<div class="corset">
|
9
|
+
<h4>dependency:</h4>
|
10
|
+
<code>@import "magic/helper/three_previews";</code>
|
11
|
+
</div>
|
12
|
+
</div>
|
13
|
+
|
14
|
+
<div class="section hard-top flat-bottom">
|
8
15
|
<div class="corset tight">
|
9
16
|
|
10
17
|
<div class="three-previews">
|