[MD Bookmarks] Add a drag and drop indicator to bookmarks.

chrome/browser/resources/md_bookmarks/shared_style.html

Index: chrome/browser/resources/md_bookmarks/shared_style.html
diff --git a/chrome/browser/resources/md_bookmarks/shared_style.html b/chrome/browser/resources/md_bookmarks/shared_style.html
index da8836705639381499d5b1f68a415c11a4a92008..d4c315c832617ec89faa684ebf69c9d381653dea 100644
--- a/chrome/browser/resources/md_bookmarks/shared_style.html
+++ b/chrome/browser/resources/md_bookmarks/shared_style.html
@@ -32,6 +32,38 @@
         height: 32px;
         margin: 0;
       }
+
+      .drag-above::before,
+      .drag-below::after {
+        background-clip: padding-box;
+        background-color: rgb(66, 133, 244);

[tsergeant, 2017/03/23 00:28:23]

This is #4285F4, which is var(--google-blue-500) and also
var(--folder-active-color).

Pull these two colors out into a single shared variable like
--interactive-color?

[calamity, 2017/03/23 06:12:34]

Done.

+        border: 3px solid rgb(66, 133, 244);
+        border-bottom-color: transparent;
+        border-radius: 0;
+        border-top-color: transparent;
+        box-sizing: border-box;
+        content: '';
+        display: block;
+        height: 8px;
+        left: 0;
+        position: absolute;
+        right: 0;
+        z-index: 10;
+      }
+
+      .drag-above::before {
+        top: 0;
+        transform: translateY(-50%);
+      }
+
+      .drag-below::after {
+        bottom: 0;
+        transform: translateY(50%);
+      }
+
+      .drag-on {
+        background-color: rgba(66, 133, 244, 0.16);
+      }
     </style>
   </template>
 </dom-module>