create a js module to handle the question forms
[shapado:piglops-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   h1
22     font-size: 26px
23     line-height: 28px
24     font-weight: bold
25     margin: 10px 20px 5px 45px
26   .description
27     margin: 0 20px 0 45px
28     p
29       font-size: 12px
30       line-height: 16px
31       margin: 0 0 10px 0
32       color: #606060
33   .edit
34     position: absolute
35     top: 43px
36     left: 14px
37     a
38       width: 24px
39       height: 24px
40       background: url("/images/edit-icon-big.png") 0 0  no-repeat
41       display: block
42       text-indent: -1000px
43       &:hover
44         background-position: 0 -40px
45
46   /* Main Question - toolbar */
47   //======================================================================
48   .toolbar
49     border-top: 1px solid #e5e5e5
50     ul
51       +normal-radius
52       li
53         float: left
54         display: inline
55         position: relative
56         &:hover
57           visibility: inherit
58         &:hover ul, &.sfHover ul
59           right: -5px
60           top: 25px
61           z-index: 99
62         a
63           display: block
64           position: relative
65           padding: 5px 7px 7px 23px
66           color: #aaa
67           border-right: 1px solid #e5e5e5
68           background: url("/images/question-toolbar-icons-small.png") 5px 5px  no-repeat
69         a:hover
70           color: #000
71           background-color: $lightOrange !important
72         a.active
73           background-color: $lightBlue
74           color: #000
75         a.active:hover
76           background-color: $lightBlue !important
77         &.more
78           a
79             background-position: 5px -402px
80           a:hover
81             background-color: #e5e5e5 !important
82             color: #000
83         &.more:hover
84           background-color: #e5e5e5 !important
85         &.answer
86           a
87             background-position: 5px 5px
88         &.comment
89           a
90             background-position: 5px -49px
91           a:hover
92             background-position: 5px -25px
93         &.follow
94           a.follow-q
95             background-position: 6px -330px
96           a.follow-q:hover
97             background-position: 6px -306px
98           a.unfollow-q
99             background-position: 6px -378px
100           a.unfollow-q:hover
101             background-position: 6px -354px
102         &.spam
103           a
104             background-position: 5px -162px
105           a:hover
106             background-position: 5px -138px
107         &.share
108           a
109             background-position: 5px -219px
110           a:hover
111             background-position: 5px -195px
112         &.activity
113           a
114             background-position: 5px -275px
115           a:hover
116             background-position: 5px -251px
117         &.followUp
118           a
119             background-position: 5px -275px
120         &.flag
121           a
122             background-position: 5px -275px
123         &.close
124           a
125             background-position: 5px -275px
126         &.delete
127           a
128             background-position: 5px -275px
129         &.ban
130           a
131             background-position: 5px -275px
132         &.open
133           a
134             background-position: 5px -275px
135         &.edit-q
136           a
137             background-position: 5px -275px
138         ul
139           position: absolute
140           top: -999em
141           width: 130px
142           left: -1px
143           +none-radius
144           li:first-child
145             border-top: 1px solid #ddd
146           li
147             width: 100%
148             border-left: 1px solid #ddd
149             border-bottom: 1px solid #ddd
150             background-color: #fff
151             a:first-letter
152               text-transform: uppercase
153
154 /* Main Question - Tags */
155 //========================================================================
156 ul.tag-list
157   margin: 0 0 10px 0
158   float: left
159   li
160     float: left
161     display: inline
162     margin: 0 0 7px 0
163     a
164       background: url("/images/tag-back-lt.png") 0 0  no-repeat
165       margin: 0 0 0 8px
166       font-size: 11px
167       padding: 1px 5px 2px 13px
168       color: #666
169     a:hover
170       background: url("/images/tag-back-hover.png") 0 0  no-repeat
171       color: #000
172     &.title
173       font-weight: bolder
174       font-size: 12px
175       margin-top: 1px
176
177 /* Main Question - Answers*/
178 //========================================================================
179 #answers-content-wrap
180   +normal-radius
181   border: 1px solid #e5e5e5
182   background-color: #fff
183   clear: both
184   display: block
185   padding: 0 0 20px 0
186   header
187     h3
188       background: url("/images/ans-icon-medium.gif") 10px 10px  no-repeat
189       font-size: 18px
190       padding: 11px 0 10px 40px
191   section.filters
192     ul
193       border-top: 1px solid $blue
194       background-color: $lightBlue
195       border-bottom-color: #bee5e7
196     ul.newest
197       li.newest-active
198         a
199           border-color: $blue
200           color: #000
201           font-weight: bold
202     ul.votes
203       li.votes-active
204         a
205           border-color: $blue
206           color: #000
207           font-weight: bold
208     ul.oldest
209       li.oldest-active
210         a
211           border-color: $blue
212           color: #000
213           font-weight: bold
214
215 /* Main Question - Each Answer */
216 //========================================================================
217 article
218   border-bottom: 1px solid #e5e5e5
219   padding: 5px 10px 0 10px
220   clear: both
221   display: block
222   .content
223     clear: both
224     float: none
225     display: block
226     padding: 0 10px
227   .winner
228     float: left
229     margin-right: 10px
230   p
231     font-size: 12px
232     line-height: 15px
233     color: #888
234   h4
235     font-size: 12px
236     background: url("/images/ans-icon-small.gif") 0 4px  no-repeat
237     padding: 15px 10px 0 8px
238     float: left
239     margin: 0 0 10px 0
240     img.gravatar
241       float: left
242       margin: -5px 3px 0 0
243       border: 1px solid #fff
244     a:hover
245       border-bottom: 1px dotted
246     i
247       font-size: 10px
248       font-style: italic
249       color: #999
250
251 /* Main Question - Each comment inside of each answare */
252 //========================================================================
253 article.comment
254   border-bottom: none
255   padding: 20px 10px 0 50px
256   h4
257     background: url("/images/question-toolbar-icons-small.png") 0 -53px  no-repeat
258     float: left
259     padding: 3px 0 3px 20px
260     a
261       &:hover
262   .toolbar
263     margin: 0 0 0 10px !important
264
265 /* Answer Form
266 //========================================================================
267 #panel-forms
268   height: 100%
269   form
270     display: none
271
272   background-color: $lightBlue
273   clear: both
274   padding: 15px
275   form
276     fieldset
277     leyend
278     .form-options
279       .option
280         float: left
281         margin: 5px 20px 0 0
282         label
283           float: left
284           font-weight: bold
285           font-size: 11px
286           margin: 2px 5px 0 0
287         input
288           float: left
289           &:checkbox
290           &:radio
291     .buttons
292       float: right
293     input
294       &.save
295         +blue-gradient
296         border: none
297         font-size: 14px
298         margin: -2px 5px 0 0
299         padding: 6px 11px
300         float: left
301         color: #fff
302         width: auto
303
304 .jHtmlArea
305   width: 100% !important
306   .ToolBar
307     float: left
308   .label
309     font-size: 18px
310     margin: 0 0 7px 0
311   iframe
312     min-height: 200px !important
313     width: 99%
314     background-color: #fff
315     border: 1px solid #ccc
316
317 /* Editors form output
318 //========================================================================
319 .article-actions
320   float: right
321   margin: 10px 5px 0 0
322   ul
323     li.current
324     li
325       float: left
326       display: inline
327       position: relative
328       background-color: #f1f1f1
329       margin: 0 0 0 3px
330       &:hover
331         visibility: inherit
332       &:hover ul, &.sfHover ul
333         left: -3px
334         top: 21px
335         z-index: 99
336       a
337         display: block
338         position: relative
339         padding: 4px 7px
340         color: #aaa
341       a:hover
342         color: #000
343         background-color: #ddd
344         border: none
345       a.active
346         background-color: $lightBlue
347         color: #000
348       a.active:hover
349         background-color: $lightBlue !important
350       ul
351         position: absolute
352         top: -999em
353         width: 130px
354         left: -1px
355         +none-radius
356         li:first-child
357           border-top: 1px solid #ddd
358         li
359           width: 100%
360           border-left: 1px solid #ddd
361           border-right: 1px solid #ddd
362           border-bottom: 1px solid #ddd
363           background-color: #fff
364           a:first-letter
365             text-transform: uppercase
366     li.votes
367       p
368         text-align: center
369         padding: 3px 0 0 0
370         button
371           height: 21px
372           width: 22px
373           border: none
374           margin-top: -3px
375           &.negative
376             float: left
377             margin-right: 7px
378             background: url("/images/question-toolbar-icons-small.png") 5px -403px  no-repeat
379             border-right: 1px solid #ddd
380             &:hover
381               background-color: #f00
382               background-position: 5px -418px
383           &.positive
384             float: right
385             margin-left: 7px
386             background: url("/images/question-toolbar-icons-small.png") 5px -450px  no-repeat
387             border-left: 1px solid #ddd
388             &:hover
389               background-color: #0a0
390               background-position: 5px -435px
391
392 /* Comments
393 #panel-comments
394   background-color: #f1f1f1
395   clear: both
396   padding: 15px
397   margin: 0 0 10px 0
398   form
399     fieldset
400     leyend
401       font-size: 16px
402       clear: both
403       float: none
404       margin: 0 0 10px 0
405     textarea
406       min-height: 100px
407       width: 100%
408       margin: 10px 0 0 0
409       padding: 10px
410       boder: 1px solid #ccc
411     input
412       +blue-gradient
413       border: none
414       font-size: 14px
415       margin: 3px 1px 0 5px
416       padding: 6px 11px
417       color: #fff
418       width: auto
419     .cancel
420       color: #c00
421       &:hover
422         border-bottom: 1px dotted
423   .buttons
424     float: right