dropdown style fixes

3 files changed, 15 insertions, 5 deletions

diff --git a/app/assets/javascripts/snippet/snippet_embed.js b/app/assets/javascripts/snippet/snippet_embed.js
index c032414552e..dc808b68123 100644
--- a/app/assets/javascripts/snippet/snippet_embed.js
+++ b/app/assets/javascripts/snippet/snippet_embed.js
@@ -4,12 +4,16 @@
 
     $('#share-btn').click((event) => {
       event.preventDefault();
+      $('#share-btn').addClass('is-active');
+      $('#embed-btn').removeClass('is-active');
       $('#snippet-url-area').val(`${protocol}//${host + pathname}`);
       $('#embed-action').html('Share');
     });
 
     $('#embed-btn').click((event) => {
       event.preventDefault();
+      $('#embed-btn').addClass('is-active');
+      $('#share-btn').removeClass('is-active');
       const scriptTag = `<script src="${protocol}//${host + pathname}.js"></script>`;
       $('#snippet-url-area').val(scriptTag);
       $('#embed-action').html('Embed');
diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss
index 462aca905d8..74f56e6e2f9 100644
--- a/app/assets/stylesheets/framework/snippets.scss
+++ b/app/assets/stylesheets/framework/snippets.scss
@@ -60,7 +60,11 @@
   .form-control {
     cursor: auto;
     width: 101%;
-    margin-left: -1;
+    margin-left: -1px;
+  }
+
+  .embed-toggle-list li a {
+    padding: 8px 40px;
   }
 
   .embed-toggle {
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
index da014da031d..3e7f6cf9f83 100644
--- a/app/views/shared/snippets/_header.html.haml
+++ b/app/views/shared/snippets/_header.html.haml
@@ -33,17 +33,19 @@
     = edited_time_ago_with_tooltip(@snippet, placement: 'bottom', html_class: 'snippet-edited-ago', exclude_author: true)
 
   - if public_snippet?
-    .embed-snippet.pull-right.col-md-6
+    .embed-snippet
       .input-group
         .input-group-btn
           %a.btn.embed-toggle{ 'data-toggle': 'dropdown' }
             %span#embed-action Embed
             = sprite_icon('angle-down', size: 12)
-          %ul.dropdown-menu.dropdown-menu-selectable.dropdown-menu-right
+          %ul.dropdown-menu.dropdown-menu-selectable.embed-toggle-list
             %li
-              %a#embed-btn.btn.btn-transparent{ href: "#" } Embed
+              %a#embed-btn.btn.btn-transparent.is-active{ href: "#" }
+                %strong.embed-toggle-list-item Embed
             %li
-              %a#share-btn.btn.btn-transparent{ href: "#" } Share
+              %a#share-btn.btn.btn-transparent{ href: "#" } 
+                %strong.embed-toggle-list-item Share
         %input#snippet-url-area.snippet-embed-input.form-control{ type: "text", autocomplete: 'off', value: snippet_embed }
         .input-group-btn
           %a#clipboard-btn.btn.btn-default{ title: "Copy to clipboard", data: { toggle: "tooltip", placement: "bottom", title: "Copy source to clipboard", container: "body", clipboard_target: '#snippet-url-area' } }