Merge pull request #568 from canjs/new-copy-run-buttons

New Copy & Run button styles implementation

Author: cherifGsoul

make-example.js

@@ -22,13 +22,13 @@ var siteConfig = {
         },
         dependencies: {
             "bit-docs-html-canjs": __dirname,
-            "bit-docs-prettify": "^0.1.0",
-            "bit-docs-html-highlight-line": "^0.2.2",
+            "bit-docs-prettify": "^0.3.0",
+            "bit-docs-html-highlight-line": "^0.5.3",
             //TODO: This should not be include here and should only be included in package.json.
             //  we get an error without this, here, though
             "steal-stache": "^4.0.1",
             "steal-conditional": "^0.3.6",
-            "bit-docs-html-codepen-link": "^1.0.0",
+            "bit-docs-html-codepen-link": "^2.0.0",
             "bit-docs-html-toc": "^1.1.1"
         },
         staticDist: [

static/canjs.less

@@ -22,3 +22,4 @@
 @import "screenshots.less";
 @import "loading-bar.less";
 @import "search.less";
+@import "prism.less";

static/prism.less

@@ -0,0 +1,43 @@
+.body {
+	div.code-toolbar {
+		line-height: 0;
+		> .toolbar {
+			line-height: 0;
+			top: 1px;
+			right: 1px;
+			
+			> .toolbar-item {
+				line-height: 0;
+			}
+		}
+		@media (hover: none) {
+			> .toolbar {
+				opacity: 1;
+			}
+		}
+
+	}
+	div.code-toolbar {
+		.toolbar a, 
+		.toolbar button, 
+		.toolbar span {
+			background: #eee;
+			background: rgba(238, 238, 238, 1);
+			color: #858585;
+			padding: .26em 2.25em;
+			box-shadow: none;
+			border-radius: 0;
+			cursor: pointer;
+			@media(hover: hover) {
+				&:hover {
+					background: rgba(238, 238, 238, .6);
+					color: #4078c0;
+				}
+			}
+		}
+	}
+
+	pre code .collapse.collapsed {
+		padding: calc(~"0.29em -" 1px) 0;
+	}
+}