From 1b2ab39fae3d280a208b1afad746ef24e8810faa Mon Sep 17 00:00:00 2001
From: Chris Swithinbank <swithinbank@gmail.com>
Date: Wed, 2 May 2018 23:11:54 +0200
Subject: [PATCH] Add Gitter Sidecar widget to docs site (#1332)

* Add Gitter Sidecar to Docs & Community pages.

* Add styles to match Gitter Sidecar button to site theme.

* Fix Gitter button outline when focused.

* Style Gitter button :active state.
---
 website/site/layouts/partials/footer.html |  8 +++++++
 website/src/css/imports/gitter.css        | 26 +++++++++++++++++++++++
 website/src/css/main.css                  |  1 +
 3 files changed, 35 insertions(+)
 create mode 100644 website/src/css/imports/gitter.css

diff --git a/website/site/layouts/partials/footer.html b/website/site/layouts/partials/footer.html
index 29a8e890..8a13e0f5 100755
--- a/website/site/layouts/partials/footer.html
+++ b/website/site/layouts/partials/footer.html
@@ -34,5 +34,13 @@ debug: false // Set debug to true if you want to inspect the dropdown
   <script src="/widgets.js"></script>
 {{- end -}}
 <script async defer src="https://buttons.github.io/buttons.js"></script>
+{{ if or (eq .Section "docs") (eq .Title "Docs") (eq .Title "Community") }}
+<script>
+  ((window.gitter = {}).chat = {}).options = {
+    room: 'netlify/NetlifyCMS'
+  };
+</script>
+<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
+{{ end }}
 </body>
 </html>
diff --git a/website/src/css/imports/gitter.css b/website/src/css/imports/gitter.css
new file mode 100644
index 00000000..ea5b1841
--- /dev/null
+++ b/website/src/css/imports/gitter.css
@@ -0,0 +1,26 @@
+.gitter-open-chat-button {
+  &,
+  &:visited {
+    padding: $tiny $small;
+    font-family: $roboto;
+    font-size: $tiny;
+    letter-spacing: 0.5px;
+    color: $grey;
+    background-color: $green;
+    box-shadow: 0 2px 16px 0 rgba(68,74,87,0.15), 0 1px 4px 0 rgba(68,74,87,0.30);
+  }
+
+  &:hover {
+    background-color: $lightGreen;
+    box-shadow: 0 2px 16px 0 rgba(68,74,87,0.25), 0 1px 4px 0 rgba(68,74,87,0.50);
+  }
+
+  &:focus {
+    box-shadow: 0 0 6px 3px rgba(62,160,127,.6);
+    transition: none;
+  }
+
+  &:active {
+    color: $lightGrey;
+  }
+}
diff --git a/website/src/css/main.css b/website/src/css/main.css
index e0d85365..5a06995f 100755
--- a/website/src/css/main.css
+++ b/website/src/css/main.css
@@ -10,3 +10,4 @@
 @import "imports/docs.css";
 @import "imports/widgets.css";
 @import "imports/footer.css";
+@import "imports/gitter.css";