From 63b8a6ffdd9886337a9d12ee76bab94ed22f6c5f Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sat, 19 Sep 2020 16:59:56 +0100
Subject: [PATCH] Docs: Add top/bottom margin to highlighted code samples
 (#31706)

Backport of #31036 to v4
---
 site/docs/4.5/assets/scss/_clipboard-js.scss       | 14 +++++++-------
 site/docs/4.5/assets/scss/_component-examples.scss |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/site/docs/4.5/assets/scss/_clipboard-js.scss b/site/docs/4.5/assets/scss/_clipboard-js.scss
index 760a806bb2..b8c6a9e8f5 100644
--- a/site/docs/4.5/assets/scss/_clipboard-js.scss
+++ b/site/docs/4.5/assets/scss/_clipboard-js.scss
@@ -18,19 +18,19 @@
 
 .btn-clipboard {
   position: absolute;
-  top: .5rem;
-  right: .5rem;
+  top: .65rem;
+  right: .65rem;
   z-index: 10;
   display: block;
   padding: .25rem .5rem;
-  @include font-size(75%);
-  color: #818a91;
-  background-color: transparent;
-  border: 0;
+  @include font-size(65%);
+  color: $primary;
+  background-color: $white;
+  border: 1px solid;
   @include border-radius();
 
   &:hover {
     color: $white;
-    background-color: #027de7;
+    background-color: $primary;
   }
 }
diff --git a/site/docs/4.5/assets/scss/_component-examples.scss b/site/docs/4.5/assets/scss/_component-examples.scss
index 41360d6c45..a296718976 100644
--- a/site/docs/4.5/assets/scss/_component-examples.scss
+++ b/site/docs/4.5/assets/scss/_component-examples.scss
@@ -366,8 +366,8 @@
 .highlight {
   pre {
     padding: 0;
-    margin-top: 0;
-    margin-bottom: 0;
+    margin-top: .65rem;
+    margin-bottom: .65rem;
     background-color: transparent;
     border: 0;
   }