Added some fixes for question output, and for comments
[shapado:shapado.git] / app / stylesheets / app / _question.sass
1 // ========================================================================
2 //    Document          :   _question.sass
3 //    Created on        :   Nov14 - 2010, 20:29 pm
4 //    Author            :   @dgfrancisco
5 //    Client                    :   Shapado
6 //    Description       :   Estilos para los despliegues de las preguntas
7 //========================================================================
8 .question
9   #main-content-wrap
10     border: none
11     background: transparent
12
13 /* Main Question */
14 //========================================================================
15 section.main-question
16   +normal-radius
17   border: 1px solid #e5e5e5
18   background: #fff url("/images/q-icon-medium.gif") 15px 15px  no-repeat
19   margin-bottom: 15px
20   position: relative  
21   ul.tag-list
22     margin-left: 45px
23   h1
24     font-size: 26px
25     line-height: 28px
26     font-weight: bold
27     margin: 10px 20px 10px 45px
28     &.version
29       font-size: 18px
30       line-height: 20 px
31       margin: 5px 20px 5px 45px
32     br
33       margin-bottom: 10px
34     small
35       a
36         font-size: 12px
37         color: #000
38         font-style: italic !important        
39         &:hover
40           border-bottom: 1px dotted
41     small.version
42       font-size: 15px      
43       font-style: italic !important
44     small.current
45       color: #c00
46       font-weight: bold
47     small.verion-nav
48       float: right
49       font-size: 12px
50       color: #666
51       a
52         margin: 0 3px
53         color: $orange
54         &:hover
55           border-bottom: 1px dotted
56         &.revert
57           color: #c00
58   .description
59     margin: 0 20px 20px 45px
60     p
61       font-size: 12px
62       line-height: 16px
63       margin: 0 0 10px 0
64       color: #606060
65     img
66       float: left
67       border: 1px solid #e5e5e5
68   .edit
69     position: absolute
70     top: 43px
71     left: 14px
72     a
73       width: 24px
74       height: 24px
75       background: url("/images/edit-icon-big.png") 0 0  no-repeat
76       display: block
77       text-indent: -1000px
78       &:hover
79         background-position: 0 -40px
80
81   /* Main Question - toolbar */
82   //======================================================================
83   .toolbar
84     border-top: 1px solid #e5e5e5
85     ul
86       +normal-radius
87       li
88         float: left
89         display: inline
90         position: relative
91         &:hover
92           visibility: inherit
93         &:hover ul, &.sfHover ul
94           right: -5px
95           top: 25px
96           z-index: 99
97         a
98           display: block
99           position: relative
100           padding: 5px 7px 7px 23px
101           color: #aaa
102           border-right: 1px solid #e5e5e5
103           background: url("/images/question-toolbar-icons-small.png") 5px 5px  no-repeat
104         a:hover
105           color: #000
106           background-color: #f9f9f9 !important
107         a.active
108           background-color: $lightBlue
109           color: #000
110         a.active:hover
111           background-color: $lightBlue !important
112         &.more
113           a
114             background-position: 5px -402px
115           a:hover
116             background-color: #e5e5e5 !important
117             color: #000
118         &.more:hover
119           background-color: #e5e5e5 !important
120         &.answer
121           a
122             background-position: 5px 5px
123         &.comment
124           a
125             background-position: 5px -49px
126           a:hover, a.active
127             background-position: 5px -25px
128         &.follow
129           a.follow-q
130             background-position: 6px -330px
131           a.follow-q:hover
132             background-position: 6px -306px
133           a.unfollow-q
134             background-position: 6px -378px
135           a.unfollow-q:hover
136             background-position: 6px -354px
137         &.spam
138           a
139             background-position: 5px -162px
140           a:hover, a.active
141             background-position: 5px -138px
142         &.share_on
143           a
144             background-position: 5px -219px
145           a:hover, a.active
146             background-position: 5px -195px
147         &.activity
148           a
149             background-position: 5px -275px
150           a:hover
151             background-position: 5px -251px
152         &.followUp
153           a
154             background-position: 5px -275px
155         &.flag
156           a
157             background-position: 5px -275px
158         &.close
159           a
160             background-position: 5px -275px
161         &.delete
162           a
163             background-position: 5px -275px
164         &.ban
165           a
166             background-position: 5px -275px
167         &.open
168           a
169             background-position: 5px -275px
170         &.edit-q
171           a
172             background-position: 5px -275px
173         ul
174           position: absolute
175           top: -999em
176           width: 130px
177           left: -1px
178           +none-radius
179           li:first-child
180             border-top: 1px solid #ddd
181           li
182             width: 100%
183             border-left: 1px solid #ddd
184             border-bottom: 1px solid #ddd
185             background-color: #fff
186             a:first-letter
187               text-transform: uppercase              
188       
189       
190 /* Main Question - Tags */
191 //======================================================================== 
192 ul.tag-list
193   margin: 0 0 10px 0
194   float: left
195   width: 100% !important  
196   li, span.tag
197     float: left
198     display: inline
199     margin: 0 0 7px 0
200     a
201       background: url("/images/tag-back-lt.png") 0 0  no-repeat
202       margin: 0 0 0 8px
203       font-size: 11px
204       padding: 1px 5px 2px 13px
205       color: #666
206     a:hover
207       background: url("/images/tag-back-hover.png") 0 0  no-repeat
208       color: #000
209     &.title
210       font-weight: bolder
211       font-size: 12px
212       margin-top: 1px
213   .retag-form
214     background-color: #e5e5e5
215     padding: 15px
216     width: 100% !important
217     margin-bottom: 20px
218     label
219       font-size: 15px
220       font-weight: bold
221       margin-bottom: 5px   
222     .tagwrapper
223       border: 1px solid #ccc !important
224       min-height: 20px !important
225       padding: 5px 5px 3px 5px !important
226       font-size: 11px
227       margin-bottom: 10px
228       line-height: 11px
229       width: 93.5% !important
230       ul
231         margin: 0 2px !important
232         padding: 0 !important
233         border: 0px !important
234         border: none
235         li, li:hover
236           margin: 0 !important
237           padding: 0 !important          
238         a, a.ui-state-hover, a:hover, span:hover 
239           padding: 0px 5px 2px 13px !important
240           margin: 0 !important
241           background: url("/images/tag-back-lt.png") 0 50% no-repeat !important  
242           border: none !important
243           .remove-tag
244             padding: 0 !important
245             margin: 0 !important
246       input.autocomplete_for_tags
247         padding: 2px 5px 1px 5px !important
248         font-size: 11px
249         line-height: 11px
250     .buttons
251       text-align: right
252       clear: both  
253       margin: 15px 0 0 0
254       padding: 0px 40px 0 0 
255       input
256         +orange-gradient
257         border: none
258         font-size: 14px
259         padding: 5px 10px
260         color: #fff
261         width: auto
262  
263 /* Main Question - Answers*/
264 //========================================================================
265 #answers-content-wrap
266   +normal-radius
267   border: 1px solid #e5e5e5
268   background-color: #fff
269   clear: both
270   display: block
271   padding: 0 0 20px 0
272   header
273     h3
274       background: url("/images/ans-icon-medium.gif") 10px 10px  no-repeat
275       font-size: 18px
276       padding: 11px 0 10px 40px
277   section.filters
278     ul
279       border-top: 1px solid $blue
280       background-color: $lightBlue
281       border-bottom-color: #bee5e7
282     ul.newest
283       li.newest-active
284         a
285           border-color: $blue
286           color: #000
287           font-weight: bold
288     ul.votes
289       li.votes-active
290         a
291           border-color: $blue
292           color: #000
293           font-weight: bold
294     ul.oldest
295       li.oldest-active
296         a
297           border-color: $blue
298           color: #000
299           font-weight: bold
300
301 /* Main Question - Each Answer */
302 //========================================================================
303 article
304   border-bottom: 1px solid #e5e5e5
305   padding: 5px 10px 0 10px
306   clear: both
307   display: block
308   .content
309     clear: both
310     float: none
311     display: block
312     padding: 0 10px
313   .winner
314     float: left
315     margin-right: 10px
316   p
317     font-size: 12px
318     line-height: 15px
319     color: #888
320   h4
321     font-size: 12px
322     background: url("/images/ans-icon-small.gif") 0 4px  no-repeat
323     padding: 15px 10px 0 8px
324     float: left
325     margin: 0 0 10px 0
326     img.gravatar
327       float: left
328       margin: -5px 3px 0 0
329       border: 1px solid #fff
330     a:hover
331       border-bottom: 1px dotted
332     i
333       font-size: 10px
334       font-style: italic
335       color: #999
336   .thumb
337     width: 190px
338     height: 140px
339     position: relative
340     float: left
341     margin: 0 10px 10px 0
342     img.video_thumbnail
343       width: 100%
344       height: 100%
345       cursor: pointer
346     img.play_button
347       border: none
348       width: 38px
349       height: 33px
350       position: absolute
351       bottom: 5px
352       right: 5px
353       cursor: pointer
354
355 /* Main Question - Each comment inside of each answare */
356 //========================================================================
357 article.comment
358   border-bottom: none
359   margin: 0
360   border-top: 1px dotted #f1f1f1
361   padding: 10px 10px 0 60px
362   p
363     color: #666
364   h4
365     background: url("/images/question-toolbar-icons-small.png") 0 -53px  no-repeat
366     float: left
367     padding: 3px 0 3px 20px
368     margin: 0 0 5px -20px
369     font-weight: bold
370     a
371       &:hover
372   .toolbar
373     margin: 0 0 0 10px !important
374
375 /* Editors form output */
376 //======================================================================== 
377 .article-actions
378   float: right
379   margin: 10px 5px 0 0
380   ul
381     li.current
382     li
383       float: left
384       display: inline
385       position: relative
386       background-color: #f1f1f1
387       margin: 0 0 0 3px
388       &:hover
389         visibility: inherit
390       &:hover ul, &.sfHover ul
391         left: -3px
392         top: 21px
393         z-index: 99
394       a
395         display: block
396         position: relative
397         padding: 4px 7px
398         color: #aaa
399       a:hover
400         color: #000
401         background-color: #ddd
402         border: none
403       a.active
404         background-color: $lightBlue
405         color: #000
406       a.active:hover
407         background-color: $lightBlue !important
408       ul
409         position: absolute
410         top: -999em
411         width: 130px
412         left: -1px
413         +none-radius
414         li:first-child
415           border-top: 1px solid #ddd
416         li
417           width: 100%
418           border-left: 1px solid #ddd
419           border-right: 1px solid #ddd
420           border-bottom: 1px solid #ddd
421           background-color: #fff
422           a:first-letter
423             text-transform: uppercase
424     li.votes
425       form
426         margin: 0
427         width: auto
428       p
429         width: auto !important
430         text-align: center
431         padding: 3px 0 0 0
432         span
433           width: auto !important
434         button
435           height: 21px
436           width: 22px
437           border: none
438           margin-top: -3px
439           &.negative
440             float: left
441             margin-right: 7px
442             background: url("/images/question-toolbar-icons-small.png") 5px -403px  no-repeat
443             border-right: 1px solid #ddd
444             &:hover
445               background-color: #f00
446               background-position: 5px -418px
447           &.positive
448             float: right
449             margin-left: 7px
450             background: url("/images/question-toolbar-icons-small.png") 5px -450px  no-repeat
451             border-left: 1px solid #ddd
452             &:hover
453               background-color: #0a0
454               background-position: 5px -435px
455
456 /*
457 #panel-comments
458   background-color: #f1f1f1
459   clear: both
460   margin: 0 0 10px 0
461   form
462     padding: 15px
463     fieldset
464     leyend
465       font-size: 16px
466       clear: both
467       float: none
468       margin: 0 0 10px 0
469     textarea
470       min-height: 100px
471       width: 100%
472       margin: 10px 0 0 0
473       padding: 10px
474       boder: 1px solid #ccc
475     input
476       +blue-gradient
477       border: none
478       font-size: 14px
479       margin: 3px 1px 0 5px
480       padding: 6px 11px
481       color: #fff
482       width: auto
483     .cancel
484       color: #c00
485       &:hover
486         border-bottom: 1px dotted
487   .buttons
488     float: right
489
490 /* Closed reasons */
491 //========================================================================
492 #close_reason
493   display: block
494   clear: both
495   text-align: center
496   font-size: 14px
497   font-weight: bold
498   padding: 10px 0 !important
499   margin-bottom: 10px
500   text-shadow: $text-shadow
501   color: #fff
502   +error-gradient
503     
504 /* History question */
505 /* ------------------------------------------------------------ */
506 .buttons-history
507   border-top: 1px solid #ccc
508   text-align: right
509   clear: both  
510   margin: 15px 0 0 0
511   padding: 10px 
512   input
513     +orange-gradient
514     border: none
515     font-size: 14px
516     padding: 5px 10px
517     color: #fff
518     width: auto
519