Projet

Général

Profil

Paste
Télécharger (3,13 ko) Statistiques
| Branche: | Révision:

root / drupal7 / sites / all / themes / zen / STARTERKIT / sass / layouts / _fixed.scss @ 87dbc3bf

1
/**
2
 * @file
3
 * Positioning for a fixed-width, desktop-centric layout.
4
 *
5
 * Define CSS classes to create a table-free, 3-column, 2-column, or single
6
 * column layout depending on whether blocks are enabled in the left or right
7
 * columns.
8
 *
9
 * This layout uses the Zen Grids plugin for Compass: http://zengrids.com
10
 */
11

    
12
// We are going to create a 980px wide, 5 column grid with 20px gutters between
13
// columns (applied as 10px of left/right padding on each column).
14
$zen-column-count:  5;
15
$zen-gutter-width:  20px;
16
$zen-grid-width:    980px;
17

    
18
// If you need IE6/7 support for box-sizing: border-box (default), see _init.scss
19
// Since the same CSS unit for grid width and gutter width are set here
20
// we can use box-sizing: content-box; without worrying about polyfills.
21
$zen-box-sizing: content-box;
22

    
23
// You can generate more efficient CSS if you manually apply the
24
// zen-grid-item-base mixin to all grid items from within a single ruleset.
25
$zen-auto-include-item-base: false;
26
// $zen-auto-include-flow-item-base: false;
27

    
28
// Suppress this section of CSS for RTL layouts since it contains no LTR-specific styles.
29
@if $zen-reverse-all-floats == false {
30

    
31
/**
32
 * Center the page.
33
 *
34
 * If you want to make the page a fixed width and centered in the viewport,
35
 * this is the standards-compliant way to do that.
36
 */
37
#page,
38
.region-bottom {
39
  margin-left: auto;
40
  margin-right: auto;
41
  width: $zen-grid-width;
42
}
43

    
44
/* Apply the shared properties of grid items in a single, efficient ruleset. */
45
#header,
46
#content,
47
#navigation,
48
.region-sidebar-first,
49
.region-sidebar-second,
50
#footer {
51
  // See the note about $zen-auto-include-item-base above.
52
  @include zen-grid-item-base();
53
}
54

    
55
/* Containers for grid items and flow items. */
56
#header,
57
#main,
58
#footer {
59
  @include zen-grid-container();
60
}
61

    
62
/* Navigation bar */
63
#main {
64
  /* Move all the children of #main down to make room. */
65
  padding-top: $nav-height;
66
  position: relative;
67
}
68
#navigation {
69
  /* Move the navbar up inside #main's padding. */
70
  position: absolute;
71
  top: 0;
72
  height: $nav-height;
73
  width: $zen-grid-width - $zen-gutter-width;
74
}
75

    
76
} // End of @if $zen-reverse-all-floats == true
77

    
78
/**
79
 * The layout when there is only one sidebar, the left one.
80
 */
81
.sidebar-first {
82
  /* Span 4 columns, starting in 2nd column from left. */
83
  #content {
84
    @include zen-grid-item(4, 2);
85
  }
86

    
87
  /* Span 1 column, starting in 1st column from left. */
88
  .region-sidebar-first {
89
    @include zen-grid-item(1, 1);
90
  }
91
}
92

    
93
/**
94
 * The layout when there is only one sidebar, the right one.
95
 */
96
.sidebar-second {
97
  /* Span 4 columns, starting in 1st column from left. */
98
  #content {
99
    @include zen-grid-item(4, 1);
100
  }
101

    
102
  /* Span 1 column, starting in 5th column from left. */
103
  .region-sidebar-second {
104
    @include zen-grid-item(1, 5);
105
  }
106
}
107

    
108
/**
109
 * The layout when there are two sidebars.
110
 */
111
.two-sidebars {
112
  /* Span 3 columns, starting in 2nd column from left. */
113
  #content {
114
    @include zen-grid-item(3, 2);
115
  }
116

    
117
  /* Span 1 column, starting in 1st column from left. */
118
  .region-sidebar-first {
119
    @include zen-grid-item(1, 1);
120
  }
121

    
122
  /* Span 1 column, starting in 5th column from left. */
123
  .region-sidebar-second {
124
    @include zen-grid-item(1, 5);
125
  }
126
}