Projet

Général

Profil

Paste
Télécharger (26,5 ko) Statistiques
| Branche: | Révision:

root / drupal7 / sites / all / themes / adaptivetheme / at_subtheme / sass / global.styles.scss @ 74f6bef0

1

    
2
// _base.scss imports _custom.scss (variables and mixins) and other partials.
3
@import "base";
4

    
5
/*
6
 * @file
7
 * global.styles
8
 *
9
 * Styles you add here will load for all device sizes, they are "global", as
10
 * opposed to "responsive" styles, which only load for a given breakpoint (media
11
 * query) that you set in theme settings. See the README for more details.
12
 *
13
 *
14
 * How to use this file:
15
 * --------------------
16
 *
17
 * There are many empty selectors and some basic styles to act as a guide.
18
 * Nothing is set in stone and you can change anything - even delete all of it
19
 * and start with your own clean slate.
20
 *
21
 * To FORCE PRINT all selectors you can search and replace a single { (opening
22
 * curly brace) and insert an empty comment. This is very useful in conjuction
23
 * with FireSass: https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
24
 *
25
 * See global.base also which includes normalize.css and some additional
26
 * helper classes and base styles.
27
 */
28

    
29
/* =============================================================================
30
 *   Base
31
 * ========================================================================== */
32

    
33
/*
34
 * To preserve theme settings never apply font properties to the HTML element.
35
 * This is critically important if you are using the Responsive JavaScript
36
 * feature as this relies on being able to set a pseudo font family on the HTML
37
 * element. If you need to set default font properties of any kind use the BODY
38
 * element as these can be overridden using font theme settings.
39
 */
40

    
41
html {
42
  background: $page;
43
}
44

    
45
body {
46
  font-family: $sans-serif-small; // Set from _custom.scss font variables
47
  font-size: 87.5%;
48
}
49

    
50

    
51
/* =============================================================================
52
 *   HTML Elements
53
 * ========================================================================== */
54

    
55
h1 {}
56

    
57

    
58
h2 {}
59

    
60

    
61
h3 {}
62

    
63

    
64
h4 {}
65

    
66

    
67
h5 {}
68

    
69

    
70
h6 {}
71

    
72

    
73
p {}
74

    
75

    
76
b,
77
strong {}
78

    
79

    
80
i,
81
em {}
82

    
83

    
84
dfn {}
85

    
86

    
87
sup {}
88

    
89

    
90
sub {}
91

    
92

    
93
del {}
94

    
95

    
96
ins {}
97

    
98

    
99
blockquote {}
100

    
101

    
102
cite {}
103

    
104

    
105
q {}
106

    
107

    
108
address {}
109

    
110

    
111
ul {}
112

    
113

    
114
ol {}
115

    
116

    
117
li {}
118

    
119

    
120
dl {}
121

    
122

    
123
dd {}
124

    
125

    
126
dt {}
127

    
128

    
129
abbr {}
130

    
131

    
132
acronym {}
133

    
134

    
135
pre,
136
code,
137
tt,
138
samp,
139
kbd,
140
var {
141
  font-family: $mono;
142
}
143

    
144

    
145
/* =============================================================================
146
 *   Wrappers
147
 * ========================================================================== */
148

    
149
/*
150
 * Outer wrappers:
151
 * - #page-wrapper: body > #page-wrapper
152
 * - #page: body > #page-wrapper > #page
153
 * - .container: body > #page-wrapper > #page.container
154
 *
155
 * The .container class holds the page width value from theme settings. You can
156
 * style the .container class but do not add width such as border, padding,
157
 * margins etc.
158
 */
159

    
160
#page-wrapper {}
161

    
162

    
163
#page  {
164
  &.container {}
165
}
166

    
167

    
168
/*
169
 * Wraps all header elements - branding and .region-header
170
 */
171
#header {}
172

    
173

    
174
/*
175
 * Wraps the sidebars the content column
176
 */
177
#columns {}
178

    
179

    
180
/*
181
 * Main content column wrapper
182
 */
183
#content-column {}
184

    
185

    
186
/*
187
 * Wraps the main-content-header, the content region and feed-icons. Use this
188
 * wrapper to style the entire main content column
189
 */
190
#main-content {}
191

    
192

    
193
/*
194
 * Wraps the content region, avoid applying styles to this wrapper, its used
195
 * mainly for position and invisible gutters and can be problematic to style
196
 */
197
#content {}
198

    
199

    
200
/*
201
 * Footer wrapper
202
 */
203
#footer {}
204

    
205

    
206
/*
207
 * Panels may need additional margin wrangling when in the $content region
208
 */
209
#content .panel-display {}
210

    
211

    
212
/*
213
 * Full Width Wrappers
214
 * These are used in the optional page--full-width-wrappers.tpl.php template.
215
 * All have internal .container classes. In the full width wrapper template the
216
 * .container classes set the width or max-width - you can style this but never
217
 * add any width/margin/padding/borders etc to .container
218
 */
219

    
220
/*
221
 * Wraps the leaderboard
222
 */
223
#leaderboard-wrapper {
224
  .container {}
225
}
226

    
227

    
228
/*
229
 * Wraps the header
230
 */
231
#header-wrapper {
232
  /* Debug styles, is this working */
233
  background: $debug;
234
  .container {}
235
}
236

    
237

    
238
/*
239
 * Wraps the nav elements
240
 */
241
#nav-wrapper {
242
  .container {}
243
}
244

    
245

    
246
/*
247
 * Wraps breadcrumb
248
 */
249
#breadcrumb-wrapper {
250
  .container {}
251
}
252

    
253

    
254
/*
255
 * Wraps messages and help
256
 */
257
#messages-help-wrapper {
258
  .container {}
259
}
260

    
261

    
262
/*
263
 * Wraps the secondary content/preface region
264
 */
265
#secondary-content-wrapper {
266
  .container {}
267
}
268

    
269

    
270
/*
271
 * Wraps the main content column
272
 */
273
#content-wrapper {
274
  .container {}
275
}
276

    
277

    
278
/*
279
 * Wraps the tertiary content/postfix region
280
 */
281
#tertiary-content-wrapper {
282
  .container {}
283
}
284

    
285

    
286
/*
287
 * Footer wrapper
288
 */
289
#footer-wrapper {
290
  /* Debug styles, is this working? */
291
  background: $debug;
292

    
293
  .container {}
294
}
295

    
296

    
297
/* =============================================================================
298
 *   Branding
299
 * ========================================================================== */
300

    
301
/*
302
 * Wraps all the branding elements, logo, name and slogan
303
 */
304
#branding {}
305

    
306

    
307
/*
308
 * Logo
309
 */
310
#logo {
311
  padding: 10px 0;
312

    
313
  img {
314
    vertical-align: bottom;
315
  }
316
}
317

    
318

    
319
/*
320
 * Wrapper for the site name and slogan
321
 */
322
#name-and-slogan {}
323

    
324

    
325
/*
326
 * Site name (h1)
327
 */
328
#site-name {
329
  margin: 0;
330

    
331
  a {
332

    
333
    &:link,
334
    &:visited {
335
      text-decoration: none;
336
    }
337

    
338
    &:hover,
339
    &:focus {
340
      text-decoration: underline;
341
    }
342
  }
343
}
344

    
345

    
346
/*
347
 * Site slogan (h2)
348
 */
349
#site-slogan {
350
  margin: 0;
351
}
352

    
353

    
354
/* =============================================================================
355
 *   Page content header
356
 * ========================================================================== */
357

    
358
/*
359
 * Main content header wraps the page title, tabs and actions links
360
 */
361
#main-content-header {}
362

    
363

    
364
/*
365
 * The main page title (h1)
366
 */
367
#page-title {
368
  margin: 0;
369
}
370

    
371

    
372
/* =============================================================================
373
 *   Misc Global Styles
374
 * ========================================================================== */
375

    
376
/*
377
 * Feed icons
378
 */
379
.feed-icon {}
380

    
381

    
382
/*
383
 * Aggregator feed source
384
 */
385
#aggregator .feed-source .feed-icon {
386
  display: inline;
387
  float: none;
388
  margin-right: 10px;
389
}
390

    
391

    
392
.feed-details dt,
393
.feed-details dd {
394
  display: inline;
395
  margin: 0;
396
}
397

    
398

    
399
/*
400
 * Generic styles for the more link
401
 */
402
.more-link {}
403

    
404

    
405
/*
406
 * Generic styles for links. See the ul.links declaration in node and comment stylesheets
407
 */
408
ul.links {
409
  margin: 0;
410
  padding: 0;
411

    
412
  &.inline {
413
    display: block;
414
  }
415

    
416
  li {
417
    display: inline;
418
    list-style: none;
419
    padding: 0 10px 0 0;
420
  }
421
}
422

    
423

    
424
/*
425
 * Search results are an ordered list so reset the margin
426
 */
427
.search-results {
428
  margin: 0;
429
  padding: 0;
430
}
431

    
432

    
433
/*
434
 * Attribution message and link
435
 */
436
.attribution {
437
  display: block;
438
  opacity: 0.65;
439
  padding: 1em 0;
440
  text-align: center;
441

    
442
  a {
443
    text-decoration: none;
444
    color: inherit;
445

    
446
    &:hover,
447
    &:focus {
448
      text-decoration: underline;
449
    }
450
  }
451
}
452

    
453

    
454
/* =============================================================================
455
 *   Regions
456
 * ========================================================================== */
457

    
458
/*
459
 * Standard region wrapper, don't add width to any regions, you will bork the layout - no margin, padding or borders etc
460
 */
461
.region {}
462

    
463

    
464
/*
465
 * Regions have an inner div - perfect for adding margin, padding or borders
466
 */
467
.region-inner {}
468

    
469

    
470
/*
471
 * Regions can be nested, such as when using Panels
472
 */
473
.region-inner .region-inner {}
474

    
475

    
476
/*
477
 * Header region, embedded in the #header
478
 */
479
.region-header {}
480

    
481

    
482
/*
483
 * Generally used to output Drupals help block, if the help module is enabled
484
 */
485
.region-help {}
486

    
487

    
488
/*
489
 * Secondary content
490
 */
491
.region-secondary-content {}
492

    
493

    
494
/*
495
 * Sits above the main content header, like a content-top region
496
 */
497
.region-highlighted {}
498

    
499

    
500
/*
501
 * Sits below the main content, like a content-bottom region
502
 */
503
.region-content-aside {}
504

    
505

    
506
/*
507
 * Sidebars - targets both
508
 */
509
.sidebar {}
510

    
511

    
512
/*
513
 * First sidebar
514
 */
515
.region-sidebar-first {}
516

    
517

    
518
/*
519
 * Second sidebar
520
 */
521
.region-sidebar-second {}
522

    
523

    
524
/*
525
 * Tertiary content
526
 */
527
.region-tertiary-content {}
528

    
529

    
530
/*
531
 * Footer region
532
 */
533
.region-footer {}
534

    
535

    
536
/* =============================================================================
537
 *   Links
538
 * ========================================================================== */
539

    
540
a {
541
  text-decoration: none;
542

    
543
  &:link,
544
  &:visited {}
545

    
546
  &:active,
547
  &.active {}
548

    
549
  &:hover,
550
  &:focus {
551
    text-decoration: underline;
552
  }
553
}
554

    
555

    
556
/* =============================================================================
557
 *   Primary, Secondary and Menu Bar region menus
558
 * ========================================================================== */
559

    
560
.nav {
561
  clear: both;
562
  margin: 10px 0;
563

    
564
  ul,
565
  ul.menu {
566
    margin: 0;
567
    padding: 0;
568
  }
569

    
570
  li,
571
  ul.menu li {
572
    display: inline;
573
    float: left;
574
    list-style: none;
575
    margin: 0;
576
    padding: 0;
577
  }
578

    
579
  li a,
580
  ul.menu li a {
581
    display: block;
582
    white-space: nowrap;
583
    padding: 0 10px;
584

    
585
    &:visited {}
586

    
587
    &:hover,
588
    &:focus {}
589
  }
590

    
591
  .block {
592
    margin-bottom: 0;
593
  }
594
}
595

    
596

    
597
/* =============================================================================
598
 *   Superfish
599
 * ========================================================================== */
600

    
601
ul.sf-menu {
602
  margin-bottom: 0;
603

    
604
  a {
605
    border-left: 0;
606
    border-top: 0;
607
    padding: 0 10px;
608
    text-decoration: none;
609
    height: 2.5em;
610
    line-height: 2.5em;
611

    
612
    &:link,
613
    &:visited {}
614
  }
615

    
616
  li {
617
    &:hover,
618
    &.sfHover {
619
      outline: 0;
620
    }
621
  }
622

    
623
  a {
624
    &:focus,
625
    &:hover,
626
    &:active {
627
      outline: 0;
628
    }
629
  }
630
}
631

    
632

    
633
/*
634
 * Superfish blocks
635
 */
636
.block-superfish {
637

    
638
  .block-inner .content {}
639

    
640
  ul {
641
    margin: 0 !important;
642
    padding: 0 !important;
643

    
644
    ul {
645
      ul {
646
        ul {}
647
      }
648
    }
649
  }
650

    
651
  li {
652
    margin: 0 !important;
653
    padding: 0 !important;
654
  }
655
}
656

    
657

    
658
/*
659
 * Vertical style
660
 */
661
.sf-vertical {
662
  width: 100%;
663

    
664
  li {
665
    width: 100%;
666

    
667
    &.last {}
668

    
669
    &:hover ul,
670
    &.sfHover ul {
671
      left: 100%;
672
      top: 0;
673
      margin: 0;
674
      padding: 0;
675
    }
676

    
677
    a {
678
      padding: 0 10px;
679
    }
680
  }
681
}
682

    
683

    
684
/*
685
 * Navbar style
686
 */
687
.sf-navbar {
688
  padding-bottom: 0 !important;
689
}
690

    
691

    
692
/*
693
 * Sensible padding for the default style
694
 */
695
.sf-menu.sf-style-default a {
696
  padding: 0 10px;
697
}
698

    
699

    
700
/* =============================================================================
701
 *   Menu Toggles
702
 * ========================================================================== */
703
// .at-mt is a page class
704
.at-mt {
705
  .at-menu-toggle,
706
  .at-menu-toggle ul,
707
  .at-menu-toggle ul.menu {
708
    margin-top: 0;
709
    margin-bottom: 0;
710
    padding: 0;
711
  }
712

    
713
  .at-menu-toggle-button {
714
    margin: 0;
715
  }
716

    
717
  .at-menu-toggle ul a {
718
    padding: 0 10px;
719
    white-space: nowrap;
720
  }
721
}
722

    
723

    
724
/* =============================================================================
725
 *   Menus, usually blocks
726
 * ========================================================================== */
727

    
728
ul.menu {
729
  padding-left: 15px;
730

    
731
  ul {
732
    padding-left: 15px;
733

    
734
    ul {
735
      ul {}
736
    }
737
  }
738

    
739
  li {
740
    margin: 0;
741

    
742
    &.collapsed,
743
    &.expanded,
744
    &.leaf {}
745

    
746
    a {
747

    
748
      &:link,
749
      &:visited {}
750

    
751
      &:active,
752
      &.active {}
753

    
754
      &:hover,
755
      &:focus {}
756
    }
757

    
758
    &.active a,
759
    &.active-trail a {}
760

    
761
    &.first,
762
    &.last {}
763
  }
764
}
765

    
766

    
767
/* If li.content exists it's a problem, so reset the padding */
768
.block .menu li.content {
769
  padding: 0;
770
}
771

    
772

    
773
/* =============================================================================
774
 *   Book navigation menu
775
 * ========================================================================== */
776

    
777
.book-navigation {
778

    
779
  .page-links {}
780

    
781
  .page-previous {}
782

    
783
  .page-next {}
784

    
785
  .page-up {
786
    /* Prevent text wrapping to a new line, assumes English "up" is used (two characters) */
787
    min-width: 2em;
788
    white-space: nowrap;
789
  }
790

    
791
  .menu {
792
    margin-left: 0;
793
  }
794
}
795

    
796

    
797
/* =============================================================================
798
 *   Breadcrumbs
799
 * ========================================================================== */
800

    
801
#breadcrumb {
802
  margin: 10px 0;
803

    
804
  /* If the label is set to show in theme settings the label class is added */
805
  .breadcrumb-label {
806
    font-size: 1em;
807
    display: inline;
808
    padding-right: 10px;
809

    
810
    &:after {
811
      content: ":";
812
    }
813
  }
814

    
815
  ol {
816
    margin: 0;
817
    padding: 0;
818
  }
819

    
820
  .with-breadcrumb-label ol {
821
    display: inline;
822
  }
823

    
824
  li {
825
    list-style: none;
826
    display: inline;
827
  }
828

    
829
  li.crumb-first {}
830

    
831
  li.crumb-last {}
832

    
833
  a {
834

    
835
    &:link,
836
    &:visited {}
837

    
838
    &:active,
839
    &.active {}
840

    
841
    &:hover,
842
    &:focus {}
843
  }
844
}
845

    
846

    
847
/* =============================================================================
848
 *   Pagers
849
 * ========================================================================== */
850

    
851
ul.pager {
852
  clear: both;
853
  margin: 0;
854
  text-align: center;
855
}
856

    
857

    
858
.item-list ul.pager li {
859
  margin: 0;
860
}
861

    
862

    
863
ul.pager li {
864
  background-image: none;
865
  display: inline;
866
  list-style-type: none;
867
  padding: .5em;
868

    
869
  &.pager-current {
870
    font-weight: 700;
871
  }
872
}
873

    
874

    
875
.block ul.pager li {
876
  margin: 0;
877
}
878

    
879

    
880
/*
881
 * Theme the various states of pager links
882
 */
883
ul.pager li {
884

    
885
  a {
886

    
887
    &:link,
888
    &:visited {}
889

    
890
    &:active,
891
    &.active {}
892

    
893
    &:hover,
894
    &:focus {}
895
  }
896

    
897
  &.pager-item {}
898
  &.first {}
899
  &.last {}
900
  &.pager-current {}
901
  &.pager-first {}
902
  &.pager-previous {}
903
  &.pager-next {}
904
  &.pager-last {}
905
}
906

    
907

    
908
/* =============================================================================
909
 *   Skip Navigation
910
 * ========================================================================== */
911

    
912
#skip-link {
913
  left: 50%;
914
  margin-left: -6.5em;
915
  margin-top: 0;
916
  padding: 0 0.5em;
917
  position: absolute;
918
  width: 12em;
919
  z-index: 50;
920

    
921
  a {
922
    background: #444;
923
    background: rgba(0, 0, 0, 0.6);
924
    color: $page;
925
    display: block;
926
    line-height: 2;
927
    padding: 0;
928
    text-align: center;
929
    text-decoration: none;
930

    
931
    &:link,
932
    &:visited {
933
      background: #444;
934
      background: rgba(0, 0, 0, 0.6);
935
      color: $page;
936
      display: block;
937
      line-height: 2;
938
      padding: 0;
939
      text-align: center;
940
      text-decoration: none;
941
    }
942
    &:hover,
943
    &:focus,
944
    &:active {
945
      outline: 0;
946
    }
947
  }
948
}
949

    
950

    
951
/* =============================================================================
952
 *   Tabs (local tasks)
953
 * ========================================================================== */
954

    
955
#tasks {
956
  margin-bottom: 15px;
957
}
958

    
959

    
960
ul.primary {
961
  border-bottom-color: $border;
962
  margin: 20px 0;
963
  padding: 0 0 0 5px;
964

    
965
  li {
966
    display: block;
967
    float: left;
968
    margin: 0 1px -1px;
969

    
970
    a {
971
      background-color: $ultralight;
972
      border-color: $border;
973
      margin-right: 1px;
974
      padding: 0 10px;
975
      display: block;
976
      float: left;
977
      height: 1.5em;
978
      line-height: 1.5em;
979

    
980
      &:hover,
981
      &:focus {
982
        background-color: $light;
983
        border-color: $border;
984
      }
985
    }
986
  }
987

    
988
  li.active {
989
    a,
990
    a:hover,
991
    a:focus {
992
      background-color: $page;
993
      border-bottom-color: $page;
994
    }
995
  }
996
}
997

    
998

    
999
ul.secondary {
1000
  border-bottom: 1px solid $border;
1001
  margin: 1em 0 0;
1002
  padding: 0 .3em 1em;
1003

    
1004
  li {
1005
    border-right: 0;
1006
    list-style: none;
1007
    padding: 0 10px 0 0;
1008

    
1009
    a {
1010
      &:hover,
1011
      &.active {
1012
        border-bottom: none;
1013
        text-decoration: underline;
1014
      }
1015
    }
1016
  }
1017
}
1018

    
1019

    
1020
/* =============================================================================
1021
 *   Action links
1022
 * ========================================================================== */
1023

    
1024
ul.action-links {
1025
  margin: 20px 0 0;
1026
  list-style: none;
1027

    
1028
  li {}
1029
}
1030

    
1031

    
1032
/* =============================================================================
1033
 *  Field Styling
1034
 * ========================================================================== */
1035

    
1036
/*
1037
 * Wrapper for any field
1038
 */
1039
.field {}
1040

    
1041

    
1042
/*
1043
 * Above and inline classes are on the field wrapper
1044
 */
1045
.field-label-above {}
1046

    
1047

    
1048
/*
1049
 * When labels are set to inline in field display settings the clearfix class is automatically added
1050
 */
1051
.field-label-inline {
1052

    
1053
  /* Remove the margin on inline field lables to preserve vertical formatting */
1054
  .field-label {
1055
    margin: 0;
1056
  }
1057
}
1058

    
1059
/*
1060
 * Labels are h2 in Adaptivetheme. Use a strong selector to mitigate unwanted ineritance issues
1061
 */
1062
.field-label {
1063
  font-size: 1em;
1064
  font-weight: 700;
1065
  font-family: inherit;
1066
  line-height: inherit;
1067
  margin-bottom: 0;
1068
}
1069

    
1070

    
1071
/*
1072
 * Field types (Core)
1073
 */
1074

    
1075
/*
1076
 * Image fields use the <figure> and <figcaption> elements from HTML5
1077
 */
1078
.field-type-image {
1079

    
1080
  .caption {}
1081

    
1082
  .full-caption {}
1083

    
1084
  .teaser-caption {}
1085
}
1086

    
1087

    
1088
/*
1089
 * Taxonomy
1090
 */
1091
.field-type-taxonomy-term-reference {
1092

    
1093
  /* The same bottom margin as p, blockquote, ul, ol and dl */
1094
  margin-bottom: 1.5em;
1095

    
1096
  &.field-label-inline .field-items {
1097
    margin: 0;
1098
    padding: 0;
1099
  }
1100

    
1101
  &.field-label-inline .field-item {
1102
    display: inline;
1103
    list-style: none;
1104
    padding: 0 10px 0 0;
1105
  }
1106
}
1107

    
1108

    
1109
/*
1110
 * Text
1111
 */
1112
.field-type-text {}
1113

    
1114

    
1115
/*
1116
 * Long text
1117
 */
1118
.field-type-text-long {}
1119

    
1120

    
1121
/*
1122
 * Text with summary
1123
 */
1124
.field-type-text-with-summary {}
1125

    
1126

    
1127
/*
1128
 * File
1129
 */
1130
.field-type-file {}
1131

    
1132

    
1133
/*
1134
 * Number/Integer
1135
 */
1136
.field-type-number-integer {}
1137

    
1138

    
1139
/*
1140
 * Decimal
1141
 */
1142
.field-type-number-decimal {}
1143

    
1144

    
1145
/*
1146
 * Number float
1147
 */
1148
.field-type-number-float {}
1149

    
1150

    
1151
/*
1152
 * List
1153
 */
1154
.field-type-list-text {}
1155

    
1156

    
1157
/*
1158
 * List boolean
1159
 */
1160
.field-type-list-boolean {}
1161

    
1162

    
1163
/*
1164
 * List integer
1165
 */
1166
.field-type-list-integer {}
1167

    
1168

    
1169
/*
1170
 * List float
1171
 */
1172
.field-type-list-float {}
1173

    
1174

    
1175
/*
1176
 * Field types (Contrib)
1177
 */
1178
.field-type-datetime {}
1179

    
1180
.field-type-node-reference {}
1181

    
1182
.field-type-user-reference {}
1183

    
1184

    
1185
/*
1186
 * Named fields
1187
 */
1188
.field-name-body {}
1189

    
1190
.field-name-field-image {}
1191

    
1192
.field-name-field-tags {}
1193

    
1194

    
1195
/*
1196
 * Underscores in field name are replaced with dashes
1197
 */
1198
.field-name-field-FIELDNAME {}
1199

    
1200

    
1201
/*
1202
 * Image Alignment Theme Settings - included here so you can easily override
1203
 */
1204

    
1205
/*
1206
 * Float none setting
1207
 */
1208
.ia-n .field-type-image,
1209
.iat-n .field-type-image {}
1210

    
1211

    
1212
/*
1213
 * Float left setting
1214
 */
1215
.ia-l .field-type-image figure,
1216
.iat-l .field-type-image figure {
1217
  margin: 5px 20px 15px 0;
1218
}
1219

    
1220

    
1221
/*
1222
 * Centered setting
1223
 */
1224
.ia-c .field-type-image figure,
1225
.iat-c .field-type-image figure {
1226
  margin: 5px auto 15px;
1227
}
1228

    
1229

    
1230
/*
1231
 * Float right setting
1232
 */
1233
.ia-r .field-type-image figure,
1234
.iat-r .field-type-image figure {
1235
  margin: 5px 0 15px 20px;
1236
}
1237

    
1238

    
1239

    
1240
/* =============================================================================
1241
 *   Block Styling
1242
 * ========================================================================== */
1243

    
1244
/*
1245
 * Main wrapper for most blocks, block_system_main does not have it
1246
 */
1247
.block {
1248
  margin-bottom: 20px;
1249
}
1250

    
1251

    
1252
/*
1253
 * Inner wrapper for most blocks, good for margin, padding and borders, block_system_main does not have it
1254
 */
1255
.block-inner {}
1256

    
1257

    
1258
/*
1259
 * The first block in the region
1260
 */
1261
.block.first {}
1262

    
1263

    
1264
/*
1265
 * The last block in the region
1266
 */
1267
.block.last {}
1268

    
1269

    
1270
/*
1271
 * Zebra striping for each block in the region
1272
 */
1273
.block.odd {}
1274

    
1275

    
1276
/*
1277
 * Zebra striping for each block in the region
1278
 */
1279
.block.even {}
1280

    
1281

    
1282
/*
1283
 * Block title
1284
 */
1285
.block-title {
1286
  margin: 0;
1287
}
1288

    
1289

    
1290
/*
1291
 * Block content wrapper
1292
 */
1293
.block-content {}
1294

    
1295

    
1296
/*
1297
 * Match item list and block menu margin and padding
1298
 */
1299
.block-content {
1300

    
1301
  ul,
1302
  ol {
1303
    padding: 0 0 0 15px;
1304
  }
1305

    
1306
  li {
1307
    margin: 0;
1308
    padding: 0;
1309
  }
1310
}
1311

    
1312

    
1313
/*
1314
 * Block for the latest news items in the first category
1315
 */
1316
#block-aggregator-category-1 {}
1317

    
1318

    
1319
/*
1320
 * Block for the latest news items in the first feed
1321
 */
1322
#block-aggregator-feed-1 {}
1323

    
1324

    
1325
/*
1326
 * First block created with "Add block" link
1327
 */
1328
#block-block-1 {}
1329

    
1330

    
1331
/*
1332
 * "Recent blog posts" block
1333
 */
1334
#block-blog-recent {}
1335

    
1336

    
1337
/*
1338
 * "Book navigation" block for the current book's table of contents
1339
 */
1340
#block-book-navigation {}
1341

    
1342

    
1343
/*
1344
 * "Recent comments" block
1345
 */
1346
#block-comment-recent {}
1347

    
1348

    
1349
/*
1350
 * "Active forum topics" block
1351
 */
1352
#block-forum-active {}
1353

    
1354

    
1355
/*
1356
 * "New forum topics" block
1357
 */
1358
#block-forum-new {}
1359

    
1360

    
1361
/*
1362
 * Language switcher block
1363
 */
1364
#block-locale-language {}
1365

    
1366

    
1367
/*
1368
 * Custom menu block
1369
 */
1370
#block-menu-menu-NAME {}
1371

    
1372

    
1373
/*
1374
 * "Recent content" block
1375
 */
1376
#block-node-recent {}
1377

    
1378

    
1379
/*
1380
 * "Syndicate" block for primary RSS feed; see also page.css's .feed-icon
1381
 */
1382
#block-node-syndicate {}
1383

    
1384

    
1385
/*
1386
 * "Most recent poll" block
1387
 */
1388
#block-poll-recent {}
1389

    
1390

    
1391
/*
1392
 * "Author information" block for the profile of the page's author
1393
 */
1394
#block-profile-author-information {}
1395

    
1396

    
1397
/*
1398
 * "Search form" block
1399
 */
1400
#block-search-form {}
1401

    
1402

    
1403
/*
1404
 * "Shortcuts" block
1405
 */
1406
#block-shortcut-shortcuts {}
1407

    
1408

    
1409
/*
1410
 * "Popular content" block
1411
 */
1412
#block-statistics-popular {}
1413

    
1414

    
1415
/*
1416
 * "Main menu" block
1417
 */
1418
#block-system-main-menu {}
1419

    
1420

    
1421
/*
1422
 * "Management" block for Drupal management menu
1423
 */
1424
#block-system-management {}
1425

    
1426

    
1427
/*
1428
 * "Navigation" block for Drupal navigation menu
1429
 */
1430
#block-system-navigation {}
1431

    
1432

    
1433
/*
1434
 * "User menu" block for Drupal user menu
1435
 */
1436
#block-system-user-menu {}
1437

    
1438

    
1439
/*
1440
 * "System help" block
1441
 */
1442
#block-system-help {}
1443

    
1444

    
1445
/*
1446
 * "Main page content" block
1447
 */
1448
#block-system-main {}
1449

    
1450

    
1451
/*
1452
 * "Powered by Drupal" block
1453
 */
1454
#block-system-powered-by {}
1455

    
1456

    
1457
/*
1458
 * "User login form" block
1459
 */
1460
#block-user-login {}
1461

    
1462

    
1463
/*
1464
 * "Who's new" block for a list of the newest users
1465
 */
1466
#block-user-new {}
1467

    
1468

    
1469
/*
1470
 * "Who's online" block for a list of the online users
1471
 */
1472
#block-user-online {}
1473

    
1474

    
1475
/* =============================================================================
1476
 *   Node Styling
1477
 * ========================================================================== */
1478

    
1479
.node {
1480
  margin-bottom: 20px;
1481

    
1482
  &.node-promoted {}
1483

    
1484
  &.node-sticky {}
1485

    
1486
  &.node-by-viewer {}
1487

    
1488
  &.node-teaser {}
1489

    
1490
  &.node-full {}
1491

    
1492
  &.odd {}
1493

    
1494
  &.even {}
1495

    
1496
  .node-title {
1497
    margin: 0;
1498
  }
1499

    
1500
  .user-picture {}
1501

    
1502
  .submitted {
1503

    
1504
    .username {}
1505

    
1506
    time {}
1507
  }
1508

    
1509
  .node-content {}
1510

    
1511
  ul.links {
1512

    
1513
    li {}
1514
    li a {}
1515

    
1516
    li.node-read-more a {}
1517
    li.comment-add a {}
1518
    li.comment-comments a {}
1519
    li.comment-new-comments a {}
1520
    li.blog-sernames-blog a {}
1521
    li.print-html a {}
1522
    li.print-email a {}
1523
    li.print-pdf a {}
1524
  }
1525
}
1526

    
1527

    
1528
.preview .node {}
1529

    
1530

    
1531
/*
1532
 * All nodes are given a node-FOO class that describes the type of content that
1533
 * it is. If you create a new content type called "my-custom-type", it will
1534
 * receive a "node-my-custom-type" class.
1535
 */
1536
.node-page {}
1537

    
1538
.node-article {}
1539

    
1540
.node-book {}
1541

    
1542
.node-forum {}
1543

    
1544
.node-poll {}
1545

    
1546

    
1547
/* =============================================================================
1548
 *   Comment Styling - Comments, comment wrapper, comment form
1549
 * ========================================================================== */
1550

    
1551
/*
1552
 * Wrapper for the list of comments and its titles
1553
 */
1554
#comments {
1555
  margin: 1.5em 0;
1556

    
1557
  h2 {
1558
    &.comment-title {
1559
      margin: 0;
1560
    }
1561

    
1562
    &.comment-form {
1563
      margin: 0;
1564
    }
1565
  }
1566
}
1567

    
1568

    
1569
/*
1570
 * Wrapper for a single comment
1571
 */
1572
.comment {
1573
  margin-bottom: 20px;
1574

    
1575
  &.first {}
1576

    
1577
  &.last {}
1578

    
1579
  &.odd {}
1580

    
1581
  &.even {}
1582

    
1583
  .user-picture {}
1584

    
1585
  .submitted {
1586

    
1587
    p {}
1588

    
1589
    .username {}
1590

    
1591
    time {}
1592
  }
1593

    
1594
  .user-signature {}
1595

    
1596
  ul.links {}
1597
}
1598

    
1599

    
1600
/*
1601
 * Comment title
1602
 */
1603
.comment-title {
1604
  margin: 0;
1605
}
1606

    
1607

    
1608
/*
1609
 * Comment states
1610
 */
1611
.comment-new {}
1612

    
1613
.comment-by-anonymous {}
1614

    
1615
.comment-by-node-author {}
1616

    
1617
.comment-by-viewer {}
1618

    
1619
.comment-title-hidden {}
1620

    
1621
.comment-with-picture {}
1622

    
1623
.comment-with-signature {}
1624

    
1625

    
1626
/*
1627
 * Preview of the comment before submitting new or updated comment
1628
 */
1629
.comment-preview {}
1630

    
1631

    
1632
/*
1633
 * "New" marker for comments that are new for the current user
1634
 */
1635
.new {
1636
  color: $highlight;
1637
}
1638

    
1639

    
1640
/*
1641
 * Nested comments are indented
1642
 */
1643
.indented {
1644
  margin-left: 40px;
1645
}
1646

    
1647

    
1648
/* =============================================================================
1649
 *   Forms
1650
 * ========================================================================== */
1651

    
1652
/*
1653
 * Wrapper for a form element (or group of form elements) and its label
1654
 */
1655
.form-item {
1656

    
1657
  input.error,
1658
  textarea.error,
1659
  select.error {
1660
    border: 1px solid $highlight;
1661
  }
1662

    
1663
  label {
1664
    font-weight: 700;
1665
  }
1666

    
1667
  label.option {
1668
  }
1669

    
1670
  .description {
1671
    font-size: 0.85em;
1672
  }
1673

    
1674
  &.form-checkboxes ,
1675
  &.form-radios {
1676
  }
1677
}
1678

    
1679

    
1680
/*
1681
 * Highlight marks and form required mark
1682
 */
1683
.marker,
1684
.form-required {
1685
  color: $highlight;
1686
}
1687

    
1688

    
1689
/*
1690
 * The submit button
1691
 */
1692
.form-submit {
1693
}
1694

    
1695

    
1696
.container-inline {
1697
  div,
1698
  label {
1699
    display: inline;
1700
  }
1701
}
1702

    
1703
/*
1704
 * Define consistent borders
1705
 */
1706
fieldset {
1707
  border: 1px solid $border;
1708
}
1709

    
1710
/*
1711
 * Tips for Drupal's input formats
1712
 */
1713
.tips {
1714
}
1715

    
1716

    
1717
/*
1718
 * Buttons used by contrib modules like Media
1719
 */
1720
a.button {
1721
  @include appearance(button);
1722
}
1723

    
1724

    
1725
/*
1726
 * Password confirmation
1727
 */
1728
.password-parent,
1729
.confirm-parent {
1730
  margin: 0;
1731
}
1732

    
1733

    
1734
/* =============================================================================
1735
 *   Tables
1736
 * ========================================================================== */
1737

    
1738
table {
1739
  margin: 10px 0;
1740
  padding: 0;
1741
  width: 100%;
1742

    
1743
  &.sticky-header {
1744
    z-index: 10;
1745
  }
1746
}
1747

    
1748

    
1749
table,
1750
thead,
1751
tbody,
1752
tr,
1753
th,
1754
td {
1755
  border-color: $border;
1756
}
1757

    
1758

    
1759
table,
1760
td,
1761
th {
1762
  vertical-align: middle;
1763
}
1764

    
1765

    
1766
caption,
1767
th,
1768
td {
1769
  text-align: left;
1770
}
1771

    
1772

    
1773
thead tr {
1774
  font-weight: 700;
1775
  background-color: $medium_dark;
1776
}
1777

    
1778

    
1779
td,
1780
th {
1781
  border-bottom: 0;
1782
  margin: 0;
1783
  padding: 5px 7px;
1784
}
1785

    
1786

    
1787
tbody {}
1788

    
1789

    
1790
tbody tr {
1791
  border-top: 1px solid $border;
1792
}
1793

    
1794

    
1795
tr {
1796

    
1797
  &.odd {
1798
    background: $page;
1799
  }
1800

    
1801
  /* Table row striping */
1802
  &.info,
1803
  &.even,
1804
  &:nth-child(2n+2)  {
1805
    border-bottom: 0;
1806
    background-color: $ultralight;
1807
  }
1808

    
1809
  &.drag {}
1810

    
1811
  &.drag-previous {}
1812

    
1813
  &.odd td.active {
1814
    background-color: $light;
1815
  }
1816

    
1817
  &.even td.active {
1818
    background-color: $medium_light;
1819
  }
1820
}
1821

    
1822

    
1823
.lt-ie8 tr {
1824

    
1825
  &.even,
1826
  &.odd {
1827

    
1828
    th,
1829
    td {
1830
    }
1831
  }
1832
}
1833

    
1834

    
1835
/*
1836
 * Forum tables
1837
 * Core sets white-space to nowrap, which makes no sense
1838
 */
1839
#forum td {
1840
  &.created,
1841
  &.posts,
1842
  &.topics,
1843
  &.last-reply,
1844
  &.replies,
1845
  &.pager {
1846
    white-space: normal;
1847
  }
1848
}
1849

    
1850

    
1851
/* =============================================================================
1852
 *   Messages
1853
 * ========================================================================== */
1854

    
1855
div {
1856
  &.messages {
1857
  // Left and right margin are set by the global gutter width
1858
  margin-bottom: 10px;
1859
  margin-top: 10px;
1860

    
1861
    ul {
1862
      margin-top: 0;
1863
      margin-bottom: 0;
1864
    }
1865
  }
1866

    
1867
  &.status {
1868
  }
1869

    
1870
  &.warning {
1871
  }
1872
}
1873

    
1874
tr.warning {
1875
}
1876

    
1877

    
1878
div.error,
1879
tr.error {
1880
}
1881

    
1882

    
1883
.error {
1884
}
1885

    
1886

    
1887
.warning {
1888
}
1889

    
1890

    
1891
/*
1892
 * Unpublished nodes
1893
 */
1894
.node-unpublished,
1895
.comment-unpublished {
1896
}
1897

    
1898

    
1899
.node-unpublished,
1900
.comment-unpublished {
1901

    
1902
  p.unpublished {
1903
    @include unpublished;
1904
  }
1905
}
1906

    
1907

    
1908
/* =============================================================================
1909
 *    Maintenance pages
1910
 * ========================================================================== */
1911

    
1912
.maintenance-page {
1913
  .container {
1914
    padding: 40px 0;
1915
  }
1916

    
1917
  #site-name,
1918
  #page-title {
1919
    margin: 0;
1920
  }
1921
}
1922

    
1923

    
1924
.db-offline {
1925
  .container {
1926
    margin: 0 auto;
1927
    padding: 40px 0;
1928
    width: 100%;
1929
    max-width: 960px;
1930
  }
1931

    
1932
  div.messages {
1933
    margin: 20px 0 0;
1934
  }
1935

    
1936
  #content {
1937
    padding: 20px 0;
1938
  }
1939
}
1940

    
1941

    
1942
/* =============================================================================
1943
 *   Misc overrides for contrib modules
1944
 * ========================================================================== */
1945

    
1946
/*
1947
 * Admin menu overrides
1948
 */
1949
#admin-menu {
1950
  margin: 0;
1951
  padding: 0;
1952
}
1953

    
1954

    
1955
/*
1956
 * Devel Module
1957
 */
1958
.dev-query {
1959
  background: $light;
1960
  padding: 30px;
1961
}
1962

    
1963

    
1964
/*
1965
 * Styleguide module tweaks
1966
 */
1967
#styleguide-header {
1968
  padding: 0 10px;
1969

    
1970
  .item-list {
1971
    font-family: inherit;
1972
    margin: 0 20px 20px 0;
1973
    min-height: 260px;
1974
    width: auto;
1975
  }
1976
}