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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 90564126fff453b58316fd2c99166e57a8f40867
4
- data.tar.gz: 35bbec387a327dbe8e44b5325cbb7614c1ffa5ee
3
+ metadata.gz: 7156f6fa1b9315f43c69a62bd3adaecadcd46cd2
4
+ data.tar.gz: 8dabe3a535cdab284d0bb445047dd3bbb4749fc6
5
5
  SHA512:
6
- metadata.gz: 2886ab71f9a9cd7fc2f1b9918a27951b6439601e51192f8074995c6f53bdca682d069f72d1e66ffc8daf557a0fefc3fc261c9b6b1c23c5497734d1f365ccf5b6
7
- data.tar.gz: cd2506ca2583c24761f2a99c6acec509503f54f0383f5bbebd98d8780a911dcd81e17ac21bc804c84e5bc47e5bb5ed0dc9b53aaa3dfdb548c7ca1c9e63dec559
6
+ metadata.gz: 7aeef4fb4316d81d1c6aff802dc33b45078d0587d494725e3ef1c3fd26e9999dda5d0664c134367358549fe04a5f40a782a7a30a794401344ac664b2c75fc23c
7
+ data.tar.gz: 05b66c003e3b8e9e357b019e3acd386acc3bf6f4e851c1ea82104119e23d0c7251de6d4e57bd8b9045b0880932676cfc2ca10c8d83a50fad793cb53ffd344c1f
@@ -1,3 +1,3 @@
1
1
  module MagicStylez
2
- VERSION = "0.0.0.80"
2
+ VERSION = "0.0.0.81"
3
3
  end
@@ -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 csss</p>
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
- <div class="section">
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
- <hr/>
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 csss</p>
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: #f0f0f0 !default;
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.press {
10
- margin: 0; padding: 10px 0;
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: 10px 0;
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
- position: absolute;
85
- bottom: 0; left: 0; right: 0;
86
- }
87
- .banner-header {
88
- position: absolute;
89
- top: 0; left: 0; right: 0;
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 10px 5px;
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
 
@@ -111,9 +111,7 @@
111
111
  }
112
112
  }
113
113
  @mixin text-tags {
114
- h1, h2, h3, h4, h5, h6,
115
- .h1, .h2, .h3, .h4, .h5, .h6,
116
- p, span, a {
114
+ @include text_tags {
117
115
  @content;
118
116
  }
119
117
  }
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.80
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-02 00:00:00.000000000 Z
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.3
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