Merge ~twom/launchpad:sassy-css-transcribe-base into launchpad:master
- Git
- lp:~twom/launchpad
- sassy-css-transcribe-base
- Merge into master
Proposed by
Tom Wardill
Status: | Merged |
---|---|
Approved by: | Tom Wardill |
Approved revision: | 723b004ab3a5b8946072aaea7cb597086ecdc289 |
Merge reported by: | Otto Co-Pilot |
Merged at revision: | not available |
Proposed branch: | ~twom/launchpad:sassy-css-transcribe-base |
Merge into: | launchpad:master |
Prerequisite: | ~twom/launchpad:sassy-css-no-op-css-compilation |
Diff against target: |
3924 lines (+1942/-1331) 8 files modified
dev/null (+0/-351) lib/canonical/launchpad/icing/combo.scss (+0/-5) lib/canonical/launchpad/icing/css/base.scss (+381/-328) lib/canonical/launchpad/icing/css/colours.scss (+633/-0) lib/canonical/launchpad/icing/css/forms.scss (+417/-290) lib/canonical/launchpad/icing/css/layout.scss (+199/-149) lib/canonical/launchpad/icing/css/modifiers.scss (+166/-140) lib/canonical/launchpad/icing/css/typography.scss (+146/-68) |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Thiago F. Pappacena (community) | Approve | ||
Review via email: mp+384834@code.launchpad.net |
Commit message
Transcribe base css into SCSS
Description of the change
Used https:/
Altered the combo.scss to just import the single base file to make SCSS module migration easier.
To post a comment you must log in.
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1 | diff --git a/lib/canonical/launchpad/icing/combo.scss b/lib/canonical/launchpad/icing/combo.scss |
2 | index 62afbfb..8ad09e9 100644 |
3 | --- a/lib/canonical/launchpad/icing/combo.scss |
4 | +++ b/lib/canonical/launchpad/icing/combo.scss |
5 | @@ -18,11 +18,6 @@ |
6 | // Include our main stylesheets at the end so they |
7 | // take precedence over the others. |
8 | 'css/base', |
9 | -'css/typography', |
10 | -'css/colours', |
11 | -'css/forms', |
12 | -'css/layout', |
13 | -'css/modifiers', |
14 | // This shouldn't require the _index, but doesn't appear to be allowable |
15 | // in this version of node-sass (v4.14.4) |
16 | 'css/components/_index'; |
17 | diff --git a/lib/canonical/launchpad/icing/css/base.css b/lib/canonical/launchpad/icing/css/base.scss |
18 | similarity index 58% |
19 | rename from lib/canonical/launchpad/icing/css/base.css |
20 | rename to lib/canonical/launchpad/icing/css/base.scss |
21 | index ded8b61..68bcce1 100644 |
22 | --- a/lib/canonical/launchpad/icing/css/base.css |
23 | +++ b/lib/canonical/launchpad/icing/css/base.scss |
24 | @@ -1,497 +1,550 @@ |
25 | +// This file the result of auto-converting base.css to scss. |
26 | + |
27 | body { |
28 | /* line-height is the same as the sprite height. */ |
29 | font-family: Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif; |
30 | font-size: 12px; |
31 | line-height: 18px; |
32 | color: #333; |
33 | - } |
34 | |
35 | -body.private, |
36 | -body.public { |
37 | - /* It must be obvious to the user that the context is private */ |
38 | - background-image: none; |
39 | + &.private, &.public { |
40 | + /* It must be obvious to the user that the context is private */ |
41 | + background-image: none; |
42 | } |
43 | |
44 | -body.private .private-disallow { |
45 | - /* We want to disable/hide some actions on private artifacts */ |
46 | - display: none; |
47 | + &.private .private-disallow { |
48 | + /* We want to disable/hide some actions on private artifacts */ |
49 | + display: none; |
50 | } |
51 | + } |
52 | |
53 | -.private-only { |
54 | + .private-only { |
55 | /* We want to only show some items on private artifacts */ |
56 | display: none; |
57 | - } |
58 | + } |
59 | |
60 | -body.private .private-only { |
61 | + body.private .private-only { |
62 | /* We want to only show some items on private artifacts */ |
63 | display: block; |
64 | - } |
65 | + } |
66 | |
67 | -hr { |
68 | + hr { |
69 | display: none; |
70 | - } |
71 | + } |
72 | |
73 | -dt { |
74 | + dt { |
75 | margin-bottom: .3em; |
76 | margin-top: 0.5em; |
77 | font-weight: bold; |
78 | - } |
79 | |
80 | -dt dfn { |
81 | - font-weight: bold; |
82 | + dfn { |
83 | + font-weight: bold; |
84 | } |
85 | + } |
86 | |
87 | -dd { |
88 | + dd { |
89 | margin-bottom: .8em; |
90 | - } |
91 | + } |
92 | |
93 | -dl.faq dd { |
94 | + dl.faq dd { |
95 | margin: 1em 0 2em 4em; |
96 | - } |
97 | + } |
98 | |
99 | -.contributors dt strong { |
100 | + .contributors dt strong { |
101 | padding-left: 1em; |
102 | - } |
103 | + } |
104 | |
105 | -ol { |
106 | + ol { |
107 | margin-left: 1.8em; |
108 | - } |
109 | |
110 | -ol li { |
111 | - list-style: decimal outside; |
112 | + li { |
113 | + list-style: decimal outside; |
114 | } |
115 | + } |
116 | |
117 | -li { |
118 | + li { |
119 | padding-bottom: .3em; |
120 | - } |
121 | + } |
122 | |
123 | -ul.news, |
124 | -li.news { |
125 | + ul.news, li.news { |
126 | list-style-type: none; |
127 | margin-bottom: 1em; |
128 | - } |
129 | + } |
130 | |
131 | -ul.architecture, |
132 | -li.architecture { |
133 | + ul.architecture, li.architecture { |
134 | list-style-image: url(/@@/architecture); |
135 | - } |
136 | + } |
137 | |
138 | -ul.build-success, |
139 | -li.build-success { |
140 | + ul.build-success, li.build-success { |
141 | list-style-image: url(/@@/build-success); |
142 | - } |
143 | + } |
144 | |
145 | -ul.bug.remote, |
146 | -li.bug.remote { |
147 | + ul.bug.remote, li.bug.remote { |
148 | list-style-image: url(/@@/bug-remote); |
149 | - } |
150 | + } |
151 | |
152 | -ul.language, |
153 | -li.language { |
154 | + ul.language, li.language { |
155 | list-style-image: url(/@@/language); |
156 | + |
157 | /* Disable .language sprite. */ |
158 | background: inherit; |
159 | - } |
160 | + } |
161 | |
162 | -ul.mail, |
163 | -li.mail { |
164 | + ul.mail, li.mail { |
165 | list-style-image: url(/@@/mail); |
166 | - } |
167 | + } |
168 | |
169 | -ul.meeting, |
170 | -li.meeting { |
171 | + ul.meeting, li.meeting { |
172 | list-style-image: url(/@@/meeting); |
173 | - } |
174 | + } |
175 | |
176 | -ul.rss, |
177 | -li.rss { |
178 | + ul.rss, li.rss { |
179 | list-style-image: url(/@@/rss); |
180 | - } |
181 | + } |
182 | |
183 | -ul.translation, |
184 | -li.translation { |
185 | + ul.translation, li.translation { |
186 | list-style-image: url(/@@/translation); |
187 | - } |
188 | + } |
189 | |
190 | -ul.webref, |
191 | -li.webref { |
192 | + ul.webref, li.webref { |
193 | list-style-image: url(/@@/link); |
194 | - } |
195 | + } |
196 | |
197 | -ul.iconed { |
198 | - list-style-type: none; |
199 | - padding-left: 0 !important; |
200 | - margin: 0 !important; |
201 | + ul { |
202 | + &.iconed { |
203 | + list-style-type: none; |
204 | + padding-left: 0 !important; |
205 | + margin: 0 !important; |
206 | } |
207 | |
208 | -ul.buttons { |
209 | - /* without !important, gets overridden by the '#maincontent ol' rule */ |
210 | - margin: 0.5em 0 0.5em 0 !important; |
211 | - padding: 0 !important; |
212 | - } |
213 | + &.buttons { |
214 | + /* without !important, gets overridden by the '#maincontent ol' rule */ |
215 | + margin: 0.5em 0 0.5em 0 !important; |
216 | + padding: 0 !important; |
217 | |
218 | -ul.buttons li { |
219 | - display: inline; |
220 | - margin: 0 0 0 0; |
221 | + li { |
222 | + display: inline; |
223 | + margin: 0 0 0 0; |
224 | + } |
225 | } |
226 | + } |
227 | |
228 | -.bulleted { |
229 | + .bulleted { |
230 | margin-bottom: 0.5em; |
231 | - } |
232 | |
233 | -.bulleted li { |
234 | - margin: 0 0 0 2em; |
235 | - list-style-type: disc; |
236 | + li { |
237 | + margin: 0 0 0 2em; |
238 | + list-style-type: disc; |
239 | } |
240 | + } |
241 | |
242 | -.horizontal { |
243 | + .horizontal { |
244 | margin: 1em 0 0 0; |
245 | - } |
246 | |
247 | -.horizontal li { |
248 | - display: inline; |
249 | - padding: 0 1.5em 0 0; |
250 | + li { |
251 | + display: inline; |
252 | + padding: 0 1.5em 0 0; |
253 | } |
254 | + } |
255 | |
256 | -.subordinate { |
257 | + .subordinate { |
258 | margin-left: 2em; |
259 | - } |
260 | + } |
261 | |
262 | -ol.subordinate { |
263 | + ol.subordinate { |
264 | margin-left: 4em; |
265 | - } |
266 | + } |
267 | |
268 | -.two-column-list dl { |
269 | + .two-column-list dl { |
270 | width: 48%; |
271 | float: left; |
272 | display: inline; |
273 | margin: 0 0.25em 0 0; |
274 | - } |
275 | |
276 | -.two-column-list dl:first-child dt, |
277 | -.two-column-list dl:first-child + dl dt { |
278 | - margin-top: 0; |
279 | + &:first-child { |
280 | + dt, + dl dt { |
281 | + margin-top: 0; |
282 | + } |
283 | } |
284 | + } |
285 | |
286 | -.three-column-list dl { |
287 | + .three-column-list dl { |
288 | width: 31%; |
289 | float: left; |
290 | display: inline; |
291 | margin: 0 0.25em 0 0; |
292 | - } |
293 | + } |
294 | |
295 | -.two-column-list li { |
296 | + .two-column-list li { |
297 | width: 48%; |
298 | float: left; |
299 | display: inline; |
300 | margin: 0 0.25em 0 0; |
301 | - } |
302 | + } |
303 | |
304 | -.three-column-list li { |
305 | + .three-column-list li { |
306 | width: 31%; |
307 | float: left; |
308 | display: inline; |
309 | margin: 0 0.25em 0 0; |
310 | - } |
311 | + } |
312 | |
313 | -.two-column-list:after, |
314 | -.three-column-list:after { |
315 | + .two-column-list:after, .three-column-list:after { |
316 | content: "."; |
317 | display: block; |
318 | height: 0; |
319 | clear: both; |
320 | visibility: hidden; |
321 | + } |
322 | + |
323 | + .two-column-list { |
324 | + dl.unseen, li.unseen { |
325 | + /* Keep the abilty to hide list entries. */ |
326 | + display: none; |
327 | } |
328 | + } |
329 | |
330 | -.two-column-list dl.unseen, |
331 | -.two-column-list li.unseen, |
332 | -.three-column-list dl.unseen, |
333 | -.three-column-list li.unseen { |
334 | - /* Keep the abilty to hide list entries. */ |
335 | - display: none; |
336 | + .three-column-list { |
337 | + dl.unseen, li.unseen { |
338 | + /* Keep the abilty to hide list entries. */ |
339 | + display: none; |
340 | } |
341 | + } |
342 | |
343 | -caption { |
344 | + caption { |
345 | caption-side: bottom; |
346 | text-align: left; |
347 | - } |
348 | + } |
349 | |
350 | -th { |
351 | + th { |
352 | text-align: right; |
353 | - } |
354 | + vertical-align: baseline; |
355 | + } |
356 | |
357 | -th, |
358 | -td { |
359 | + td { |
360 | vertical-align: baseline; |
361 | - } |
362 | + } |
363 | |
364 | -.head th, |
365 | -thead th, |
366 | -tr.thead th { |
367 | + .head th, thead th, tr.thead th { |
368 | text-align: left; |
369 | vertical-align: bottom; |
370 | - } |
371 | + } |
372 | |
373 | -th.icon, |
374 | -td.icon { |
375 | + th.icon, td.icon { |
376 | vertical-align: top; |
377 | white-space: nowrap; |
378 | width: 1px; |
379 | - } |
380 | + } |
381 | |
382 | -th.icon.left, |
383 | -td.icon.left { |
384 | + th.icon.left, td.icon.left { |
385 | padding-right: 0; |
386 | - } |
387 | + } |
388 | |
389 | -th.icon.right, |
390 | -td.icon.right { |
391 | + th.icon.right, td.icon.right { |
392 | padding-left: 0; |
393 | - } |
394 | + } |
395 | |
396 | -th.nowrap, |
397 | -td.nowrap { |
398 | + th.nowrap, td.nowrap { |
399 | white-space: nowrap; |
400 | - } |
401 | + } |
402 | |
403 | -tfoot th, |
404 | -table.contributions th { |
405 | + tfoot th, table.contributions th { |
406 | text-align: left; |
407 | - } |
408 | + } |
409 | |
410 | -tr.white { |
411 | - background-color: #fff; |
412 | + tr { |
413 | + &.white { |
414 | + background-color: #fff; |
415 | } |
416 | |
417 | -tr.shaded { |
418 | - background-color: #f6f6f6; |
419 | + &.shaded { |
420 | + background-color: #f6f6f6; |
421 | } |
422 | + } |
423 | |
424 | -table .amount, |
425 | -table .action-icons { |
426 | - text-align: right; |
427 | + table { |
428 | + .amount, .action-icons { |
429 | + text-align: right; |
430 | } |
431 | |
432 | -table.contributions th { |
433 | - font-weight: normal; |
434 | - } |
435 | + &.contributions { |
436 | + th { |
437 | + font-weight: normal; |
438 | + } |
439 | |
440 | -table.contributions td { |
441 | - vertical-align: middle; |
442 | - width: 16px; |
443 | - text-align: left; |
444 | + td { |
445 | + vertical-align: middle; |
446 | + width: 16px; |
447 | + text-align: left; |
448 | + } |
449 | } |
450 | |
451 | -table.latest th, |
452 | -table.latest td { |
453 | - padding-bottom: 2em; |
454 | + &.latest { |
455 | + th, td { |
456 | + padding-bottom: 2em; |
457 | + } |
458 | } |
459 | |
460 | -table.duplicate.listing * { |
461 | - color: #999; |
462 | + &.duplicate.listing * { |
463 | + color: #999; |
464 | } |
465 | + } |
466 | |
467 | -.table-actions:nth-child(2) { |
468 | - /* text-align works because the <li> is also display:inline. */ |
469 | - text-align: right; |
470 | + .table-actions { |
471 | + &:nth-child(2) { |
472 | + /* text-align works because the <li> is also display:inline. */ |
473 | + text-align: right; |
474 | } |
475 | |
476 | -.table-actions { |
477 | margin: 1em 0 0 0; |
478 | - } |
479 | |
480 | -.table-actions li { |
481 | - display: inline; |
482 | - padding: 0 1.5em 0 0; |
483 | + li { |
484 | + display: inline; |
485 | + padding: 0 1.5em 0 0; |
486 | } |
487 | + } |
488 | |
489 | -table.compressed { |
490 | - width: auto; |
491 | - } |
492 | + table { |
493 | + &.compressed { |
494 | + width: auto; |
495 | |
496 | -table.compressed td { |
497 | - padding: 0.25em 0.5em; |
498 | + td { |
499 | + padding: 0.25em 0.5em; |
500 | + } |
501 | } |
502 | |
503 | -table.cozy-listing { |
504 | - width: 20em; |
505 | - background-color: #fff; |
506 | - border: 1px solid #d2d2d2; |
507 | - border-bottom: 1px solid #d2d2d2; |
508 | - } |
509 | + &.cozy-listing { |
510 | + width: 20em; |
511 | + background-color: #fff; |
512 | + border: 1px solid #d2d2d2; |
513 | + border-bottom: 1px solid #d2d2d2; |
514 | |
515 | -table.cozy-listing td { |
516 | - border: 1px #d2d2d2; |
517 | - border-style: dotted none none none; |
518 | + td { |
519 | + border: 1px #d2d2d2; |
520 | + border-style: dotted none none none; |
521 | + } |
522 | } |
523 | |
524 | -table.sortable a.sortheader { |
525 | - color: #666; |
526 | - font-weight: bold; |
527 | - text-decoration: none; |
528 | - display: block; |
529 | - } |
530 | + &.sortable { |
531 | + a.sortheader { |
532 | + color: #666; |
533 | + font-weight: bold; |
534 | + text-decoration: none; |
535 | + display: block; |
536 | + } |
537 | |
538 | -table.sortable img.sortarrow { |
539 | - padding-left: 2px; |
540 | - } |
541 | + img.sortarrow { |
542 | + padding-left: 2px; |
543 | + } |
544 | |
545 | -table.sortable th { |
546 | - cursor: pointer; |
547 | + th { |
548 | + cursor: pointer; |
549 | + } |
550 | } |
551 | + } |
552 | |
553 | -th.ascending { |
554 | - background-image: url(/@@/arrowDown); |
555 | - background-position: center right; |
556 | - background-repeat: no-repeat; |
557 | + th { |
558 | + &.ascending { |
559 | + background-image: url(/@@/arrowDown); |
560 | + background-position: center right; |
561 | + background-repeat: no-repeat; |
562 | } |
563 | |
564 | -th.descending { |
565 | - background-image: url(/@@/arrowUp); |
566 | - background-position: center right; |
567 | - background-repeat: no-repeat; |
568 | + &.descending { |
569 | + background-image: url(/@@/arrowUp); |
570 | + background-position: center right; |
571 | + background-repeat: no-repeat; |
572 | } |
573 | + } |
574 | |
575 | -.sortkey, |
576 | -.revsortkey { |
577 | + .sortkey, .revsortkey { |
578 | /* Used to indicate a value to be used to sort cells in a row */ |
579 | display: none; |
580 | - } |
581 | - |
582 | -table.listing { |
583 | - margin: 0; |
584 | - width: 100%; |
585 | - } |
586 | - |
587 | -table.listing, |
588 | -table.listing tbody, |
589 | -table.listing td.end-of-section { |
590 | - border-bottom: 1px solid #d2d2d2; |
591 | - } |
592 | - |
593 | -table.listing th { |
594 | - font-weight: bold; |
595 | - } |
596 | - |
597 | -table.listing .head, |
598 | -table.listing .head th, |
599 | -table.listing thead, |
600 | -table.listing thead th, |
601 | -table.listing tfoot tr, |
602 | -table.listing tr.thead th { |
603 | - border: 1px solid #d2d2d2; |
604 | - background-color: #fff; |
605 | - } |
606 | - |
607 | -table.listing tr.category { |
608 | - border-bottom: 1px solid #999; |
609 | - } |
610 | - |
611 | -table.listing tr.category th, |
612 | -table.listing tr.category td { |
613 | - padding-top: 1em; |
614 | - } |
615 | - |
616 | -table.listing thead td, |
617 | -table.listing table tbody, |
618 | -table.listing table thead, |
619 | -table.listing table thead th, |
620 | -table.listing tfoot tr, |
621 | -table.listing table tfoot td, |
622 | -table.listing table td { |
623 | - border: none; |
624 | - } |
625 | - |
626 | -table.listing tfoot td { |
627 | - border: 1px solid #d2d2d2; |
628 | - } |
629 | - |
630 | -table.listing th, |
631 | -table.listing td { |
632 | - padding: 0.25em; |
633 | - } |
634 | - |
635 | -table.listing table th, |
636 | -table.listing table td { |
637 | - /* We don't want extra padding on nested tables, like batch navigation. */ |
638 | - padding: 0; |
639 | - } |
640 | - |
641 | -table.listing thead th, |
642 | -table.listing tr.thead th { |
643 | - white-space: nowrap; |
644 | - } |
645 | - |
646 | -table.listing td { |
647 | - border: 1px #d2d2d2; |
648 | - border-style: dotted none none none; |
649 | - } |
650 | - |
651 | -table.listing tr.category:first-child td { |
652 | - border-top-style: none; |
653 | - padding-top: 0; |
654 | - } |
655 | - |
656 | -table.listing .section-break td { |
657 | - border-width: 1px 0 0 0; |
658 | - border-style: solid; |
659 | - border-color: #d2d2d2; |
660 | - height: 1em; |
661 | - } |
662 | - |
663 | -table.listing .note td { |
664 | - border-style: none; |
665 | - } |
666 | - |
667 | -table.listing img { |
668 | - vertical-align: middle; |
669 | - } |
670 | - |
671 | -table.listing tr.secondary th, |
672 | -table.listing tr.secondary td { |
673 | - border-top: none; |
674 | - } |
675 | - |
676 | -table.listing table.simple { |
677 | - margin-left: 2em; |
678 | - } |
679 | - |
680 | -table.listing table.simple td { |
681 | - padding: 0.25em; |
682 | - } |
683 | - |
684 | -table.listing .section-heading { |
685 | - border: none; |
686 | - padding-top: 1.5em; |
687 | - } |
688 | - |
689 | -table.summary th, |
690 | -table.summary td, |
691 | -table.listing table.summary th, |
692 | -table.listing table.summary td { |
693 | - /* Summary tables havesubdued headers and a little row spacing. */ |
694 | - padding: 0 0.5em 0.5em 0; |
695 | - } |
696 | - |
697 | -table.summary th { |
698 | - font-weight: normal; |
699 | - } |
700 | - |
701 | -table.summary caption { |
702 | - font-style: italic; |
703 | - margin-left: 1em; |
704 | - } |
705 | - |
706 | -table.summary ul, |
707 | -table.summary ul li { |
708 | - list-style-position: inside; |
709 | - margin: 0; |
710 | - padding: 0; |
711 | - } |
712 | - |
713 | -.results { |
714 | + } |
715 | + |
716 | + table { |
717 | + &.listing { |
718 | + margin: 0; |
719 | + width: 100%; |
720 | + border-bottom: 1px solid #d2d2d2; |
721 | + |
722 | + tbody, td.end-of-section { |
723 | + border-bottom: 1px solid #d2d2d2; |
724 | + } |
725 | + |
726 | + th { |
727 | + font-weight: bold; |
728 | + } |
729 | + |
730 | + .head, thead { |
731 | + border: 1px solid #d2d2d2; |
732 | + background-color: #fff; |
733 | + |
734 | + th { |
735 | + border: 1px solid #d2d2d2; |
736 | + background-color: #fff; |
737 | + } |
738 | + } |
739 | + |
740 | + tfoot tr { |
741 | + border: 1px solid #d2d2d2; |
742 | + background-color: #fff; |
743 | + } |
744 | + |
745 | + tr { |
746 | + &.thead th { |
747 | + border: 1px solid #d2d2d2; |
748 | + background-color: #fff; |
749 | + } |
750 | + |
751 | + &.category { |
752 | + border-bottom: 1px solid #999; |
753 | + |
754 | + th, td { |
755 | + padding-top: 1em; |
756 | + } |
757 | + } |
758 | + } |
759 | + |
760 | + thead td { |
761 | + border: none; |
762 | + } |
763 | + |
764 | + table { |
765 | + tbody { |
766 | + border: none; |
767 | + } |
768 | + |
769 | + thead { |
770 | + border: none; |
771 | + |
772 | + th { |
773 | + border: none; |
774 | + } |
775 | + } |
776 | + } |
777 | + |
778 | + tfoot tr { |
779 | + border: none; |
780 | + } |
781 | + |
782 | + table { |
783 | + tfoot td, td { |
784 | + border: none; |
785 | + } |
786 | + } |
787 | + |
788 | + tfoot td { |
789 | + border: 1px solid #d2d2d2; |
790 | + } |
791 | + |
792 | + th, td { |
793 | + padding: 0.25em; |
794 | + } |
795 | + |
796 | + table { |
797 | + th, td { |
798 | + /* We don't want extra padding on nested tables, like batch navigation. */ |
799 | + padding: 0; |
800 | + } |
801 | + } |
802 | + |
803 | + thead th, tr.thead th { |
804 | + white-space: nowrap; |
805 | + } |
806 | + |
807 | + td { |
808 | + border: 1px #d2d2d2; |
809 | + border-style: dotted none none none; |
810 | + } |
811 | + |
812 | + tr.category:first-child td { |
813 | + border-top-style: none; |
814 | + padding-top: 0; |
815 | + } |
816 | + |
817 | + .section-break td { |
818 | + border-width: 1px 0 0 0; |
819 | + border-style: solid; |
820 | + border-color: #d2d2d2; |
821 | + height: 1em; |
822 | + } |
823 | + |
824 | + .note td { |
825 | + border-style: none; |
826 | + } |
827 | + |
828 | + img { |
829 | + vertical-align: middle; |
830 | + } |
831 | + |
832 | + tr.secondary { |
833 | + th, td { |
834 | + border-top: none; |
835 | + } |
836 | + } |
837 | + |
838 | + table.simple { |
839 | + margin-left: 2em; |
840 | + |
841 | + td { |
842 | + padding: 0.25em; |
843 | + } |
844 | + } |
845 | + |
846 | + .section-heading { |
847 | + border: none; |
848 | + padding-top: 1.5em; |
849 | + } |
850 | + } |
851 | + |
852 | + &.summary { |
853 | + th, td { |
854 | + /* Summary tables havesubdued headers and a little row spacing. */ |
855 | + padding: 0 0.5em 0.5em 0; |
856 | + } |
857 | + } |
858 | + |
859 | + &.listing table.summary { |
860 | + th, td { |
861 | + /* Summary tables havesubdued headers and a little row spacing. */ |
862 | + padding: 0 0.5em 0.5em 0; |
863 | + } |
864 | + } |
865 | + |
866 | + &.summary { |
867 | + th { |
868 | + font-weight: normal; |
869 | + } |
870 | + |
871 | + caption { |
872 | + font-style: italic; |
873 | + margin-left: 1em; |
874 | + } |
875 | + |
876 | + ul { |
877 | + list-style-position: inside; |
878 | + margin: 0; |
879 | + padding: 0; |
880 | + |
881 | + li { |
882 | + list-style-position: inside; |
883 | + margin: 0; |
884 | + padding: 0; |
885 | + } |
886 | + } |
887 | + } |
888 | + } |
889 | + |
890 | + .results { |
891 | background-color: #f4f4f4; |
892 | padding: 2px 10px 5px 10px; |
893 | border-bottom-right-radius: 5px; |
894 | border-bottom-left-radius: 5px; |
895 | - } |
896 | + } |
897 | + |
898 | +@import 'typography', |
899 | + 'colours', |
900 | + 'forms', |
901 | + 'layout', |
902 | + 'modifiers' |
903 | diff --git a/lib/canonical/launchpad/icing/css/colours.css b/lib/canonical/launchpad/icing/css/colours.css |
904 | deleted file mode 100644 |
905 | index e43f46d..0000000 |
906 | --- a/lib/canonical/launchpad/icing/css/colours.css |
907 | +++ /dev/null |
908 | @@ -1,351 +0,0 @@ |
909 | - |
910 | - |
911 | -.questionstatusOPEN { |
912 | - color: #000; |
913 | - } |
914 | -.questionstatusNEEDSINFO { |
915 | - /* brown */ |
916 | - color: #930; |
917 | - } |
918 | -.questionstatusANSWERED { |
919 | - /* grey-green */ |
920 | - color: #363; |
921 | - } |
922 | -.questionstatusSOLVED { |
923 | - color: #090; |
924 | - } |
925 | -.questionstatusEXPIRED { |
926 | - color: #666; |
927 | - } |
928 | -.questionstatusINVALID { |
929 | - color: #c00; |
930 | - } |
931 | - |
932 | - |
933 | -.specstatusAPPROVED, .specstatusAPPROVED a { |
934 | - color: green; |
935 | - } |
936 | -.specstatusPENDINGAPPROVAL, .specstatusPENDINGAPPROVAL a, |
937 | -.specstatusPENDINGREVIEW, .specstatusPENDINGREVIEW a { |
938 | - color: #f09; |
939 | - } |
940 | -.specstatusDRAFT, .specstatusDRAFT a, |
941 | -.specstatusDISCUSSION, .specstatusDISCUSSION a { |
942 | - color: #930; |
943 | - } |
944 | -.specstatusNEW, .specstatusNEW a { |
945 | - color: red; |
946 | - } |
947 | -.specstatusSUPERSEDED, .specstatusSUPERSEDED a, |
948 | -.specstatusOBSOLETE, .specstatusOBSOLETE a, |
949 | -.specpriorityNOTFORUS, .specpriorityNOTFORUS a, |
950 | -.specpriorityUNDEFINED, .specpriorityUNDEFINED a { |
951 | - color: gray; |
952 | - } |
953 | -.specpriorityLOW, .specpriorityLOW a { |
954 | - color: black; |
955 | - } |
956 | -.specpriorityMEDIUM, .specpriorityMEDIUM a { |
957 | - color: #f60; |
958 | - } |
959 | -.specpriorityHIGH, .specpriorityHIGH a, |
960 | -.specpriorityESSENTIAL, .specpriorityESSENTIAL a { |
961 | - color: red; |
962 | - } |
963 | -.specdeliveryUNKNOWN, .specdeliveryUNKNOWN a, |
964 | -.specdeliveryNOTSTARTED, .specdeliveryNOTSTARTED a { |
965 | - color: gray; |
966 | - } |
967 | -.specdeliveryDEFERRED, .specdeliveryDEFERRED a, |
968 | -.specdeliveryNEEDSINFRASTUCTURE, .specdeliveryNEEDSINFRASTUCTURE a, |
969 | -.specdeliveryBLOCKED, .specdeliveryBLOCKED a { |
970 | - color: red; |
971 | - } |
972 | -.specdeliverySTARTED, .specdeliverySTARTED a, |
973 | -.specdeliveryGOOD, .specdeliveryGOOD a { |
974 | - color: blue; |
975 | - } |
976 | -.specdeliverySLOW, .specdeliverySLOW a { |
977 | - color: red; |
978 | - } |
979 | -.specdeliveryBETA, .specdeliveryBETA a { |
980 | - color: #f60; |
981 | - } |
982 | -.specdeliveryNEEDSREVIEW, .specdeliveryNEEDSREVIEW a { |
983 | - color: purple; |
984 | - } |
985 | -.specdeliveryAWAITINGDEPLOYMENT, .specdeliveryAWAITINGDEPLOYMENT a { |
986 | - color: red; |
987 | - } |
988 | -.specdeliveryIMPLEMENTED, .specdeliveryIMPLEMENTED a, |
989 | -.specdeliveryINFORMATIONAL, .specdeliveryINFORMATIONAL a { |
990 | - color: green; |
991 | - } |
992 | - |
993 | - |
994 | -.bug-activity { |
995 | - color: #555; |
996 | - } |
997 | -.statusNEW, .statusNEW a { |
998 | - color: #930; |
999 | - } |
1000 | -.statusINCOMPLETE, .statusINCOMPLETE a, |
1001 | -.statusCONFIRMED, .statusCONFIRMED a { |
1002 | - color: red; |
1003 | - } |
1004 | -.statusTRIAGED, .statusTRIAGED a { |
1005 | - color: #f60; |
1006 | - } |
1007 | -.statusINPROGRESS, .statusINPROGRESS a { |
1008 | - color: black; |
1009 | - } |
1010 | -.statusFIXCOMMITTED, .statusFIXCOMMITTED a { |
1011 | - color: #050; |
1012 | - } |
1013 | -.statusFIXRELEASED, .statusFIXRELEASED a { |
1014 | - color: green; |
1015 | - } |
1016 | -.statusINVALID, .statusINVALID a, |
1017 | -.statusWONTFIX, .statusWONTFIX a, |
1018 | -.statusOPINION, .statusOPINION a { |
1019 | - color: #555; |
1020 | - } |
1021 | -.importanceCRITICAL, .importanceCRITICAL a { |
1022 | - color: red; |
1023 | - } |
1024 | -.importanceHIGH, .importanceHIGH a { |
1025 | - color: #f60; |
1026 | - } |
1027 | -.importanceMEDIUM, .importanceMEDIUM a { |
1028 | - color: green; |
1029 | - } |
1030 | -.importanceLOW, .importanceLOW a { |
1031 | - color: black; |
1032 | - } |
1033 | -.importanceWISHLIST, .importanceWISHLIST a { |
1034 | - color: blue; |
1035 | - } |
1036 | -.importanceUNDECIDED, .importanceUNDECIDED a { |
1037 | - color: #999; |
1038 | - } |
1039 | -#client-listing .statusUNKNOWN, #client-listing .statusUNKNOWN a, |
1040 | -#client-listing .statusNEW, #client-listing .statusNEW a, |
1041 | -#client-listing .statusINCOMPLETE, #client-listing .statusINCOMPLETE a { |
1042 | - color: #c63600; |
1043 | - background-color: #ffdabe; |
1044 | - } |
1045 | -#client-listing .statusCONFIRMED, #client-listing .statusCONFIRMED a, |
1046 | -#client-listing .statusTRIAGED, #client-listing .statusTRIAGED a { |
1047 | - color: #896e00; |
1048 | - background-color: #f4f1a4; |
1049 | - } |
1050 | -#client-listing .statusINPROGRESS, #client-listing .statusINPROGRESS a, |
1051 | -#client-listing .statusFIXCOMMITTED, #client-listing .statusFIXCOMMITTED a { |
1052 | - color: #137587; |
1053 | - background-color: #cbe7ef; |
1054 | - } |
1055 | -#client-listing .statusFIXRELEASED, #client-listing .statusFIXRELEASED a { |
1056 | - color: #4f7b10; |
1057 | - background-color: #cef1a0; |
1058 | - } |
1059 | -#client-listing .statusEXPIRED, #client-listing .statusEXPIRED a, |
1060 | -#client-listing .statusINVALID, #client-listing .statusINVALID a, |
1061 | -#client-listing .statusWONTFIX, #client-listing .statusWONTFIX a, |
1062 | -#client-listing .statusOPINION, #client-listing .statusOPINION a { |
1063 | - color: #464646; |
1064 | - background-color: #ddd; |
1065 | - } |
1066 | -#client-listing .importanceCRITICAL, #client-listing .importanceCRITICAL a { |
1067 | - background-color: #DF382C; |
1068 | - color: white; |
1069 | - } |
1070 | -#client-listing .importanceHIGH, #client-listing .importanceHIGH a { |
1071 | - background-color: #EFB73E; |
1072 | - color: white; |
1073 | - } |
1074 | -#client-listing .importanceMEDIUM, #client-listing .importanceMEDIUM a { |
1075 | - background-color: #19B6EE; |
1076 | - color: white; |
1077 | - } |
1078 | -#client-listing .importanceLOW, #client-listing .importanceLOW a { |
1079 | - background-color: #38B44A; |
1080 | - color: white; |
1081 | - } |
1082 | -#client-listing .importanceWISHLIST, #client-listing .importanceWISHLIST a { |
1083 | - background-color: #724dc8; |
1084 | - color: white; |
1085 | - } |
1086 | -#client-listing .importanceUNDECIDED, #client-listing .importanceUNDECIDED a { |
1087 | - background-color: #666666; |
1088 | - color: white; |
1089 | - } |
1090 | - |
1091 | -a.official-tag { |
1092 | - /* Looks just like a normal link */ |
1093 | - } |
1094 | -a.unofficial-tag { |
1095 | - color: #6699ee; |
1096 | - } |
1097 | - |
1098 | - |
1099 | - |
1100 | -.vcsimportSUCCESS { |
1101 | - /* inherited text color */ |
1102 | - } |
1103 | -.vcsimportFAILURE { |
1104 | - color: Red; |
1105 | - } |
1106 | -.greylink a:link, .greylink a:visited { |
1107 | - color: gray; |
1108 | - } |
1109 | -.stale-diff { |
1110 | - color: #f60; |
1111 | - } |
1112 | -.conflicts-diff { |
1113 | - color: red; |
1114 | - } |
1115 | -.branchstatusMATURE, .branchstatusMATURE a { |
1116 | - color: #090; |
1117 | - } |
1118 | -.branchstatusDEVELOPMENT, .branchstatusDEVELOPMENT a { |
1119 | - color: #900; |
1120 | - } |
1121 | -.branchstatusEXPERIMENTAL, .branchstatusEXPERIMENTAL a { |
1122 | - color: #930; |
1123 | - } |
1124 | -.branchstatusMERGED, .branchstatusMERGED a, |
1125 | -.branchstatusABANDONED, .branchstatusABANDONED a { |
1126 | - color: gray; |
1127 | - } |
1128 | -.branchstatusNEW, .branchstatusNEW a { |
1129 | - color: black; |
1130 | - } |
1131 | -.voteAPPROVE { |
1132 | - color: green; |
1133 | - } |
1134 | -.voteNEEDS_FIXING { |
1135 | - color: #930; |
1136 | - } |
1137 | -.voteDISAPPROVE, |
1138 | -.voteRESUBMIT { |
1139 | - color: red; |
1140 | - } |
1141 | -.voteABSTAIN { |
1142 | - color: #666; |
1143 | - } |
1144 | -.votePENDING { |
1145 | - color: #f60; |
1146 | - } |
1147 | -.mergestatusWORK_IN_PROGRESS, .mergestatusWORK_IN_PROGRESS a { |
1148 | - color: black; |
1149 | - } |
1150 | -.mergestatusNEEDS_REVIEW, .mergestatusNEEDS_REVIEW a { |
1151 | - color: #f60; |
1152 | - } |
1153 | -.mergestatusCODE_APPROVED, .mergestatusCODE_APPROVED a, |
1154 | -.mergestatusMERGED, .mergestatusMERGED a { |
1155 | - color: green; |
1156 | - } |
1157 | -.mergestatusREJECTED, .mergestatusREJECTED a, |
1158 | -.mergestatusMERGE_FAILED, .mergestatusMERGE_FAILED a { |
1159 | - color: red; |
1160 | - } |
1161 | -.mergestatusQUEUED, .mergestatusQUEUED a { |
1162 | - color: black; |
1163 | - } |
1164 | -.mergestatusSUPERSEDED, .mergestatusSUPERSEDED a { |
1165 | - color: #666; |
1166 | - } |
1167 | -.codeimportNEW { |
1168 | - color: #930; |
1169 | - } |
1170 | -.codeimportREVIEWED { |
1171 | - color: green; |
1172 | - } |
1173 | -.codeimportINVALID, |
1174 | -.codeimportSUSPENDED, |
1175 | -.codeimportFAILING { |
1176 | - color: red; |
1177 | - } |
1178 | - |
1179 | - |
1180 | -.translationimportstatusAPPROVED, |
1181 | -.translationimportstatusAPPROVED a { |
1182 | - color: #050; |
1183 | - } |
1184 | -.translationimportstatusIMPORTED, |
1185 | -.translationimportstatusIMPORTED a { |
1186 | - color: green; |
1187 | - } |
1188 | -.translationimportstatusDELETED, |
1189 | -.translationimportstatusDELETED a { |
1190 | - color: black; |
1191 | - } |
1192 | -.translationimportstatusFAILED, |
1193 | -.translationimportstatusFAILED a { |
1194 | - color: red; |
1195 | - } |
1196 | -.translationimportstatusNEEDS_REVIEW, |
1197 | -.translationimportstatusNEEDS_REVIEW a { |
1198 | - color: #f60; |
1199 | - } |
1200 | -.translationimportstatusBLOCKED, |
1201 | -.translationimportstatusBLOCKED a { |
1202 | - color: blue; |
1203 | - } |
1204 | -.translationimportstatusNEEDS_INFORMATION, |
1205 | -.translationimportstatusNEEDS_INFORMATION a { |
1206 | - color: maroon; |
1207 | - } |
1208 | -.dismissed, .dismissed a { |
1209 | - color: #666; |
1210 | - } |
1211 | - |
1212 | - |
1213 | -.distromirrorstatusUP, |
1214 | -.distromirrorstatusONEHOURBEHIND, |
1215 | -.distromirrorstatusTWOHOURSBEHIND, |
1216 | -.distromirrorstatusFOURHOURSBEHIND, |
1217 | -.distromirrorstatusSIXHOURSBEHIND { |
1218 | - color: green; |
1219 | - } |
1220 | -.distromirrorstatusONEDAYBEHIND { |
1221 | - color: #f60; |
1222 | - } |
1223 | -.distromirrorstatusTWODAYSBEHIND, |
1224 | -.distromirrorstatusONEWEEKBEHIND { |
1225 | - color: red; |
1226 | - } |
1227 | -.distromirrorstatusUNKNOWN { |
1228 | - color: #666; |
1229 | - } |
1230 | -.buildstatusNEEDSBUILD { |
1231 | - color: gray; |
1232 | - } |
1233 | -.buildstatusBUILDING { |
1234 | - color: black; |
1235 | - } |
1236 | -.buildstatusFULLYBUILT { |
1237 | - color: green; |
1238 | - } |
1239 | -.buildstatusFAILEDTOBUILD, |
1240 | -.buildstatusMANUALDEPWAIT, |
1241 | -.buildstatusCHROOTWAIT, |
1242 | -.buildstatusSUPERSEDED, |
1243 | -.buildstatusFAILEDTOUPLOAD { |
1244 | - color: red; |
1245 | - } |
1246 | - |
1247 | - |
1248 | -.launchpad-gold { |
1249 | - color: #F8C300; |
1250 | - } |
1251 | - |
1252 | - |
1253 | -.green { |
1254 | - color: green; |
1255 | -} |
1256 | - |
1257 | -.red { |
1258 | - color: red; |
1259 | -} |
1260 | diff --git a/lib/canonical/launchpad/icing/css/colours.scss b/lib/canonical/launchpad/icing/css/colours.scss |
1261 | new file mode 100644 |
1262 | index 0000000..6b4c041 |
1263 | --- /dev/null |
1264 | +++ b/lib/canonical/launchpad/icing/css/colours.scss |
1265 | @@ -0,0 +1,633 @@ |
1266 | +.questionstatusOPEN { |
1267 | + color: #000; |
1268 | + } |
1269 | + |
1270 | + .questionstatusNEEDSINFO { |
1271 | + /* brown */ |
1272 | + color: #930; |
1273 | + } |
1274 | + |
1275 | + .questionstatusANSWERED { |
1276 | + /* grey-green */ |
1277 | + color: #363; |
1278 | + } |
1279 | + |
1280 | + .questionstatusSOLVED { |
1281 | + color: #090; |
1282 | + } |
1283 | + |
1284 | + .questionstatusEXPIRED { |
1285 | + color: #666; |
1286 | + } |
1287 | + |
1288 | + .questionstatusINVALID { |
1289 | + color: #c00; |
1290 | + } |
1291 | + |
1292 | + .specstatusAPPROVED { |
1293 | + color: green; |
1294 | + |
1295 | + a { |
1296 | + color: green; |
1297 | + } |
1298 | + } |
1299 | + |
1300 | + .specstatusPENDINGAPPROVAL, .specstatusPENDINGREVIEW { |
1301 | + color: #f09; |
1302 | + |
1303 | + a { |
1304 | + color: #f09; |
1305 | + } |
1306 | + } |
1307 | + |
1308 | + .specstatusDRAFT, .specstatusDISCUSSION { |
1309 | + color: #930; |
1310 | + |
1311 | + a { |
1312 | + color: #930; |
1313 | + } |
1314 | + } |
1315 | + |
1316 | + .specstatusNEW { |
1317 | + color: red; |
1318 | + |
1319 | + a { |
1320 | + color: red; |
1321 | + } |
1322 | + } |
1323 | + |
1324 | + .specstatusSUPERSEDED, .specstatusOBSOLETE, .specpriorityNOTFORUS, .specpriorityUNDEFINED { |
1325 | + color: gray; |
1326 | + |
1327 | + a { |
1328 | + color: gray; |
1329 | + } |
1330 | + } |
1331 | + |
1332 | + .specpriorityLOW { |
1333 | + color: black; |
1334 | + |
1335 | + a { |
1336 | + color: black; |
1337 | + } |
1338 | + } |
1339 | + |
1340 | + .specpriorityMEDIUM { |
1341 | + color: #f60; |
1342 | + |
1343 | + a { |
1344 | + color: #f60; |
1345 | + } |
1346 | + } |
1347 | + |
1348 | + .specpriorityHIGH, .specpriorityESSENTIAL { |
1349 | + color: red; |
1350 | + |
1351 | + a { |
1352 | + color: red; |
1353 | + } |
1354 | + } |
1355 | + |
1356 | + .specdeliveryUNKNOWN, .specdeliveryNOTSTARTED { |
1357 | + color: gray; |
1358 | + |
1359 | + a { |
1360 | + color: gray; |
1361 | + } |
1362 | + } |
1363 | + |
1364 | + .specdeliveryDEFERRED, .specdeliveryNEEDSINFRASTUCTURE, .specdeliveryBLOCKED { |
1365 | + color: red; |
1366 | + |
1367 | + a { |
1368 | + color: red; |
1369 | + } |
1370 | + } |
1371 | + |
1372 | + .specdeliverySTARTED, .specdeliveryGOOD { |
1373 | + color: blue; |
1374 | + |
1375 | + a { |
1376 | + color: blue; |
1377 | + } |
1378 | + } |
1379 | + |
1380 | + .specdeliverySLOW { |
1381 | + color: red; |
1382 | + |
1383 | + a { |
1384 | + color: red; |
1385 | + } |
1386 | + } |
1387 | + |
1388 | + .specdeliveryBETA { |
1389 | + color: #f60; |
1390 | + |
1391 | + a { |
1392 | + color: #f60; |
1393 | + } |
1394 | + } |
1395 | + |
1396 | + .specdeliveryNEEDSREVIEW { |
1397 | + color: purple; |
1398 | + |
1399 | + a { |
1400 | + color: purple; |
1401 | + } |
1402 | + } |
1403 | + |
1404 | + .specdeliveryAWAITINGDEPLOYMENT { |
1405 | + color: red; |
1406 | + |
1407 | + a { |
1408 | + color: red; |
1409 | + } |
1410 | + } |
1411 | + |
1412 | + .specdeliveryIMPLEMENTED, .specdeliveryINFORMATIONAL { |
1413 | + color: green; |
1414 | + |
1415 | + a { |
1416 | + color: green; |
1417 | + } |
1418 | + } |
1419 | + |
1420 | + .bug-activity { |
1421 | + color: #555; |
1422 | + } |
1423 | + |
1424 | + .statusNEW { |
1425 | + color: #930; |
1426 | + |
1427 | + a { |
1428 | + color: #930; |
1429 | + } |
1430 | + } |
1431 | + |
1432 | + .statusINCOMPLETE, .statusCONFIRMED { |
1433 | + color: red; |
1434 | + |
1435 | + a { |
1436 | + color: red; |
1437 | + } |
1438 | + } |
1439 | + |
1440 | + .statusTRIAGED { |
1441 | + color: #f60; |
1442 | + |
1443 | + a { |
1444 | + color: #f60; |
1445 | + } |
1446 | + } |
1447 | + |
1448 | + .statusINPROGRESS { |
1449 | + color: black; |
1450 | + |
1451 | + a { |
1452 | + color: black; |
1453 | + } |
1454 | + } |
1455 | + |
1456 | + .statusFIXCOMMITTED { |
1457 | + color: #050; |
1458 | + |
1459 | + a { |
1460 | + color: #050; |
1461 | + } |
1462 | + } |
1463 | + |
1464 | + .statusFIXRELEASED { |
1465 | + color: green; |
1466 | + |
1467 | + a { |
1468 | + color: green; |
1469 | + } |
1470 | + } |
1471 | + |
1472 | + .statusINVALID, .statusWONTFIX, .statusOPINION { |
1473 | + color: #555; |
1474 | + |
1475 | + a { |
1476 | + color: #555; |
1477 | + } |
1478 | + } |
1479 | + |
1480 | + .importanceCRITICAL { |
1481 | + color: red; |
1482 | + |
1483 | + a { |
1484 | + color: red; |
1485 | + } |
1486 | + } |
1487 | + |
1488 | + .importanceHIGH { |
1489 | + color: #f60; |
1490 | + |
1491 | + a { |
1492 | + color: #f60; |
1493 | + } |
1494 | + } |
1495 | + |
1496 | + .importanceMEDIUM { |
1497 | + color: green; |
1498 | + |
1499 | + a { |
1500 | + color: green; |
1501 | + } |
1502 | + } |
1503 | + |
1504 | + .importanceLOW { |
1505 | + color: black; |
1506 | + |
1507 | + a { |
1508 | + color: black; |
1509 | + } |
1510 | + } |
1511 | + |
1512 | + .importanceWISHLIST { |
1513 | + color: blue; |
1514 | + |
1515 | + a { |
1516 | + color: blue; |
1517 | + } |
1518 | + } |
1519 | + |
1520 | + .importanceUNDECIDED { |
1521 | + color: #999; |
1522 | + |
1523 | + a { |
1524 | + color: #999; |
1525 | + } |
1526 | + } |
1527 | + |
1528 | + #client-listing { |
1529 | + .statusUNKNOWN, .statusNEW, .statusINCOMPLETE { |
1530 | + color: #c63600; |
1531 | + background-color: #ffdabe; |
1532 | + |
1533 | + a { |
1534 | + color: #c63600; |
1535 | + background-color: #ffdabe; |
1536 | + } |
1537 | + } |
1538 | + |
1539 | + .statusCONFIRMED, .statusTRIAGED { |
1540 | + color: #896e00; |
1541 | + background-color: #f4f1a4; |
1542 | + |
1543 | + a { |
1544 | + color: #896e00; |
1545 | + background-color: #f4f1a4; |
1546 | + } |
1547 | + } |
1548 | + |
1549 | + .statusINPROGRESS, .statusFIXCOMMITTED { |
1550 | + color: #137587; |
1551 | + background-color: #cbe7ef; |
1552 | + |
1553 | + a { |
1554 | + color: #137587; |
1555 | + background-color: #cbe7ef; |
1556 | + } |
1557 | + } |
1558 | + |
1559 | + .statusFIXRELEASED { |
1560 | + color: #4f7b10; |
1561 | + background-color: #cef1a0; |
1562 | + |
1563 | + a { |
1564 | + color: #4f7b10; |
1565 | + background-color: #cef1a0; |
1566 | + } |
1567 | + } |
1568 | + |
1569 | + .statusEXPIRED, .statusINVALID, .statusWONTFIX, .statusOPINION { |
1570 | + color: #464646; |
1571 | + background-color: #ddd; |
1572 | + |
1573 | + a { |
1574 | + color: #464646; |
1575 | + background-color: #ddd; |
1576 | + } |
1577 | + } |
1578 | + |
1579 | + .importanceCRITICAL { |
1580 | + background-color: #DF382C; |
1581 | + color: white; |
1582 | + |
1583 | + a { |
1584 | + background-color: #DF382C; |
1585 | + color: white; |
1586 | + } |
1587 | + } |
1588 | + |
1589 | + .importanceHIGH { |
1590 | + background-color: #EFB73E; |
1591 | + color: white; |
1592 | + |
1593 | + a { |
1594 | + background-color: #EFB73E; |
1595 | + color: white; |
1596 | + } |
1597 | + } |
1598 | + |
1599 | + .importanceMEDIUM { |
1600 | + background-color: #19B6EE; |
1601 | + color: white; |
1602 | + |
1603 | + a { |
1604 | + background-color: #19B6EE; |
1605 | + color: white; |
1606 | + } |
1607 | + } |
1608 | + |
1609 | + .importanceLOW { |
1610 | + background-color: #38B44A; |
1611 | + color: white; |
1612 | + |
1613 | + a { |
1614 | + background-color: #38B44A; |
1615 | + color: white; |
1616 | + } |
1617 | + } |
1618 | + |
1619 | + .importanceWISHLIST { |
1620 | + background-color: #724dc8; |
1621 | + color: white; |
1622 | + |
1623 | + a { |
1624 | + background-color: #724dc8; |
1625 | + color: white; |
1626 | + } |
1627 | + } |
1628 | + |
1629 | + .importanceUNDECIDED { |
1630 | + background-color: #666666; |
1631 | + color: white; |
1632 | + |
1633 | + a { |
1634 | + background-color: #666666; |
1635 | + color: white; |
1636 | + } |
1637 | + } |
1638 | + } |
1639 | + |
1640 | + a { |
1641 | + &.official-tag { |
1642 | + /* Looks just like a normal link */ |
1643 | + } |
1644 | + |
1645 | + &.unofficial-tag { |
1646 | + color: #6699ee; |
1647 | + } |
1648 | + } |
1649 | + |
1650 | + .vcsimportSUCCESS { |
1651 | + /* inherited text color */ |
1652 | + } |
1653 | + |
1654 | + .vcsimportFAILURE { |
1655 | + color: Red; |
1656 | + } |
1657 | + |
1658 | + .greylink a { |
1659 | + &:link, &:visited { |
1660 | + color: gray; |
1661 | + } |
1662 | + } |
1663 | + |
1664 | + .stale-diff { |
1665 | + color: #f60; |
1666 | + } |
1667 | + |
1668 | + .conflicts-diff { |
1669 | + color: red; |
1670 | + } |
1671 | + |
1672 | + .branchstatusMATURE { |
1673 | + color: #090; |
1674 | + |
1675 | + a { |
1676 | + color: #090; |
1677 | + } |
1678 | + } |
1679 | + |
1680 | + .branchstatusDEVELOPMENT { |
1681 | + color: #900; |
1682 | + |
1683 | + a { |
1684 | + color: #900; |
1685 | + } |
1686 | + } |
1687 | + |
1688 | + .branchstatusEXPERIMENTAL { |
1689 | + color: #930; |
1690 | + |
1691 | + a { |
1692 | + color: #930; |
1693 | + } |
1694 | + } |
1695 | + |
1696 | + .branchstatusMERGED, .branchstatusABANDONED { |
1697 | + color: gray; |
1698 | + |
1699 | + a { |
1700 | + color: gray; |
1701 | + } |
1702 | + } |
1703 | + |
1704 | + .branchstatusNEW { |
1705 | + color: black; |
1706 | + |
1707 | + a { |
1708 | + color: black; |
1709 | + } |
1710 | + } |
1711 | + |
1712 | + .voteAPPROVE { |
1713 | + color: green; |
1714 | + } |
1715 | + |
1716 | + .voteNEEDS_FIXING { |
1717 | + color: #930; |
1718 | + } |
1719 | + |
1720 | + .voteDISAPPROVE, .voteRESUBMIT { |
1721 | + color: red; |
1722 | + } |
1723 | + |
1724 | + .voteABSTAIN { |
1725 | + color: #666; |
1726 | + } |
1727 | + |
1728 | + .votePENDING { |
1729 | + color: #f60; |
1730 | + } |
1731 | + |
1732 | + .mergestatusWORK_IN_PROGRESS { |
1733 | + color: black; |
1734 | + |
1735 | + a { |
1736 | + color: black; |
1737 | + } |
1738 | + } |
1739 | + |
1740 | + .mergestatusNEEDS_REVIEW { |
1741 | + color: #f60; |
1742 | + |
1743 | + a { |
1744 | + color: #f60; |
1745 | + } |
1746 | + } |
1747 | + |
1748 | + .mergestatusCODE_APPROVED, .mergestatusMERGED { |
1749 | + color: green; |
1750 | + |
1751 | + a { |
1752 | + color: green; |
1753 | + } |
1754 | + } |
1755 | + |
1756 | + .mergestatusREJECTED, .mergestatusMERGE_FAILED { |
1757 | + color: red; |
1758 | + |
1759 | + a { |
1760 | + color: red; |
1761 | + } |
1762 | + } |
1763 | + |
1764 | + .mergestatusQUEUED { |
1765 | + color: black; |
1766 | + |
1767 | + a { |
1768 | + color: black; |
1769 | + } |
1770 | + } |
1771 | + |
1772 | + .mergestatusSUPERSEDED { |
1773 | + color: #666; |
1774 | + |
1775 | + a { |
1776 | + color: #666; |
1777 | + } |
1778 | + } |
1779 | + |
1780 | + .codeimportNEW { |
1781 | + color: #930; |
1782 | + } |
1783 | + |
1784 | + .codeimportREVIEWED { |
1785 | + color: green; |
1786 | + } |
1787 | + |
1788 | + .codeimportINVALID, .codeimportSUSPENDED, .codeimportFAILING { |
1789 | + color: red; |
1790 | + } |
1791 | + |
1792 | + .translationimportstatusAPPROVED { |
1793 | + color: #050; |
1794 | + |
1795 | + a { |
1796 | + color: #050; |
1797 | + } |
1798 | + } |
1799 | + |
1800 | + .translationimportstatusIMPORTED { |
1801 | + color: green; |
1802 | + |
1803 | + a { |
1804 | + color: green; |
1805 | + } |
1806 | + } |
1807 | + |
1808 | + .translationimportstatusDELETED { |
1809 | + color: black; |
1810 | + |
1811 | + a { |
1812 | + color: black; |
1813 | + } |
1814 | + } |
1815 | + |
1816 | + .translationimportstatusFAILED { |
1817 | + color: red; |
1818 | + |
1819 | + a { |
1820 | + color: red; |
1821 | + } |
1822 | + } |
1823 | + |
1824 | + .translationimportstatusNEEDS_REVIEW { |
1825 | + color: #f60; |
1826 | + |
1827 | + a { |
1828 | + color: #f60; |
1829 | + } |
1830 | + } |
1831 | + |
1832 | + .translationimportstatusBLOCKED { |
1833 | + color: blue; |
1834 | + |
1835 | + a { |
1836 | + color: blue; |
1837 | + } |
1838 | + } |
1839 | + |
1840 | + .translationimportstatusNEEDS_INFORMATION { |
1841 | + color: maroon; |
1842 | + |
1843 | + a { |
1844 | + color: maroon; |
1845 | + } |
1846 | + } |
1847 | + |
1848 | + .dismissed { |
1849 | + color: #666; |
1850 | + |
1851 | + a { |
1852 | + color: #666; |
1853 | + } |
1854 | + } |
1855 | + |
1856 | + .distromirrorstatusUP, .distromirrorstatusONEHOURBEHIND, .distromirrorstatusTWOHOURSBEHIND, .distromirrorstatusFOURHOURSBEHIND, .distromirrorstatusSIXHOURSBEHIND { |
1857 | + color: green; |
1858 | + } |
1859 | + |
1860 | + .distromirrorstatusONEDAYBEHIND { |
1861 | + color: #f60; |
1862 | + } |
1863 | + |
1864 | + .distromirrorstatusTWODAYSBEHIND, .distromirrorstatusONEWEEKBEHIND { |
1865 | + color: red; |
1866 | + } |
1867 | + |
1868 | + .distromirrorstatusUNKNOWN { |
1869 | + color: #666; |
1870 | + } |
1871 | + |
1872 | + .buildstatusNEEDSBUILD { |
1873 | + color: gray; |
1874 | + } |
1875 | + |
1876 | + .buildstatusBUILDING { |
1877 | + color: black; |
1878 | + } |
1879 | + |
1880 | + .buildstatusFULLYBUILT { |
1881 | + color: green; |
1882 | + } |
1883 | + |
1884 | + .buildstatusFAILEDTOBUILD, .buildstatusMANUALDEPWAIT, .buildstatusCHROOTWAIT, .buildstatusSUPERSEDED, .buildstatusFAILEDTOUPLOAD { |
1885 | + color: red; |
1886 | + } |
1887 | + |
1888 | + .launchpad-gold { |
1889 | + color: #F8C300; |
1890 | + } |
1891 | + |
1892 | + .green { |
1893 | + color: green; |
1894 | + } |
1895 | + |
1896 | + .red { |
1897 | + color: red; |
1898 | + } |
1899 | diff --git a/lib/canonical/launchpad/icing/css/forms.css b/lib/canonical/launchpad/icing/css/forms.scss |
1900 | similarity index 68% |
1901 | rename from lib/canonical/launchpad/icing/css/forms.css |
1902 | rename to lib/canonical/launchpad/icing/css/forms.scss |
1903 | index f946c69..592408d 100644 |
1904 | --- a/lib/canonical/launchpad/icing/css/forms.css |
1905 | +++ b/lib/canonical/launchpad/icing/css/forms.scss |
1906 | @@ -1,458 +1,585 @@ |
1907 | +// This file the result of auto-converting forms.css to scss. |
1908 | + |
1909 | form { |
1910 | margin-bottom: 1em; |
1911 | + |
1912 | + h1 { |
1913 | + margin-bottom: 1em; |
1914 | } |
1915 | -form h1 { |
1916 | - margin-bottom: 1em; |
1917 | - } |
1918 | -form table th, form table td { |
1919 | - padding: 2px; |
1920 | - } |
1921 | -form table tbody th { |
1922 | - font-weight: bold; |
1923 | - } |
1924 | -form table label { |
1925 | - font-weight: bold; |
1926 | + |
1927 | + table { |
1928 | + th, td { |
1929 | + padding: 2px; |
1930 | + } |
1931 | + |
1932 | + tbody th, label { |
1933 | + font-weight: bold; |
1934 | + } |
1935 | } |
1936 | -.compound { |
1937 | + } |
1938 | + |
1939 | + .compound { |
1940 | margin-bottom: .5em; |
1941 | - } |
1942 | -.field.subordinate label { |
1943 | + } |
1944 | + |
1945 | + .field.subordinate label { |
1946 | font-weight: normal; |
1947 | - } |
1948 | -fieldset { |
1949 | + } |
1950 | + |
1951 | + fieldset { |
1952 | border-width: 2px 0 0; |
1953 | margin: 1em 0; |
1954 | padding: 1em 0 0; |
1955 | - } |
1956 | -label { |
1957 | + } |
1958 | + |
1959 | + label { |
1960 | white-space: nowrap; |
1961 | + } |
1962 | + |
1963 | + input { |
1964 | + &[type='image'] { |
1965 | + vertical-align: middle; |
1966 | } |
1967 | -input[type='image'] { |
1968 | - vertical-align: middle; |
1969 | - } |
1970 | -input { |
1971 | + |
1972 | visibility: inherit; |
1973 | + |
1974 | + &[type=radio] { |
1975 | + margin-left: 1em; |
1976 | } |
1977 | -input[type=radio], |
1978 | -.processors input { |
1979 | + } |
1980 | + |
1981 | + .processors input { |
1982 | margin-left: 1em; |
1983 | - } |
1984 | -input.urlTextType { |
1985 | + } |
1986 | + |
1987 | + input.urlTextType { |
1988 | width: 40em; |
1989 | - } |
1990 | -textarea { |
1991 | + } |
1992 | + |
1993 | + textarea { |
1994 | display: block; |
1995 | width: 90%; |
1996 | max-width: 60em; |
1997 | padding: 2px; |
1998 | - } |
1999 | -button { |
2000 | + } |
2001 | + |
2002 | + button { |
2003 | padding: 0; |
2004 | - } |
2005 | -button.overlay-close-button { |
2006 | - float: right; |
2007 | - width: 15px; |
2008 | - height: 15px; |
2009 | - display: block; |
2010 | - margin-top: 4px; |
2011 | - } |
2012 | -input[type=input] + button, |
2013 | -img[src$=spinner] + button { |
2014 | + |
2015 | + &.overlay-close-button { |
2016 | + float: right; |
2017 | + width: 15px; |
2018 | + height: 15px; |
2019 | + display: block; |
2020 | + margin-top: 4px; |
2021 | + } |
2022 | + } |
2023 | + |
2024 | + input[type=input] + button, img[src$=spinner] + button { |
2025 | margin-left: 6px !important; |
2026 | - } |
2027 | -.selection-choices { |
2028 | - margin: 0.75em 0 0 1em |
2029 | - } |
2030 | -.fieldRequired, .fieldOptional { |
2031 | + } |
2032 | + |
2033 | + .selection-choices { |
2034 | + margin: 0.75em 0 0 1em; |
2035 | + } |
2036 | + |
2037 | + .fieldRequired, .fieldOptional { |
2038 | color: #999; |
2039 | - } |
2040 | -.field.subordinate { |
2041 | + } |
2042 | + |
2043 | + .field.subordinate { |
2044 | margin-left: 2.6em; |
2045 | - } |
2046 | -.formHelp { |
2047 | + } |
2048 | + |
2049 | + .formHelp { |
2050 | max-width: 45em; |
2051 | margin: 0.2em 0 0.5em 0.2em; |
2052 | color: #666; |
2053 | - } |
2054 | -.subordinate[type="checkbox"] + label + .formHelp { |
2055 | + } |
2056 | + |
2057 | + .subordinate[type="checkbox"] + label + .formHelp { |
2058 | margin-left: 3.4em; |
2059 | - } |
2060 | -.listbox { |
2061 | + } |
2062 | + |
2063 | + .listbox { |
2064 | /* a scrolling list of checkboxes or radio buttons */ |
2065 | border: 1px solid #8cacbb; |
2066 | display: inline-block; |
2067 | max-height: 12em; |
2068 | overflow: auto; |
2069 | overflow: -moz-scrollbars-vertical; |
2070 | + |
2071 | + label { |
2072 | + background-color: #f6f6f6; |
2073 | + border: solid white; |
2074 | + border-width: 0 0 1px 0; |
2075 | + display: block; |
2076 | } |
2077 | -.listbox label { |
2078 | - background-color: #f6f6f6; |
2079 | - border: solid white; |
2080 | - border-width: 0 0 1px 0; |
2081 | - display: block; |
2082 | - } |
2083 | -.extra-form-buttons { |
2084 | + } |
2085 | + |
2086 | + .extra-form-buttons { |
2087 | text-align: center; |
2088 | padding-top: 1em; |
2089 | + |
2090 | + button { |
2091 | + margin-right: 0.7em; |
2092 | } |
2093 | -.extra-form-buttons button { |
2094 | - margin-right: 0.7em; |
2095 | - } |
2096 | -.actions * { |
2097 | - /* |
2098 | - Action links are those that begin the process of doing something. |
2099 | - For example, "Register a branch", "Edit profile", "Link to CVE". |
2100 | - When presented inline, they are rendered by launchpad-inline-link.pt. |
2101 | + } |
2102 | |
2103 | - Action buttons are those that submit a multi-row form. |
2104 | - Often an action button will have an "or _Cancel_" link next to it. |
2105 | + .actions { |
2106 | + * { |
2107 | + /* |
2108 | + Action links are those that begin the process of doing something. |
2109 | + For example, "Register a branch", "Edit profile", "Link to CVE". |
2110 | + When presented inline, they are rendered by launchpad-inline-link.pt. |
2111 | |
2112 | - We want 0.5em horizontal gap between links and buttons in these |
2113 | - sections. Using margin-left would cause a bad gap to the left of a |
2114 | - leftmost item. Using margin-right would cause a bad gap to the right of |
2115 | - a rightmost item. We could fix these problems with :first-child/:last- |
2116 | - child, but not in IE. So we do something a little tricky. We go ahead |
2117 | - and give each child of the actions container a right margin: |
2118 | - */ |
2119 | - margin-right: 0.5em; |
2120 | - } |
2121 | -.actions * * { |
2122 | - /* because ">" doesn't work in IE6 */ |
2123 | - margin-right: 0; |
2124 | + Action buttons are those that submit a multi-row form. |
2125 | + Often an action button will have an "or _Cancel_" link next to it. |
2126 | + |
2127 | + We want 0.5em horizontal gap between links and buttons in these |
2128 | + sections. Using margin-left would cause a bad gap to the left of a |
2129 | + leftmost item. Using margin-right would cause a bad gap to the right of |
2130 | + a rightmost item. We could fix these problems with :first-child/:last- |
2131 | + child, but not in IE. So we do something a little tricky. We go ahead |
2132 | + and give each child of the actions container a right margin: |
2133 | + */ |
2134 | + margin-right: 0.5em; |
2135 | + |
2136 | + * { |
2137 | + /* because ">" doesn't work in IE6 */ |
2138 | + margin-right: 0; |
2139 | + } |
2140 | } |
2141 | -.actions { |
2142 | + |
2143 | /* Then in addition to the top/bottom margins of the actions container, |
2144 | we give it a *negative* right margin, cancelling out that of the last |
2145 | child. */ |
2146 | margin: 1em -0.5em 1em 0; |
2147 | + } |
2148 | + |
2149 | + table { |
2150 | + &.radio-button-widget tr td { |
2151 | + /* Opera doesn't use the general tr above for the radio button table */ |
2152 | + vertical-align: top; |
2153 | } |
2154 | -table.radio-button-widget tr td { |
2155 | - /* Opera doesn't use the general tr above for the radio button table */ |
2156 | - vertical-align: top; |
2157 | - } |
2158 | -table.listing div.field>table { |
2159 | - /* Hack to add breathing room to bug status forms: */ |
2160 | - margin-top: 0.5em; |
2161 | - } |
2162 | -table.listing div.field>label, |
2163 | -table.listing div.field>div>label, |
2164 | -table.listing div.actions { |
2165 | - display: block; |
2166 | - margin-top: 1em; |
2167 | - } |
2168 | -table.form, table.extra-options { |
2169 | - /* Many forms are laid out using tables, with appropriate spacing: */ |
2170 | - /* http://launchpad.test/firefox/+edit */ |
2171 | - margin: 1em 0 inherit inherit; |
2172 | - width: 100%; |
2173 | - } |
2174 | -table.form th { |
2175 | - font-weight: normal; |
2176 | + |
2177 | + &.listing div { |
2178 | + &.field > { |
2179 | + table { |
2180 | + /* Hack to add breathing room to bug status forms: */ |
2181 | + margin-top: 0.5em; |
2182 | + } |
2183 | + |
2184 | + label, div > label { |
2185 | + display: block; |
2186 | + margin-top: 1em; |
2187 | + } |
2188 | + } |
2189 | + |
2190 | + &.actions { |
2191 | + display: block; |
2192 | + margin-top: 1em; |
2193 | + } |
2194 | } |
2195 | -table.form th, table.form td, |
2196 | -table.form table.extra-options td, |
2197 | -table.form table.extra-options th { |
2198 | - padding-bottom: 1em; |
2199 | + |
2200 | + &.form, &.extra-options { |
2201 | + /* Many forms are laid out using tables, with appropriate spacing: */ |
2202 | + /* http://launchpad.test/firefox/+edit */ |
2203 | + margin: 1em 0 inherit inherit; |
2204 | + width: 100%; |
2205 | } |
2206 | -table.form table.listing th, |
2207 | -table.form table.listing td { |
2208 | - padding-bottom: 0.25em; |
2209 | -} |
2210 | -table.form td td { |
2211 | - padding-bottom: 0; |
2212 | + |
2213 | + &.form { |
2214 | + th { |
2215 | + font-weight: normal; |
2216 | + padding-bottom: 1em; |
2217 | + } |
2218 | + |
2219 | + td { |
2220 | + padding-bottom: 1em; |
2221 | + } |
2222 | + |
2223 | + table { |
2224 | + &.extra-options { |
2225 | + td, th { |
2226 | + padding-bottom: 1em; |
2227 | + } |
2228 | + } |
2229 | + |
2230 | + &.listing { |
2231 | + th, td { |
2232 | + padding-bottom: 0.25em; |
2233 | + } |
2234 | + } |
2235 | + } |
2236 | + |
2237 | + td td { |
2238 | + padding-bottom: 0; |
2239 | + } |
2240 | } |
2241 | -.long td { |
2242 | - /* Long forms are composed of multiple tables and visible fieldsets */ |
2243 | - padding-right: 1em; |
2244 | + } |
2245 | + |
2246 | + .long { |
2247 | + td { |
2248 | + /* Long forms are composed of multiple tables and visible fieldsets */ |
2249 | + padding-right: 1em; |
2250 | } |
2251 | -.long fieldset { |
2252 | - margin-top: 1em; |
2253 | + |
2254 | + fieldset { |
2255 | + margin-top: 1em; |
2256 | } |
2257 | -.long legend { |
2258 | - color: #666; |
2259 | - font-weight: bold; |
2260 | + |
2261 | + legend { |
2262 | + color: #666; |
2263 | + font-weight: bold; |
2264 | } |
2265 | -.collapsible { |
2266 | + } |
2267 | + |
2268 | + .collapsible { |
2269 | /* Collapsible sections |
2270 | Some page sections are hidden by default, expanded by clicking a link. |
2271 | see lp.js:activate_collapsibles() */ |
2272 | border: none; |
2273 | margin: 0; |
2274 | + } |
2275 | + |
2276 | + fieldset.collapsible { |
2277 | + padding: 16px 0 0; |
2278 | + |
2279 | + /* "Add a comment/attachment" form in bug reports */ |
2280 | + } |
2281 | + |
2282 | + .collapsible { |
2283 | + h2 { |
2284 | + margin-top: 0; |
2285 | } |
2286 | -fieldset.collapsible { |
2287 | - padding: 16px 0 0; /* "Add a comment/attachment" form in bug reports */ |
2288 | - } |
2289 | -.collapsible h2 { |
2290 | - margin-top: 0; |
2291 | - } |
2292 | -.collapsible .collapsed { |
2293 | - display: none; |
2294 | + |
2295 | + .collapsed { |
2296 | + display: none; |
2297 | } |
2298 | -.collapsible .expanded { |
2299 | - display: block; |
2300 | + |
2301 | + .expanded { |
2302 | + display: block; |
2303 | } |
2304 | -.collapsible > :first-child { |
2305 | - font-weight: normal; |
2306 | + |
2307 | + > :first-child { |
2308 | + font-weight: normal; |
2309 | + text-decoration: none; |
2310 | } |
2311 | -.collapsible > :first-child, .collapsible :first-child a:hover { |
2312 | - text-decoration: none; |
2313 | + |
2314 | + :first-child a:hover { |
2315 | + text-decoration: none; |
2316 | } |
2317 | -.collapsible > :first-child a span { |
2318 | - text-decoration: underline; |
2319 | + |
2320 | + > :first-child a span { |
2321 | + text-decoration: underline; |
2322 | } |
2323 | -img.collapseIcon { |
2324 | + } |
2325 | + |
2326 | + img.collapseIcon { |
2327 | text-decoration: none; |
2328 | vertical-align: middle; |
2329 | - } |
2330 | -.collapsible .collapsed { |
2331 | + } |
2332 | + |
2333 | + .collapsible .collapsed { |
2334 | border: none; |
2335 | margin-bottom: 0; |
2336 | + } |
2337 | + |
2338 | + .yui3-pretty-overlay #yui3-pretty-overlay-modal { |
2339 | + h1, h2 { |
2340 | + /* lazr is injecting presumptive markup. */ |
2341 | + color: #333; |
2342 | + margin-right: 15px; |
2343 | } |
2344 | -.yui3-pretty-overlay #yui3-pretty-overlay-modal h1, |
2345 | -.yui3-pretty-overlay #yui3-pretty-overlay-modal h2 { |
2346 | - /* lazr is injecting presumptive markup. */ |
2347 | - color: #333; |
2348 | - margin-right: 15px; |
2349 | - } |
2350 | -.yui3-editable_text { |
2351 | + } |
2352 | + |
2353 | + .yui3-editable_text { |
2354 | outline: none; |
2355 | - } |
2356 | -.yui3-ieditor { |
2357 | + } |
2358 | + |
2359 | + .yui3-ieditor { |
2360 | padding-right: 288px; |
2361 | - } |
2362 | -.yui3-skin-sam .yui3-ieditor-input { |
2363 | + } |
2364 | + |
2365 | + .yui3-skin-sam .yui3-ieditor-input { |
2366 | margin-top: 0; |
2367 | -} |
2368 | -h1 .yui3-ieditor-errors { |
2369 | + } |
2370 | + |
2371 | + h1 .yui3-ieditor-errors { |
2372 | font-size: 12px; |
2373 | - } |
2374 | -.steps h2 { |
2375 | + } |
2376 | + |
2377 | + .steps h2 { |
2378 | /* lazr is injecting presumptive markup. */ |
2379 | font-size: 12px; |
2380 | line-height: 30px; |
2381 | - } |
2382 | -.step-links { |
2383 | + } |
2384 | + |
2385 | + .step-links { |
2386 | padding-top: 0; |
2387 | padding-bottom: 0; |
2388 | margin-left: 0.75em; |
2389 | margin-right: 10em; |
2390 | text-align: left; |
2391 | + |
2392 | + .prev { |
2393 | + margin-right: 0.7em; |
2394 | } |
2395 | -.step-links .prev { |
2396 | - margin-right: 0.7em; |
2397 | - } |
2398 | -.lazr-multiline-edit .yui3-ieditor { |
2399 | - padding-right: 0; |
2400 | + } |
2401 | + |
2402 | + .lazr-multiline-edit { |
2403 | + .yui3-ieditor { |
2404 | + padding-right: 0; |
2405 | } |
2406 | -.lazr-multiline-edit .clearfix h3 { |
2407 | - /* Undo the damage done by lazr. */ |
2408 | - font-family: Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif; |
2409 | - line-height: 12px; |
2410 | + |
2411 | + .clearfix h3 { |
2412 | + /* Undo the damage done by lazr. */ |
2413 | + font-family: Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif; |
2414 | + line-height: 12px; |
2415 | } |
2416 | -.widget-hd.js-action { |
2417 | + } |
2418 | + |
2419 | + .widget-hd.js-action { |
2420 | /* The js-action class is also used for non-links, for example, with |
2421 | expand/collapse sections. */ |
2422 | color: #093; |
2423 | cursor: pointer; |
2424 | + |
2425 | + &:hover { |
2426 | + text-decoration: underline; |
2427 | } |
2428 | -.widget-hd.js-action:hover { |
2429 | - text-decoration: underline; |
2430 | - } |
2431 | + } |
2432 | |
2433 | -.yui3-ichoicesource-content .value:hover { |
2434 | + .yui3-ichoicesource-content .value:hover { |
2435 | text-decoration: underline; |
2436 | cursor: pointer; |
2437 | - } |
2438 | + } |
2439 | |
2440 | -.no-click:hover { |
2441 | + .no-click:hover { |
2442 | text-decoration: none !important; |
2443 | cursor: default !important; |
2444 | - } |
2445 | - |
2446 | -.yui3-buglisting-config-util a { |
2447 | + } |
2448 | + |
2449 | + .yui3-buglisting-config-util a { |
2450 | position: relative; |
2451 | top: 3px; |
2452 | left: 4px; |
2453 | - } |
2454 | -.yui3-baseconfigutil a { |
2455 | + } |
2456 | + |
2457 | + .yui3-baseconfigutil a { |
2458 | cursor: pointer; |
2459 | + } |
2460 | + |
2461 | + .yui3-buglisting-config-util-overlay { |
2462 | + a.close-button { |
2463 | + visibility: inherit; |
2464 | } |
2465 | -.yui3-buglisting-config-util-overlay a.close-button { |
2466 | - visibility: inherit; |
2467 | - } |
2468 | -.yui3-buglisting-config-util-overlay form { |
2469 | - width: 80%; |
2470 | + |
2471 | + form { |
2472 | + width: 80%; |
2473 | } |
2474 | -.yui3-buglisting-config-util-overlay div.yui3-lazr-formoverlay-actions { |
2475 | - text-align: left; |
2476 | + |
2477 | + div.yui3-lazr-formoverlay-actions { |
2478 | + text-align: left; |
2479 | } |
2480 | -.yui3-buglisting-config-util-overlay .reset-buglisting { |
2481 | - position: relative; |
2482 | - top: 20px; |
2483 | - left: 75px; |
2484 | - cursor: pointer; |
2485 | + |
2486 | + .reset-buglisting { |
2487 | + position: relative; |
2488 | + top: 20px; |
2489 | + left: 75px; |
2490 | + cursor: pointer; |
2491 | } |
2492 | -.error.message, .warning.message, .informational.message { |
2493 | + } |
2494 | + |
2495 | + .error.message, .warning.message, .informational.message { |
2496 | border: solid #666; |
2497 | border-width: 1px 2px 2px 1px; |
2498 | color: black; |
2499 | margin: 1em auto 1em auto; |
2500 | padding: 0 1em 1em 2em; |
2501 | width: 30em; |
2502 | - } |
2503 | -.error.message::before, .warning.message::before, |
2504 | -.informational.message::before { |
2505 | + } |
2506 | + |
2507 | + .error.message::before, .warning.message::before, .informational.message::before { |
2508 | /* The alerts are preceded with an icon overlaying the top left corner: */ |
2509 | display: block; |
2510 | margin: -15px 0 -6px -35px; |
2511 | - } |
2512 | -.error { |
2513 | + } |
2514 | + |
2515 | + .error { |
2516 | /* Error messages are pink, with alerts having an error icon: */ |
2517 | background: #ffe4e4; |
2518 | + |
2519 | + &.message::before { |
2520 | + content: url(/@@/error-large); |
2521 | } |
2522 | -.error.message::before { |
2523 | - content: url(/@@/error-large); |
2524 | - } |
2525 | -.warning { |
2526 | + } |
2527 | + |
2528 | + .warning { |
2529 | /* Warning messages are orange, with alerts having a warning icon: */ |
2530 | background: #fff59c; |
2531 | + |
2532 | + &.message::before { |
2533 | + content: url(/@@/warning-large); |
2534 | } |
2535 | -.warning.message::before { |
2536 | - content: url(/@@/warning-large); |
2537 | - } |
2538 | -.informational { |
2539 | + } |
2540 | + |
2541 | + .informational { |
2542 | /* Informational messages are blue-to-grey, alerts have an info icon. */ |
2543 | |
2544 | background: #d4e8ff url(/+icing/blue-fade-to-grey); |
2545 | + |
2546 | + &.message::before { |
2547 | + content: url(/@@/info-large); |
2548 | } |
2549 | -.informational.message::before { |
2550 | - content: url(/@@/info-large); |
2551 | - } |
2552 | -.informational p.last { |
2553 | - margin-bottom: 0; |
2554 | + |
2555 | + p.last { |
2556 | + margin-bottom: 0; |
2557 | } |
2558 | -.debugging { |
2559 | + } |
2560 | + |
2561 | + .debugging { |
2562 | /* Debugging messages are white on grey, alerts have an info icon. */ |
2563 | background: #666; |
2564 | color: white; |
2565 | + |
2566 | + &.message::before { |
2567 | + content: url(/@@/info-large); |
2568 | } |
2569 | -.debugging.message::before { |
2570 | - content: url(/@@/info-large); |
2571 | - } |
2572 | -.error .message { |
2573 | + } |
2574 | + |
2575 | + .error .message { |
2576 | /* And inside, the error message itself uses a smaller icon. */ |
2577 | background: url(/@@/error) center left no-repeat; |
2578 | margin-bottom: 0.25em; |
2579 | padding-left: 18px; |
2580 | - } |
2581 | -table.form .error { |
2582 | + } |
2583 | + |
2584 | + table.form .error { |
2585 | /* Form errors override this background color, because the lack of space |
2586 | between the edge of fields and the edge of the color would look bad. */ |
2587 | background: none; |
2588 | - } |
2589 | -.inline-warning { |
2590 | + } |
2591 | + |
2592 | + .inline-warning { |
2593 | /* Warning messages inlined in the page. */ |
2594 | color: red; |
2595 | font-weight: bold; |
2596 | - } |
2597 | -.sml-informational { |
2598 | + } |
2599 | + |
2600 | + .sml-informational { |
2601 | background: #d4e8ff url('/+icing/blue-fade-to-grey'); |
2602 | border: solid #666; |
2603 | border-width: 1px 2px 2px 1px; |
2604 | padding: 5px 5px 5px 5px; |
2605 | width: 44em; |
2606 | + |
2607 | + &::before { |
2608 | + content: url('/@@/info'); |
2609 | } |
2610 | -.sml-informational::before { |
2611 | - content: url('/@@/info'); |
2612 | - } |
2613 | -.important-notice-popup { |
2614 | + } |
2615 | + |
2616 | + .important-notice-popup { |
2617 | padding: 1em 1em 0 1em; |
2618 | width: auto; |
2619 | overflow: hidden; |
2620 | - } |
2621 | -.important-notice-container { |
2622 | + } |
2623 | + |
2624 | + .important-notice-container { |
2625 | text-align: center; |
2626 | width: 100%; |
2627 | padding-bottom: 1em; |
2628 | position: relative; |
2629 | - } |
2630 | -.important-notice-balloon { |
2631 | + } |
2632 | + |
2633 | + .important-notice-balloon { |
2634 | border-radius: 5px; |
2635 | background-color: #ededed; |
2636 | padding: 1em; |
2637 | border: 1px solid #000; |
2638 | width: auto; |
2639 | overflow: hidden; |
2640 | - } |
2641 | -.important-notice-buttons { |
2642 | + } |
2643 | + |
2644 | + .important-notice-buttons { |
2645 | float: right; |
2646 | - } |
2647 | -.important-notice-cancel-button { |
2648 | + } |
2649 | + |
2650 | + .important-notice-cancel-button { |
2651 | visibility: hidden; |
2652 | cursor: pointer; |
2653 | - } |
2654 | -.important-notice { |
2655 | + } |
2656 | + |
2657 | + .important-notice { |
2658 | padding: 0px 0px 40px 0px; |
2659 | height: 32px; |
2660 | overflow: hidden; |
2661 | + |
2662 | + a { |
2663 | + font-weight: bold; |
2664 | + text-decoration: underline; |
2665 | } |
2666 | -.important-notice a { |
2667 | - font-weight: bold; |
2668 | - text-decoration: underline; |
2669 | - } |
2670 | + } |
2671 | |
2672 | + /* ================== |
2673 | + Translations Forms |
2674 | + */ |
2675 | |
2676 | -/* ================== |
2677 | - Translations Forms |
2678 | -*/ |
2679 | + /* ==== Translations hand-made forms ==== */ |
2680 | |
2681 | -/* ==== Translations hand-made forms ==== */ |
2682 | + form.translations { |
2683 | + div { |
2684 | + &.fields { |
2685 | + padding: 1em; |
2686 | + } |
2687 | |
2688 | -form.translations div.fields { |
2689 | - padding: 1em; |
2690 | + &.actions { |
2691 | + padding: 1em; |
2692 | + text-align: left; |
2693 | + clear: both; |
2694 | + } |
2695 | } |
2696 | -form.translations div.actions { |
2697 | - padding: 1em; |
2698 | - text-align: left; |
2699 | - clear: both; |
2700 | - } |
2701 | -form.translations input { |
2702 | - padding-left: 0.5em; |
2703 | - padding-right: 0.5em; |
2704 | - } |
2705 | -form.translations select { |
2706 | - margin-left: 0.5em; |
2707 | - padding-right: 0.5em; |
2708 | - } |
2709 | -form.translations label { |
2710 | - padding-left: 0.5em; |
2711 | - padding-right: 1em; |
2712 | - } |
2713 | -form.translations .listbox label { |
2714 | - padding: 2px 1em 2px 2px; |
2715 | - } |
2716 | - |
2717 | -/* Provide top-alignment for radio boxes and longer explanations |
2718 | - * without using tables. |
2719 | - * |
2720 | - * Examples: |
2721 | - * https://translations.launchpad.test/evolution/trunk/+pots/evolution-2.2/es/+upload |
2722 | - * https://translations.launchpad.test/evolution/trunk/+pots/evolution-2.2/+export |
2723 | - */ |
2724 | -form.translations div.alignment .content { |
2725 | - float: left; |
2726 | - } |
2727 | -form.translations div.alignment .selector { |
2728 | - margin-right: 0.5em; |
2729 | - float: left; |
2730 | - clear: both; |
2731 | - } |
2732 | -form.translations div.alignment .content label { |
2733 | - padding: 0px; |
2734 | - margin: 0px; |
2735 | - font-weight: bold; |
2736 | + |
2737 | + input { |
2738 | + padding-left: 0.5em; |
2739 | + padding-right: 0.5em; |
2740 | } |
2741 | -form.translations div.alignment .secondary label { |
2742 | - font-weight: normal; |
2743 | - padding: 2px 1em 2px 2px; |
2744 | + |
2745 | + select { |
2746 | + margin-left: 0.5em; |
2747 | + padding-right: 0.5em; |
2748 | + } |
2749 | + |
2750 | + label { |
2751 | + padding-left: 0.5em; |
2752 | + padding-right: 1em; |
2753 | + } |
2754 | + |
2755 | + .listbox label { |
2756 | + padding: 2px 1em 2px 2px; |
2757 | + } |
2758 | + |
2759 | + div.alignment { |
2760 | + .content { |
2761 | + float: left; |
2762 | + } |
2763 | + |
2764 | + .selector { |
2765 | + margin-right: 0.5em; |
2766 | + float: left; |
2767 | + clear: both; |
2768 | + } |
2769 | + |
2770 | + .content label { |
2771 | + padding: 0px; |
2772 | + margin: 0px; |
2773 | + font-weight: bold; |
2774 | + } |
2775 | + |
2776 | + .secondary label { |
2777 | + font-weight: normal; |
2778 | + padding: 2px 1em 2px 2px; |
2779 | + } |
2780 | } |
2781 | + } |
2782 | diff --git a/lib/canonical/launchpad/icing/css/layout.css b/lib/canonical/launchpad/icing/css/layout.scss |
2783 | similarity index 78% |
2784 | rename from lib/canonical/launchpad/icing/css/layout.css |
2785 | rename to lib/canonical/launchpad/icing/css/layout.scss |
2786 | index cfe8ec3..d01f79a 100644 |
2787 | --- a/lib/canonical/launchpad/icing/css/layout.css |
2788 | +++ b/lib/canonical/launchpad/icing/css/layout.scss |
2789 | @@ -1,44 +1,55 @@ |
2790 | +// This file the result of auto-converting layout.css to scss. |
2791 | + |
2792 | /* This probably shouldn't be here, but I'm not sure where to put it yet */ |
2793 | + |
2794 | .yui-d0 { |
2795 | margin: 10px 20px; |
2796 | - } |
2797 | -.yui-t4 .yui-b { |
2798 | - width: 21%; |
2799 | - } |
2800 | -.yui-t4 .yui-main { |
2801 | - clear: both; |
2802 | - float: left; |
2803 | - margin-right: -25%; |
2804 | - } |
2805 | -.yui-t4 .yui-main .yui-b { |
2806 | - width: auto; |
2807 | - margin-right: 25%; |
2808 | + } |
2809 | + |
2810 | + .yui-t4 { |
2811 | + .yui-b { |
2812 | + width: 21%; |
2813 | } |
2814 | |
2815 | + .yui-main { |
2816 | + clear: both; |
2817 | + float: left; |
2818 | + margin-right: -25%; |
2819 | |
2820 | + .yui-b { |
2821 | + width: auto; |
2822 | + margin-right: 25%; |
2823 | + } |
2824 | + } |
2825 | + } |
2826 | |
2827 | -/* ========================= |
2828 | - Header |
2829 | -*/ |
2830 | -.demo { |
2831 | + /* ========================= |
2832 | + Header |
2833 | + */ |
2834 | + |
2835 | + .demo { |
2836 | background-color: #fee; |
2837 | - } |
2838 | -.login-logout { |
2839 | + } |
2840 | + |
2841 | + .login-logout { |
2842 | position: absolute; |
2843 | top: .5em; |
2844 | right: 1.5em; |
2845 | - } |
2846 | -#rendertime { |
2847 | + } |
2848 | + |
2849 | + #rendertime { |
2850 | float: left; |
2851 | margin: 0.1em 1.2em 0 0; |
2852 | color: #666; |
2853 | - } |
2854 | -#ajax-time { |
2855 | + } |
2856 | + |
2857 | + #ajax-time { |
2858 | float: left; |
2859 | margin: 0 1.2em 0 0.2em; |
2860 | position: relative; |
2861 | - } |
2862 | -#ajax-time-list { |
2863 | + } |
2864 | + |
2865 | + #ajax-time-list { |
2866 | position: absolute; |
2867 | z-index: 10; |
2868 | top: 20px; |
2869 | @@ -49,168 +60,207 @@ |
2870 | -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); |
2871 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); |
2872 | border-radius: 5px; |
2873 | + |
2874 | + li { |
2875 | + border-bottom: 1px solid #e0e0e0; |
2876 | + padding: 3px 5px; |
2877 | + |
2878 | + &:last-child { |
2879 | + border-bottom: none; |
2880 | + } |
2881 | + |
2882 | + span { |
2883 | + color: #999; |
2884 | + font-size: 11px; |
2885 | + display: block; |
2886 | + } |
2887 | } |
2888 | -#ajax-time-list li { |
2889 | - border-bottom: 1px solid #e0e0e0; |
2890 | - padding: 3px 5px; |
2891 | - } |
2892 | -#ajax-time-list li:last-child { |
2893 | - border-bottom: none; |
2894 | - } |
2895 | -#ajax-time-list li span { |
2896 | - color: #999; |
2897 | - font-size: 11px; |
2898 | - display: block; |
2899 | - } |
2900 | -#ajax-time-list strong.warning { |
2901 | - color: #f00; |
2902 | - background-color: transparent; |
2903 | + |
2904 | + strong.warning { |
2905 | + color: #f00; |
2906 | + background-color: transparent; |
2907 | } |
2908 | -/* The actions row of the watermark is reused by our mhonarc templates, |
2909 | - * which we can't easily change. So about half of this is overcomplex to |
2910 | - * support them too. Caution is also needed to avoid breaking |
2911 | - * Product:+index's inline title edit widget. |
2912 | - */ |
2913 | -div.watermark-apps-portlet { |
2914 | + } |
2915 | + |
2916 | + /* The actions row of the watermark is reused by our mhonarc templates, |
2917 | + * which we can't easily change. So about half of this is overcomplex to |
2918 | + * support them too. Caution is also needed to avoid breaking |
2919 | + * Product:+index's inline title edit widget. |
2920 | + */ |
2921 | + |
2922 | + div.watermark-apps-portlet { |
2923 | clear: both; |
2924 | margin-bottom: 0.8em; |
2925 | - } |
2926 | -div.watermark-apps-portlet > div { |
2927 | - display: inline-block; |
2928 | - vertical-align: middle; |
2929 | - } |
2930 | -div.watermark-apps-portlet > div.wide { |
2931 | - width: 75%; |
2932 | - } |
2933 | -div.watermark-apps-portlet > div > img, |
2934 | -div.watermark-apps-portlet > div > a > img { |
2935 | - display: block; |
2936 | - margin: 0 1em 0 0; |
2937 | - } |
2938 | -#watermark-heading { |
2939 | + |
2940 | + > div { |
2941 | + display: inline-block; |
2942 | + vertical-align: middle; |
2943 | + |
2944 | + &.wide { |
2945 | + width: 75%; |
2946 | + } |
2947 | + |
2948 | + > { |
2949 | + img, a > img { |
2950 | + display: block; |
2951 | + margin: 0 1em 0 0; |
2952 | + } |
2953 | + } |
2954 | + } |
2955 | + } |
2956 | + |
2957 | + #watermark-heading { |
2958 | color: #000; |
2959 | font-weight: normal; |
2960 | font-size: 20px; |
2961 | line-height: 26px; |
2962 | margin: 0; |
2963 | + |
2964 | + :first-child { |
2965 | + font-size: 32px; |
2966 | + line-height: 32px; |
2967 | } |
2968 | -#watermark-heading :first-child { |
2969 | - font-size: 32px; |
2970 | - line-height: 32px; |
2971 | + |
2972 | + :link, :visited { |
2973 | + color: #000; |
2974 | } |
2975 | -#watermark-heading :link, #watermark-heading :visited { |
2976 | - color: #000; |
2977 | -} |
2978 | -.watermark-apps-portlet ul.facetmenu { |
2979 | + } |
2980 | + |
2981 | + .watermark-apps-portlet ul.facetmenu { |
2982 | margin-top: 12px; |
2983 | margin-left: -0.5em; |
2984 | white-space: nowrap; |
2985 | + |
2986 | + li { |
2987 | + display: inline; |
2988 | + list-style-type: none; |
2989 | + |
2990 | + a, span { |
2991 | + padding: 0.3em 0.5em; |
2992 | + margin-right: 0.4em; |
2993 | + } |
2994 | + |
2995 | + a { |
2996 | + &:link, &:visited { |
2997 | + color: #000; |
2998 | + text-decoration: none; |
2999 | + } |
3000 | + |
3001 | + &:hover { |
3002 | + color: #000; |
3003 | + background-color: #f3f3f3; |
3004 | + } |
3005 | + } |
3006 | + |
3007 | + &.active { |
3008 | + a, span { |
3009 | + font-weight: bold; |
3010 | + color: #fff; |
3011 | + background-color: #747474; |
3012 | + } |
3013 | + } |
3014 | + |
3015 | + &.disabled-tab { |
3016 | + color: #747474; |
3017 | + } |
3018 | } |
3019 | -.watermark-apps-portlet ul.facetmenu li { |
3020 | - display: inline; |
3021 | - list-style-type: none; |
3022 | - } |
3023 | -.watermark-apps-portlet ul.facetmenu li a, |
3024 | -.watermark-apps-portlet ul.facetmenu li span { |
3025 | - padding: 0.3em 0.5em; |
3026 | - margin-right: 0.4em; |
3027 | - } |
3028 | -.watermark-apps-portlet ul.facetmenu li a:link, |
3029 | -.watermark-apps-portlet ul.facetmenu li a:visited { |
3030 | - color: #000; |
3031 | - text-decoration: none; |
3032 | - } |
3033 | -.watermark-apps-portlet ul.facetmenu li a:hover { |
3034 | - color: #000; |
3035 | - background-color: #f3f3f3; |
3036 | - } |
3037 | -.watermark-apps-portlet ul.facetmenu li.active a, |
3038 | -.watermark-apps-portlet ul.facetmenu li.active span { |
3039 | - font-weight: bold; |
3040 | - color: #fff; |
3041 | - background-color: #747474; |
3042 | - } |
3043 | -.watermark-apps-portlet ul.facetmenu li.disabled-tab { |
3044 | - color: #747474; |
3045 | - } |
3046 | -.context-publication { |
3047 | + } |
3048 | + |
3049 | + .context-publication { |
3050 | margin-bottom: 1em; |
3051 | - } |
3052 | -.registering { |
3053 | + } |
3054 | + |
3055 | + .registering { |
3056 | /* Registered slot */ |
3057 | margin: .5em 0 1em 0; |
3058 | font-size: 10px; |
3059 | color: #666; |
3060 | - } |
3061 | -.breadcrumbs { |
3062 | + } |
3063 | + |
3064 | + .breadcrumbs { |
3065 | margin-left: 0; |
3066 | list-style-type: none; |
3067 | clear: both; |
3068 | font-size: 10px; |
3069 | + |
3070 | + li { |
3071 | + display: inline; |
3072 | + padding: 0; |
3073 | + |
3074 | + a { |
3075 | + color: #494949; |
3076 | + } |
3077 | + |
3078 | + &:after { |
3079 | + content: "Ā» "; |
3080 | + } |
3081 | + |
3082 | + &:last-child { |
3083 | + /* The following leaves a small margin in chrome/webkit, but using none |
3084 | + doesn't hide the Ā» in webkit either (both work for FF3.5). */ |
3085 | + font-weight: bold; |
3086 | + |
3087 | + &:after { |
3088 | + content: ''; |
3089 | + } |
3090 | + } |
3091 | } |
3092 | -.breadcrumbs li { |
3093 | - display: inline; |
3094 | - padding: 0; |
3095 | - } |
3096 | -.breadcrumbs li a { |
3097 | - color: #494949; |
3098 | - } |
3099 | -.breadcrumbs li:after { |
3100 | - content: "\00BB \0020" |
3101 | - } |
3102 | -.breadcrumbs li:last-child { |
3103 | - /* The following leaves a small margin in chrome/webkit, but using none |
3104 | - doesn't hide the Ā» in webkit either (both work for FF3.5). */ |
3105 | - font-weight: bold; |
3106 | - } |
3107 | -.breadcrumbs li:last-child:after { |
3108 | - content: ''; |
3109 | - } |
3110 | -#logincontrol { |
3111 | + } |
3112 | + |
3113 | + #logincontrol { |
3114 | /* Top right of the page is a link to log in or a button to log out: */ |
3115 | float: right; |
3116 | + |
3117 | + img { |
3118 | + /* align the image with the text */ |
3119 | + margin-bottom: -2px; |
3120 | } |
3121 | -#logincontrol img { |
3122 | - /* align the image with the text */ |
3123 | - margin-bottom: -2px; |
3124 | - } |
3125 | -#logincontrol form { |
3126 | - margin: 0; |
3127 | + |
3128 | + form { |
3129 | + margin: 0; |
3130 | } |
3131 | -#logincontrol input[type='submit'] { |
3132 | - /* The button lacks the right margin that buttons usually have: */ |
3133 | - font-size: 10px; |
3134 | - margin-right: 0; |
3135 | + |
3136 | + input[type='submit'] { |
3137 | + /* The button lacks the right margin that buttons usually have: */ |
3138 | + font-size: 10px; |
3139 | + margin-right: 0; |
3140 | } |
3141 | + } |
3142 | |
3143 | + /* ========================= |
3144 | + Footer |
3145 | + */ |
3146 | |
3147 | -/* ========================= |
3148 | - Footer |
3149 | -*/ |
3150 | -.footer { |
3151 | + .footer { |
3152 | clear: both; |
3153 | margin-top: 4em; |
3154 | padding-top: 0.5em; |
3155 | + |
3156 | + .lp-arcana { |
3157 | + background: url(/@@/footer-background.png) top left repeat-x; |
3158 | + padding: 0.8em; |
3159 | + border-radius: 5px 5px 0 0; |
3160 | + height: 2em; |
3161 | + |
3162 | + img { |
3163 | + vertical-align: middle; |
3164 | + } |
3165 | } |
3166 | -.footer .lp-arcana { |
3167 | - background: url(/@@/footer-background.png) top left repeat-x; |
3168 | - padding: 0.8em; |
3169 | - border-radius: 5px 5px 0 0; |
3170 | - height: 2em; |
3171 | - } |
3172 | -.footer .lp-arcana img { |
3173 | - vertical-align: middle; |
3174 | - } |
3175 | -.footer .sitemessage { |
3176 | - text-align: right; |
3177 | + |
3178 | + .sitemessage { |
3179 | + text-align: right; |
3180 | } |
3181 | -.footer .colophon { |
3182 | - margin: 3em 3em 1em 3em; |
3183 | - text-align: center; |
3184 | + |
3185 | + .colophon { |
3186 | + margin: 3em 3em 1em 3em; |
3187 | + text-align: center; |
3188 | } |
3189 | -.footer .lp-branding { |
3190 | - float: left; |
3191 | + |
3192 | + .lp-branding { |
3193 | + float: left; |
3194 | } |
3195 | -.footer form { |
3196 | - display: inline; |
3197 | + |
3198 | + form { |
3199 | + display: inline; |
3200 | } |
3201 | + } |
3202 | diff --git a/lib/canonical/launchpad/icing/css/modifiers.css b/lib/canonical/launchpad/icing/css/modifiers.scss |
3203 | similarity index 75% |
3204 | rename from lib/canonical/launchpad/icing/css/modifiers.css |
3205 | rename to lib/canonical/launchpad/icing/css/modifiers.scss |
3206 | index 03f4292..11c8f31 100644 |
3207 | --- a/lib/canonical/launchpad/icing/css/modifiers.css |
3208 | +++ b/lib/canonical/launchpad/icing/css/modifiers.scss |
3209 | @@ -1,224 +1,245 @@ |
3210 | -div.left, |
3211 | -div.right { |
3212 | - width: 50%; |
3213 | +// This file the result of auto-converting modifiers.css to scss. |
3214 | + |
3215 | +div { |
3216 | + &.left, &.right { |
3217 | + width: 50%; |
3218 | + } |
3219 | + |
3220 | + &.left { |
3221 | + clear: both; |
3222 | + float: left; |
3223 | } |
3224 | + } |
3225 | |
3226 | -div.left, |
3227 | -.cves { |
3228 | + .cves { |
3229 | clear: both; |
3230 | float: left; |
3231 | - } |
3232 | + } |
3233 | |
3234 | -div.right { |
3235 | - clear: right; |
3236 | - float: right; |
3237 | + div { |
3238 | + &.right { |
3239 | + clear: right; |
3240 | + float: right; |
3241 | } |
3242 | |
3243 | -div.centered { |
3244 | - text-align: center; |
3245 | - } |
3246 | + &.centered { |
3247 | + text-align: center; |
3248 | |
3249 | -div.centered table { |
3250 | - margin: 0 auto; |
3251 | - text-align: left; |
3252 | + table { |
3253 | + margin: 0 auto; |
3254 | + text-align: left; |
3255 | + } |
3256 | } |
3257 | |
3258 | -div.see-all { |
3259 | - text-align: right; |
3260 | + &.see-all { |
3261 | + text-align: right; |
3262 | } |
3263 | + } |
3264 | |
3265 | -span.nolink { |
3266 | - font-weight: bold; |
3267 | + span { |
3268 | + &.nolink { |
3269 | + font-weight: bold; |
3270 | } |
3271 | |
3272 | -span.see-all { |
3273 | - float: right; |
3274 | + &.see-all { |
3275 | + float: right; |
3276 | } |
3277 | + } |
3278 | |
3279 | -.see-all a { |
3280 | + .see-all a { |
3281 | padding-left: 8px; |
3282 | background: inherit; |
3283 | font-size: 12px; |
3284 | text-decoration: underline; |
3285 | - } |
3286 | + } |
3287 | |
3288 | -.transparent { |
3289 | + .transparent { |
3290 | opacity: 0; |
3291 | - filter: alpha(opacity=0); |
3292 | - -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
3293 | - } |
3294 | + filter: alpha(opacity = 0); |
3295 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
3296 | + } |
3297 | |
3298 | -.rss-right { |
3299 | + .rss-right { |
3300 | background: url(/@@/rss.png) right center no-repeat; |
3301 | - } |
3302 | + } |
3303 | |
3304 | -.logo { |
3305 | + .logo { |
3306 | float: left; |
3307 | display: inline; |
3308 | width: 64px; |
3309 | height: 64px; |
3310 | margin: 0 5px 0 0; |
3311 | - } |
3312 | + } |
3313 | |
3314 | -.registered { |
3315 | + .registered { |
3316 | color: #666; |
3317 | - } |
3318 | + } |
3319 | |
3320 | -.description { |
3321 | + .description { |
3322 | clear: both; |
3323 | - } |
3324 | + } |
3325 | |
3326 | -.search-results { |
3327 | + .search-results { |
3328 | margin-top: 1em; |
3329 | - } |
3330 | + } |
3331 | |
3332 | -.top-portlet .summary { |
3333 | + .top-portlet .summary { |
3334 | margin: 0 0 1em 0; |
3335 | + |
3336 | /* Same as h3, this appears under a h1. */ |
3337 | font-size: 16px; |
3338 | - } |
3339 | + } |
3340 | |
3341 | -.main-portlet { |
3342 | + .main-portlet { |
3343 | margin: 1em 0 1em 0; |
3344 | - } |
3345 | + } |
3346 | |
3347 | -.pre { |
3348 | + .pre { |
3349 | white-space: pre; |
3350 | - } |
3351 | + } |
3352 | |
3353 | -.clearfix:after { |
3354 | + .clearfix:after { |
3355 | /* use class="clearfix" whenever floats should be enclosed */ |
3356 | content: "."; |
3357 | display: block; |
3358 | height: 0; |
3359 | clear: both; |
3360 | visibility: hidden; |
3361 | - } |
3362 | + } |
3363 | |
3364 | -* html .clearfix { |
3365 | + * html .clearfix { |
3366 | /* Work around float bug in MSIE */ |
3367 | height: 1%; |
3368 | - } |
3369 | + } |
3370 | |
3371 | -div.beta { |
3372 | + div.beta { |
3373 | background-color: #c24848; |
3374 | margin-bottom: 7px; |
3375 | margin-top: 7px; |
3376 | height: 10px; |
3377 | width: 175px; |
3378 | - } |
3379 | |
3380 | -div.beta img { |
3381 | - height: 10px; |
3382 | + img { |
3383 | + height: 10px; |
3384 | } |
3385 | + } |
3386 | |
3387 | -.scrolled-box { |
3388 | + .scrolled-box { |
3389 | max-height: 4.5em; |
3390 | overflow-y: scroll; |
3391 | - } |
3392 | + } |
3393 | |
3394 | -.ellipsis.single-line { |
3395 | - display: inline-block; |
3396 | - white-space: nowrap; |
3397 | - overflow: hidden; |
3398 | - text-overflow: ellipsis; |
3399 | - -o-text-overflow: ellipsis; |
3400 | - -ms-text-overflow: ellipsis; |
3401 | + .ellipsis { |
3402 | + &.single-line { |
3403 | + display: inline-block; |
3404 | + white-space: nowrap; |
3405 | + overflow: hidden; |
3406 | + text-overflow: ellipsis; |
3407 | + -o-text-overflow: ellipsis; |
3408 | + -ms-text-overflow: ellipsis; |
3409 | } |
3410 | |
3411 | -.ellipsis.wide { |
3412 | - max-width: 60em; |
3413 | + &.wide { |
3414 | + max-width: 60em; |
3415 | } |
3416 | |
3417 | -.ellipsis:before { |
3418 | - content: attr(data-ellipsis-original-text); |
3419 | - position: absolute; |
3420 | - display: block; |
3421 | + &:before { |
3422 | + content: attr(data-ellipsis-original-text); |
3423 | + position: absolute; |
3424 | + display: block; |
3425 | } |
3426 | -.ellipsis:hover:before { |
3427 | - display: block; |
3428 | + |
3429 | + &:hover:before { |
3430 | + display: block; |
3431 | } |
3432 | + } |
3433 | |
3434 | -.exception { |
3435 | + .exception { |
3436 | color: #cc0000; |
3437 | - } |
3438 | + } |
3439 | |
3440 | -.highlight { |
3441 | + .highlight { |
3442 | background: #ddd; |
3443 | border: 1px solid #ddd; |
3444 | - } |
3445 | + } |
3446 | |
3447 | -.lowlight { |
3448 | + .lowlight { |
3449 | opacity: .5; |
3450 | - filter: alpha(opacity=50); |
3451 | - -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; |
3452 | - } |
3453 | + filter: alpha(opacity = 50); |
3454 | + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; |
3455 | + } |
3456 | |
3457 | -.status :link, |
3458 | -.importance :link { |
3459 | + .status :link, .importance :link { |
3460 | text-decoration: none; |
3461 | - } |
3462 | + } |
3463 | |
3464 | -.lesser, |
3465 | -.duplicate-details { |
3466 | + .lesser, .duplicate-details { |
3467 | font-size: 10px; |
3468 | clear: left; |
3469 | - } |
3470 | + } |
3471 | |
3472 | -pre.changelog, |
3473 | -table.diff td.line-no, table.diff td.ss-line-no, |
3474 | -table.diff td.text, |
3475 | -.comment-text, |
3476 | -.bug-activity { |
3477 | + pre.changelog { |
3478 | font-family: monospace; |
3479 | + } |
3480 | + |
3481 | + table.diff td { |
3482 | + &.line-no, &.ss-line-no, &.text { |
3483 | + font-family: monospace; |
3484 | } |
3485 | + } |
3486 | + |
3487 | + .comment-text, .bug-activity { |
3488 | + font-family: monospace; |
3489 | + } |
3490 | |
3491 | -.cloud-size-smallest { |
3492 | + .cloud-size-smallest { |
3493 | font-size: 10px; |
3494 | - } |
3495 | + } |
3496 | |
3497 | -.cloud-size-small { |
3498 | + .cloud-size-small { |
3499 | font-size: 12px; |
3500 | - } |
3501 | + } |
3502 | |
3503 | -.cloud-size-medium { |
3504 | + .cloud-size-medium { |
3505 | font-size: 14px; |
3506 | - } |
3507 | + } |
3508 | |
3509 | -.cloud-size-large { |
3510 | + .cloud-size-large { |
3511 | font-size: 16px; |
3512 | - } |
3513 | + } |
3514 | |
3515 | -.cloud-size-largest { |
3516 | + .cloud-size-largest { |
3517 | font-size: 18px; |
3518 | - } |
3519 | + } |
3520 | |
3521 | -.cloud-dark { |
3522 | + .cloud-dark { |
3523 | color: #00f; |
3524 | - } |
3525 | + } |
3526 | |
3527 | -.cloud-medium { |
3528 | + .cloud-medium { |
3529 | color: #7878ff; |
3530 | - } |
3531 | + } |
3532 | |
3533 | -.cloud-light { |
3534 | + .cloud-light { |
3535 | color: #b8b8ff; |
3536 | - } |
3537 | + } |
3538 | |
3539 | -/* ========================= |
3540 | - Universal presentation |
3541 | - Sprites |
3542 | -*/ |
3543 | -.sprite { |
3544 | + /* ========================= |
3545 | + Universal presentation |
3546 | + Sprites |
3547 | + */ |
3548 | + |
3549 | + .sprite { |
3550 | padding: 0 0 6px 18px; |
3551 | line-height: 18px; |
3552 | - } |
3553 | -.block-sprite { |
3554 | + } |
3555 | + |
3556 | + .block-sprite { |
3557 | padding: 2px 2px 15px 36px; |
3558 | margin-bottom: 0; |
3559 | - } |
3560 | + } |
3561 | |
3562 | -.action-icon { |
3563 | + .action-icon { |
3564 | /* Textual browsers read the text, graphical browsers see the sprite. */ |
3565 | display: inline-block; |
3566 | margin-left: 6px; |
3567 | @@ -227,53 +248,58 @@ table.diff td.text, |
3568 | vertical-align: text-top; |
3569 | text-indent: 3px; |
3570 | overflow: hidden; |
3571 | - } |
3572 | |
3573 | -.action-icon + .action-icon { |
3574 | - margin-left: 0px; |
3575 | + + .action-icon { |
3576 | + margin-left: 0px; |
3577 | } |
3578 | |
3579 | -.action-icon.standalone { |
3580 | - margin-top: -6px; |
3581 | + &.standalone { |
3582 | + margin-top: -6px; |
3583 | } |
3584 | + } |
3585 | |
3586 | -th .action-icon { |
3587 | + th .action-icon { |
3588 | height: 12px; |
3589 | -} |
3590 | + } |
3591 | |
3592 | -h1 a.sprite, |
3593 | -h2 a.sprite, |
3594 | -h3 a.sprite { |
3595 | + h1 a.sprite, h2 a.sprite { |
3596 | position: relative; |
3597 | top: 8px; |
3598 | font-size: 12px; |
3599 | - } |
3600 | + } |
3601 | |
3602 | -h3 a.sprite { |
3603 | + h3 a.sprite { |
3604 | + position: relative; |
3605 | + top: 8px; |
3606 | + font-size: 12px; |
3607 | top: 4px; |
3608 | - } |
3609 | + } |
3610 | + |
3611 | + /* Hide the grey background for the Calendar content. */ |
3612 | |
3613 | -/* Hide the grey background for the Calendar content. */ |
3614 | -.yui3-skin-sam .yui3-pretty-overlay .yui3-calendar-content { |
3615 | + .yui3-skin-sam .yui3-pretty-overlay .yui3-calendar-content { |
3616 | background: none; |
3617 | border: none; |
3618 | - } |
3619 | + } |
3620 | + |
3621 | + /* Center the Calendar within its overlay. */ |
3622 | |
3623 | -/* Center the Calendar within its overlay. */ |
3624 | -.yui3-calendarbase { |
3625 | + .yui3-calendarbase { |
3626 | margin: 0 auto; |
3627 | - } |
3628 | + } |
3629 | + |
3630 | + /* Hidden must be the last rule because it overides all other rules. */ |
3631 | |
3632 | -/* Hidden must be the last rule because it overides all other rules. */ |
3633 | -.inline { |
3634 | + .inline { |
3635 | display: inline; |
3636 | margin: 0; |
3637 | - } |
3638 | + } |
3639 | + |
3640 | + /* Use 'hidden' to hide elements unconditionally. |
3641 | + * Some things we want to hide by default only if javascript is enabled; for |
3642 | + * these cases use 'hide-on-load'. |
3643 | + */ |
3644 | |
3645 | -/* Use 'hidden' to hide elements unconditionally. |
3646 | - * Some things we want to hide by default only if javascript is enabled; for |
3647 | - * these cases use 'hide-on-load'. |
3648 | - */ |
3649 | -.hidden, .yui3-js-enabled .hide-on-load { |
3650 | + .hidden, .yui3-js-enabled .hide-on-load { |
3651 | display: none; |
3652 | - } |
3653 | + } |
3654 | diff --git a/lib/canonical/launchpad/icing/css/typography.css b/lib/canonical/launchpad/icing/css/typography.scss |
3655 | similarity index 62% |
3656 | rename from lib/canonical/launchpad/icing/css/typography.css |
3657 | rename to lib/canonical/launchpad/icing/css/typography.scss |
3658 | index b3011c1..3b2e1cd 100644 |
3659 | --- a/lib/canonical/launchpad/icing/css/typography.css |
3660 | +++ b/lib/canonical/launchpad/icing/css/typography.scss |
3661 | @@ -1,106 +1,182 @@ |
3662 | +// This file the result of auto-converting typography.css to scss. |
3663 | + |
3664 | +$page-width: 45em; |
3665 | +$wider-page: $page-width + 15em; |
3666 | +$reduced-spacing: 0.8em; |
3667 | +$link-colour: #03a; |
3668 | +$active-link-colour: #36c; |
3669 | +$separate-link-colour: #093; |
3670 | |
3671 | h1, h2, h3, h4, h5, h6 { |
3672 | background: none; |
3673 | clear: left; |
3674 | - } |
3675 | -h1 { |
3676 | + } |
3677 | + |
3678 | + h1 { |
3679 | clear: none; |
3680 | font-size: 30px; |
3681 | line-height: 34px; |
3682 | - } |
3683 | -h2 { |
3684 | + } |
3685 | + |
3686 | + h2 { |
3687 | margin-top: 16px; |
3688 | margin-bottom: 8px; |
3689 | font-size: 22px; |
3690 | line-height: 26px; |
3691 | - } |
3692 | -h3 { |
3693 | + } |
3694 | + |
3695 | + h3 { |
3696 | margin-top: 16px; |
3697 | margin-bottom: 8px; |
3698 | font-size: 16px; |
3699 | line-height: 20px; |
3700 | - } |
3701 | -.yui-u > div > h3:first-child { |
3702 | + } |
3703 | + |
3704 | + .yui-u > div > h3:first-child { |
3705 | margin-top: 0; |
3706 | - } |
3707 | -p { |
3708 | + } |
3709 | + |
3710 | + p { |
3711 | width: auto; |
3712 | - margin-bottom: 0.8em; |
3713 | - } |
3714 | -div + p, ul + p, table + p { |
3715 | - margin-top: 0.8em; |
3716 | - } |
3717 | -p, li, dt, dd, blockquote, .narrow, .narrow-listing { |
3718 | + margin-bottom: $reduced-spacing; |
3719 | + } |
3720 | + |
3721 | + div + p, ul + p, table + p { |
3722 | + margin-top: $reduced-spacing; |
3723 | + } |
3724 | + |
3725 | + p, li, dt, dd, blockquote, .narrow, .narrow-listing { |
3726 | /* Wrap the text before the eye gets lost. */ |
3727 | - max-width: 45em; |
3728 | - } |
3729 | -.wide * { |
3730 | - max-width: 60em; |
3731 | - } |
3732 | -table.wide { |
3733 | - width: 60em; |
3734 | - } |
3735 | -pre, code, samp, tt, .console { |
3736 | + max-width: $page-width; |
3737 | + } |
3738 | + |
3739 | + .wide * { |
3740 | + max-width: $wider-page; |
3741 | + } |
3742 | + |
3743 | + table.wide { |
3744 | + width: $wider-page; |
3745 | + } |
3746 | + |
3747 | + pre, code, samp, tt, .console { |
3748 | font-family: monospace; |
3749 | - margin-bottom: 0.8em; |
3750 | - } |
3751 | -pre.wrap { |
3752 | + margin-bottom: $reduced-spacing; |
3753 | + } |
3754 | + |
3755 | + pre.wrap { |
3756 | /* From nice_pre in tales.py */ |
3757 | white-space: pre-wrap; |
3758 | word-wrap: break-word; |
3759 | - } |
3760 | + } |
3761 | |
3762 | -:link, :visited, a.js-action { |
3763 | + :link, :visited, a.js-action { |
3764 | /* Links are blue, brighter when clicked, and greyer once visited. */ |
3765 | - color: #03a; |
3766 | + color: $link-colour; |
3767 | text-decoration: none; |
3768 | - } |
3769 | -:link:hover, :visited:hover, a.js-action:hover { |
3770 | + } |
3771 | + |
3772 | + :link:hover, :visited:hover, a.js-action:hover { |
3773 | text-decoration: underline; |
3774 | + } |
3775 | + |
3776 | + :link:active, :visited:active { |
3777 | + color: $active-link-colour; |
3778 | + } |
3779 | + |
3780 | + a { |
3781 | + &.js-action:active { |
3782 | + color: $active-link-colour; |
3783 | } |
3784 | -:link:active, :visited:active, a.js-action:active { |
3785 | - color: #36c; |
3786 | + |
3787 | + &[onclick] { |
3788 | + /* Links that don't open separate pages are green. */ |
3789 | + color: $separate-link-colour; |
3790 | + cursor: pointer; |
3791 | } |
3792 | -a[onclick], .collapsible legend a, a.js-action, |
3793 | -a[onclick]:active, .collapsible legend a:active, a.js-action, |
3794 | -a.js-action:active { |
3795 | + } |
3796 | + |
3797 | + .collapsible legend a { |
3798 | /* Links that don't open separate pages are green. */ |
3799 | - color: #093; |
3800 | + color: $separate-link-colour; |
3801 | cursor: pointer; |
3802 | + } |
3803 | + |
3804 | + a { |
3805 | + &.js-action, &[onclick]:active { |
3806 | + /* Links that don't open separate pages are green. */ |
3807 | + color: $separate-link-colour; |
3808 | + cursor: pointer; |
3809 | } |
3810 | -a.help { |
3811 | - border-bottom: 1px dotted #03a; |
3812 | - cursor: help; |
3813 | + } |
3814 | + |
3815 | + .collapsible legend a:active { |
3816 | + /* Links that don't open separate pages are green. */ |
3817 | + color: $separate-link-colour; |
3818 | + cursor: pointer; |
3819 | + } |
3820 | + |
3821 | + a { |
3822 | + &.js-action { |
3823 | + /* Links that don't open separate pages are green. */ |
3824 | + color: $separate-link-colour; |
3825 | + cursor: pointer; |
3826 | + |
3827 | + &:active { |
3828 | + /* Links that don't open separate pages are green. */ |
3829 | + color: $separate-link-colour; |
3830 | + cursor: pointer; |
3831 | + } |
3832 | } |
3833 | -a.help:hover, a.action-icon:hover { |
3834 | - text-decoration: none; |
3835 | + |
3836 | + &.help { |
3837 | + border-bottom: 1px dotted $link-colour; |
3838 | + cursor: help; |
3839 | + |
3840 | + &:hover { |
3841 | + text-decoration: none; |
3842 | + } |
3843 | } |
3844 | -a.help.icon, a.sprite.maybe.help { |
3845 | - border: none; |
3846 | -} |
3847 | -a.invalid-link, a.invalid-link:active, a.invalid-link:hover { |
3848 | - color: #909090; |
3849 | - text-decoration: none; |
3850 | - cursor: default; |
3851 | + |
3852 | + &.action-icon:hover { |
3853 | + text-decoration: none; |
3854 | + } |
3855 | + |
3856 | + &.help.icon, &.sprite.maybe.help { |
3857 | + border: none; |
3858 | + } |
3859 | + |
3860 | + &.invalid-link { |
3861 | + color: #909090; |
3862 | + text-decoration: none; |
3863 | + cursor: default; |
3864 | + |
3865 | + &:active, &:hover { |
3866 | + color: #909090; |
3867 | + text-decoration: none; |
3868 | + cursor: default; |
3869 | + } |
3870 | } |
3871 | -img, a img { |
3872 | + } |
3873 | + |
3874 | + img, a img { |
3875 | /* No border on images that are links. */ |
3876 | border: none; |
3877 | - } |
3878 | -abbr[title], acronym[title] { |
3879 | + } |
3880 | + |
3881 | + abbr[title], acronym[title] { |
3882 | border-bottom: 1px dotted black; |
3883 | cursor: help; |
3884 | - } |
3885 | -em { |
3886 | + } |
3887 | + |
3888 | + em { |
3889 | font-style: italic; |
3890 | - } |
3891 | -strong { |
3892 | - font-weight: bold; |
3893 | - } |
3894 | -.title { |
3895 | + } |
3896 | + |
3897 | + strong, .title { |
3898 | font-weight: bold; |
3899 | - } |
3900 | -kbd { |
3901 | + } |
3902 | + |
3903 | + kbd { |
3904 | background-color: #ddd; |
3905 | border: 1px solid; |
3906 | border-color: white gray gray white; |
3907 | @@ -108,10 +184,12 @@ kbd { |
3908 | margin: 1px; |
3909 | min-width: 1em; |
3910 | outline: 1px #666; |
3911 | - } |
3912 | -tt.command { |
3913 | + } |
3914 | + |
3915 | + tt.command { |
3916 | padding-left: 2em; |
3917 | - } |
3918 | -.nowrap { |
3919 | + } |
3920 | + |
3921 | + .nowrap { |
3922 | white-space: nowrap; |
3923 | - } |
3924 | + } |
Ran it locally, and couldn't spot any visual problem.
LGTM.