magic_stylez 0.0.0.80 → 0.0.0.81
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 +1 -1
- data/test/dummy/app/assets/javascripts/views/content/banner.jst.eco +96 -0
- data/test/dummy/app/assets/javascripts/views/content/box.jst.eco +138 -0
- data/test/dummy/app/assets/javascripts/views/content/helper.jst.eco +155 -0
- data/test/dummy/app/assets/javascripts/views/helper/text.jst.eco +54 -3
- data/test/dummy/app/assets/stylesheets/application.css.scss +15 -0
- data/test/dummy/app/views/front/start.html.erb +1 -1
- data/vendor/assets/stylesheets/corporate/_colors.scss +1 -1
- data/vendor/assets/stylesheets/magic/content/_banner.scss +73 -23
- data/vendor/assets/stylesheets/magic/content/_box.scss +214 -2
- data/vendor/assets/stylesheets/magic/content/_helper.scss +10 -10
- data/vendor/assets/stylesheets/magic/lib/_text.scss +1 -3
- metadata +7 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7156f6fa1b9315f43c69a62bd3adaecadcd46cd2
|
4
|
+
data.tar.gz: 8dabe3a535cdab284d0bb445047dd3bbb4749fc6
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7aeef4fb4316d81d1c6aff802dc33b45078d0587d494725e3ef1c3fd26e9999dda5d0664c134367358549fe04a5f40a782a7a30a794401344ac664b2c75fc23c
|
7
|
+
data.tar.gz: 05b66c003e3b8e9e357b019e3acd386acc3bf6f4e851c1ea82104119e23d0c7251de6d4e57bd8b9045b0880932676cfc2ca10c8d83a50fad793cb53ffd344c1f
|
data/lib/magic_stylez/version.rb
CHANGED
@@ -126,7 +126,7 @@ CSS:
|
|
126
126
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> npm & bower compatiblity</p>
|
127
127
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> small paralax plugin to fix fixed-background problem on chrome</p>
|
128
128
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> optimize code, variables</p>
|
129
|
-
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> clean up unused or double
|
129
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> clean up unused or double css</p>
|
130
130
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> learn english :)</p>
|
131
131
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> improve documentation</p>
|
132
132
|
</div>
|
@@ -0,0 +1,96 @@
|
|
1
|
+
<div class="section head">
|
2
|
+
<div class="corset">
|
3
|
+
<h1>Boxes</h1>
|
4
|
+
</div>
|
5
|
+
</div>
|
6
|
+
|
7
|
+
<div class="section dark flatted">
|
8
|
+
<div class="corset">
|
9
|
+
<h4>dependency:</h4>
|
10
|
+
<code>@import "magic/content/banner";</code>
|
11
|
+
</div>
|
12
|
+
</div>
|
13
|
+
|
14
|
+
<div class="section hard-top">
|
15
|
+
|
16
|
+
<div class="banner-box responsive-hero with-footer with-header fill berlin">
|
17
|
+
<div class="banner-header brand-color-text">
|
18
|
+
<div class="corset">
|
19
|
+
<h1>.banner-box / .responsive-hero .. .berlin</h1>
|
20
|
+
</div>
|
21
|
+
</div>
|
22
|
+
|
23
|
+
<div class="banner-content">
|
24
|
+
<div class="corset">
|
25
|
+
<p class="loud">This is a banner-box or responsive-hero box for big content .. can contain .banner-conter, .banner-header and banner-footer.</p>
|
26
|
+
</div>
|
27
|
+
</div>
|
28
|
+
|
29
|
+
<div class="banner-footer" id="sign_up_banner">
|
30
|
+
<div class="corset">
|
31
|
+
<div class="row">
|
32
|
+
<div class="col-sm-4 col-sm-offset-4">
|
33
|
+
<!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
|
34
|
+
<button class="btn btn-success btn-block help_arrow" data-text="Go click me!">
|
35
|
+
Click Me
|
36
|
+
</button>
|
37
|
+
</div>
|
38
|
+
</div>
|
39
|
+
</div>
|
40
|
+
</div>
|
41
|
+
|
42
|
+
</div>
|
43
|
+
|
44
|
+
</div>
|
45
|
+
|
46
|
+
<div class="section hard-top">
|
47
|
+
|
48
|
+
<div class="banner-box responsive-hero blue-bg white-text">
|
49
|
+
<div class="banner-header">
|
50
|
+
<div class="corset">
|
51
|
+
<h1>.banner-box / .responsive-hero .. .berlin</h1>
|
52
|
+
</div>
|
53
|
+
</div>
|
54
|
+
|
55
|
+
<div class="banner-content">
|
56
|
+
<div class="corset">
|
57
|
+
<p class="loud">This is a banner-box or responsive-hero box for big content .. can contain .banner-conter, .banner-header and banner-footer.</p>
|
58
|
+
</div>
|
59
|
+
</div>
|
60
|
+
|
61
|
+
<div class="banner-footer" id="sign_up_banner">
|
62
|
+
<div class="corset">
|
63
|
+
<div class="row">
|
64
|
+
<div class="col-sm-4 col-sm-offset-4">
|
65
|
+
<!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
|
66
|
+
<button class="btn btn-success btn-block help_arrow" data-text="Go click me!">
|
67
|
+
Click Me
|
68
|
+
</button>
|
69
|
+
</div>
|
70
|
+
</div>
|
71
|
+
</div>
|
72
|
+
</div>
|
73
|
+
|
74
|
+
</div>
|
75
|
+
|
76
|
+
</div>
|
77
|
+
|
78
|
+
<div class="section hard-top">
|
79
|
+
|
80
|
+
<div class="banner-box responsive-hero brand-two-bg gray-text">
|
81
|
+
|
82
|
+
<div class="banner-content">
|
83
|
+
<div class="corset">
|
84
|
+
<p class="loud">This is a banner-box or responsive-hero box for big content .. can contain .banner-conter, .banner-header and banner-footer.</p>
|
85
|
+
</div>
|
86
|
+
</div>
|
87
|
+
|
88
|
+
</div>
|
89
|
+
|
90
|
+
</div>
|
91
|
+
|
92
|
+
<div class="section hard-top">
|
93
|
+
|
94
|
+
|
95
|
+
|
96
|
+
</div>
|
@@ -22,8 +22,146 @@
|
|
22
22
|
<div class="body">
|
23
23
|
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.
|
24
24
|
</div>
|
25
|
+
<div class="footer">
|
26
|
+
<button class="btn btn-success btn-blank">
|
27
|
+
continue
|
28
|
+
</button>
|
29
|
+
<button class="btn btn-default btn-blank">
|
30
|
+
cancel
|
31
|
+
</button>
|
32
|
+
</div>
|
33
|
+
</div>
|
34
|
+
|
35
|
+
</div>
|
36
|
+
</div>
|
37
|
+
|
38
|
+
<div class="section hard-top">
|
39
|
+
<div class="corset">
|
40
|
+
|
41
|
+
<div class="row">
|
42
|
+
<% for x in ["", "blank", "shadow"]: %>
|
43
|
+
<div class="col-sm-4">
|
44
|
+
<div class="box <%= x %>">
|
45
|
+
<div class="header">
|
46
|
+
<h2>Box.<%= x %></h2>
|
47
|
+
</div>
|
48
|
+
<div class="body">
|
49
|
+
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.
|
50
|
+
</div>
|
51
|
+
<div class="footer">
|
52
|
+
Box-Footer
|
53
|
+
</div>
|
54
|
+
</div>
|
55
|
+
</div>
|
56
|
+
<% end %>
|
57
|
+
</div>
|
58
|
+
|
59
|
+
<br/>
|
60
|
+
|
61
|
+
<div class="row">
|
62
|
+
<% for x in ["blur", "setting", "booking"]: %>
|
63
|
+
<div class="col-sm-4">
|
64
|
+
<div class="box <%= x %>">
|
65
|
+
<div class="header">
|
66
|
+
<h2>Box.<%= x %></h2>
|
67
|
+
</div>
|
68
|
+
<div class="body">
|
69
|
+
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.
|
70
|
+
</div>
|
71
|
+
<div class="footer">
|
72
|
+
Box-Footer
|
73
|
+
</div>
|
74
|
+
</div>
|
75
|
+
</div>
|
76
|
+
<% end %>
|
77
|
+
</div>
|
78
|
+
|
79
|
+
|
80
|
+
</div>
|
81
|
+
</div>
|
82
|
+
|
83
|
+
<div class="section hard-top">
|
84
|
+
<div class="corset">
|
85
|
+
|
86
|
+
<div class="row">
|
87
|
+
<% for x in [1..3]: %>
|
88
|
+
<div class="col-sm-4">
|
89
|
+
<div class="box product">
|
90
|
+
<div class="body">
|
91
|
+
<img class="responsive" src="http://lorempixel.com/400/300/technics/<%= x %>" alt="White 43">
|
92
|
+
<div class="clearfix"></div>
|
93
|
+
<div class="product-name">
|
94
|
+
Product <%= x %>
|
95
|
+
</div>
|
96
|
+
<div class="product-facts">
|
97
|
+
some details you should know
|
98
|
+
</div>
|
99
|
+
</div>
|
100
|
+
</div>
|
101
|
+
</div>
|
102
|
+
<% end %>
|
103
|
+
</div>
|
104
|
+
|
105
|
+
|
106
|
+
</div>
|
107
|
+
</div>
|
108
|
+
|
109
|
+
<div class="section hard-top">
|
110
|
+
<div class="corset">
|
111
|
+
|
112
|
+
<div class="box sign">
|
113
|
+
<div class="header">
|
114
|
+
<h2>Box.sign</h2>
|
115
|
+
</div>
|
116
|
+
<div class="body">
|
117
|
+
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.
|
118
|
+
</div>
|
119
|
+
<div class="footer">
|
120
|
+
Box-Footer
|
121
|
+
</div>
|
25
122
|
</div>
|
26
123
|
|
124
|
+
<br/>
|
125
|
+
<br/>
|
126
|
+
|
127
|
+
<div class="box sign">
|
128
|
+
<div class="screw tl"></div>
|
129
|
+
<div class="screw tr"></div>
|
130
|
+
<div class="screw bl"></div>
|
131
|
+
<div class="screw br"></div>
|
132
|
+
<div class="body">
|
133
|
+
|
134
|
+
<div class="corset">
|
135
|
+
<h1>- Headline -</h1>
|
136
|
+
<br>
|
137
|
+
<br>
|
138
|
+
<h3>More Info</h3>
|
139
|
+
<br/>
|
140
|
+
<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. </p>
|
141
|
+
<br>
|
142
|
+
<br>
|
143
|
+
<h2 class="brand">www.example.com</h2>
|
144
|
+
</div>
|
145
|
+
</div>
|
146
|
+
</div>
|
147
|
+
|
148
|
+
</div>
|
149
|
+
</div>
|
150
|
+
|
151
|
+
<div class="section hard-top">
|
152
|
+
<div class="corset">
|
153
|
+
|
154
|
+
<div class="box paper">
|
155
|
+
<div class="header">
|
156
|
+
<h2>Box.paper</h2>
|
157
|
+
</div>
|
158
|
+
<div class="body">
|
159
|
+
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.
|
160
|
+
</div>
|
161
|
+
<div class="footer">
|
162
|
+
Box-Footer
|
163
|
+
</div>
|
164
|
+
</div>
|
27
165
|
|
28
166
|
</div>
|
29
167
|
</div>
|
@@ -0,0 +1,155 @@
|
|
1
|
+
<div class="section head">
|
2
|
+
<div class="corset">
|
3
|
+
<h1>Content-Helper</h1>
|
4
|
+
</div>
|
5
|
+
</div>
|
6
|
+
|
7
|
+
<div class="section dark flatted">
|
8
|
+
<div class="corset">
|
9
|
+
<h4>dependency:</h4>
|
10
|
+
<code>@import "magic/content/helper";</code>
|
11
|
+
</div>
|
12
|
+
</div>
|
13
|
+
|
14
|
+
<div class="section hard-top">
|
15
|
+
<div class="corset">
|
16
|
+
|
17
|
+
<h2>Colors:</h2>
|
18
|
+
|
19
|
+
<table class="table table-condensed">
|
20
|
+
<thead>
|
21
|
+
<tr>
|
22
|
+
<th>Color</th>
|
23
|
+
<th>Background</th>
|
24
|
+
</tr>
|
25
|
+
</thead>
|
26
|
+
<tbody>
|
27
|
+
<% for clr in ["black", "gray-darker", "gray-dark", "gray", "gray-light", "gray-lighter", "gray-soft", "gray-softer", "white"]: %>
|
28
|
+
<tr>
|
29
|
+
<td class="<%= clr %>">.<%= clr %></td>
|
30
|
+
<td class="bg-<%= clr %>">.bg-<%= clr %></td>
|
31
|
+
</tr>
|
32
|
+
<% end %>
|
33
|
+
<% for clr in ["blue-soft", "blue-lighter", "blue-light", "blue", "blue-dark", "red", "red-dark", "yellow", "orange", "pink", "purple", "violett"]: %>
|
34
|
+
<tr>
|
35
|
+
<td class="<%= clr %>">.<%= clr %></td>
|
36
|
+
<td class="bg-<%= clr %>">.bg-<%= clr %></td>
|
37
|
+
</tr>
|
38
|
+
<% end %>
|
39
|
+
<% for clr in ["brand-color", "brand-primary", "brand-success", "brand-info", "brand-warning", "brand-danger", "brand-one", "brand-two", "brand-three"]: %>
|
40
|
+
<tr>
|
41
|
+
<td class="<%= clr %>">.<%= clr %></td>
|
42
|
+
<td class="bg-<%= clr %>">.bg-<%= clr %></td>
|
43
|
+
</tr>
|
44
|
+
<% end %>
|
45
|
+
</tbody>
|
46
|
+
</table>
|
47
|
+
|
48
|
+
</div>
|
49
|
+
</div>
|
50
|
+
|
51
|
+
<div class="section hard-top">
|
52
|
+
<div class="corset">
|
53
|
+
|
54
|
+
<h2>Distance-Helper:</h2>
|
55
|
+
|
56
|
+
<p>
|
57
|
+
<code>.press</code>
|
58
|
+
=> Margin-Bottom: 20px
|
59
|
+
</p>
|
60
|
+
<p>
|
61
|
+
<code>.half-press / .press-half</code>
|
62
|
+
=> Margin-Bottom: 10px
|
63
|
+
</p>
|
64
|
+
<br/>
|
65
|
+
<p>
|
66
|
+
<code>.no-press</code>
|
67
|
+
=> Margin-Bottom: 0
|
68
|
+
</p>
|
69
|
+
<p>
|
70
|
+
<code>.col-press</code>
|
71
|
+
=> Margin-Bottom: 30px
|
72
|
+
</p>
|
73
|
+
<br/>
|
74
|
+
<p>
|
75
|
+
<code>.press-top</code>
|
76
|
+
=> Margin-Top: 20px
|
77
|
+
</p>
|
78
|
+
<p>
|
79
|
+
<code>.press-left</code>
|
80
|
+
=> Margin-Left: 20px
|
81
|
+
</p>
|
82
|
+
<p>
|
83
|
+
<code>.press-right</code>
|
84
|
+
=> Margin-Right: 20px
|
85
|
+
</p>
|
86
|
+
<br/>
|
87
|
+
<p>
|
88
|
+
<code>.no-press-top</code>
|
89
|
+
=> Margin-Top: 0
|
90
|
+
</p>
|
91
|
+
<p>
|
92
|
+
<code>.no-press-left</code>
|
93
|
+
=> Margin-Left: 0
|
94
|
+
</p>
|
95
|
+
<p>
|
96
|
+
<code>.no-press-right</code>
|
97
|
+
=> Margin-Right: 0
|
98
|
+
</p>
|
99
|
+
|
100
|
+
</div>
|
101
|
+
</div>
|
102
|
+
|
103
|
+
<div class="section hard-top">
|
104
|
+
<div class="corset">
|
105
|
+
|
106
|
+
<h2>Size-Helper:</h2>
|
107
|
+
|
108
|
+
<br/>
|
109
|
+
|
110
|
+
<h4>Padding <small>steps: 0, 5, 10, 15, 20, 30, 40, 50</small></h4>
|
111
|
+
|
112
|
+
<p>
|
113
|
+
<code>.padding_5</code>
|
114
|
+
=> Padding of 5px
|
115
|
+
</p>
|
116
|
+
<p>
|
117
|
+
<code>.v_padding_20</code>
|
118
|
+
=> Vertical-Padding of 20px
|
119
|
+
</p>
|
120
|
+
<p>
|
121
|
+
<code>.h_padding_10</code>
|
122
|
+
=> Horizonbtal-Padding of 10px
|
123
|
+
</p>
|
124
|
+
|
125
|
+
<br/>
|
126
|
+
|
127
|
+
<h4>Margin <small>steps: 0, 5, 10, 15, 20, 30, 40, 50</small></h4>
|
128
|
+
|
129
|
+
<p>
|
130
|
+
<code>.margin_5</code>
|
131
|
+
=> Margin of 5px
|
132
|
+
</p>
|
133
|
+
<p>
|
134
|
+
<code>.v_margin_20</code>
|
135
|
+
=> Vertical-Margin of 20px
|
136
|
+
</p>
|
137
|
+
<p>
|
138
|
+
<code>.h_margin_10</code>
|
139
|
+
=> Horizonbtal-Margin of 10px
|
140
|
+
</p>
|
141
|
+
<br/>
|
142
|
+
<p>
|
143
|
+
<code>.r_40</code>
|
144
|
+
=> Right-Margin of 40px
|
145
|
+
</p>
|
146
|
+
<p>
|
147
|
+
<code>.l_50</code>
|
148
|
+
=> Left-Margin of 50px
|
149
|
+
</p>
|
150
|
+
|
151
|
+
</div>
|
152
|
+
</div>
|
153
|
+
|
154
|
+
|
155
|
+
|
@@ -11,7 +11,58 @@
|
|
11
11
|
</div>
|
12
12
|
</div>
|
13
13
|
|
14
|
-
|
14
|
+
|
15
|
+
<div class="section hard-top">
|
16
|
+
<div class="corset tight">
|
17
|
+
|
18
|
+
<h3>SASS-Helper:</h3>
|
19
|
+
|
20
|
+
<p>
|
21
|
+
<code>@include text_tags { ... };</code>
|
22
|
+
=> h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, span, a { ... }
|
23
|
+
</p>
|
24
|
+
<p>
|
25
|
+
<code>@include text-tags { ... };</code>
|
26
|
+
=> h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, span, a { ... }
|
27
|
+
</p>
|
28
|
+
|
29
|
+
<br/>
|
30
|
+
|
31
|
+
<p>
|
32
|
+
<code>@include text_outline( $color, $blur );</code><br/>
|
33
|
+
i.e.: <i><code class="brand">@include text_outline( #000, 1px );</code></i>
|
34
|
+
<br/>
|
35
|
+
<div class="box bg-gray-lighter">
|
36
|
+
<span class="text_outline_sample loud yellow">text_outline sample</span>
|
37
|
+
</div>
|
38
|
+
</p>
|
39
|
+
|
40
|
+
<p>
|
41
|
+
<code>@include colored_inset_font( $white, $black );</code><br/>
|
42
|
+
i.e.: <i><code class="brand">@include colored_inset_font( rgba(255,255,255,90), rgba(0,0,0,.50) );</code></i>
|
43
|
+
<br/>
|
44
|
+
<div class="box bg-gray-lighter">
|
45
|
+
<span class="colored_inset_font_sample loud yellow">colored_inset_font sample</span>
|
46
|
+
</div>
|
47
|
+
</p>
|
48
|
+
|
49
|
+
<p>
|
50
|
+
<code>@include inset_font( $white, $black );</code><br/>
|
51
|
+
i.e.: <i><code class="brand">@include inset_font( 90, 50);</code></i>
|
52
|
+
<br/>
|
53
|
+
<div class="box bg-gray-lighter">
|
54
|
+
<span class="inset_font_sample loud yellow">inset_font sample</span>
|
55
|
+
</div>
|
56
|
+
</p>
|
57
|
+
|
58
|
+
|
59
|
+
|
60
|
+
</div>
|
61
|
+
</div>
|
62
|
+
|
63
|
+
|
64
|
+
|
65
|
+
<div class="section hard-top">
|
15
66
|
<div class="corset tight">
|
16
67
|
|
17
68
|
<h3>Sizes:</h3>
|
@@ -31,7 +82,7 @@
|
|
31
82
|
</div>
|
32
83
|
|
33
84
|
|
34
|
-
<div class="section">
|
85
|
+
<div class="section hard-top">
|
35
86
|
<div class="corset tight">
|
36
87
|
|
37
88
|
<h3>Styles:</h3>
|
@@ -42,7 +93,7 @@
|
|
42
93
|
|
43
94
|
<p class="bold">Paragraph .bold</p>
|
44
95
|
|
45
|
-
<
|
96
|
+
<br/>
|
46
97
|
|
47
98
|
<p class="sans">Paragraph .sans</p>
|
48
99
|
<p class="sans thin">Paragraph .sans.thin</p>
|
@@ -41,6 +41,7 @@ body {
|
|
41
41
|
|
42
42
|
}
|
43
43
|
|
44
|
+
.testtestest { display: block; position: relative; }
|
44
45
|
|
45
46
|
#aside {
|
46
47
|
// @mixin single_shine( $color, $times: 3, $position: right, $width: 5px, $blur: 5px, $size: 0, $corner: 100 )
|
@@ -334,6 +335,20 @@ ul.list {
|
|
334
335
|
}
|
335
336
|
|
336
337
|
|
338
|
+
// text-helper-samples
|
339
|
+
|
340
|
+
.text_outline_sample {
|
341
|
+
@include text_outline( #000, 1px );
|
342
|
+
}
|
343
|
+
.colored_inset_font_sample {
|
344
|
+
@include colored_inset_font( rgba(255,255,255,90), rgba(0,0,0,.50) );
|
345
|
+
}
|
346
|
+
.inset_font_sample {
|
347
|
+
@include inset_font( 90, 50);
|
348
|
+
}
|
349
|
+
|
350
|
+
|
351
|
+
|
337
352
|
|
338
353
|
#mainFrame {
|
339
354
|
display: block; position: relative;
|
@@ -128,7 +128,7 @@ CSS:
|
|
128
128
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> npm & bower compatiblity</p>
|
129
129
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> small paralax plugin to fix fixed-background problem on chrome</p>
|
130
130
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> optimize code, variables</p>
|
131
|
-
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> clean up unused or double
|
131
|
+
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> clean up unused or double css</p>
|
132
132
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> learn english :)</p>
|
133
133
|
<p class="loud"><i class="icomoon-checkbox-unchecked"></i> improve documentation</p>
|
134
134
|
</div>
|
@@ -15,7 +15,7 @@ $gray-dark: lighten(#000, 20%) !default; // #333
|
|
15
15
|
$gray: lighten(#000, 33.5%) !default; // #555
|
16
16
|
$gray-light: lighten(#000, 60%) !default; // #999
|
17
17
|
$gray-lighter: lighten(#000, 93.5%) !default; // #eee
|
18
|
-
$gray-soft: #
|
18
|
+
$gray-soft: #f3f2f2 !default;
|
19
19
|
$gray-softer: #f9f9f9 !default;
|
20
20
|
$white: #ffffff !default;
|
21
21
|
// -------------------------
|
@@ -1,17 +1,56 @@
|
|
1
|
+
$appColorz: (
|
2
|
+
brand-color: $brand-color,
|
3
|
+
brand-one: $brand-one,
|
4
|
+
brand-two: $brand-two,
|
5
|
+
brand-three: $brand-three,
|
6
|
+
brand-primary: $brand-primary,
|
7
|
+
brand-success: $brand-success,
|
8
|
+
brand-info: $brand-info,
|
9
|
+
brand-warning: $brand-warning,
|
10
|
+
brand-danger: $brand-danger,
|
11
|
+
|
12
|
+
black: $black,
|
13
|
+
gray-darker: $gray-darker,
|
14
|
+
gray-dark: $gray-dark,
|
15
|
+
gray: $gray,
|
16
|
+
gray-light: $gray-light,
|
17
|
+
gray-lighter: $gray-lighter,
|
18
|
+
gray-soft: $gray-soft,
|
19
|
+
gray-softer: $gray-softer,
|
20
|
+
white: $white,
|
21
|
+
|
22
|
+
blue-soft: $blue-soft,
|
23
|
+
blue-lighter: $blue-lighter,
|
24
|
+
blue-light: $blue-light,
|
25
|
+
blue: $blue,
|
26
|
+
blue-dark: $blue-dark,
|
27
|
+
green: $green,
|
28
|
+
red: $red,
|
29
|
+
red-dark: $red-dark,
|
30
|
+
yellow: $yellow,
|
31
|
+
orange: $orange,
|
32
|
+
pink: $pink,
|
33
|
+
purple: $purple,
|
34
|
+
violett: $violett
|
35
|
+
);
|
36
|
+
|
1
37
|
//## Header / Banner
|
2
38
|
.banner-footer, .banner-header
|
3
39
|
{
|
4
40
|
display: block; position: relative;
|
5
41
|
margin: 0; padding: 0;
|
42
|
+
& > .corset { background: transparent; }
|
6
43
|
}
|
7
44
|
|
8
45
|
|
9
|
-
.banner-box.
|
10
|
-
|
11
|
-
}
|
12
|
-
|
13
|
-
.banner-box.responsive-hero {
|
46
|
+
.banner-box, .responsive-hero {
|
47
|
+
position: relative;
|
14
48
|
padding: 0;
|
49
|
+
|
50
|
+
&.press {
|
51
|
+
margin: 0; padding: 10px 0;
|
52
|
+
}
|
53
|
+
|
15
54
|
& > .corset, & > .container {
|
16
55
|
padding-top: 20px; padding-bottom: 20px;
|
17
56
|
&.compact { padding-top: 0; padding-bottom: 0; }
|
@@ -38,17 +77,28 @@
|
|
38
77
|
}
|
39
78
|
&.fixed-bg { background-attachment:fixed; }
|
40
79
|
|
41
|
-
.banner-footer {
|
42
|
-
padding:
|
43
|
-
background-color: rgba(255,255,255,.30);
|
44
|
-
z-index: 15;
|
45
|
-
}
|
46
|
-
.banner-header {
|
47
|
-
padding: 10px 0;
|
80
|
+
.banner-header, .banner-footer {
|
81
|
+
padding: 20px 0;
|
48
82
|
background-color: rgba(255,255,255,.30);
|
49
83
|
z-index: 15;
|
50
84
|
}
|
51
85
|
|
86
|
+
@each $clrName, $clrValue in $appColorz {
|
87
|
+
&.#{$clrName}-bg, .#{$clrName}-bg,
|
88
|
+
&.bg-#{$clrName}, .bg-#{$clrName} {
|
89
|
+
background: #{ $clrValue };
|
90
|
+
}
|
91
|
+
&.#{$clrName}-text, .#{$clrName}-text,
|
92
|
+
&.text-#{$clrName}, .text-#{$clrName} {
|
93
|
+
color: #{ $clrValue };
|
94
|
+
}
|
95
|
+
}
|
96
|
+
|
97
|
+
.banner-content {
|
98
|
+
padding: 50px 0;
|
99
|
+
}
|
100
|
+
|
101
|
+
|
52
102
|
img { max-width: 100%; }
|
53
103
|
}
|
54
104
|
|
@@ -74,22 +124,22 @@
|
|
74
124
|
|
75
125
|
// more than 768px
|
76
126
|
@include responsiveStep-sm {
|
77
|
-
.banner-box.responsive-hero {
|
127
|
+
.banner-box, .responsive-hero {
|
78
128
|
.layout-table > .cell {
|
79
129
|
&.postits { width: 40%; }
|
80
130
|
&.ipad { width: 40%; }
|
81
131
|
&.coffee { width: 20%; }
|
82
132
|
}
|
83
|
-
.banner-footer {
|
84
|
-
|
85
|
-
|
86
|
-
}
|
87
|
-
.banner-header {
|
88
|
-
|
89
|
-
|
90
|
-
}
|
91
|
-
&.with-footer { padding-bottom: 100px !important; }
|
92
|
-
&.with-header { padding-top: 100px !important; }
|
133
|
+
// .banner-footer {
|
134
|
+
// position: absolute;
|
135
|
+
// bottom: 0; left: 0; right: 0;
|
136
|
+
// }
|
137
|
+
// .banner-header {
|
138
|
+
// position: absolute;
|
139
|
+
// top: 0; left: 0; right: 0;
|
140
|
+
// }
|
141
|
+
// &.with-footer { padding-bottom: 100px !important; }
|
142
|
+
// &.with-header { padding-top: 100px !important; }
|
93
143
|
}
|
94
144
|
}
|
95
145
|
|
@@ -15,6 +15,8 @@
|
|
15
15
|
&.no-press { margin: 0; }
|
16
16
|
&.blur { background: rgba(255,255,255,.42); }
|
17
17
|
|
18
|
+
img { max-width: 100%; }
|
19
|
+
|
18
20
|
& > .pic {
|
19
21
|
margin: 0 10px 0 -100px;
|
20
22
|
width: 100px;
|
@@ -41,11 +43,221 @@
|
|
41
43
|
.pic + .header { padding-left: 0; margin-left: 10px; }
|
42
44
|
|
43
45
|
& > .body {
|
44
|
-
padding: 10px
|
46
|
+
padding: 10px;
|
45
47
|
}
|
46
|
-
}
|
47
48
|
|
48
49
|
|
50
|
+
&.sign {
|
51
|
+
padding: 50px 50px 20px;
|
52
|
+
margin: 0 auto;
|
53
|
+
max-width: 800px;
|
54
|
+
text-align: center;
|
55
|
+
@include box-shadow( 0 5px 5px 0 rgba(0,0,0,.2) );
|
56
|
+
h1 { text-shadow: none; }
|
57
|
+
h2 { font-weight: normal; }
|
58
|
+
p, address {
|
59
|
+
display: block; position: relative;
|
60
|
+
margin-bottom: 20px;
|
61
|
+
font-style: normal;
|
62
|
+
line-height: 20px;
|
63
|
+
color: #aaa;
|
64
|
+
}
|
65
|
+
.screw {
|
66
|
+
display: block; position: absolute;
|
67
|
+
@include squareSize(40);
|
68
|
+
background: #ccc;
|
69
|
+
background-color: transparent;
|
70
|
+
// background-image: image-url('abstandhalter.png');
|
71
|
+
background-position: center center;
|
72
|
+
background-repeat: no-repeat;
|
73
|
+
background-size: cover;
|
74
|
+
@include box-shadow( inset 0 0 0 1px #ddd, inset 0 0 0 2px #aaa, inset 0 0 0 3px #ddd, inset 0 0 0 4px #aaa, inset 0 0 0 5px #ddd, inset 0 0 0 6px #aaa);
|
75
|
+
@include border-radius(100px);
|
76
|
+
&.tl { top: 10px; left: 10px; }
|
77
|
+
&.tr { top: 10px; right: 10px; }
|
78
|
+
&.bl { bottom: 10px; left: 10px; }
|
79
|
+
&.br { bottom: 10px; right: 10px; }
|
80
|
+
}
|
81
|
+
& > .body {
|
82
|
+
padding: 20px 50px;
|
83
|
+
margin: 0 auto;
|
84
|
+
max-width: 550px;
|
85
|
+
}
|
86
|
+
}
|
87
|
+
&.paper {
|
88
|
+
padding: 70px 60px 80px 80px;
|
89
|
+
min-height: 650px;
|
90
|
+
h1 {
|
91
|
+
font-size: 24px;
|
92
|
+
font-weight: 600;
|
93
|
+
text-align: center;
|
94
|
+
margin: 0 0 50px;
|
95
|
+
&:before, &:after {
|
96
|
+
content: " - ";
|
97
|
+
}
|
98
|
+
}
|
99
|
+
h2 {
|
100
|
+
margin: 50px 0 10px;
|
101
|
+
font-size: 18px;
|
102
|
+
font-weight: 600;
|
103
|
+
}
|
104
|
+
h3 { font-size: 20px; }
|
105
|
+
h4 { font-size: 18px; }
|
106
|
+
& > *:first-child { margin-top: 0; }
|
107
|
+
}
|
108
|
+
|
109
|
+
&.booking {
|
110
|
+
padding: 0;
|
111
|
+
.header {
|
112
|
+
padding: 10px;
|
113
|
+
background: #ebf5f6;
|
114
|
+
color: $brand-color;
|
115
|
+
.numbers {
|
116
|
+
display: block; position: relative;
|
117
|
+
float: right;
|
118
|
+
& > * {
|
119
|
+
display: block; display: inline-block; position: relative;
|
120
|
+
width: 30px; height: 30px; line-height: 28px;
|
121
|
+
text-align: center;
|
122
|
+
border: solid 1px #fff;
|
123
|
+
@include border-radius( 30px );
|
124
|
+
font-size: 16px;
|
125
|
+
margin: 0 5px;
|
126
|
+
}
|
127
|
+
&.two > .one, &.three > .one, &.three > .two, &.four > .one, &.four > .two, &.four > .three {
|
128
|
+
&:before {
|
129
|
+
display: block; position: absolute;
|
130
|
+
top: 0; right: 0; bottom: 0; left: 0;
|
131
|
+
background: #fff;
|
132
|
+
content: "\e625";
|
133
|
+
font-family: 'icomoon';
|
134
|
+
color: $brand-color;
|
135
|
+
@include border-radius( 30px );
|
136
|
+
font-size: 26px;
|
137
|
+
line-height: 30px;
|
138
|
+
}
|
139
|
+
}
|
140
|
+
}
|
141
|
+
}
|
142
|
+
.subheader {
|
143
|
+
padding: 5px 10px;
|
144
|
+
font-weight: bold;
|
145
|
+
}
|
146
|
+
.body {
|
147
|
+
&.big { padding: 30px; }
|
148
|
+
&.hard-top { border-top: 1px solid $main-border-color; }
|
149
|
+
&.tight { padding: 4px; }
|
150
|
+
&.total_amount {
|
151
|
+
padding: 10px;
|
152
|
+
.overview_calc {
|
153
|
+
border-top: 1px solid rgba(255,255,255,.55);
|
154
|
+
border-bottom: 1px solid $main-border-color;
|
155
|
+
&:first-child { border-top: none; }
|
156
|
+
&:last-child { border-bottom: none; }
|
157
|
+
padding: 5px;
|
158
|
+
.brand { color: $brand-color; text-shadow: 0 1px 0 #fff; font-weight: normal; }
|
159
|
+
}
|
160
|
+
}
|
161
|
+
}
|
162
|
+
form.form {
|
163
|
+
hr, .divider:after {
|
164
|
+
border-top: solid 1px $main-border-color;
|
165
|
+
border-bottom: solid 1px white;
|
166
|
+
}
|
167
|
+
}
|
168
|
+
.dark-body {
|
169
|
+
padding: 5px 0;
|
170
|
+
background: #f4f4f4;
|
171
|
+
border-top: solid 1px $main-border-color;
|
172
|
+
border-bottom: solid 1px $main-border-color;
|
173
|
+
& > .row {
|
174
|
+
@include horizontal-margin( 0 );
|
175
|
+
margin-bottom: 1px;
|
176
|
+
padding: 3px 0;
|
177
|
+
}
|
178
|
+
.row + .row {
|
179
|
+
@include box-shadow( 0 -11px 0px -10px #ccc );
|
180
|
+
}
|
181
|
+
}
|
182
|
+
}
|
183
|
+
|
184
|
+
&.product {
|
185
|
+
text-align: center;
|
186
|
+
.product-name {
|
187
|
+
font-size: 20px;
|
188
|
+
font-weight: bold;
|
189
|
+
line-height: 26px;
|
190
|
+
color: #222;
|
191
|
+
}
|
192
|
+
.product-facts {
|
193
|
+
font-size: 14px;
|
194
|
+
font-weight: normal;
|
195
|
+
line-height: 18px;
|
196
|
+
color: #777;
|
197
|
+
}
|
198
|
+
}
|
199
|
+
|
200
|
+
&.blank { background: transparent; }
|
201
|
+
|
202
|
+
&.setting {
|
203
|
+
padding: 0;
|
204
|
+
|
205
|
+
.header {
|
206
|
+
padding: 5px 10px;
|
207
|
+
margin: 0;
|
208
|
+
line-height: 30px;
|
209
|
+
font-size: 16px;
|
210
|
+
font-weight: 400;
|
211
|
+
background: #e5e5e5;
|
212
|
+
color: #333;
|
213
|
+
i, i:before { color: transparentize($blue, 0.5); font-size: 16px; }
|
214
|
+
h1, h2, h3 {
|
215
|
+
color: #333;
|
216
|
+
font-size: 22px;
|
217
|
+
}
|
218
|
+
p {
|
219
|
+
font-size: 13px;
|
220
|
+
color: #777;
|
221
|
+
}
|
222
|
+
}
|
223
|
+
.sub-header {
|
224
|
+
padding: 10px;
|
225
|
+
background: #f4f4f4;
|
226
|
+
}
|
227
|
+
.body {
|
228
|
+
padding: 10px;
|
229
|
+
&.flat-top { padding-top: 0; }
|
230
|
+
&.fat { padding: 20px; }
|
231
|
+
& > *:last-child { margin-bottom: 0 !important; }
|
232
|
+
}
|
233
|
+
|
234
|
+
table.table {
|
235
|
+
th, td { vertical-align: middle; }
|
236
|
+
}
|
237
|
+
}
|
238
|
+
|
239
|
+
.header {
|
240
|
+
.btn.pull-right + .btn.pull-right { margin-right: 10px; }
|
241
|
+
}
|
242
|
+
.footer {
|
243
|
+
border-top: solid 1px #cccccc;
|
244
|
+
padding: 10px;
|
245
|
+
.btn { margin-top: 0; margin-bottom: 0; }
|
246
|
+
.row > *, .row > * { margin-bottom: 0; }
|
247
|
+
}
|
248
|
+
|
249
|
+
.preview_pic {
|
250
|
+
margin: -10px -10px 10px -10px;
|
251
|
+
padding: 20px;
|
252
|
+
color: #fff;
|
253
|
+
}
|
254
|
+
|
255
|
+
&.press {
|
256
|
+
margin-bottom: 20px !important;
|
257
|
+
}
|
258
|
+
|
259
|
+
}
|
260
|
+
|
49
261
|
|
50
262
|
|
51
263
|
|
@@ -35,19 +35,19 @@
|
|
35
35
|
}
|
36
36
|
|
37
37
|
|
38
|
-
.press { margin-bottom: 20px; }
|
39
|
-
.half-press, .press-half { margin-bottom: 10px; }
|
40
|
-
.no-press { margin-bottom: 0; }
|
41
|
-
.col-press { margin-bottom: 30px; }
|
38
|
+
.press { margin-bottom: 20px !important; }
|
39
|
+
.half-press, .press-half { margin-bottom: 10px !important; }
|
40
|
+
.no-press { margin-bottom: 0 !important; }
|
41
|
+
.col-press { margin-bottom: 30px !important; }
|
42
42
|
|
43
|
-
.press-top { margin-top: 20px; }
|
44
|
-
.press-left { margin-left: 20px; }
|
45
|
-
.press-right { margin-right: 20px; }
|
43
|
+
.press-top { margin-top: 20px !important; }
|
44
|
+
.press-left { margin-left: 20px !important; }
|
45
|
+
.press-right { margin-right: 20px !important; }
|
46
46
|
|
47
47
|
|
48
|
-
.no-press-top { margin-top: 0; }
|
49
|
-
.no-press-left { margin-left: 0; }
|
50
|
-
.no-press-right { margin-right: 0; }
|
48
|
+
.no-press-top { margin-top: 0 !important; }
|
49
|
+
.no-press-left { margin-left: 0 !important; }
|
50
|
+
.no-press-right { margin-right: 0 !important; }
|
51
51
|
|
52
52
|
|
53
53
|
|
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.81
|
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-08-
|
11
|
+
date: 2015-08-14 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -229,9 +229,11 @@ files:
|
|
229
229
|
- test/dummy/app/assets/javascripts/assets.js.coffee.erb
|
230
230
|
- test/dummy/app/assets/javascripts/blank.js.coffee
|
231
231
|
- test/dummy/app/assets/javascripts/views/app/start.jst.eco
|
232
|
+
- test/dummy/app/assets/javascripts/views/content/banner.jst.eco
|
232
233
|
- test/dummy/app/assets/javascripts/views/content/box.jst.eco
|
233
234
|
- test/dummy/app/assets/javascripts/views/content/buttons.jst.eco
|
234
235
|
- test/dummy/app/assets/javascripts/views/content/forms.jst.eco
|
236
|
+
- test/dummy/app/assets/javascripts/views/content/helper.jst.eco
|
235
237
|
- test/dummy/app/assets/javascripts/views/content/inputs.jst.eco
|
236
238
|
- test/dummy/app/assets/javascripts/views/content/labels.jst.eco
|
237
239
|
- test/dummy/app/assets/javascripts/views/effects/noise.jst.eco
|
@@ -441,7 +443,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
441
443
|
version: '0'
|
442
444
|
requirements: []
|
443
445
|
rubyforge_project:
|
444
|
-
rubygems_version: 2.4.
|
446
|
+
rubygems_version: 2.4.5
|
445
447
|
signing_key:
|
446
448
|
specification_version: 4
|
447
449
|
summary: A set of sass helper depending on bourbon and bootstrap-sass.
|
@@ -464,9 +466,11 @@ test_files:
|
|
464
466
|
- test/dummy/app/assets/javascripts/assets.js.coffee.erb
|
465
467
|
- test/dummy/app/assets/javascripts/blank.js.coffee
|
466
468
|
- test/dummy/app/assets/javascripts/views/app/start.jst.eco
|
469
|
+
- test/dummy/app/assets/javascripts/views/content/banner.jst.eco
|
467
470
|
- test/dummy/app/assets/javascripts/views/content/box.jst.eco
|
468
471
|
- test/dummy/app/assets/javascripts/views/content/buttons.jst.eco
|
469
472
|
- test/dummy/app/assets/javascripts/views/content/forms.jst.eco
|
473
|
+
- test/dummy/app/assets/javascripts/views/content/helper.jst.eco
|
470
474
|
- test/dummy/app/assets/javascripts/views/content/inputs.jst.eco
|
471
475
|
- test/dummy/app/assets/javascripts/views/content/labels.jst.eco
|
472
476
|
- test/dummy/app/assets/javascripts/views/effects/noise.jst.eco
|