From a398c500b87176e7d17074bb631639ca51982b4a Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 6 Apr 2021 20:59:31 -0700
Subject: [PATCH] Revert "Update look and feel of examples and copy buttons"

This reverts commit cdf56e0eefd797d4b0f26021d24958fc315a5f2c.
---
 site/assets/scss/_clipboard-js.scss       | 17 +++++------
 site/assets/scss/_component-examples.scss | 37 +++--------------------
 2 files changed, 13 insertions(+), 41 deletions(-)

diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 5465b18a9347..83b9a8b9e504 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -18,21 +18,20 @@
 
 .btn-clipboard {
   position: absolute;
-  top: .35rem;
-  right: .5rem;
+  top: .65rem;
+  right: .65rem;
   z-index: 10;
   display: block;
   padding: .25rem .5rem;
-  @include font-size(.75em);
-  color: $gray-700;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
+  @include font-size(.65em);
+  color: $primary;
+  background-color: $white;
+  border: 1px solid;
   @include border-radius();
 
   &:hover,
   &:focus {
-    color: $gray-900;
-    background-color: $gray-200;
+    color: $white;
+    background-color: $primary;
   }
 }
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index a51ccf60428d..005515922df9 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -83,8 +83,6 @@
     @include border-top-radius(.25rem);
 
     + .bd-clipboard + .highlight {
-      border-top: 0;
-      @include border-top-radius(0);
       @include border-bottom-radius(.25rem);
     }
   }
@@ -289,20 +287,18 @@
 //
 
 .highlight {
-  position: relative;
-  padding: 3.5rem 1rem 0;
+  padding: 1rem;
   margin-bottom: 1rem;
-  overflow: auto;
   background-color: $gray-100;
-  border: 1px solid $gray-300;
 
   @include media-breakpoint-up(sm) {
-    @include border-radius(.25rem);
+    padding: 1rem 1.5rem;
   }
 
   pre {
-    padding: 0 0 1rem;
-    margin-bottom: .5rem;
+    padding: 0;
+    margin-top: .65rem;
+    margin-bottom: .65rem;
     white-space: pre;
     background-color: transparent;
     border: 0;
@@ -324,26 +320,3 @@
     margin-left: 0;
   }
 }
-
-.bd-example-multiple-langs + .bd-clipboard + .highlight {
-  margin-bottom: 0;
-  border-bottom: 0;
-  @include border-bottom-radius(0);
-}
-.highlight + .bd-clipboard + .highlight {
-  @include border-top-radius(0);
-}
-
-[data-lang]::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  padding: .5rem 1rem;
-  @include font-size(.875rem);
-  color: $gray-700;
-  text-transform: uppercase;
-  content: attr(data-lang);
-  user-select: none;
-  border-bottom: 1px solid $gray-300;
-}