Upstream design from site

- Adds material colors and style - Removes dep on core-layout - Fixes #19 - Support `@property` for methods/events - Fixes #12 - Support `@default` for values - Fixes #4
googlearchive · Aug 1, 2014 · d183fdb · d183fdb
1 parent dfd3c76
commit d183fdb
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 179 deletions.
diff --git a/bower.json b/bower.json
@@ -3,7 +3,6 @@
   "private": true,
   "dependencies": {
     "core-ajax": "Polymer/core-ajax#master",
-    "core-layout": "Polymer/core-layout#master",
     "core-menu": "Polymer/core-menu#master",
     "core-item": "Polymer/core-item#master",
     "core-toolbar": "Polymer/core-toolbar#master",

diff --git a/core-doc-viewer.html b/core-doc-viewer.html
@@ -68,7 +68,7 @@
 @homepage github.io
 -->
 
-<polymer-element name="core-doc-viewer" attributes="sources route url">
+<polymer-element name="core-doc-viewer" attributes="sources route url" horizontal layout>
 
   <template>
 
@@ -88,9 +88,8 @@
       <context-free-parser url="{{}}" on-data-ready="{{parserDataReady}}"></context-free-parser>
     </template>
 
-    <core-layout></core-layout>
     <core-doc-toc id="toc" data="{{classes}}" selected="{{selected}}"></core-doc-toc>
-    <core-doc-page core-flex data="{{data}}"></core-doc-page>
+    <core-doc-page flex data="{{data}}"></core-doc-page>
 
   </template>
 

diff --git a/elements/core-doc-page.css b/elements/core-doc-page.css
@@ -1,14 +1,5 @@
 :host {
   display: block;
-  position: relative;
-}
-
-#panel {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
 }
 
 .main {
@@ -17,167 +8,94 @@
   margin: 0 auto;
 }
 
-markedjs-element {
+marked-element {
   display: block;
 }
 
 h1 {
+  color: #E91E63;
   font-size: 52px;
-  color: #E91E63
+  line-height: 60px;
+  font-weight: inherit;
 }
 
-.element {
-  font-size: 21px;
+.box {
+  margin-bottom: 40px;
+}
+.box:not(.top) .details {
+  padding: 16px;
+}
+.box:not(.top) .details .params {
+  margin-top: 40px;
 }
 
-.name {
-  /* typography */
+.box:not(.top) h3 {
+  padding: 16px;
   color: white;
-  /* font-size: 14px; */
-  font-size: 12px;
-  font-weight: bold;
-  text-decoration: none;
-  /* colors / effects */
-  background-color: #999;
-  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1);
-  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
-  cursor: pointer;
-  /* metrics */
-  display: inline-block;
-  padding: 4px 12px 5px 12px;
-  margin: 4px 0;
-}
-
-.ntitle {
-  font-size: 26px;
-  padding-bottom: 4px;
-  border-bottom: 1px solid whitesmoke;
+  font-weight: inherit;
+  font-size: 20px;
+  line-height: 48px;
+  margin: 0;
 }
 
-.box {
-  margin-bottom: 40px;
+.box:not(.top) pre {
+  padding: initial;
+  background-color: transparent;
+  margin: initial;
+  font-size: 12px;
 }
 
-.top pre {
-  padding: 12px 13px;
-  background-color: #f8f8f8;
+.box code {
+  color: currentcolor;
+  font-weight: 500;
 }
 
-code {
-  font-family: Consolas, monospace;
-  border: 1px solid #ddd;
-  background-color: #f8f8f8;
-  border-radius: 3px;
-  padding: 0 3px;
+.top pre {
+  background-color: rgb(250, 250, 250);
+  padding: 16px;
 }
 
-pre code {
+pre {
   max-width: 832px;
   white-space: pre-wrap;
   overflow: hidden;
   border: none;
 }
 
-/**/
-
-.details {
-  display: flex;
-}
-
-.details-name {
-  flex: 1;
-}
-
-.details-info {
-  flex: 2;
-}
-
-.attribute-box {
-}
-
 .attribute-box .details {
-  background-color: #FFF9C4;
-  padding: 8px 16px;
-  border-bottom: 1px solid #D1CCA1;
+  background-color: #ffcbbb;
+  border-bottom: 1px solid rgba(255, 86, 33, 0.5);
 }
-
-.attribute-box .ntitle {
-  padding: 24px 16px;
-}
-
-.attribute-box code {
-  color: #FFAB40;
-  border: none;
-  background-color: transparent;
-  border-radius: none;
-  padding: 0;
-  font-size: 1.2em;
-}
-
-.property-box .ntitle {
-  padding: 24px 16px;
-}
-
-.property-box code {
-  color: #4285F4;
-  border: none;
-  background-color: transparent;
-  border-radius: none;
-  padding: 0;
-  font-size: 1.2em;
+.attribute-box h3 {
+  background-color: #ff5621;
 }
 
 .property-box .details {
-  background-color: lightblue;
-  padding: 8px 16px;
-  border-bottom: 1px solid #D1CCA1;
+  background-color: #fbe7b1;
+  border-bottom: 1px solid rgba(243, 179, 0, 0.5);
 }
-
-.method-box {
+.property-box h3 {
+  background-color: #f3b300;
 }
 
 .method-box .details {
-  background-color: #F0F4C3;
-  padding: 8px 16px;
-  border-bottom: 1px solid #D1CCA1;
-}
-
-.method-box .ntitle {
-  background-color: #9E9D24;
-  padding: 24px 16px;
+  background-color: #a6ffea;
+  border-bottom: 1px solid rgba(0, 190, 164, 0.5);
 }
-
-.method-box code {
-  color: #9E9D24;
-  border: none;
-  background-color: transparent;
-  border-radius: none;
-  padding: 0;
-  font-size: 1.2em;
-}
-
-.event-box {
+.method-box h3 {
+  background-color: #00bea4;
 }
 
 .event-box .details {
-  background-color: #B2DFDB;
-  padding: 8px 16px;
-  border-bottom: 1px solid #92B7B3;
+  background-color: #c5d9fb;
+  border-bottom: 1px solid rgba(65, 132, 243, 0.5);
 }
-
-.event-box .ntitle {
-  background-color: #009688;
-  padding: 24px 16px;
+.event-box h3 {
+  background-color: #4184f3;
 }
 
-.event-box code {
-  color: #009688;
-  border: none;
-  background-color: transparent;
-  border-radius: none;
-  padding: 0;
-  font-size: 1.2em;
+.badge {
+  color: currentcolor;
 }
 
 code, pre {
@@ -186,26 +104,26 @@ code, pre {
 }
 
 pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline {
-    color: #6b499f
+  color: #6b499f
 }
 pre .pun,.prettyprint .pun {
-    color: #5c6bc0
+  color: #5c6bc0
 }
 pre .str,pre .string,.prettyprint .str,.prettyprint .string {
-    color: #ff4081
+  color: #ff4081
 }
 pre .pln,.prettyprint .pln {
-    color: #7986cb
+  color: #7986cb
 }
 pre .kwd,.prettyprint .kwd {
-    color: #d61a7f
+  color: #d61a7f
 }
 pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name {
-    color: #6b499f
+  color: #6b499f
 }
 pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value {
-    color: #7986cb
+  color: #7986cb
 }
 pre .com,pre .comment,.prettyprint .com,.prettyprint .comment {
-    color: #8a8a8a
+  color: #8a8a8a
 }