magic_stylez 0.0.0.27 → 0.0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +24 -2
  3. data/lib/generators/magic_stylez/install_generator.rb +56 -0
  4. data/lib/magic_stylez/version.rb +1 -1
  5. data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +43 -15
  6. data/test/dummy/app/assets/javascripts/views/content/{_box.jst.eco → box.jst.eco} +0 -0
  7. data/test/dummy/app/assets/javascripts/views/elements/buttons.jst.eco +8 -8
  8. data/test/dummy/app/assets/javascripts/views/elements/circle_diagram.jst.eco +7 -2
  9. data/test/dummy/app/assets/javascripts/views/elements/inputs.jst.eco +6 -6
  10. data/test/dummy/app/assets/javascripts/views/helper/arrow_infos.jst.eco +7 -4
  11. data/test/dummy/app/assets/javascripts/views/helper/crossed_text.jst.eco +8 -1
  12. data/test/dummy/app/assets/javascripts/views/helper/divider.jst.eco +12 -5
  13. data/test/dummy/app/assets/javascripts/views/helper/three_previews.jst.eco +8 -1
  14. data/test/dummy/app/assets/javascripts/views/icons/glyphicons.jst.eco +8 -1
  15. data/test/dummy/app/assets/javascripts/views/icons/icomoon.jst.eco +8 -1
  16. data/test/dummy/app/assets/javascripts/views/icons/magicons.jst.eco +8 -1
  17. data/test/dummy/app/assets/javascripts/views/icons/olicons.jst.eco +8 -1
  18. data/test/dummy/app/assets/stylesheets/application.css.scss +1 -3
  19. data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_colors.scss +28 -22
  20. data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_fonts.scss +5 -0
  21. data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_typo.scss +14 -8
  22. data/{vendor/assets/stylesheets/magic → test/dummy/app/assets/stylesheets}/corporate/_variables.scss +6 -0
  23. data/test/dummy/app/views/front/_aside.html.erb +3 -1
  24. data/test/dummy/app/views/front/start.html.erb +49 -27
  25. data/test/dummy/app/views/templates/fixed-header.html.erb +4 -4
  26. data/test/dummy/public/html/{fixed-header.html.erb → fixed-header.html} +6 -6
  27. data/test/dummy/public/html/index.html +65 -45
  28. data/test/dummy/public/html/{responsive-slidebar.html.erb → responsive-slidebar.html} +2 -2
  29. data/vendor/assets/stylesheets/corporate/_colors.scss +285 -0
  30. data/vendor/assets/stylesheets/corporate/_fonts.scss +157 -0
  31. data/vendor/assets/stylesheets/corporate/_typo.scss +85 -0
  32. data/vendor/assets/stylesheets/corporate/_variables.scss +640 -0
  33. data/vendor/assets/stylesheets/magic-min.scss +62 -0
  34. data/vendor/assets/stylesheets/magic/content/_buttons.scss +25 -1
  35. data/vendor/assets/stylesheets/magic/content/_forms.scss +25 -0
  36. data/vendor/assets/stylesheets/magic/content/_inputs.scss +4 -0
  37. data/vendor/assets/stylesheets/magic/content/_navbar.scss +67 -0
  38. data/vendor/assets/stylesheets/magic/helper/_divider.scss +48 -20
  39. data/vendor/assets/stylesheets/magic/layout/_section.scss +33 -32
  40. data/vendor/assets/stylesheets/magic/lib/_helper.scss +68 -0
  41. data/vendor/assets/stylesheets/magic/lib/_twbs.scss +4 -4
  42. metadata +21 -11
data/test/dummy/public/html/{responsive-slidebar.html.erb → responsive-slidebar.html} RENAMED
@@ -3,10 +3,10 @@
3
3
  <html>
4
4
  <head>
5
5
  <title>Magic-Stylez</title>
6
- <link href="//berlinmagic.github.io/magic_stylez/assets/application-84c041fc367dd97b158add8b5cc1bdb2.css" media="all" rel="stylesheet" />
6
+ <link href="//berlinmagic.github.io/magic_stylez/assets/application-30d990160e44c5b6df4f8af9d27cb74e.css" media="all" rel="stylesheet" />
7
7
  <script src="//berlinmagic.github.io/magic_stylez/assets/blank-dabc2fee75a487407fe0cb5afbceec09.js"></script>
8
8
  <meta content="authenticity_token" name="csrf-param" />
9
- <meta content="Nxx/s0v4a+wuP12HXihuBB+ZAnRSnC/Bj/d56jizjjE=" name="csrf-token" />
9
+ <meta content="2QEaNnpTAPmpIpX0chCJ9EFDgbgs6uOKuOtBgNx56h4=" 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 = {};
data/vendor/assets/stylesheets/corporate/_colors.scss ADDED
@@ -0,0 +1,285 @@
1
+ //
2
+ // Magic-Stylez - Colors
3
+ //
4
+ // if you like to change values, remove the '!default' flag!
5
+ //
6
+ //
7
+ //== Colors
8
+ //
9
+ // -------------------------
10
+ // Gray colors
11
+ // -------------------------
12
+ $black: #1c1c1c !default;
13
+ $gray-darker: lighten(#000, 13.5%) !default; // #222
14
+ $gray-dark: lighten(#000, 20%) !default; // #333
15
+ $gray: lighten(#000, 33.5%) !default; // #555
16
+ $gray-light: lighten(#000, 60%) !default; // #999
17
+ $gray-lighter: lighten(#000, 93.5%) !default; // #eee
18
+ $gray-soft: #f0f0f0 !default;
19
+ $gray-softer: #f9f9f9 !default;
20
+ $white: #ffffff !default;
21
+ // -------------------------
22
+ // Accent colors
23
+ // -------------------------
24
+ $blue-soft: #9dcfe1 !default;
25
+ $blue-lighter: #d8e7ec !default;
26
+ $blue-light: #0099cc !default;
27
+ $blue: #006699 !default;
28
+ $blue-dark: darken($blue, 15%) !default;
29
+ $green: #006600 !default;
30
+ $red: #9d261d !default;
31
+ $red-dark: darkred !default;
32
+ $yellow: #ffc40d !default;
33
+ $orange: #ff6600 !default;
34
+ $pink: #c3325f !default;
35
+ $purple: #7a43b6 !default;
36
+ $violett: #ac4d83 !default;
37
+ // -------------------------
38
+ // Brand colors
39
+ // -------------------------
40
+ $brand-color: #a0c775 !default;
41
+ $brand-primary: #336699 !default; // twbs-default: #428bca
42
+ $brand-success: #006600 !default; // twbs-default: #5cb85c
43
+ $brand-info: #0099cc !default; // twbs-default: #5bc0de
44
+ $brand-warning: #f0ad4e !default; // twbs-default: #f0ad4e
45
+ $brand-danger: #d9534f !default; // twbs-default: #d9534f
46
+
47
+
48
+
49
+
50
+
51
+ // -------------------------
52
+ // Global Background colors.
53
+ // -------------------------
54
+ $main-bg: darken(#fff, 5%) !default; // result: #f2f2f2
55
+ $body-bg: $main-bg; //** Background color for `<body>`
56
+ $dark-bg: #e5e5e5 !default;
57
+ $soft-bg: #f8f8f8 !default;
58
+ $blue-bg: $blue-soft !default;
59
+ $brand-bg: $brand-color !default;
60
+ $bright-bg: $white !default;
61
+
62
+
63
+ // -------------------------
64
+ // Global Border color
65
+ // -------------------------
66
+ $main-border-color: #ccc !default;
67
+
68
+
69
+ // -------------------------
70
+ // Global Text colors
71
+ // -------------------------
72
+ //** Global text color on `<body>`.
73
+ $text-color: $gray-dark !default;
74
+ //** Global textual link color.
75
+ $link-color: $brand-primary !default;
76
+ //** Link hover color set via `darken()` function.
77
+ $link-hover-color: darken($link-color, 15%) !default;
78
+
79
+
80
+
81
+
82
+
83
+
84
+ //== Components
85
+
86
+ //** Global color for active items (e.g., navs or dropdowns).
87
+ $component-active-color: #fff !default;
88
+ //** Global background color for active items (e.g., navs or dropdowns).
89
+ $component-active-bg: $brand-primary !default;
90
+
91
+
92
+
93
+ // -------------------------
94
+ // Buttons
95
+ // -------------------------
96
+ $btn-default-color: #333 !default;
97
+ $btn-default-bg: #fff !default;
98
+ $btn-default-border: #ccc !default;
99
+
100
+ $btn-primary-color: #fff !default;
101
+ $btn-primary-bg: $brand-primary !default;
102
+ $btn-primary-border: darken($btn-primary-bg, 5%) !default;
103
+
104
+ $btn-success-color: #fff !default;
105
+ $btn-success-bg: $brand-success !default;
106
+ $btn-success-border: darken($btn-success-bg, 5%) !default;
107
+
108
+ $btn-info-color: #fff !default;
109
+ $btn-info-bg: $brand-info !default;
110
+ $btn-info-border: darken($btn-info-bg, 5%) !default;
111
+
112
+ $btn-warning-color: #fff !default;
113
+ $btn-warning-bg: $brand-warning !default;
114
+ $btn-warning-border: darken($btn-warning-bg, 5%) !default;
115
+
116
+ $btn-danger-color: #fff !default;
117
+ $btn-danger-bg: $brand-danger !default;
118
+ $btn-danger-border: darken($btn-danger-bg, 5%) !default;
119
+
120
+ $btn-link-disabled-color: $gray-light !default;
121
+
122
+
123
+ // -------------------------
124
+ // Social Buttons
125
+ // -------------------------
126
+ // Flat Colors
127
+ $btn-facebook-color: #fff !default;
128
+ $btn-facebook-bg: #3b5998 !default;
129
+ $btn-facebook-border: darken($btn-facebook-bg, 5%) !default;
130
+
131
+ $btn-google-color: #fff !default;
132
+ $btn-google-bg: #dd4b39 !default;
133
+ $btn-google-border: darken($btn-google-bg, 5%) !default;
134
+
135
+ $btn-paypal-color: #fff !default;
136
+ $btn-paypal-bg: #1784cb !default; // was #12398c
137
+ $btn-paypal-border: darken($btn-paypal-bg, 5%) !default;
138
+
139
+ $btn-twitter-color: #fff !default;
140
+ $btn-twitter-bg: #00aced !default;
141
+ $btn-twitter-border: darken($btn-twitter-bg, 5%) !default;
142
+
143
+
144
+ // Gradient Colors
145
+ $facebook-gradient-top: lighten($btn-facebook-bg, 7%);
146
+ $facebook-gradient-bottom: darken($btn-facebook-bg, 7%);
147
+ $google-gradient-top: lighten($btn-google-bg, 7%);
148
+ $google-gradient-bottom: darken($btn-google-bg, 7%);
149
+ $twitter-gradient-top: lighten($btn-twitter-bg, 7%);
150
+ $twitter-gradient-bottom: darken($btn-twitter-bg, 7%);
151
+ $paypal-gradient-top: #52b9f4;
152
+ $paypal-gradient-bottom: darken(#1784cb, 5%);
153
+
154
+
155
+
156
+
157
+ //== Forms
158
+ //
159
+ //##
160
+
161
+ //** `<input>` background color
162
+ $input-bg: #fff !default;
163
+ //** `<input disabled>` background color
164
+ $input-bg-disabled: $gray-lighter !default;
165
+
166
+ //** Text color for `<input>`s
167
+ $input-color: $gray !default;
168
+ //** `<input>` border color
169
+ $input-border: #ccc !default;
170
+ //** Border color for inputs on focus
171
+ $input-border-focus: #66afe9 !default;
172
+
173
+ //** Placeholder text color
174
+ $input-color-placeholder: $gray-light !default;
175
+
176
+ $legend-color: $gray-dark !default;
177
+ $legend-border-color: #e5e5e5 !default;
178
+
179
+ //** Background color for textual input addons
180
+ $input-group-addon-bg: $gray-lighter !default;
181
+ //** Border color for textual input addons
182
+ $input-group-addon-border-color: $input-border !default;
183
+
184
+
185
+ //== Tables
186
+ //
187
+ //** Default background color used for all tables.
188
+ $table-bg: transparent !default;
189
+ //** Background color used for `.table-striped`.
190
+ $table-bg-accent: #f9f9f9 !default;
191
+ //** Background color used for `.table-hover`.
192
+ $table-bg-hover: #f5f5f5 !default;
193
+ $table-bg-active: $table-bg-hover !default;
194
+
195
+ //** Border color for table and cell borders.
196
+ $table-border-color: #ddd !default;
197
+
198
+
199
+ //== Dropdowns
200
+ //
201
+ //## Dropdown menu container and contents.
202
+
203
+ //** Background for the dropdown menu.
204
+ $dropdown-bg: #fff !default;
205
+ //** Dropdown menu `border-color`.
206
+ $dropdown-border: rgba(0,0,0,.15) !default;
207
+ //** Dropdown menu `border-color` **for IE8**.
208
+ $dropdown-fallback-border: #ccc !default;
209
+ //** Divider color for between dropdown items.
210
+ $dropdown-divider-bg: #e5e5e5 !default;
211
+
212
+ //** Dropdown link text color.
213
+ $dropdown-link-color: $gray-dark !default;
214
+ //** Hover color for dropdown links.
215
+ $dropdown-link-hover-color: darken($gray-dark, 5%) !default;
216
+ //** Hover background for dropdown links.
217
+ $dropdown-link-hover-bg: #f5f5f5 !default;
218
+
219
+ //** Active dropdown menu item text color.
220
+ $dropdown-link-active-color: $component-active-color !default;
221
+ //** Active dropdown menu item background color.
222
+ $dropdown-link-active-bg: $component-active-bg !default;
223
+
224
+ //** Disabled dropdown menu item background color.
225
+ $dropdown-link-disabled-color: $gray-light !default;
226
+
227
+ //** Text color for headers within dropdown menus.
228
+ $dropdown-header-color: $gray-light !default;
229
+
230
+ //** Deprecated `$dropdown-caret-color` as of v3.1.0
231
+ $dropdown-caret-color: #000 !default;
232
+
233
+
234
+
235
+ //== Navbar
236
+ //
237
+ //##
238
+ $navbar-default-color: #777 !default;
239
+ $navbar-default-bg: #f8f8f8 !default;
240
+ $navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
241
+
242
+ // Navbar links
243
+ $navbar-default-link-color: #777 !default;
244
+ $navbar-default-link-hover-color: #333 !default;
245
+ $navbar-default-link-hover-bg: transparent !default;
246
+ $navbar-default-link-active-color: #555 !default;
247
+ $navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
248
+ $navbar-default-link-disabled-color: #ccc !default;
249
+ $navbar-default-link-disabled-bg: transparent !default;
250
+
251
+ // Navbar brand label
252
+ $navbar-default-brand-color: $navbar-default-link-color !default;
253
+ $navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
254
+ $navbar-default-brand-hover-bg: transparent !default;
255
+
256
+ // Navbar toggle
257
+ $navbar-default-toggle-hover-bg: #ddd !default;
258
+ $navbar-default-toggle-icon-bar-bg: #888 !default;
259
+ $navbar-default-toggle-border-color: #ddd !default;
260
+
261
+
262
+ // Inverted navbar
263
+ // Reset inverted navbar basics
264
+ $navbar-inverse-color: $gray-light !default;
265
+ $navbar-inverse-bg: #222 !default;
266
+ $navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
267
+
268
+ // Inverted navbar links
269
+ $navbar-inverse-link-color: $gray-light !default;
270
+ $navbar-inverse-link-hover-color: #fff !default;
271
+ $navbar-inverse-link-hover-bg: transparent !default;
272
+ $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
273
+ $navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
274
+ $navbar-inverse-link-disabled-color: #444 !default;
275
+ $navbar-inverse-link-disabled-bg: transparent !default;
276
+
277
+ // Inverted navbar brand label
278
+ $navbar-inverse-brand-color: $navbar-inverse-link-color !default;
279
+ $navbar-inverse-brand-hover-color: #fff !default;
280
+ $navbar-inverse-brand-hover-bg: transparent !default;
281
+
282
+ // Inverted navbar toggle
283
+ $navbar-inverse-toggle-hover-bg: #333 !default;
284
+ $navbar-inverse-toggle-icon-bar-bg: #fff !default;
285
+ $navbar-inverse-toggle-border-color: #333 !default;
data/vendor/assets/stylesheets/corporate/_fonts.scss ADDED
@@ -0,0 +1,157 @@
1
+ //
2
+ // Magic-Stylez - Fonts
3
+ //
4
+ // if you like to change values, remove the '!default' flag!
5
+ //
6
+ //
7
+ // F O N T S
8
+ //
9
+
10
+ $sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
11
+ $serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
12
+ $monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
13
+
14
+
15
+ //
16
+ // webfonts
17
+ //
18
+
19
+ // goolge
20
+ // $magicSans: "Open Sans", $sansFontFamily;
21
+ // $magicCondensedSans: "Open Sans Condensed", $sansFontFamily;
22
+ // $magicHandwritten: 'Satisfy', cursive;
23
+
24
+ // typekit (Adobe)
25
+ // $magicSans: "Montserrat", $sansFontFamily;
26
+ // $magicCondensedSans: "Lato", $sansFontFamily;
27
+ // $magicHandwritten: "ff-market-web", cursive;
28
+
29
+ $magicSans: $sansFontFamily;
30
+ $magicCondensedSans: $sansFontFamily;
31
+ $magicHandwritten: 'Gloria Hallelujah', cursive;
32
+
33
+
34
+
35
+
36
+ // Open Sans
37
+ .sans {
38
+ font-family: $magicSans;
39
+ font-weight: 400;
40
+ &.thin, .thin { font-weight: 300; }
41
+ &.regular, .regular { font-weight: 400; }
42
+ &.sbold, .sbold { font-weight: 600; }
43
+ &.bold, .bold { font-weight: 700; }
44
+ &.ebold, .ebold { font-weight: 800; }
45
+ }
46
+ @mixin sansThin {
47
+ // font-family: 'Open Sans', sans-serif;
48
+ font-family: $magicSans;
49
+ font-weight: 300;
50
+ }
51
+ @mixin sansRegular {
52
+ font-family: $magicSans;
53
+ font-weight: 400;
54
+ }
55
+ @mixin sansSemi {
56
+ font-family: $magicSans;
57
+ font-weight: 600;
58
+ }
59
+ @mixin sansBold {
60
+ font-family: $magicSans;
61
+ font-weight: 700;
62
+ }
63
+
64
+
65
+ // Open Sans Condensed
66
+ .sansCondensed {
67
+ font-family: $magicCondensedSans;
68
+ font-weight: 300;
69
+ &.thin, .thin { font-weight: 300; }
70
+ &.bold, .bold { font-weight: 700; }
71
+ }
72
+ @mixin sansCondensedThin {
73
+ font-family: $magicCondensedSans;
74
+ font-weight: 300;
75
+ }
76
+ @mixin sansCondensedBold {
77
+ font-family: $magicCondensedSans;
78
+ font-weight: 700;
79
+ }
80
+
81
+
82
+ // Specials
83
+ .handWrittenFont {
84
+ font-family: $magicHandwritten;
85
+ font-weight: 400;
86
+ }
87
+ @mixin handWrittenFont {
88
+ font-family: $magicHandwritten;
89
+ font-weight: 400;
90
+ }
91
+
92
+
93
+
94
+ // variable
95
+ $smallReadFont: $magicCondensedSans;
96
+ $readFont: $magicSans;
97
+ $bigFont: $magicSans;
98
+ $dekoFont: $magicHandwritten;
99
+
100
+
101
+ // mixin
102
+ @mixin smallReadFont { font-family: $smallReadFont; }
103
+ @mixin readFont { font-family: $readFont; }
104
+ @mixin bigFont { font-family: $bigFont; }
105
+ @mixin dekoFont { font-family: $dekoFont; }
106
+
107
+ .smallReadFont { @include smallReadFont; }
108
+ .readFont { @include readFont; }
109
+ .bigFont { @include bigFont; }
110
+ .dekoFont { @include dekoFont; }
111
+
112
+
113
+
114
+
115
+
116
+
117
+
118
+
119
+
120
+ // C S S - F O N T S
121
+
122
+ @mixin eingabeText { font-family: $lucida-grande; }
123
+
124
+ @mixin profileText {
125
+ font-family: $lucida-grande;
126
+ color: #333;
127
+ font-size: 12px;
128
+ line-height: 20px;
129
+ }
130
+
131
+ @mixin titelText {
132
+ @include sansSemi;
133
+ font-size: 14px;
134
+ line-height: 20px;
135
+ }
136
+
137
+ @mixin subTextSmall {
138
+ @include sansRegular;
139
+ font-size: 12px;
140
+ line-height: 20px;
141
+ }
142
+
143
+
144
+ // ------------------------------- S C H R I F T G R O E S S E N -------------------------------
145
+
146
+ $magicDefaultFontSize: 13px;
147
+ $magicDefaultLineHight: 18px;
148
+
149
+
150
+ @mixin magicDefaultFont {
151
+ @include readFont;
152
+ font-size: $magicDefaultFontSize;
153
+ line-height: $magicDefaultLineHight;
154
+ } // ..
155
+
156
+
157
+