web-app-theme 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. data/.gitignore +2 -0
  2. data/LICENSE +21 -0
  3. data/README.md +22 -0
  4. data/Rakefile +25 -0
  5. data/VERSION +1 -0
  6. data/features/step_definitions/layout_steps.rb +55 -0
  7. data/features/step_definitions/themed_steps.rb +19 -0
  8. data/features/support/env.rb +82 -0
  9. data/features/theme_generator.feature +51 -0
  10. data/features/themed_generator.feature +52 -0
  11. data/images/avatar.png +0 -0
  12. data/index.html +474 -0
  13. data/javascripts/jquery-1.3.min.js +19 -0
  14. data/javascripts/jquery.localscroll.js +104 -0
  15. data/javascripts/jquery.scrollTo.js +150 -0
  16. data/lib/web_app_theme.rb +2 -0
  17. data/rails_generators/theme/USAGE +4 -0
  18. data/rails_generators/theme/templates/view_layout_administration.html.erb +48 -0
  19. data/rails_generators/theme/templates/view_layout_sign.html.erb +15 -0
  20. data/rails_generators/theme/templates/web_app_theme_override.css +1 -0
  21. data/rails_generators/theme/theme_generator.rb +39 -0
  22. data/rails_generators/themed/USAGE +4 -0
  23. data/rails_generators/themed/templates/view_edit.html.erb +20 -0
  24. data/rails_generators/themed/templates/view_form.html.erb +10 -0
  25. data/rails_generators/themed/templates/view_new.html.erb +19 -0
  26. data/rails_generators/themed/templates/view_show.html.erb +23 -0
  27. data/rails_generators/themed/templates/view_sidebar.html.erb +13 -0
  28. data/rails_generators/themed/templates/view_signin.html.erb +39 -0
  29. data/rails_generators/themed/templates/view_signup.html.erb +56 -0
  30. data/rails_generators/themed/templates/view_tables.html.erb +54 -0
  31. data/rails_generators/themed/templates/view_text.html.erb +18 -0
  32. data/rails_generators/themed/themed_generator.rb +95 -0
  33. data/stylesheets/base.css +336 -0
  34. data/stylesheets/themes/bec-green/style.css +290 -0
  35. data/stylesheets/themes/bec/style.css +301 -0
  36. data/stylesheets/themes/blue/style.css +280 -0
  37. data/stylesheets/themes/default/style.css +267 -0
  38. data/stylesheets/themes/djime-cerulean/style.css +298 -0
  39. data/stylesheets/themes/drastic-dark/style.css +373 -0
  40. data/stylesheets/themes/kathleene/style.css +272 -0
  41. data/stylesheets/themes/orange/style.css +263 -0
  42. data/stylesheets/themes/reidb-greenish/style.css +301 -0
  43. data/stylesheets/themes/warehouse/style.css +391 -0
  44. data/test/spec_helper.rb +5 -0
  45. data/test/themed_generator_spec.rb +115 -0
  46. metadata +101 -0
@@ -0,0 +1,298 @@
1
+ /**
2
+ * Cerulean web-app-theme made for Djime: http://github.com/mikl/djime/
3
+ *
4
+ * Please note that we're using CSSEdit's @group comment syntax.
5
+ *
6
+ * Colour sheme:
7
+ * Cerulean: #007BA7
8
+ * Bright blue: #01B8DE
9
+ * Near-white: #F7F7F8
10
+ * Silver grey: #C2C8D1
11
+ * Dark blue: #001C26
12
+ *
13
+ * http://www.colourlovers.com/palette/646252/Cerulean_touch
14
+ */
15
+
16
+ /* @group General styles */
17
+
18
+ .small { font-size:11px; }
19
+ .gray { color:#999; }
20
+ .hightlight { background-color:#ffc; }
21
+
22
+ a:link, a:visited, a:hover, a:active, h1, h2, h3 { color: #007BA7; }
23
+
24
+ body {
25
+ color: #222;
26
+ background: #C2C8D1;
27
+ font-family: "Helvetica Neue",Helvetica,Arial,"Bitstream Vera Sans",sans-serif;
28
+ }
29
+
30
+ hr {
31
+ background: #EEF0F0;
32
+ color: #EEF0F0;
33
+ }
34
+
35
+ /* @end */
36
+
37
+ /* @group Header */
38
+
39
+ #header {
40
+ background: #007BA7;
41
+ }
42
+
43
+ #header h1 {
44
+ padding: 20px 0;
45
+ }
46
+
47
+ #header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
48
+ color: #F7F7F8;
49
+ }
50
+
51
+ /* @end */
52
+
53
+ #user-navigation {
54
+ top: auto;
55
+ bottom: 5px;
56
+ right: 25px;
57
+ }
58
+
59
+ #main .block .content {
60
+ background: #F7F7F8;
61
+ padding-top: 1px;
62
+ }
63
+
64
+ #main .block .content h2 {
65
+ margin-left: 15px;
66
+ }
67
+
68
+
69
+
70
+ /* @group Main navigation */
71
+
72
+ #main-navigation ul li {
73
+ padding-left: 0;
74
+ }
75
+
76
+ #main-navigation ul li a {
77
+ padding: 8px 0;
78
+ }
79
+
80
+ #main-navigation ul li a {
81
+ padding: 8px 15px;
82
+ }
83
+
84
+ #main-navigation {
85
+ background-color: #005573;
86
+ }
87
+
88
+ #main-navigation ul li a:hover {
89
+ background-color: #001C26;
90
+ }
91
+
92
+ #main-navigation ul li.active a {
93
+ background-color: #C2C8D1;
94
+ background: -webkit-gradient(linear, left top, left bottom, from(#C2C8D1), to(#C2C8D1), color-stop(0.5, #F7F7F8), color-stop(0.5, #F7F7F8));
95
+
96
+ }
97
+
98
+ /* @end */
99
+
100
+ /* @group Secondary navigation */
101
+
102
+ .secondary-navigation li a:hover {
103
+ background: #005573;
104
+ }
105
+
106
+ .secondary-navigation {
107
+ background: #007BA7;
108
+ border-bottom-width: 7px;
109
+ border-bottom-color: #005573;
110
+ }
111
+
112
+ .secondary-navigation ul li.active, .secondary-navigation ul li.active a:hover {
113
+ background-color: #005573;
114
+ }
115
+
116
+ /* @end */
117
+
118
+ /* @group Sidebar */
119
+
120
+ #sidebar .block {
121
+ background: #F7F7F8;
122
+ }
123
+
124
+ #sidebar h3 {
125
+ background: #007BA7;
126
+ color: #F7F7F8;
127
+ border-bottom: 7px solid #005573;
128
+ }
129
+
130
+ #sidebar ul li a:link, #sidebar ul li a:visited {
131
+ background: #F7F7F8;
132
+ border-bottom: 1px solid #EEF0F0;
133
+ text-decoration: none;
134
+ }
135
+
136
+ #sidebar ul li a:hover, #sidebar ul li a:active {
137
+ background: #005573;
138
+ color: #F7F7F8;
139
+ }
140
+
141
+ /* @end */
142
+
143
+ #main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
144
+ .secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
145
+ #user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
146
+ text-decoration: none;
147
+ color: #F7F7F8;
148
+ }
149
+
150
+ #main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
151
+ color: #001C26;
152
+ }
153
+
154
+ #footer .block {
155
+ color: #F7F7F8;
156
+ background: #005573;
157
+ }
158
+
159
+ #footer .block p {
160
+ margin: 0;
161
+ padding: 10px;
162
+ }
163
+
164
+ /* pagination */
165
+
166
+ .pagination span.current {
167
+ background: #005573;
168
+ color: #F7F7F8;
169
+ border-color: #005573;
170
+ }
171
+
172
+ .pagination a,
173
+ .pagination span {
174
+ color: #001C26;
175
+ border-color: #005573;
176
+ }
177
+
178
+ .pagination a:hover {
179
+ color: #F7F7F8;
180
+ background: #005573;
181
+ }
182
+
183
+ /* tables */
184
+
185
+ .table th {
186
+ background: #C2C8D1;
187
+ color: #001C26;
188
+ }
189
+
190
+ .table td {
191
+ border-bottom:1px solid #EEF0F0;
192
+ }
193
+
194
+ /* forms */
195
+
196
+ .form input.text_field, .form textarea.text_area {
197
+ width: 100%;
198
+ border: 1px solid #001C26;
199
+ }
200
+
201
+ .form input.button {
202
+ background: #EEE;
203
+ color: #001C26;
204
+ padding: 2px 5px;
205
+ border: 1px solid #001C26;
206
+ cursor: pointer;
207
+ }
208
+
209
+ .form .description {
210
+ color: #8C8C8C;
211
+ font-size: .9em;
212
+ }
213
+
214
+ /* @group Flash messages */
215
+
216
+ .flash .message {
217
+ -moz-border-radius: 3px;
218
+ -webkit-border-radius: 3px;
219
+ text-align:center;
220
+ margin: 0 auto 15px;
221
+ }
222
+
223
+ .flash .message p {
224
+ margin:8px;
225
+ }
226
+ .flash .error {
227
+ border: 1px solid #fbb;
228
+ background-color: #fdd;
229
+ }
230
+ .flash .warning {
231
+ border: 1px solid #e0d300;
232
+ background-color: #ffffcc;
233
+ }
234
+ .flash .notice {
235
+ border: 1px solid #8ec4df;
236
+ background-color: #dffaff;
237
+ }
238
+
239
+ /* @end */
240
+
241
+ /* lists */
242
+
243
+ ul.list li {
244
+ border-bottom-color: #EEF0F0;
245
+ border-bottom-width: 1px;
246
+ border-bottom-style: solid;
247
+ }
248
+
249
+ ul.list li .item .avatar {
250
+ border-color: #EEF0F0;
251
+ border-width: 1px;
252
+ border-style: solid;
253
+ padding: 2px;
254
+ }
255
+
256
+ /* box */
257
+
258
+ #box .block {
259
+ background: #F7F7F8;
260
+ }
261
+
262
+ #box .block h2 {
263
+ background: #005573;
264
+ color: #F7F7F8;
265
+ }
266
+
267
+
268
+ /* rounded borders */
269
+
270
+ #main, #main-navigation, #main-navigation li, #main-navigation li a, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li,
271
+ #footer .block, .form input.button, #box .block, #box .block h2 {
272
+ -moz-border-radius-topleft: 4px;
273
+ -webkit-border-top-left-radius: 4px;
274
+ -moz-border-radius-topright: 4px;
275
+ -webkit-border-top-right-radius: 4px;
276
+ }
277
+
278
+ .secondary-navigation li.first a, .secondary-navigation ul li.first, .table th.first, .table th.first {
279
+ -moz-border-radius-topleft: 4px;
280
+ -webkit-border-top-left-radius: 4px;
281
+ }
282
+
283
+ .table th.last {
284
+ -moz-border-radius-topright: 4px;
285
+ -webkit-border-top-right-radius: 4px;
286
+ }
287
+
288
+ .secondary-navigation ul li.first {
289
+ -moz-border-radius-topleft: 4px;
290
+ -webkit-border-top-left-radius: 4px;
291
+ }
292
+
293
+ #sidebar, #sidebar .block, #main .block, #sidebar ul.navigation, ul.list li, #footer .block, .form input.button, #box .block {
294
+ -moz-border-radius-bottomleft: 4px;
295
+ -webkit-border-bottom-left-radius: 4px;
296
+ -moz-border-radius-bottomright: 4px;
297
+ -webkit-border-bottom-right-radius: 4px;
298
+ }
@@ -0,0 +1,373 @@
1
+ /*
2
+
3
+ Drastic Dark
4
+ by Juan Maria Martinez Arce
5
+ juan[at]insignia4u.com
6
+
7
+ light grey: #cfcfcf
8
+ medium grey: #36393d
9
+ dark grey: #1a1a1a
10
+ interactive action yellow #ffff88
11
+ red #cc0000
12
+ light blue #E6EEFC
13
+ dark blue #0B43A8
14
+
15
+ */
16
+
17
+ .small {
18
+ font-size: 11px;
19
+ font-style: normal;
20
+ font-weight: normal;
21
+ text-transform: normal;
22
+ letter-spacing: normal;
23
+ line-height: 1.4em;
24
+ }
25
+
26
+ .gray {
27
+ color:#999999;
28
+ font-family: Georgia, serif;
29
+ font-size: 13px;
30
+ font-style: italic;
31
+ font-weight: normal;
32
+ text-transform: normal;
33
+ letter-spacing: normal;
34
+ line-height: 1.6em;
35
+ }
36
+
37
+ .hightlight {
38
+ background-color: #ffff88;
39
+ font-weight: bold;
40
+ color: #36393d;
41
+ }
42
+
43
+ a:link, a:visited, a:hover, a:active, h1, h2, h3 { color: #36393d; }
44
+ a { -moz-outline: none; }
45
+
46
+ body {
47
+ color: #222;
48
+ background: #cfcfcf;
49
+ font-family: helvetica, arial, sans-serif;
50
+ }
51
+
52
+ hr {
53
+ background: #f0f0ee;
54
+ color: #f0f0ee;
55
+ }
56
+
57
+ #header {
58
+ background: #36393d;
59
+ }
60
+
61
+ #header h1 {
62
+ padding: 15px 0;
63
+ font-size: 28px;
64
+ font-style: normal;
65
+ font-weight: bold;
66
+ text-transform: normal;
67
+ letter-spacing: -1px;
68
+ line-height: 1.2em;
69
+ }
70
+
71
+ #header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
72
+ color: #FFF;
73
+ }
74
+
75
+ #user-navigation {
76
+ top: auto;
77
+ bottom: 5px;
78
+ right: 25px;
79
+ }
80
+
81
+ #user-navigation a.logout {
82
+ background: #cc0000;
83
+ padding: 1px 4px;
84
+ -moz-border-radius: 4px;
85
+ -webkit-border-radius: 3px;
86
+ }
87
+
88
+ #main .block .content {
89
+ background: #FFF;
90
+ padding-top: 1px;
91
+ }
92
+
93
+ #main .block .content h2 {
94
+ margin-left: 15px;
95
+ font-size: 22px;
96
+ font-style: normal;
97
+ font-weight: bold;
98
+ text-transform: normal;
99
+ letter-spacing: -1px;
100
+ line-height: 1.2em;
101
+ }
102
+
103
+ #main .block .content p {
104
+ font-size: 13px;
105
+ font-style: normal;
106
+ font-weight: normal;
107
+ text-transform: normal;
108
+ letter-spacing: normal;
109
+ line-height: 1.45em;
110
+ }
111
+
112
+ #sidebar .block {
113
+ background: #FFF;
114
+ }
115
+
116
+ #sidebar .block h4 {
117
+ font-weight: bold;
118
+ }
119
+
120
+ #sidebar .notice {
121
+ background: #E6EEFC;
122
+ }
123
+
124
+ #sidebar .notice h4 {
125
+ color: #0B43A8;
126
+ }
127
+
128
+ #sidebar h3 {
129
+ background: #36393d;
130
+ color: #FFF;
131
+ border-bottom: 5px solid #1a1a1a;
132
+ }
133
+
134
+ #main-navigation ul li {
135
+ padding-left: 15px;
136
+ }
137
+
138
+ #main-navigation ul li a {
139
+ padding: 8px 0;
140
+ }
141
+
142
+ #main-navigation ul li.active {
143
+ padding: 0;
144
+ margin-left: 15px;
145
+ }
146
+
147
+ #main-navigation ul li.active {
148
+ margin-left: 15px;
149
+ }
150
+
151
+ #main-navigation ul li.active a {
152
+ padding: 8px 15px;
153
+ }
154
+
155
+ #sidebar ul li a:link, #sidebar ul li a:visited {
156
+ background: #FFF;
157
+ border-bottom: 1px solid #F0F0EE;
158
+ text-decoration: none;
159
+ }
160
+
161
+ #sidebar ul li a:hover, #sidebar ul li a:active {
162
+ background: #666666;
163
+ color: #ffffff;;
164
+ }
165
+
166
+ #main-navigation {
167
+ background: #1a1a1a;
168
+ }
169
+
170
+ #main-navigation ul li {
171
+ background: #1a1a1a;
172
+ margin-right: 0;
173
+ }
174
+
175
+ #main-navigation ul li.active {
176
+ background: #f0f0ee;
177
+ }
178
+
179
+ #main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
180
+ .secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
181
+ #user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
182
+ text-decoration: none;
183
+ color: #FFF;
184
+ }
185
+
186
+ .secondary-navigation li a:hover {
187
+ background: #666666;
188
+ }
189
+
190
+ #main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
191
+ color: #1a1a1a;
192
+ }
193
+
194
+ .secondary-navigation {
195
+ background: #36393d;
196
+ border-bottom-color: #1a1a1a;
197
+ }
198
+
199
+ .secondary-navigation ul li.active, .secondary-navigation ul li.active a:hover {
200
+ background-color: #1a1a1a;
201
+ }
202
+
203
+ #footer .block {
204
+ color: #FFF;
205
+ background: #1a1a1a;
206
+ }
207
+
208
+ #footer .block p {
209
+ margin: 0;
210
+ padding: 10px;
211
+ }
212
+
213
+ /* pagination */
214
+
215
+ .pagination a, .pagination span {
216
+ background: #cfcfcf;
217
+ -moz-border-radius: 3px;
218
+ border: 1px solid #c1c1c1;
219
+ }
220
+
221
+ .pagination span.current {
222
+ background: #36393d;
223
+ color: #FFF;
224
+ border: 1px solid #36393d;
225
+ }
226
+
227
+ .pagination a {
228
+ color: #1a1a1a;
229
+ }
230
+
231
+ .pagination a:hover {
232
+ border: 1px solid #666;
233
+ }
234
+
235
+ /* tables */
236
+
237
+ .table th {
238
+ background: #36393d;
239
+ color: #FFF;
240
+ }
241
+
242
+ .table td {
243
+ border-bottom:1px solid #F0F0EE;
244
+ }
245
+
246
+ .table tr.even {
247
+ background: #ebebeb;
248
+ }
249
+
250
+ /* forms */
251
+
252
+ .form label.label {
253
+ color: #666666;
254
+ }
255
+
256
+ .form input.text_field, .form textarea.text_area {
257
+ width: 100%;
258
+ border: 1px solid #cfcfcf;
259
+ }
260
+
261
+ .form input.button {
262
+ background: #cfcfcf;
263
+ -moz-border-radius: 5px;
264
+ border: 1px solid #c1c1c1;
265
+ padding: 2px 5px;
266
+ cursor: pointer;
267
+ color: #36393d;
268
+ font-weight: bold;
269
+ font-size: 11px;
270
+ }
271
+
272
+ .form input.button:hover {
273
+ border: 1px solid #666;
274
+ }
275
+
276
+ .form .description {
277
+ font-style: italic;
278
+ color: #8C8C8C;
279
+ font-size: .9em;
280
+ }
281
+
282
+ .form .navform a {
283
+ color: #cc0000;
284
+ }
285
+
286
+ /* flash-messages */
287
+ .flash .message {
288
+ -moz-border-radius: 3px;
289
+ -webkit-border-radius: 3px;
290
+ text-align:center;
291
+ margin: 0 auto 15px;
292
+
293
+ }
294
+
295
+ .flash .message p {
296
+ margin:8px;
297
+ }
298
+ .flash .error {
299
+ border: 1px solid #fbb;
300
+ background-color: #fdd;
301
+ }
302
+ .flash .warning {
303
+ border: 1px solid #fffaaa;
304
+ background-color: #ffffcc;
305
+ }
306
+ .flash .notice {
307
+ border: 1px solid #1FDF00;
308
+ background-color: #BBFFB6;
309
+ }
310
+
311
+ /* lists */
312
+
313
+ ul.list li {
314
+ border-bottom-color: #F0F0EE;
315
+ border-bottom-width: 1px;
316
+ border-bottom-style: solid;
317
+ }
318
+
319
+ ul.list li .item .avatar {
320
+ border-color: #F0F0EE;
321
+ border-width: 1px;
322
+ border-style: solid;
323
+ padding: 2px;
324
+ }
325
+
326
+ /* box */
327
+
328
+ #box .block {
329
+ background: #FFF;
330
+ }
331
+
332
+ #box .block h2 {
333
+ background: #36393d;
334
+ color: #FFF;
335
+ }
336
+
337
+
338
+ /* rounded borders */
339
+
340
+ #main, #main-navigation, #main-navigation li, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li,
341
+ #footer .block, .form input.button, #box .block, #box .block h2 {
342
+ -moz-border-radius-topleft: 4px;
343
+ -webkit-border-top-left-radius: 4px;
344
+ -moz-border-radius-topright: 4px;
345
+ -webkit-border-top-right-radius: 4px;
346
+ }
347
+
348
+ .secondary-navigation li.first a, .secondary-navigation ul li.first, .table th.first, .table th.first {
349
+ -moz-border-radius-topleft: 4px;
350
+ -webkit-border-top-left-radius: 4px;
351
+ }
352
+
353
+ .table th.last {
354
+ -moz-border-radius-topright: 4px;
355
+ -webkit-border-top-right-radius: 4px;
356
+ }
357
+
358
+ .secondary-navigation ul li.first {
359
+ -moz-border-radius-topleft: 4px;
360
+ -webkit-border-top-left-radius: 4px;
361
+ }
362
+
363
+ #sidebar, #sidebar .block, #main .block, #sidebar ul.navigation, ul.list li, #footer .block, .form input.button, #box .block {
364
+ -moz-border-radius-bottomleft: 4px;
365
+ -webkit-border-bottom-left-radius: 4px;
366
+ -moz-border-radius-bottomright: 4px;
367
+ -webkit-border-bottom-right-radius: 4px;
368
+ }
369
+
370
+ .secondary-navigation {
371
+ border-bottom-width: 5px;
372
+ }
373
+