Projet

Général

Profil

Paste
Télécharger (15,7 ko) Statistiques
| Branche: | Révision:

root / drupal7 / sites / all / themes / zen / STARTERKIT / sass / components / _misc.scss @ 87dbc3bf

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
}