Docs: Add top/bottom margin to highlighted code samples (#31036)

* Add top/bottom margin to highlighted code samples

provide more space to avoid having the "Copy" button overlap code sample content

* Modify clipboard button style

Per https://github.com/twbs/bootstrap/pull/31036#issuecomment-661322566 and https://github.com/twbs/bootstrap/pull/31036#issuecomment-668162630

* Tweak margin, clipboard button size and position

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index c893533973008d1143f4703fd7c5762e4970a6b5..12be4037c334faaf32c495250995eb0dbb5a8769 100644 (file)
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -18,15 +18,15 @@
 
 .btn-clipboard {
   position: absolute;
-  top: .5rem;
-  right: .5rem;
+  top: .65rem;
+  right: .65rem;
   z-index: 10;
   display: block;
   padding: .25rem .5rem;
-  @include font-size(.75em);
-  color: $gray-800;
-  background-color: transparent;
-  border: 0;
+  @include font-size(.65em);
+  color: $primary;
+  background-color: $white;
+  border: 1px solid;
   @include border-radius();
 
   &:hover {

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index df735a41b7c518976bea2f480a299bd2ab0873b5..4b7aa4355272d6c597c5557146d030db3413f39c 100644 (file)
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -233,8 +233,8 @@
 
   pre {
     padding: 0;
-    margin-top: 0;
-    margin-bottom: 0;
+    margin-top: .65rem;
+    margin-bottom: .65rem;
     background-color: transparent;
     border: 0;
   }