1/*
2 * Copyright 2007 The Closure Library Authors. All Rights Reserved.
3 *
4 * Use of this source code is governed by the Apache License, Version 2.0.
5 * See the COPYING file for details.
6 */
7
8/**
9 * CSS Inlay
10 * Percentage based templates
11 * @author ddiaz@google.com (Dustin Diaz)
12 * @author elsigh@google.com (Lindsey Simon)
13 * @fileoverview
14 * The first ten templates are described using the following convention:
15 * tpl-LEFT%-RIGHT% and tpl-LEFT%-RIGHT%-alt, where alt switches render order.
16 *
17 * The rationale for the percentage values are pretty fascinating.
18 * Three nine's are needed for a miminal affordance in the gap between units
19 * for Opera, while two for IE 5.5 and down.
20 * Straight percentages seem to work fine otherwise, but the values here test
21 * well cross-browser.
22 *
23 * Sample Usage:
24  <div class="g-section g-tpl-50-50">
25    <div class="g-unit g-first">
26      <p>
27        Lorem Ipsum...
28      </p>
29    </div>
30    <div class="g-unit">
31      <p>
32        Lorem Ipsum...
33      </p>
34    </div>
35  </div>
36 */
37
38/* 25/75 */
39.g-tpl-25-75 .g-unit,
40.g-unit .g-tpl-25-75 .g-unit,
41.g-unit .g-unit .g-tpl-25-75 .g-unit,
42.g-unit .g-unit .g-unit .g-tpl-25-75 .g-unit {
43  width: 74.999%;
44  float: right;
45  margin: 0;
46}
47.g-unit .g-unit .g-unit .g-tpl-25-75 .g-first,
48.g-unit .g-unit .g-tpl-25-75 .g-first,
49.g-unit .g-tpl-25-75 .g-first,
50.g-tpl-25-75 .g-first {
51  width: 24.999%;
52  float: left;
53  margin: 0;
54}
55
56/* 25/75-alt */
57.g-tpl-25-75-alt .g-unit,
58.g-unit .g-tpl-25-75-alt .g-unit,
59.g-unit .g-unit .g-tpl-25-75-alt .g-unit,
60.g-unit .g-unit .g-unit .g-tpl-25-75-alt .g-unit {
61  width: 24.999%;
62  float: left;
63  margin: 0;
64}
65.g-unit .g-unit .g-unit .g-tpl-25-75-alt .g-first,
66.g-unit .g-unit .g-tpl-25-75-alt .g-first,
67.g-unit .g-tpl-25-75-alt .g-first,
68.g-tpl-25-75-alt .g-first {
69  width: 74.999%;
70  float: right;
71  margin: 0;
72}
73
74/* 75/25 */
75.g-tpl-75-25 .g-unit,
76.g-unit .g-tpl-75-25 .g-unit,
77.g-unit .g-unit .g-tpl-75-25 .g-unit,
78.g-unit .g-unit .g-unit .g-tpl-75-25 .g-unit {
79  width: 24.999%;
80  float: right;
81  margin: 0;
82}
83.g-unit .g-unit .g-unit .g-tpl-75-25 .g-first,
84.g-unit .g-unit .g-tpl-75-25 .g-first,
85.g-unit .g-tpl-75-25 .g-first,
86.g-tpl-75-25 .g-first {
87  width: 74.999%;
88  float: left;
89  margin: 0;
90}
91
92/* 75/25-alt */
93.g-tpl-75-25-alt .g-unit,
94.g-unit .g-tpl-75-25-alt .g-unit,
95.g-unit .g-unit .g-tpl-75-25-alt .g-unit,
96.g-unit .g-unit .g-unit .g-tpl-75-25-alt .g-unit {
97  width: 74.999%;
98  float: left;
99  margin: 0;
100}
101.g-unit .g-unit .g-unit .g-tpl-75-25-alt .g-first,
102.g-unit .g-unit .g-tpl-75-25-alt .g-first,
103.g-unit .g-tpl-75-25-alt .g-first,
104.g-tpl-75-25-alt .g-first {
105  width: 24.999%;
106  float: right;
107  margin: 0;
108}
109
110/* 33/67 */
111.g-tpl-33-67  .g-unit,
112.g-unit .g-tpl-33-67  .g-unit,
113.g-unit .g-unit .g-tpl-33-67  .g-unit,
114.g-unit .g-unit .g-unit .g-tpl-33-67  .g-unit {
115  width: 66.999%;
116  float: right;
117  margin: 0;
118}
119.g-unit .g-unit .g-unit .g-tpl-33-67 .g-first,
120.g-unit .g-unit .g-tpl-33-67 .g-first,
121.g-unit .g-tpl-33-67 .g-first,
122.g-tpl-33-67 .g-first {
123  width: 32.999%;
124  float: left;
125  margin: 0;
126}
127
128/* 33/67-alt */
129.g-tpl-33-67-alt .g-unit,
130.g-unit .g-tpl-33-67-alt .g-unit,
131.g-unit .g-unit .g-tpl-33-67-alt .g-unit,
132.g-unit .g-unit .g-unit .g-tpl-33-67-alt .g-unit {
133  width: 32.999%;
134  float: left;
135  margin: 0;
136}
137.g-unit .g-unit .g-unit .g-tpl-33-67-alt .g-first,
138.g-unit .g-unit .g-tpl-33-67-alt .g-first,
139.g-unit .g-tpl-33-67-alt .g-first,
140.g-tpl-33-67-alt .g-first {
141  width: 66.999%;
142  float: right;
143  margin: 0;
144}
145/* 67/33 */
146.g-tpl-67-33 .g-unit,
147.g-unit .g-tpl-67-33 .g-unit,
148.g-unit .g-unit .g-tpl-67-33 .g-unit,
149.g-unit .g-unit .g-unit .g-tpl-67-33 .g-unit {
150  width: 32.999%;
151  float: right;
152  margin: 0;
153}
154.g-unit .g-unit .g-unit .g-tpl-67-33 .g-first,
155.g-unit .g-unit .g-tpl-67-33 .g-first,
156.g-unit .g-tpl-67-33 .g-first,
157.g-tpl-67-33 .g-first {
158  width: 66.999%;
159  float: left;
160  margin: 0;
161}
162
163/* 67/33-alt */
164.g-tpl-67-33-alt .g-unit,
165.g-unit .g-tpl-67-33-alt .g-unit,
166.g-unit .g-unit .g-tpl-67-33-alt .g-unit,
167.g-unit .g-unit .g-unit .g-tpl-67-33-alt .g-unit {
168  width: 66.999%;
169  float: left;
170  margin: 0;
171}
172.g-unit .g-unit .g-unit .g-tpl-67-33-alt .g-first,
173.g-unit .g-unit .g-tpl-67-33-alt .g-first,
174.g-unit .g-tpl-67-33-alt .g-first,
175.g-tpl-67-33-alt .g-first {
176  width: 32.999%;
177  float: right;
178  margin: 0;
179}
180
181/* 50/50 */
182.g-tpl-50-50 .g-unit,
183.g-unit .g-tpl-50-50 .g-unit,
184.g-unit .g-unit .g-tpl-50-50 .g-unit,
185.g-unit .g-unit .g-unit .g-tpl-50-50 .g-unit {
186  width: 49.999%;
187  float: right;
188  margin: 0;
189}
190.g-unit .g-unit .g-unit .g-tpl-50-50 .g-first,
191.g-unit .g-unit .g-tpl-50-50 .g-first,
192.g-unit .g-tpl-50-50 .g-first,
193.g-tpl-50-50 .g-first {
194  width: 49.999%;
195  float: left;
196  margin: 0;
197}
198
199/* 50/50-alt */
200.g-tpl-50-50-alt .g-unit,
201.g-unit .g-tpl-50-50-alt .g-unit,
202.g-unit .g-unit .g-tpl-50-50-alt .g-unit,
203.g-unit .g-unit .g-unit .g-tpl-50-50-alt .g-unit {
204  width: 49.999%;
205  float: left;
206  margin: 0;
207}
208.g-unit .g-unit .g-unit .g-tpl-50-50-alt .g-first,
209.g-unit .g-unit .g-tpl-50-50-alt .g-first,
210.g-unit .g-tpl-50-50-alt .g-first,
211.g-tpl-50-50-alt .g-first {
212  width: 49.999%;
213  float: right;
214  margin: 0;
215}
216
217/**
218 * Nest templates contain floating g-units.
219 * For these, width needs to be reset from the 100% for inline-block
220 * to auto. This fixes an issue with horizontal scrollbars.
221 */
222.g-tpl-nest {
223  width: auto;
224}
225/**
226 * Making any g-sections inside of g-tpl-nests display inline instead
227 * of display block solves an issue where inner sections add up incrementally
228 * their widths to set the width of the outer g-unit. This causes all kinds of
229 * problems with float-drops and display:inline fixes this.
230 */
231.g-tpl-nest .g-section {
232  display: inline;
233}
234
235/* g-tpl-nest for multi unit nesting (float left), say for a menu. */
236.g-tpl-nest .g-unit,
237.g-unit .g-tpl-nest .g-unit,
238.g-unit .g-unit .g-tpl-nest .g-unit,
239.g-unit .g-unit .g-unit .g-tpl-nest .g-unit {
240  float: left;
241  width: auto;
242  margin: 0;
243}
244
245/* g-tpl-nest-alt for multi unit nesting (float right), say for a menu. */
246.g-tpl-nest-alt .g-unit,
247.g-unit .g-tpl-nest-alt .g-unit,
248.g-unit .g-unit .g-tpl-nest-alt .g-unit,
249.g-unit .g-unit .g-unit .g-tpl-nest-alt .g-unit {
250  float: right;
251  width: auto;
252  margin: 0;
253}
254