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