Adding mapbox-gl branch
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,82 @@
|
||||
/*
|
||||
* Copyright 2007 The Closure Library Authors. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by the Apache License, Version 2.0.
|
||||
* See the COPYING file for details.
|
||||
*/
|
||||
|
||||
/**
|
||||
* CSS Inlay
|
||||
* This is the minimum CSS required to use the markup/classname patterns.
|
||||
* @author elsigh@google.com (Lindsey Simon)
|
||||
* @author ddiaz@google.com (Dustin Diaz)
|
||||
*/
|
||||
|
||||
/**
|
||||
* Document container designed for fluid width scaling.
|
||||
* Alternative g-doc- fixed-width classes are in gui-fixed.css.
|
||||
*/
|
||||
.g-doc {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/**
|
||||
* g-section fundamentally has to clear floats. There are many ways to do this.
|
||||
* This technique is nice because it doesn't rely on overflow: hidden, which
|
||||
* has the potential to hide your content in situations where a fixed size
|
||||
* node takes up too much space (like a big table, or a text input or image.
|
||||
* Works in Webkit, IE8, and FF3.
|
||||
*/
|
||||
.g-section {
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* IE7-only hack. Nicely IE7 will clear floats with just block display
|
||||
* and hasLayout.
|
||||
*/
|
||||
*:first-child+html .g-section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* IE6 cannot hang with overflow: visible. If we use the IE7 display block
|
||||
* trick in IE6 we get severe float drop in nested grids.
|
||||
*/
|
||||
* html .g-section {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* FF2 can't actually hang with overflow: visible. */
|
||||
@-moz-document url-prefix() {
|
||||
.g-section {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* FF3 now needs to be reset after the previous block which affects it as well.
|
||||
* We target the tt element in this hack because no one uses it.
|
||||
*/
|
||||
@-moz-document url-prefix() {
|
||||
.g-section,tt:default {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* Forces "hasLayout" fixing a gamut of bugs in <= IE7. */
|
||||
.g-section,
|
||||
.g-unit {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
/* Used for splitting a template's units text-alignment to the outer edges. */
|
||||
.g-split .g-unit {
|
||||
text-align: right;
|
||||
}
|
||||
.g-split .g-first {
|
||||
text-align: left;
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
/*
|
||||
* Copyright 2007 The Closure Library Authors. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by the Apache License, Version 2.0.
|
||||
* See the COPYING file for details.
|
||||
*/
|
||||
|
||||
/**
|
||||
* CSS Inlay
|
||||
* Fixed templates
|
||||
* @author ddiaz@google.com (Dustin Diaz)
|
||||
* @author elsigh@google.com (Lindsey Simon)
|
||||
* @fileoverview
|
||||
* The nature of these templates is to have one unit be a fixed width
|
||||
* and the supplementary unit to take up the rest of the width
|
||||
* of its parents' container.
|
||||
*
|
||||
* Sample Usage:
|
||||
<div class="g-section g-tpl-180">
|
||||
<div class="g-unit g-first">
|
||||
<p>
|
||||
Lorem Ipsum...
|
||||
</p>
|
||||
</div>
|
||||
<div class="g-unit">
|
||||
<p>
|
||||
Lorem Ipsum...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/* Document container designed for 1024x768 */
|
||||
/* TODO(ux-webdev): convert this to a straight px value - em assumes reset. */
|
||||
.g-doc-1024 {
|
||||
width: 73.074em;
|
||||
min-width: 950px; /* min-width doesn't work in IE6 */
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
/* IE 6 */
|
||||
* html .g-doc-1024 {
|
||||
width: 71.313em;
|
||||
}
|
||||
/* IE 7 */
|
||||
*+html .g-doc-1024 {
|
||||
width: 71.313em;
|
||||
}
|
||||
|
||||
/* Document container designed for 800x600 */
|
||||
/* TODO(ux-webdev): convert this to a straight px value - em assumes reset. */
|
||||
.g-doc-800 {
|
||||
width: 57.69em;
|
||||
min-width: 750px; /* min-width doesn't work in IE6 */
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
/* IE 6 */
|
||||
* html .g-doc-800 {
|
||||
width: 56.3em;
|
||||
}
|
||||
/* IE 7 */
|
||||
*+html .g-doc-800 {
|
||||
width: 56.3em;
|
||||
}
|
||||
|
||||
/* 160px */
|
||||
.g-tpl-160 .g-unit,
|
||||
.g-unit .g-tpl-160 .g-unit,
|
||||
.g-unit .g-unit .g-tpl-160 .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-160 .g-unit {
|
||||
margin: 0 0 0 160px;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-160 .g-first,
|
||||
.g-unit .g-unit .g-tpl-160 .g-first,
|
||||
.g-unit .g-tpl-160 .g-first,
|
||||
.g-tpl-160 .g-first {
|
||||
margin: 0;
|
||||
width: 160px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* 160px alt */
|
||||
.g-tpl-160-alt .g-unit,
|
||||
.g-unit .g-tpl-160-alt .g-unit,
|
||||
.g-unit .g-unit .g-tpl-160-alt .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-160-alt .g-unit {
|
||||
margin: 0 160px 0 0;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-160-alt .g-first,
|
||||
.g-unit .g-unit .g-tpl-160-alt .g-first,
|
||||
.g-unit .g-tpl-160-alt .g-first,
|
||||
.g-tpl-160-alt .g-first {
|
||||
margin: 0;
|
||||
width: 160px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* 180px */
|
||||
.g-tpl-180 .g-unit,
|
||||
.g-unit .g-tpl-180 .g-unit,
|
||||
.g-unit .g-unit .g-tpl-180 .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-180 .g-unit {
|
||||
margin: 0 0 0 180px;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-180 .g-first,
|
||||
.g-unit .g-unit .g-tpl-180 .g-first,
|
||||
.g-unit .g-tpl-180 .g-first,
|
||||
.g-tpl-180 .g-first {
|
||||
margin: 0;
|
||||
width: 180px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* 180px alt */
|
||||
.g-tpl-180-alt .g-unit,
|
||||
.g-unit .g-tpl-180-alt .g-unit,
|
||||
.g-unit .g-unit .g-tpl-180-alt .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-180-alt .g-unit {
|
||||
margin: 0 180px 0 0;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-180-alt .g-first,
|
||||
.g-unit .g-unit .g-tpl-180-alt .g-first,
|
||||
.g-unit .g-tpl-180-alt .g-first,
|
||||
.g-tpl-180-alt .g-first {
|
||||
margin: 0;
|
||||
width: 180px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* 300px */
|
||||
.g-tpl-300 .g-unit,
|
||||
.g-unit .g-tpl-300 .g-unit,
|
||||
.g-unit .g-unit .g-tpl-300 .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-300 .g-unit {
|
||||
margin: 0 0 0 300px;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-300 .g-first,
|
||||
.g-unit .g-unit .g-tpl-300 .g-first,
|
||||
.g-unit .g-tpl-300 .g-first,
|
||||
.g-tpl-300 .g-first {
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* 300px alt */
|
||||
.g-tpl-300-alt .g-unit,
|
||||
.g-unit .g-tpl-300-alt .g-unit,
|
||||
.g-unit .g-unit .g-tpl-300-alt .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-300-alt .g-unit {
|
||||
margin: 0 300px 0 0;
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-300-alt .g-first,
|
||||
.g-unit .g-unit .g-tpl-300-alt .g-first,
|
||||
.g-unit .g-tpl-300-alt .g-first,
|
||||
.g-tpl-300-alt .g-first {
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
float: right;
|
||||
}
|
||||
@@ -0,0 +1,253 @@
|
||||
/*
|
||||
* Copyright 2007 The Closure Library Authors. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by the Apache License, Version 2.0.
|
||||
* See the COPYING file for details.
|
||||
*/
|
||||
|
||||
/**
|
||||
* CSS Inlay
|
||||
* Percentage based templates
|
||||
* @author ddiaz@google.com (Dustin Diaz)
|
||||
* @author elsigh@google.com (Lindsey Simon)
|
||||
* @fileoverview
|
||||
* The first ten templates are described using the following convention:
|
||||
* tpl-LEFT%-RIGHT% and tpl-LEFT%-RIGHT%-alt, where alt switches render order.
|
||||
*
|
||||
* The rationale for the percentage values are pretty fascinating.
|
||||
* Three nine's are needed for a miminal affordance in the gap between units
|
||||
* for Opera, while two for IE 5.5 and down.
|
||||
* Straight percentages seem to work fine otherwise, but the values here test
|
||||
* well cross-browser.
|
||||
*
|
||||
* Sample Usage:
|
||||
<div class="g-section g-tpl-50-50">
|
||||
<div class="g-unit g-first">
|
||||
<p>
|
||||
Lorem Ipsum...
|
||||
</p>
|
||||
</div>
|
||||
<div class="g-unit">
|
||||
<p>
|
||||
Lorem Ipsum...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
|
||||
/* 25/75 */
|
||||
.g-tpl-25-75 .g-unit,
|
||||
.g-unit .g-tpl-25-75 .g-unit,
|
||||
.g-unit .g-unit .g-tpl-25-75 .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-25-75 .g-unit {
|
||||
width: 74.999%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-25-75 .g-first,
|
||||
.g-unit .g-unit .g-tpl-25-75 .g-first,
|
||||
.g-unit .g-tpl-25-75 .g-first,
|
||||
.g-tpl-25-75 .g-first {
|
||||
width: 24.999%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 25/75-alt */
|
||||
.g-tpl-25-75-alt .g-unit,
|
||||
.g-unit .g-tpl-25-75-alt .g-unit,
|
||||
.g-unit .g-unit .g-tpl-25-75-alt .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-25-75-alt .g-unit {
|
||||
width: 24.999%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-25-75-alt .g-first,
|
||||
.g-unit .g-unit .g-tpl-25-75-alt .g-first,
|
||||
.g-unit .g-tpl-25-75-alt .g-first,
|
||||
.g-tpl-25-75-alt .g-first {
|
||||
width: 74.999%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 75/25 */
|
||||
.g-tpl-75-25 .g-unit,
|
||||
.g-unit .g-tpl-75-25 .g-unit,
|
||||
.g-unit .g-unit .g-tpl-75-25 .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-75-25 .g-unit {
|
||||
width: 24.999%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-75-25 .g-first,
|
||||
.g-unit .g-unit .g-tpl-75-25 .g-first,
|
||||
.g-unit .g-tpl-75-25 .g-first,
|
||||
.g-tpl-75-25 .g-first {
|
||||
width: 74.999%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 75/25-alt */
|
||||
.g-tpl-75-25-alt .g-unit,
|
||||
.g-unit .g-tpl-75-25-alt .g-unit,
|
||||
.g-unit .g-unit .g-tpl-75-25-alt .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-75-25-alt .g-unit {
|
||||
width: 74.999%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-75-25-alt .g-first,
|
||||
.g-unit .g-unit .g-tpl-75-25-alt .g-first,
|
||||
.g-unit .g-tpl-75-25-alt .g-first,
|
||||
.g-tpl-75-25-alt .g-first {
|
||||
width: 24.999%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 33/67 */
|
||||
.g-tpl-33-67 .g-unit,
|
||||
.g-unit .g-tpl-33-67 .g-unit,
|
||||
.g-unit .g-unit .g-tpl-33-67 .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-33-67 .g-unit {
|
||||
width: 66.999%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-33-67 .g-first,
|
||||
.g-unit .g-unit .g-tpl-33-67 .g-first,
|
||||
.g-unit .g-tpl-33-67 .g-first,
|
||||
.g-tpl-33-67 .g-first {
|
||||
width: 32.999%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 33/67-alt */
|
||||
.g-tpl-33-67-alt .g-unit,
|
||||
.g-unit .g-tpl-33-67-alt .g-unit,
|
||||
.g-unit .g-unit .g-tpl-33-67-alt .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-33-67-alt .g-unit {
|
||||
width: 32.999%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-33-67-alt .g-first,
|
||||
.g-unit .g-unit .g-tpl-33-67-alt .g-first,
|
||||
.g-unit .g-tpl-33-67-alt .g-first,
|
||||
.g-tpl-33-67-alt .g-first {
|
||||
width: 66.999%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
/* 67/33 */
|
||||
.g-tpl-67-33 .g-unit,
|
||||
.g-unit .g-tpl-67-33 .g-unit,
|
||||
.g-unit .g-unit .g-tpl-67-33 .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-67-33 .g-unit {
|
||||
width: 32.999%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-67-33 .g-first,
|
||||
.g-unit .g-unit .g-tpl-67-33 .g-first,
|
||||
.g-unit .g-tpl-67-33 .g-first,
|
||||
.g-tpl-67-33 .g-first {
|
||||
width: 66.999%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 67/33-alt */
|
||||
.g-tpl-67-33-alt .g-unit,
|
||||
.g-unit .g-tpl-67-33-alt .g-unit,
|
||||
.g-unit .g-unit .g-tpl-67-33-alt .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-67-33-alt .g-unit {
|
||||
width: 66.999%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-67-33-alt .g-first,
|
||||
.g-unit .g-unit .g-tpl-67-33-alt .g-first,
|
||||
.g-unit .g-tpl-67-33-alt .g-first,
|
||||
.g-tpl-67-33-alt .g-first {
|
||||
width: 32.999%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 50/50 */
|
||||
.g-tpl-50-50 .g-unit,
|
||||
.g-unit .g-tpl-50-50 .g-unit,
|
||||
.g-unit .g-unit .g-tpl-50-50 .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-50-50 .g-unit {
|
||||
width: 49.999%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-50-50 .g-first,
|
||||
.g-unit .g-unit .g-tpl-50-50 .g-first,
|
||||
.g-unit .g-tpl-50-50 .g-first,
|
||||
.g-tpl-50-50 .g-first {
|
||||
width: 49.999%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 50/50-alt */
|
||||
.g-tpl-50-50-alt .g-unit,
|
||||
.g-unit .g-tpl-50-50-alt .g-unit,
|
||||
.g-unit .g-unit .g-tpl-50-50-alt .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-50-50-alt .g-unit {
|
||||
width: 49.999%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
.g-unit .g-unit .g-unit .g-tpl-50-50-alt .g-first,
|
||||
.g-unit .g-unit .g-tpl-50-50-alt .g-first,
|
||||
.g-unit .g-tpl-50-50-alt .g-first,
|
||||
.g-tpl-50-50-alt .g-first {
|
||||
width: 49.999%;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Nest templates contain floating g-units.
|
||||
* For these, width needs to be reset from the 100% for inline-block
|
||||
* to auto. This fixes an issue with horizontal scrollbars.
|
||||
*/
|
||||
.g-tpl-nest {
|
||||
width: auto;
|
||||
}
|
||||
/**
|
||||
* Making any g-sections inside of g-tpl-nests display inline instead
|
||||
* of display block solves an issue where inner sections add up incrementally
|
||||
* their widths to set the width of the outer g-unit. This causes all kinds of
|
||||
* problems with float-drops and display:inline fixes this.
|
||||
*/
|
||||
.g-tpl-nest .g-section {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* g-tpl-nest for multi unit nesting (float left), say for a menu. */
|
||||
.g-tpl-nest .g-unit,
|
||||
.g-unit .g-tpl-nest .g-unit,
|
||||
.g-unit .g-unit .g-tpl-nest .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-nest .g-unit {
|
||||
float: left;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* g-tpl-nest-alt for multi unit nesting (float right), say for a menu. */
|
||||
.g-tpl-nest-alt .g-unit,
|
||||
.g-unit .g-tpl-nest-alt .g-unit,
|
||||
.g-unit .g-unit .g-tpl-nest-alt .g-unit,
|
||||
.g-unit .g-unit .g-unit .g-tpl-nest-alt .g-unit {
|
||||
float: right;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user