common.css in yard-api-0.2.3

- old
+ new

@@ -1,36 +1,30 @@
 body {
   font-family: "Open Sans", Calibri, Candara, "Helvetica Neue", Arial, sans-serif;
   font-size: 15px;
   line-height: 1.4;
-  margin: 0;
+  margin: 1em;
   padding: 0;
   color: #333;
 }
 
-a, #sidebar a:visited {
+a {
   color: #4183c4;
 }
-a:visited {
-  color: #8B3377;
+
+a:hover, a:focus {
+  text-decoration: none;
 }
-a:hover,
-a:focus,
-#sidebar a.current,
-#sidebar a:hover,
-#sidebar a:focus {
-  color: #99173C;
+
+a.active {
+  font-weight: bold;
 }
 
 #content {
   margin: 0 auto;
 }
 
-p, h4 {
-  margin: 0.8em 0;
-}
-
 code {
   margin: 0 2px;
   padding: 0px 5px;
   border: 1px solid #ddd;
   background-color: #f8f8f8;
@@ -40,139 +34,125 @@
 }
 
 h1 {
   font-size: 1.6em;
   padding: 0.6em 0;
-  margin: 10px 0;
+  margin: 0.6em 0;
 }
-#content h1 {
-  border-bottom: 1px solid #ddd;
-}
 
 h2 {
-  border-bottom: 1px #ddd solid;
-  padding: 0 0 3px;
   font-size: 1.4em;
-  margin-top: 30px;
+  padding: 0.6em 0;
+  margin: 0.6em 0;
 }
-h3.beta {
-  border: 1px solid black;
-  background-color: #E5E8FF;
-  text-align: center;
-  padding: 6px;
-  font-weight: bold;
+
+.endpoint__beta-banner {
+  border-left: 5px solid rgba(255,0,0,0.65);
+  background-color: #ffc;
+  padding: 0.6em;
+  font-size: 85%;
 }
+
+.method-details__beta-flag {
+  color: #CC0000;
+  background: #fca;
+  padding: 0.5em 0.6em;
+  font-size: 85%;
+}
+
 #sidebar {
   position: fixed;
   overflow: auto;
   bottom: 0;
   top: 0;
-  left: 0;
-  background: #f8f8f8;
-  border-right: 1px solid #ddd;
+  left: 1em;
 }
+
 #sidebar h1 {
   margin-bottom: 0;
-  margin-left: 20px;
   border-bottom: 1px solid #ddd;
 }
-#sidebar a,
-#sidebar h2 {
-  display:block;
-  border: none;
-  font-size: 1.1em;
-}
-#sidebar h2 {
-  padding: 10px 0;
-  font-size: 20px;
-  font-weight: normal;
-  text-transform: uppercase;
-  text-shadow: 0 1px 0 white;
-  margin: 0;
-}
-#sidebar h2.first {
-  border-top:none;
-}
-#sidebar h2,
+
 #sidebar a {
-  border-right: 5px solid transparent;
-}
-#sidebar a {
-  padding: 5px 0;
+  display: block;
+  color: inherit;
+  padding: 0.35em 0;
   text-decoration: none;
-  font-size: 13px;
-  font-weight: bold;
 }
 
-#content a[name^="method."] {
-  outline: none;
+#sidebar a:hover {
+  text-decoration: underline;
 }
-.method_details_list h2 {
+
+#sidebar a.active {
+  color: #4183c4;
 }
 
+.sidebar__heading {
+  color: #939da3;
+  text-transform: uppercase;
+  font-size: 1em;
+  margin-bottom: 0.5em;
+  padding-bottom: 0;
+  margin-top: 1em;
+}
 
-.method_details h3.endpoint {
-  font-size: 14px;
+.endpoint__path {
+  font-size: 90%;
   font-weight: normal;
   font-family: Monaco, Consolas, Courier, monospace;
-  padding: 6px 10px;
-  margin-top: 18px;
-  background: #f8f8f8;
-  border: 1px solid #ddd;
-  border-radius: 2px;
+  padding: 1em;
+  margin-top: 1em;
+  background: #ffc;
 }
 
-.method_details .verb {
+.method-details .verb {
   font-weight: bold;
 }
-.method_details .id-fragment {
+.method-details .id-fragment {
   color: #CC0000;
 }
 
-h2 .defined-in {
+.method-details__defined-in {
   float:right;
   font-size:10px;
   padding-top:10px;
   opacity:0.7;
 }
 
 /* Footer */
 #footer {
-  margin-top: 20px;
-  margin-left: 180px;
-  border-top: 1px solid #ddd;
+  margin: 1em 0;
+  border-top: 1px solid #ccc;
   text-align: center;
-  color: #999;
+  color: #666;
+  font-size: 85%;
 }
 
 #footer a {
-  color: #999;
+  color: #666;
 }
 
-pre.code,
-div.syntaxhighlighter {
-  background-color: #f8f8f8;
-  border: 1px solid #ddd;
-  font-size: 13px;
-  line-height: 19px;
-  overflow: auto;
-  padding: 6px 10px;
-  border-radius: 3px;
+/* highlight.js overrides */
+pre.code, div.syntaxhighlighter {
   font-family: Monaco, Consolas, Courier, monospace;
+  background-color: #ffd;
+  font-size: 85%;
+  overflow: auto;
+  padding: 0.5em 1em;
 }
 
-.syntaxhighlighter .line code,
-pre.code code,
-.endpoint-errors code {
+.syntaxhighlighter .line code, pre.code code, .endpoint-errors code {
   white-space: nowrap;
   background: none;
   border: none;
   font-weight: normal;
   margin: auto;
   padding: 0;
   border-radius: 0;
 }
+
 .syntaxhighlighter {
   overflow: auto;
 }
 
 td.code textarea { display: none; }
@@ -189,41 +169,26 @@
 table#quicklinks th {
   font-weight: bold;
   padding: 12px;
 }
 
-h2.api_method_name a {
+a.method-details__name-link {
   text-decoration: none;
-  color: black;
+  color: inherit;
 }
 
 div.appendix img {
   max-width: 100%;
 }
 
-.argument-required {
-  font-style: normal;
-  color: #CC0000;
-}
-
-li .argument-required {
-  font-size: 12px;
-  padding: 2px 4px;
-  font-weight: bold;
-}
-
 .example-title {
   padding: 5px 0;
   font-size: 11px;
   font-weight: bold;
   color: #777;
 }
 
-.fade {
-  color: #777;
-}
-
 blockquote {
   border-left: 4px solid #DDD;
   padding: 0 15px;
   color: #777;
   margin: 15px 0;
@@ -277,5 +242,93 @@
   border-top: 1px solid #ccc;
 }
 
 .emits-tag {
 }
+
+/* --------------------------------------------------------------------------
+ * ARGUMENTS
+ * -------------------------------------------------------------------------- */
+h4 {
+  margin: 2em 0;
+  padding: 1em 0;
+  border-bottom: 1px solid #ccc;
+  color: #666;
+}
+
+.argument-listing {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.argument-listing__argument {
+  padding: 0;
+  margin: 2em 0;
+  display: block;
+  min-height: 4em;
+}
+
+.argument-listing__argument-details {
+  /*display: inline-block;*/
+  width: 40%;
+  max-width: 260px;
+  text-align: right;
+  vertical-align: top;
+  float: left;
+}
+
+.argument-listing__argument-name,
+.argument-listing__argument-type,
+.argument-listing__argument-values,
+.argument-listing__argument-required {
+  display: block;
+}
+
+code.argument-listing__argument-name {
+  border: none;
+  padding: 0;
+  margin: 0;
+  overflow: auto;
+}
+
+/* fade these out to give more emphasis to the name */
+.argument-listing__argument-type,
+.argument-listing__argument-values,
+.argument-listing__argument-required {
+  font-size: 85%;
+  color: #777;
+}
+
+.argument-listing__argument-required {
+  font-style: normal;
+  color: #CC0000;
+  font-weight: bold;
+  opacity: 0.6;
+}
+
+.argument-listing__argument-text {
+  vertical-align: top;
+  margin-left: 1em;
+  margin-left: 260px;
+  padding-left: 1em;
+}
+
+.argument-listing__argument-text > p {
+  margin-top: 0;
+}
+
+.example-codeblocks__tabs {
+  margin-bottom: -0.5em; /* negate the margin of the example block */
+  background: #ffc;
+  padding: 0.5em 1em;
+  font-size: 85%;
+}
+
+.example-codeblocks__tab {
+  margin-right: 0.5em;
+  cursor: pointer;
+}
+
+.example-codeblocks__tabs a.active {
+  font-weight: bold;
+}
\ No newline at end of file