Mercurial > hg > mpiwgzen_wide

comparison sass/components/_misc.scss @ 0:a3750d724105 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initital
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Tue, 02 Jun 2015 09:16:36 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:a3750d724105
1 /**
2 * @file
3 * SMACSS Modules
4 *
5 * Adds modular sets of styles.
6 *
7 * Additional useful selectors can be found in Zen's online documentation.
8 * https://drupal.org/node/1707736
9 */
10
11 /**
12 * Wireframes.
13 */
14 .with-wireframes {
15 #header,
16 #main,
17 #content,
18 #navigation,
19 .region-sidebar-first,
20 .region-sidebar-second,
21 #footer,
22 .region-bottom {
23 outline: 1px solid #ccc;
24
25 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
26 .lt-ie8 & {
27 /* IE6/7 do not support the outline property. */
28 border: 1px solid #ccc;
29 }
30 }
31 }
32 }
33
34 /**
35 * Accessibility features.
36 */
37
38 /* element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
39 .element-invisible,
40 %element-invisible {
41 @include element-invisible;
42 }
43
44 /* Turns off the element-invisible effect. */
45 %element-invisible-off {
46 @include element-invisible-off;
47 }
48
49 .element-focusable,
50 %element-focusable {
51 @extend %element-invisible;
52
53 &:active,
54 &:focus {
55 @extend %element-invisible-off;
56 }
57 }
58
59 /*
60 * The skip-link link will be completely hidden until a user tabs to the link.
61 */
62 #skip-link {
63 margin: 0;
64
65 a,
66 a:visited {
67 display: block;
68 width: 100%;
69 padding: 2px 0 3px 0;
70 text-align: center;
71 background-color: #666;
72 color: #fff;
73 }
74 }
75
76 /**
77 * Branding header.
78 */
79
80 /* Wrapping link for logo. */
81 .header__logo {
82 float: left; /* LTR */
83 margin: 0;
84 padding: 0;
85 }
86
87 /* Logo image. */
88 .header__logo-image {
89 vertical-align: bottom;
90 }
91
92 /* Wrapper for website name and slogan. */
93 .header__name-and-slogan {
94 float: left;
95 }
96
97 /* The name of the website. */
98 .header__site-name {
99 margin: 0;
100 @include adjust-font-size-to( $h1-font-size );
101 }
102
103 /* The link around the name of the website. */
104 .header__site-link {
105 &:link,
106 &:visited {
107 color: #000;
108 text-decoration: none;
109 }
110
111 &:hover,
112 &:focus {
113 text-decoration: underline;
114 }
115 }
116
117 /* The slogan (or tagline) of a website. */
118 .header__site-slogan {
119 margin: 0;
120 }
121
122 /* The secondary menu (login, etc.) */
123 .header__secondary-menu {
124 float: right; /* LTR */
125 }
126
127 /* Wrapper for any blocks placed in the header region. */
128 .header__region {
129 /* Clear the logo. */
130 clear: both;
131 }
132
133 /**
134 * Navigation bar.
135 */
136 #navigation {
137 /* Sometimes you want to prevent overlapping with main div. */
138 /* overflow: hidden; */
139
140 .block {
141 margin-bottom: 0;
142 }
143
144 .block-menu .block__title,
145 .block-menu-block .block__title {
146 @extend %element-invisible;
147 }
148
149 /* Main menu and secondary menu links and menu block links. */
150 .links,
151 .menu {
152 margin: 0;
153 padding: 0;
154 text-align: left; /* LTR */
155
156 li {
157 /* A simple method to get navigation links to appear in one line. */
158 float: left; /* LTR */
159 padding: 0 10px 0 0; /* LTR */
160 list-style-type: none;
161 list-style-image: none;
162 }
163 }
164 }
165
166 /**
167 * Breadcrumb navigation.
168 */
169 .breadcrumb {
170 ol {
171 margin: 0;
172 padding: 0;
173 }
174 li {
175 display: inline;
176 list-style-type: none;
177 margin: 0;
178 padding: 0;
179 }
180 }
181
182 /**
183 * Titles.
184 */
185 .page__title, /* The title of the page. */
186 .node__title, /* Title of a piece of content when it is given in a list of content. */
187 .block__title, /* Block title. */
188 .comments__title, /* Comment section heading. */
189 .comments__form-title, /* Comment form heading. */
190 .comment__title { /* Comment title. */
191 margin: 0;
192 }
193
194 /**
195 * Messages.
196 */
197 .messages {
198 margin: rhythm(1) 0;
199 padding: 10px 10px 10px 50px; /* LTR */
200 background-image: inline-image("message-24-ok.png");
201 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
202 *background-image: image-url("message-24-ok.png");
203 }
204 background-position: 8px 8px; /* LTR */
205 background-repeat: no-repeat;
206 border: 1px solid #be7;
207 }
208 .messages--status {
209 @extend .messages;
210 @extend %ok;
211 }
212 .messages--warning {
213 @extend .messages;
214 @extend %warning;
215 background-image: inline-image("message-24-warning.png");
216 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
217 *background-image: image-url("message-24-warning.png");
218 }
219 border-color: #ed5;
220 }
221 .messages--error {
222 @extend .messages;
223 @extend %error;
224 background-image: inline-image("message-24-error.png");
225 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
226 *background-image: image-url("message-24-error.png");
227 }
228 border-color: #ed541d;
229
230 }
231 .messages__list {
232 margin: 0;
233 }
234 .messages__item {
235 list-style-image: none;
236 }
237
238 /* Core/module installation error messages. */
239 .messages--error p.error {
240 color: #333;
241 }
242
243 /* System status report. */
244 .ok,
245 %ok {
246 background-color: #f8fff0;
247 color: #234600;
248 }
249 .warning,
250 %warning {
251 background-color: #fffce5;
252 color: #840;
253 }
254 .error,
255 %error {
256 background-color: #fef5f1;
257 color: #8c2e0b;
258 }
259
260 /**
261 * Tabs.
262 */
263
264 /* Basic positioning styles shared by primary and secondary tabs. */
265 %tabs {
266 @include clearfix;
267 @include background-image(linear-gradient(bottom, $tabs-border 1px, transparent 1px));
268 /* IE 9 and earlier don't understand gradients. */
269 list-style: none;
270 border-bottom: 1px solid $tabs-border \0/ie;
271 margin: rhythm(1) 0;
272 padding: 0 2px;
273 white-space: nowrap;
274 }
275 %tabs__tab {
276 float: left; /* LTR */
277 margin: 0 3px;
278 }
279 %tabs__tab-link {
280 border: 1px solid #e9e9e9;
281 border-right: 0;
282 border-bottom: 0;
283 display: block;
284 @include adjust-leading-to(1);
285 text-decoration: none;
286 }
287
288 /* Primary tabs. */
289 .tabs-primary {
290 @extend %tabs;
291 }
292 .tabs-primary__tab {
293 @extend %tabs__tab;
294 @include border-top-radius(4px);
295 @include single-text-shadow(#fff, 1px, 1px, 0);
296 border: 1px solid $tabs-border;
297 border-bottom-color: transparent;
298 /* IE 9 and earlier don't understand gradients. */
299 border-bottom: 0 \0/ie;
300 }
301 .tabs-primary__tab.is-active {
302 @extend .tabs-primary__tab;
303 border-bottom-color: $tabs-container-bg;
304 }
305
306 // We use 3 placeholder styles to prevent @extend from going selector crazy.
307 %tabs-primary__tab-link {
308 @extend %tabs__tab-link;
309 @include border-top-radius(4px);
310 @include transition(background-color 0.3s);
311 color: #333;
312 background-color: #dedede;
313 letter-spacing: 1px;
314 padding: 0 1em;
315 text-align: center;
316 }
317 %tabs-primary__tab-link-is-hover {
318 background-color: #e9e9e9;
319 border-color: #f2f2f2;
320 }
321 %tabs-primary__tab-link-is-active {
322 background-color: transparent;
323 @include filter-gradient(rgba(#e9e9e9, 1), rgba(#e9e9e9, 0));
324 @include background-image(linear-gradient(rgba(#e9e9e9, 1), rgba(#e9e9e9, 0)));
325 border-color: #fff;
326 }
327
328 a.tabs-primary__tab-link {
329 @extend %tabs-primary__tab-link;
330
331 &:hover,
332 &:focus {
333 @extend %tabs-primary__tab-link-is-hover;
334 }
335 &:active {
336 @extend %tabs-primary__tab-link-is-active;
337 }
338 }
339 a.tabs-primary__tab-link.is-active {
340 @extend %tabs-primary__tab-link;
341 @extend %tabs-primary__tab-link-is-active;
342 }
343
344 /* Secondary tabs. */
345 .tabs-secondary {
346 @extend %tabs;
347 font-size: .9em;
348 /* Collapse bottom margin of ul.primary. */
349 margin-top: -(rhythm(1));
350 }
351 .tabs-secondary__tab,
352 .tabs-secondary__tab.is-active {
353 @extend %tabs__tab;
354 margin: rhythm(1)/2 3px;
355 }
356
357 // We use 3 placeholder styles to prevent @extend from going selector crazy.
358 %tabs-secondary__tab-link {
359 @extend %tabs__tab-link;
360 @include border-radius(.75em);
361 @include transition(background-color 0.3s);
362 @include single-text-shadow(#fff, 1px, 1px, 0);
363 background-color: #f2f2f2;
364 color: #666;
365 padding: 0 .5em;
366 }
367 %tabs-secondary__tab-link-is-focus {
368 background-color: #dedede;
369 border-color: #999;
370 color: #333;
371 }
372 %tabs-secondary__tab-link-is-active {
373 @include single-text-shadow(#333, 1px, 1px, 0);
374 background-color: #666;
375 border-color: #000;
376 color: #fff;
377 }
378
379 a.tabs-secondary__tab-link {
380 @extend %tabs-secondary__tab-link;
381
382 &:hover,
383 &:focus {
384 @extend %tabs-secondary__tab-link-is-focus;
385 }
386 &:active {
387 @extend %tabs-secondary__tab-link-is-active;
388 }
389 }
390 a.tabs-secondary__tab-link.is-active {
391 @extend %tabs-secondary__tab-link;
392 @extend %tabs-secondary__tab-link-is-active;
393 }
394
395 /**
396 * Inline styles.
397 */
398
399 /* List of links generated by theme_links(). */
400 .inline {
401 display: inline;
402 padding: 0;
403
404 li {
405 display: inline;
406 list-style-type: none;
407 padding: 0 1em 0 0; /* LTR */
408 }
409 }
410
411 /* The inline field label used by the Fences module. */
412 span.field-label {
413 padding: 0 1em 0 0; /* LTR */
414 }
415
416 /**
417 * "More" links.
418 */
419 .more-link {
420 text-align: right; /* LTR */
421 }
422 .more-help-link {
423 text-align: right; /* LTR */
424 }
425 .more-help-link a {
426 background-image: inline-image("help.png");
427 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
428 *background-image: image-url("help.png");
429 }
430 background-position: 0 50%; /* LTR */
431 background-repeat: no-repeat;
432 padding: 1px 0 1px 20px; /* LTR */
433 }
434
435 /**
436 * Pager.
437 */
438
439 /* A list of page numbers when more than 1 page of content is available. */
440 .pager {
441 clear: both;
442 padding: 0;
443 text-align: center;
444 }
445 %pager__item {
446 display: inline;
447 padding: 0 0.5em;
448 list-style-type: none;
449 background-image: none;
450 }
451
452 .pager-item, /* A list item containing a page number in the list of pages. */
453 .pager-first, /* The first page's list item. */
454 .pager-previous, /* The previous page's list item. */
455 .pager-next, /* The next page's list item. */
456 .pager-last, /* The last page's list item. */
457 .pager-ellipsis { /* A concatenation of several list items using an ellipsis. */
458 @extend %pager__item;
459 }
460
461 /* The current page's list item. */
462 .pager-current {
463 @extend %pager__item;
464 font-weight: bold;
465 }
466
467 /**
468 * Blocks.
469 */
470
471 /* Block wrapper. */
472 .block {
473 margin-bottom: rhythm(1);
474 }
475
476 /**
477 * Menus.
478 */
479 .menu__item.is-leaf {
480 list-style-image: inline-image("menu-leaf.png");
481 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
482 *list-style-image: image-url("menu-leaf.png");
483 }
484 list-style-type: square;
485 }
486 .menu__item.is-expanded {
487 list-style-image: inline-image("menu-expanded.png");
488 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
489 *list-style-image: image-url("menu-expanded.png");
490 }
491 list-style-type: circle;
492 }
493 .menu__item.is-collapsed {
494 list-style-image: inline-image("menu-collapsed.png"); /* LTR */
495 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
496 *list-style-image: image-url("menu-collapsed.png"); /* LTR */
497 }
498 list-style-type: disc;
499 }
500
501 /* The active item in a Drupal menu. */
502 .menu a.active {
503 color: #000;
504 }
505
506 /**
507 * Marker.
508 */
509
510 /* The "new" or "updated" marker. */
511 .new,
512 .update {
513 color: #c00;
514 /* Remove background highlighting from <mark> in normalize. */
515 background-color: transparent;
516 }
517
518 /**
519 * Unpublished note.
520 */
521
522 /* The word "Unpublished" displayed underneath the content. */
523 .unpublished {
524 height: 0;
525 overflow: visible;
526 /* Remove background highlighting from <mark> in normalize. */
527 background-color: transparent;
528 color: #d8d8d8;
529 font-size: 75px;
530 line-height: 1;
531 font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
532 font-weight: bold;
533 text-transform: uppercase;
534 text-align: center;
535 /* A very nice CSS3 property. */
536 word-wrap: break-word;
537 }
538 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
539 .lt-ie8 .node-unpublished>*,
540 .lt-ie8 .comment-unpublished>* {
541 /* Otherwise these elements will appear below the "Unpublished" text. */
542 position: relative;
543 }
544 }
545
546 /**
547 * Comments.
548 */
549
550 /* Wrapper for the list of comments and its title. */
551 .comments {
552 margin: rhythm(1) 0;
553 }
554
555 /* Preview of the comment before submitting new or updated comment. */
556 .comment-preview {
557 /* Drupal core will use a #ffffea background. See #1110842. */
558 background-color: #ffffea;
559 }
560
561 /* Wrapper for a single comment. */
562 .comment {
563
564 /* Comment's permalink wrapper. */
565 .permalink {
566 text-transform: uppercase;
567 font-size: 75%;
568 }
569 }
570
571 /* Nested comments are indented. */
572 .indented {
573 /* Drupal core uses a 25px left margin. */
574 margin-left: $indent-amount; /* LTR */
575 }
576
577 /**
578 * Forms.
579 */
580
581 /* Wrapper for a form element (or group of form elements) and its label. */
582 .form-item {
583 margin: rhythm(1) 0;
584
585 /* Pack groups of checkboxes and radio buttons closer together. */
586 .form-checkboxes & ,
587 .form-radios & {
588 /* Drupal core uses "0.4em 0". */
589 margin: 0;
590 }
591
592 /* Form items in a table. */
593 tr.odd &,
594 tr.even & {
595 margin: 0;
596 }
597
598 /* Highlight the form elements that caused a form submission error. */
599 input.error,
600 textarea.error,
601 select.error {
602 border: 1px solid #c00;
603 }
604
605 /* The descriptive help text (separate from the label). */
606 .description {
607 font-size: 0.85em;
608 }
609 }
610
611 .form-type-radio,
612 .form-type-checkbox {
613 .description {
614 margin-left: 2.4em;
615 }
616 }
617
618 /* The part of the label that indicates a required field. */
619 .form-required {
620 color: #c00;
621 }
622
623 /* Labels for radios and checkboxes. */
624 label.option {
625 display: inline;
626 font-weight: normal;
627 }
628
629 /* Buttons used by contrib modules like Media. */
630 a.button {
631 @include appearance(button);
632 }
633
634 /* Password confirmation. */
635 .password-parent,
636 .confirm-parent {
637 margin: 0;
638 }
639
640 /* Drupal's default login form block. */
641 #user-login-form {
642 text-align: left; /* LTR */
643 }
644
645 /**
646 * OpenID
647 *
648 * The default styling for the OpenID login link seems to assume Garland's
649 * styling of list items.
650 */
651
652 /* OpenID creates a new ul above the login form's links. */
653 .openid-links {
654 /* Position OpenID's ul next to the rest of the links. */
655 margin-bottom: 0;
656 }
657
658 /* The "Log in using OpenID" and "Cancel OpenID login" links. */
659 .openid-link,
660 .user-link {
661 margin-top: rhythm(1);
662 }
663 html.js #user-login-form li.openid-link,
664 #user-login-form li.openid-link {
665 /* Un-do some of the padding on the ul list. */
666 margin-left: -20px; /* LTR */
667 }
668 #user-login ul {
669 margin: rhythm(1) 0;
670 }
671
672 /**
673 * Drupal admin tables.
674 */
675 form {
676 th {
677 text-align: left; /* LTR */
678 padding-right: 1em; /* LTR */
679 border-bottom: 3px solid #ccc;
680 }
681 tbody {
682 border-top: 1px solid #ccc;
683 }
684 table ul {
685 margin: 0;
686 }
687 }
688 tr.even,
689 tr.odd {
690 background-color: #eee;
691 border-bottom: 1px solid #ccc;
692 padding: 0.1em 0.6em;
693 }
694 tr.even {
695 background-color: #fff;
696 }
697 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
698 .lt-ie8 tr.even,
699 .lt-ie8 tr.odd {
700 th,
701 td {
702 /* IE doesn't display borders on table rows. */
703 border-bottom: 1px solid #ccc;
704 }
705 }
706 }
707
708 /* Markup generated by theme_tablesort_indicator(). */
709 td.active {
710 background-color: #ddd;
711 }
712
713 /* Center checkboxes inside table cell. */
714 td.checkbox,
715 th.checkbox {
716 text-align: center;
717 }
718
719 /* Drupal core wrongly puts this in system.menus.css. Since we override that, add it back. */
720 td.menu-disabled {
721 background: #ccc;
722 }
723
724 /**
725 * Autocomplete.
726 *
727 * @see autocomplete.js
728 */
729
730 /* Suggestion list. */
731 #autocomplete .selected {
732 background: #0072b9;
733 color: #fff;
734 }
735
736 /**
737 * Collapsible fieldsets.
738 *
739 * @see collapse.js
740 */
741 .fieldset-legend {
742 html.js .collapsible & {
743 background-image: inline-image("menu-expanded.png");
744 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
745 *background-image: image-url("menu-expanded.png");
746 }
747 background-position: 5px 65%; /* LTR */
748 background-repeat: no-repeat;
749 padding-left: 15px; /* LTR */
750 }
751 html.js .collapsed & {
752 background-image: inline-image("menu-collapsed.png"); /* LTR */
753 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
754 *background-image: image-url("menu-collapsed.png"); /* LTR */
755 }
756 background-position: 5px 50%; /* LTR */
757 }
758 .summary {
759 color: #999;
760 font-size: 0.9em;
761 margin-left: 0.5em;
762 }
763 }
764
765 /**
766 * TableDrag behavior.
767 *
768 * @see tabledrag.js
769 */
770 tr.drag {
771 background-color: #fffff0;
772 }
773 tr.drag-previous {
774 background-color: #ffd;
775 }
776 .tabledrag-toggle-weight {
777 font-size: 0.9em;
778 }
779
780 /**
781 * TableSelect behavior.
782 *
783 * @see tableselect.js
784 */
785 tr.selected td {
786 background: #ffc;
787 }
788
789 /**
790 * Progress bar.
791 *
792 * @see progress.js
793 */
794 .progress {
795 font-weight: bold;
796
797 .bar {
798 background: #ccc;
799 border-color: #666;
800 margin: 0 0.2em;
801 @include border-radius(3px);
802 }
803 .filled {
804 background-color: #0072b9;
805 background-image: image-url("progress.gif");
806 }
807 }