upgrade omega again
[indybay:drupal.git] / docs / sites / all / themes / omega / ohm / sass / layouts / ohm-hero / ohm-hero-layout.scss
1 /*******************************************************************************
2  * _layout.scss
3  *
4  * Styling of the "simple" layout demonstrating the Compass grid extension Susy
5  * and building mobile first layouts.
6  ******************************************************************************/
7 @import "partials/utility/all";
8
9 body {
10   background: transparent image-url('diagonal.png') left top repeat;
11 }
12
13 .l-constrained {
14   width: 95%;
15   margin: 0 auto;
16   @include grid-background;
17   @include pie-clearfix;
18 }
19
20 /* Header */
21 .l-header {
22   background-color: $light-blue;
23 }
24 .l-region--header {
25   padding: $vert-spacing-unit 0;
26
27   .block {
28     float: right;
29   }
30 }
31
32 /* Content Area */
33 .l-highlighted-wrapper {
34   padding: $vert-spacing-unit 0;
35   background: #FFF;
36 }
37 .l-region--highlighted {
38   @extend .l-constrained;
39 }
40 .l-region--help {
41   margin-bottom: $vert-spacing-unit;
42 }
43 .l-main {
44   margin-top: 2 * $vert-spacing-unit;
45   margin-bottom: 2 * $vert-spacing-unit;
46 }
47
48 /* Sidebars */
49 .l-region--sidebar-first,
50 .l-region--sidebar-second {
51   background-color: #FFF;
52   padding: $vert-spacing-unit $horz-spacing-unit;
53 }
54
55 /* Footer */
56 .l-footer-wrapper {
57   padding: $vert-spacing-unit 0;
58   background: #FFF;
59 }
60 .l-region--footer {
61   @extend .l-constrained;
62 }
63
64 @include breakpoint($tab, true) {
65   .l-constrained {
66     width: 90%;
67   }
68
69   /* Header */
70   .l-branding {
71     @include grid-span(3, 1);
72   }
73   .l-region--navigation {
74     @include grid-span(6, 4);
75   }
76   .l-region--header {
77     @include grid-span(3, 10);
78   }
79
80   /* Sidebars */
81   .two-sidebars,
82   .one-sidebar {
83     .l-content {
84       @include grid-span(8, 1);
85     }
86     .l-region--sidebar-first,
87     .l-region--sidebar-second {
88       @include grid-span(4, 9);
89       clear: right;
90     }
91   }
92 }
93
94 @include breakpoint($desk, true) {
95   .l-constrained {
96     width: 80%;
97   }
98
99   /* Sidebars */
100   .one-sidebar {
101     .l-content {
102       @include grid-span(8, 1);
103     }
104     .l-region--sidebar-first {
105       @include grid-span(4, 9);
106       clear: none;
107     }
108   }
109   .two-sidebars {
110     .l-content {
111       @include grid-span(6, 1);
112     }
113     .l-region--sidebar-first,
114     .l-region--sidebar-second {
115       @include grid-span(3, 7);
116       clear: none;
117     }
118     .l-region--sidebar-second {
119       @include grid-span(3, 10);
120     }
121   }
122 }