Added go-to-menu floating button to the static site

ThisIsManta · Sep 30, 2017 · c708b68 · c708b68
1 parent 6cd06fd
commit c708b68
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 2 deletions.
diff --git a/docs/icon-menu.svg b/docs/icon-menu.svg
diff --git a/docs/index.css b/docs/index.css
@@ -423,6 +423,21 @@ label, input[type=checkbox] {
 	padding: 0;
 }
 
+#go-to-menu {
+	display: none;
+	position: fixed;
+	background: #D50000;
+	bottom: 28px;
+	right: 28px;
+	width: 56px;
+	height: 56px;
+	border-radius: 50%;
+    align-items: center;
+	justify-content: center;
+	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+	cursor: pointer;
+}
+
 @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
 	main {
 		padding-bottom: 2rem;
@@ -448,4 +463,8 @@ label, input[type=checkbox] {
 		display: block;
 		width: auto;
 	}
+
+	#go-to-menu {
+    	display: flex;
+	}
 }
diff --git a/docs/index.html b/docs/index.html
diff --git a/edge/reviseDocumentation.js b/edge/reviseDocumentation.js
@@ -88,7 +88,7 @@ function createFormattingDescription() {
 		'<code>' +
 		defaultOptionJSON
 			.replace(/<br>/g, '\n')
-			.replace(/^&nbsp;&nbsp;&quot;(\w+)&quot;/gm, (full, part) => full.replace(part, `<a href="#option-${_.kebabCase(part)}">${createBreakableWords('stylusSupremacy.' + part)}</a>`))
+			.replace(/^&nbsp;&nbsp;&quot;(\w+)&quot;/gm, (full, part) => full.replace(part, `<a href="#option-${_.kebabCase(part)}">stylusSupremacy.${createBreakableWords(part)}</a>`))
 			.replace(/\n/g, '<br>') +
 		'</code>'
 	)