mirror of
https://github.com/google/styleguide.git
synced 2024-03-22 13:11:43 +08:00
Update look and feel of the style guides
This commit is contained in:
robbyw@google.com
parent
e5aeb8fb72
commit
52f62a450b
|
|
@ -1,102 +0,0 @@
|
|||
body {
|
||||
background-color: #FFF;
|
||||
color: #666;
|
||||
font-family: sans-serif;
|
||||
font-size: 10pt;
|
||||
margin-right: 100px;
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .toc_title {
|
||||
color: #06C;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 18pt;
|
||||
}
|
||||
|
||||
h2, .toc_title {
|
||||
font-weight: bold;
|
||||
font-size: 12pt;
|
||||
margin-left: -40px;
|
||||
}
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
font-size: 10pt;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.toc_category, .toc_stylepoint {
|
||||
font-size: 10pt;
|
||||
padding-top: .3em;
|
||||
padding-bottom: .3em;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border-top: 1px solid #CCC;
|
||||
border-bottom: 1px solid #CCC;
|
||||
border-left: 5px solid #CCC;
|
||||
border-right: 5px solid #CCC;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
code,samp,var {
|
||||
color: #060;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 10pt;
|
||||
display: block;
|
||||
color: #060;
|
||||
background-color: #F8FFF8;
|
||||
border-color: #F0FFF0;
|
||||
border-style: solid;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-left-width: 5px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
pre.badcode {
|
||||
color: #C00;
|
||||
background-color: #FFF8F8;
|
||||
border-color: #FFF0F0;
|
||||
}
|
||||
|
||||
.showhide_button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link_button {
|
||||
background-color: #F8F8FF;
|
||||
border-color: #F0F0FF;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
font-size: 75%;
|
||||
margin-top: 20px;
|
||||
margin-left: -50px;
|
||||
padding: 4px;
|
||||
line-height: 0px;
|
||||
}
|
||||
|
||||
address {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 10em;
|
||||
border-width: 1px;
|
||||
color: #FFF;
|
||||
}
|
||||
2569
jsoncstyleguide.html
2569
jsoncstyleguide.html
File diff suppressed because it is too large
Load Diff
212
styleguide.css
212
styleguide.css
|
|
@ -1,13 +1,16 @@
|
|||
body {
|
||||
background-color: #ffffff;
|
||||
color: black;
|
||||
margin-right: 1in;
|
||||
margin-left: 1in;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-family: sans-serif;
|
||||
font-size: 10pt;
|
||||
margin-right: 100px;
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #3366ff;
|
||||
font-family: sans-serif;
|
||||
h1, h2, h3, h4, h5, h6, .toc_title {
|
||||
color: #06c;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -15,105 +18,106 @@ h1 {
|
|||
font-size: 18pt;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-left: -0.5in;
|
||||
margin-top: 0.5in;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-left: -0.25in;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-left: -0.125in;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-left: -1in;
|
||||
}
|
||||
|
||||
.h2toc {
|
||||
font-size: 12pt;
|
||||
color: #3366ff;
|
||||
h2, .toc_title {
|
||||
font-weight: bold;
|
||||
margin-left: 0.5in;
|
||||
line-height: 200%;
|
||||
font-size: 12pt;
|
||||
margin-left: -40px;
|
||||
}
|
||||
|
||||
.h3toc {
|
||||
font-size: 11pt;
|
||||
color: #3366ff;
|
||||
font-weight: normal;
|
||||
margin-left: 1in;
|
||||
h3, h4, h5, h6 {
|
||||
font-size: 10pt;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
/* Use the <code> tag for bits of code and <var> for variables and objects. */
|
||||
code,samp,var {
|
||||
color: #005000;
|
||||
font-size: 110%;
|
||||
.toc_category, .toc_stylepoint {
|
||||
font-size: 10pt;
|
||||
padding-top: .3em;
|
||||
padding-bottom: .3em;
|
||||
}
|
||||
|
||||
PRE {
|
||||
margin-left: 2%;
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px 12px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.toc td, .toc th {
|
||||
border-width: 1px 5px;
|
||||
}
|
||||
|
||||
code, samp, var {
|
||||
color: #060;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 10pt;
|
||||
display: block;
|
||||
color: #005000;
|
||||
background-color: #fbfefb;
|
||||
border-color: #fafffa;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 0px;
|
||||
border-top-width: 0px;
|
||||
border-bottom-width: 0px;
|
||||
color: #060;
|
||||
background-color: #f8fff8;
|
||||
border-color: #f0fff0;
|
||||
border-style: solid;
|
||||
border-top: 1px solid #fffaff;
|
||||
border-left: 1px solid #fffaff;
|
||||
border-right: 1px dotted #eff0ef;
|
||||
border-bottom: 1px dotted #eff0ef;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-left-width: 5px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
PRE {
|
||||
-moz-border-radius: 12px;
|
||||
pre.badcode {
|
||||
color: #c00;
|
||||
background-color: #fff8f8;
|
||||
border-color: #fff0f0;
|
||||
}
|
||||
|
||||
PRE.badcode {
|
||||
color: #CC0000;
|
||||
background-color: #fffcfc;
|
||||
border-right: 1px solid #f0efef;
|
||||
border-bottom: 1px solid #f0efef;
|
||||
border-top: 1px dotted #faffff;
|
||||
border-left: 1px dotted #faffff;
|
||||
}
|
||||
|
||||
TABLE {
|
||||
border-collapse: collapse;
|
||||
border-color: #dddddd;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
TD {
|
||||
border-color: #bbbbbb;
|
||||
.showhide_button {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-width: thin
|
||||
border-color: #ddd #aaa #aaa #ddd;
|
||||
padding: 0 3px 1px;
|
||||
margin: 0 4px 8px 0;
|
||||
border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
}
|
||||
|
||||
TH {
|
||||
border-collapse: collapse;
|
||||
border-color: #dddddd;
|
||||
border-style: none;
|
||||
border-width: thin;
|
||||
color: #444444;
|
||||
font-family: sans-serif;
|
||||
.link_button {
|
||||
float: left;
|
||||
display: none;
|
||||
background-color: #f8f8ff;
|
||||
border-color: #f0f0ff;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
font-size: 75%;
|
||||
margin-top: 0;
|
||||
margin-left: -50px;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
}
|
||||
|
||||
address {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 3.5em;
|
||||
border-width: 1px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stylepoint_section {
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
color: #5588ff;
|
||||
font-family: sans-serif;
|
||||
font-size: 90%;
|
||||
|
|
@ -129,53 +133,15 @@ address {
|
|||
margin-left: -1%;
|
||||
}
|
||||
|
||||
.showhide_button {
|
||||
border-color: #dddddd;
|
||||
border-style: outset;
|
||||
border-width: medium;
|
||||
cursor: pointer;
|
||||
.stylepoint_subsubsection {
|
||||
color: #667799;
|
||||
font-family: sans-serif;
|
||||
font-size: 80%;
|
||||
font-weight: bold;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
.link_button {
|
||||
background-color: #ffffd0;
|
||||
border-color: #fcfca0;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
font-family: sans-serif;
|
||||
font-size: 75%;
|
||||
font-variant: small-caps;
|
||||
margin-left: -2%;
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
.revision {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.toc {
|
||||
background-color: #fcfcff;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.toc_title {
|
||||
font-family: sans-serif;
|
||||
font-size: 110%;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.toc_category {
|
||||
margin-left: 5%;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.toc_stylepoint {
|
||||
margin-left: 5%;
|
||||
font-family: sans-serif;
|
||||
font-size: 90%;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,10 +32,13 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
|
|||
|
||||
function ShowHideByName(bodyName, buttonName) {
|
||||
var bodyElements;
|
||||
var linkElement;
|
||||
if (document.getElementsByName) {
|
||||
bodyElements = document.getElementsByName(bodyName);
|
||||
linkElement = document.getElementsByName('link-' + buttonName)[0];
|
||||
} else {
|
||||
bodyElements = [document.getElementById(bodyName)];
|
||||
linkElement = document.getElementById('link-' + buttonName);
|
||||
}
|
||||
if (bodyElements.length != 1) {
|
||||
alert("ShowHideByName() got the wrong number of bodyElements: " + bodyElements.length);
|
||||
|
|
@ -50,9 +53,11 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
|
|||
}
|
||||
if (bodyElement.style.display == "none" || bodyElement.style.display == "") {
|
||||
bodyElement.style.display = "inline";
|
||||
linkElement.style.display = "block";
|
||||
buttonElement.innerHTML = '<xsl:value-of select="$hide_button_text"/>';
|
||||
} else {
|
||||
bodyElement.style.display = "none";
|
||||
linkElement.style.display = "none";
|
||||
buttonElement.innerHTML = '<xsl:value-of select="$show_button_text"/>';
|
||||
}
|
||||
}
|
||||
|
|
@ -83,7 +88,8 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
|
|||
if (root[i].className == 'showhide_button') {
|
||||
root[i].innerHTML = newButton;
|
||||
}
|
||||
if (root[i].className == 'stylepoint_body') {
|
||||
if (root[i].className == 'stylepoint_body' ||
|
||||
root[i].className == 'link_button') {
|
||||
root[i].style.display = newState;
|
||||
}
|
||||
}
|
||||
|
|
@ -136,11 +142,12 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
|
|||
<P>
|
||||
Each style point has a summary for which additional information is available
|
||||
by toggling the accompanying arrow button that looks this way:
|
||||
<SPAN class="showhide_button" style="margin-left: 0;"><xsl:value-of select="$show_button_text"/></SPAN>.
|
||||
<SPAN class="showhide_button" style="margin-left: 0; float: none">
|
||||
<xsl:value-of select="$show_button_text"/></SPAN>.
|
||||
You may toggle all summaries with the big arrow button:
|
||||
</P>
|
||||
<DIV style=" font-size: larger; margin-left: +2em;">
|
||||
<SPAN class="showhide_button" style="font-size: 180%;">
|
||||
<SPAN class="showhide_button" style="font-size: 180%; float: none">
|
||||
<xsl:attribute name="onclick"><xsl:value-of select="'javascript:ShowHideAll()'"/></xsl:attribute>
|
||||
<xsl:attribute name="name"><xsl:value-of select="$show_hide_all_button"/></xsl:attribute>
|
||||
<xsl:attribute name="id"><xsl:value-of select="$show_hide_all_button"/></xsl:attribute>
|
||||
|
|
@ -152,7 +159,6 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
|
|||
<xsl:call-template name="TOC">
|
||||
<xsl:with-param name="root" select=".."/>
|
||||
</xsl:call-template>
|
||||
<H2>Overview</H2>
|
||||
<xsl:apply-templates/>
|
||||
</xsl:template>
|
||||
|
||||
|
|
@ -213,6 +219,12 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
|
|||
<xsl:value-of select="$buttonName"/>
|
||||
<xsl:text>')</xsl:text>
|
||||
</xsl:variable>
|
||||
<SPAN class="link_button" id="link-{$buttonName}" name="link-{$buttonName}">
|
||||
<A>
|
||||
<xsl:attribute name="href">?showone=<xsl:value-of select="$stylepoint_name"/>#<xsl:value-of select="$stylepoint_name"/></xsl:attribute>
|
||||
link
|
||||
</A>
|
||||
</SPAN>
|
||||
<SPAN class="showhide_button">
|
||||
<xsl:attribute name="onclick"><xsl:value-of select="$onclick_definition"/></xsl:attribute>
|
||||
<xsl:attribute name="name"><xsl:value-of select="$buttonName"/></xsl:attribute>
|
||||
|
|
@ -246,12 +258,6 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
|
|||
<xsl:otherwise>display: none</xsl:otherwise>
|
||||
</xsl:choose>
|
||||
</xsl:attribute>
|
||||
<SPAN class="link_button">
|
||||
<A>
|
||||
<xsl:attribute name="href">?showone=<xsl:value-of select="$anchor_prefix"/>#<xsl:value-of select="$anchor_prefix"/></xsl:attribute>
|
||||
link
|
||||
</A>
|
||||
</SPAN>
|
||||
<xsl:apply-templates/>
|
||||
</DIV>
|
||||
</DIV>
|
||||
|
|
@ -306,6 +312,14 @@ xmlns:fn="http://www.w3.org/2005/xpath-functions">
|
|||
</P>
|
||||
</xsl:template>
|
||||
|
||||
<xsl:template match="SUBSUBSECTION">
|
||||
<P>
|
||||
<xsl:attribute name="class"><xsl:value-of select="@class"/></xsl:attribute>
|
||||
<SPAN class="stylepoint_subsubsection"><xsl:value-of select="@title"/> </SPAN>
|
||||
<xsl:apply-templates/>
|
||||
</P>
|
||||
</xsl:template>
|
||||
|
||||
<xsl:template match="CODE_SNIPPET">
|
||||
<DIV>
|
||||
<xsl:attribute name="class"><xsl:value-of select="@class"/></xsl:attribute>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user