Add default value

Author: ebidel

_includes/head.html

@@ -20,7 +20,7 @@
 </title>
 <link rel="publisher" href="https://plus.google.com/107187849809354688692">
 <link rel="shortcut icon" href="/images/logos/p-logo-16.png">
-<link href="//fonts.googleapis.com/css?family=RobotoDraft:300,400,500|Source+Code+Pro:400,700" rel="stylesheet">
+<link href="//fonts.googleapis.com/css?family=RobotoDraft:300,400,500|Source+Code+Pro:400,500,700" rel="stylesheet">
 <link href="/css/site2.css?{{site.time | date: '%Y%m%d'}}" rel="stylesheet" shim-shadowdom>
 
 {% for item in page.stylesheets %}

css/elements/doc-page.css

@@ -76,8 +76,10 @@ <h3>Attributes</h3>
               <div class="details-name" flex>
                 <p><code>{{name}}</code></p>
               </div>
-              <div class="details-info" flex two>
-                <p><code>{{type}}</code></p>
+              <div class="details-info" flex three>
+                <p layout horizontal center justified>
+                  <code>{{type}}</code><span class="default" hidden?="{{!default}}">default: <code>{{default}}</code></span>
+                </p>
                 <marked-element text="{{description}}"></marked-element>
               </div>
             </div>
@@ -93,8 +95,10 @@ <h3>Properties</h3>
               <div class="details-name" flex>
                 <p><code>{{name}}</code></p>
               </div>
-              <div class="details-info" flex two>
-                <p><code>{{type}}</code></p>
+              <div class="details-info" flex three>
+                <p layout horizontal center justified>
+                  <code>{{type}}</code><span class="default" hidden?="{{!default}}">default: <code>{{default}}</code></span>
+                </p>
                 <marked-element text="{{description}}"></marked-element>
               </div>
             </div>
@@ -110,7 +114,7 @@ <h3>Events</h3>
               <div class="details-name" flex>
                 <p><code>{{name}}</code></p>
               </div>
-              <div class="details-info" flex two>
+              <div class="details-info" flex three>
                 <marked-element text="{{description}}"></marked-element>
               </div>
             </div>
@@ -126,7 +130,7 @@ <h3>Methods</h3>
               <div class="details-name" flex>
                 <p><code>{{name}}</code></p>
               </div>
-              <div class="details-info" flex two>
+              <div class="details-info" flex three>
                 <marked-element text="{{description}}"></marked-element>
               </div>
             </div>

elements/component-docs.html

@@ -33,28 +33,28 @@ h1 {
 
   code {
     color: currentcolor;
-    font-weight: 400;
+    font-weight: 500;
   }
 }
 
-code {
-  border: 1px solid #ddd;
-  background-color: #f8f8f8;
-  border-radius: 3px;
-  padding: 0 3px;
-}
+// code {
+//   border: 1px solid #ddd;
+//   background-color: #f8f8f8;
+//   border-radius: 3px;
+//   padding: 0 3px;
+// }
 
-// higlightjs overwrites
-code {
-  border: none;
-  background-color: transparent;
-  border-radius: none;
-  padding: 0;
-}
+// // higlightjs overwrites
+// code {
+//   border: none;
+//   background-color: transparent;
+//   border-radius: none;
+//   padding: 0;
+// }
 
-pre code {
+pre {
   max-width: 832px;
-  // white-space: pre-wrap;
+  white-space: pre-wrap;
   overflow: hidden;
   border: none;
 }
@@ -99,15 +99,6 @@ pre code {
   }
 }
 
-// .badge {
-//   display: inline-block;
-//   border-radius: 3px;
-//   background-color: $materialPurple;
-//   color: #fff;
-//   text-decoration: none;
-//   text-transform: uppercase;
-//   padding: 3px 5px;
-// }
 .badge {
   color: currentcolor;
 }