fix(code-snippet): fixed feedback not showing up in firefox (#852)

carbon-design-system · Jun 4, 2018 · e5ee023 · e5ee023
1 parent 23539d8
commit e5ee023
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/components/code-snippet/code-snippet.hbs b/src/components/code-snippet/code-snippet.hbs
@@ -10,9 +10,8 @@
 
 <div class="bx--snippet bx--snippet--{{variant}}" {{#is variant "multi"}}data-code-snippet{{/is}}>
   <div class="bx--snippet-container">
-
     <pre>
-        <code>
+      <code>
   @mixin grid-container {
     width: 100%;
     padding-right: padding(mobile);
@@ -34,16 +33,16 @@
     overflowHidden: - 1,
     floating: 10000
   );
-
-  </code>
-  </pre>
+      </code>
+    </pre>
   </div>
   <button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
     <svg class="bx--snippet__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
       <path d="M1 10H0V2C0 .9.9 0 2 0h8v1H2c-.6 0-1 .5-1 1v8z" />
       <path d="M11 4.2V8h3.8L11 4.2zM15 9h-4c-.6 0-1-.4-1-1V4H4.5c-.3 0-.5.2-.5.5v10c0 .3.2.5.5.5h10c.3 0 .5-.2.5-.5V9zm-4-6c.1 0 .3.1.4.1l4.5 4.5c0 .1.1.3.1.4v6.5c0 .8-.7 1.5-1.5 1.5h-10c-.8 0-1.5-.7-1.5-1.5v-10C3 3.7 3.7 3 4.5 3H11z"
         + />
-      <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
+    </svg>
+    <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
   </button>
   {{#is variant "multi"}}
   <button class="bx--btn bx--btn--ghost bx--btn--sm bx--snippet-btn--expand" type="button">
@@ -52,7 +51,6 @@
       <title>Show more icon</title>
       <path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
     </svg>
-
   </button>
   {{/is}}
 </div>

diff --git a/src/components/copy-button/_copy-button.scss b/src/components/copy-button/_copy-button.scss
@@ -39,6 +39,7 @@
       pointer-events: none;
       border-radius: 4px;
       font-weight: 400;
+      z-index: 2;
     }
 
     &:after {
@@ -50,6 +51,7 @@
       border-bottom: 1px solid $inverse-02;
       content: '';
       transform: rotate(-135deg);
+      z-index: 1;
     }
 
     &:before,