Copy to clipboard: remove temp bits

styles/_code-tabs.scss

@@ -77,13 +77,25 @@ pre {
     }
   }
 
-  .code_toggler { // expand/collapse button
-    position: absolute;
-    bottom: 0;
-    right: 0;
+  .btn { // expand/collapse, copy-to-clipboard, etc.
+    z-index: 10;
+  }
+
+  .codetabs {
+    position: relative;
+    z-index: 10;
   }
 }
 
+.clipboard-btn {
+  z-index: 10;
+  margin-right: 10px;
+}
+.js_interactive .codehilite > .btn-group {
+  display: none;
+}
+
+
 // Syntax highlighting via Codehilite ------------------------------------------
 
 .codehilite {
@@ -208,8 +220,20 @@ pre {
   }
 }
 
-.multicode .codehilite {
+.codehilite {
   background: transparent;
+  position: relative;
+
+  .btn-group {
+    top: 1rem;
+    right: 1rem;
+    position: absolute;
+
+    .multicode & {
+      top: 70px;
+      right: 20px;
+    }
+  }
 }
 
 

styles/light/_light-theme.scss

@@ -441,14 +441,15 @@ pre code {
       background-color: $gray-800;
     }
   }
-
-  .code_toggler {
-    background-color: $gray-800;
-    color: $gray-100;
-    border-color: $gray-100;
-  }
 }
 
+.codehilite .btn-outline-secondary {
+  background-color: $gray-800;
+  color: $gray-100;
+  border-color: $gray-100;
+}
+
+
 .interactive-block {
   .breadcrumb-item.done a::after {
     color: $green-900;

template/pagetype-doc.html.jinja

@@ -15,45 +15,6 @@
             new ClipboardJS('.clipboard-btn');
         });
     </script>
-    
-    {# temp styling for testing. #}
-    <style>
-      .codehilite {
-        position: relative;
-      }
-      .codetabs {
-        position: relative;
-        z-index: 10;
-      }
-      .codehilite .btn-group {
-        top: 10px;
-        right: 10px;
-        position: absolute;
-      }
-      .multicode pre code {
-        padding: 2.8rem 1rem 1rem;
-      }
-      .multicode .codehilite .btn-group {
-        right: 20px;
-        top: 60px;
-        position: absolute;
-      }
-      .clipboard-btn {
-        z-index: 10;
-        margin-right: 10px;
-        background-color: #232325;
-      }
-      .js_interactive .clipboard-btn {
-        display:none;
-      }
-      .multicode .code_toggler {
-          position: unset;
-          z-index: 10;
-      }
-      .code_toggler {
-          background-color: #232325;
-      }
-    </style>
 
 {% endblock %}
 

tool/filter_copy_code_to_clipboard.py

@@ -3,29 +3,22 @@
 ## Author: Jake Bonham
 ## Copyright: Ripple Labs, 2021
 ##
-## Finds codeblocks and adds copy to clipboard button 
+## Finds codeblocks and adds copy to clipboard button
 ################################################
 
-
-# Issues/questions
-# Multistep tutoral. > Get started page. Has 5 blocks with 4 hidden? 
-# Position on multitabs 
-# Do we need on any "output" blocks? 
-
-
 def filter_soup(soup, **kwargs):
     """
-    1. Finds all elements with class of "codehilite" 
-    2. Adds copy to clipboard button. 
+    1. Finds all elements with class of "codehilite"
+    2. Adds copy to clipboard button.
         Button looks like >
         <button class="btn btn-outline-secondary clipboard-btn" data-clipboard-target="#codeblock-0" id="codeblock-0button">Copy to clipboard</button>
-    3. Adds id to <code> element. 
+    3. Adds id to <code> element.
     """
 
     code_blocks = soup.find_all(class_="codehilite")
     index1 = 0
     for code_block in code_blocks:
-        # add id to each child <code> 
+        # add id to each child <code>
         codeBlock = code_block.find("code")
         codeBlock_id = "codeblock-%d" % index1
         codeBlock["id"] = codeBlock_id
@@ -45,6 +38,5 @@ def filter_soup(soup, **kwargs):
         new_tag['data-clipboard-target'] = "#"+codeBlock_id
         new_tag.insert(0, icon)
         btn_group.insert(0, new_tag)
-        # 
+        #
         index1 += 1
-