MD Bookmarks: Simplify and improve consistency of CSS

chrome/browser/resources/md_bookmarks/item.html

Index: chrome/browser/resources/md_bookmarks/item.html
diff --git a/chrome/browser/resources/md_bookmarks/item.html b/chrome/browser/resources/md_bookmarks/item.html
index 1dba8c73d033d79bd7f484f2905941c90ade1234..8a5a1d6396f03c4fc9c9defff0f6598cbc6e1744 100644
--- a/chrome/browser/resources/md_bookmarks/item.html
+++ b/chrome/browser/resources/md_bookmarks/item.html
@@ -22,7 +22,7 @@
       }
 
       :host([is-selected-item_]) {
-        background-color: rgb(225, 235, 253);
+        background-color: var(--highlight-color);
       }
 
       #website-title {
@@ -34,26 +34,25 @@
         white-space: nowrap;
       }
 
-      #icon {
-        background-repeat: no-repeat;
-        height: 16px;
-        margin: 2px;
-      }
-
       #icon-wrapper {
         -webkit-margin-end: 20px;
+        color: var(--secondary-text-color);
         height: 20px;
         width: 20px;
       }
 
-      .more-vert-button {
-        -webkit-margin-end: 12px;
+      #folder-icon {
+        display: block;

[calamity, 2017/05/01 03:52:35]

Is this line-height interaction something we want to apply to all iron-icons?

[tsergeant, 2017/05/01 04:31:39]

I don't necessarily think so. It only comes about because of a pretty specific
interaction in the way this is laid out.

I've also changed this to apply `display: flex` to #icon-wrapper instead of
`display: block` to #folder-icon, which fixes the same issue in hopefully a
slightly clearer way.

       }
 
-      iron-icon {
-        --iron-icon-height: 20px;
-        --iron-icon-width: 20px;
-        color: var(--secondary-text-color);
+      #icon {
+        background-repeat: no-repeat;
+        height: 16px;
+        margin: 2px;
+      }
+
+      button.more-vert-button {
+        -webkit-margin-end: 12px;
       }
       </style>

[calamity, 2017/05/01 03:52:35]

nit: Unindent tag

[tsergeant, 2017/05/01 04:31:39]

Done.

     <div id="icon-wrapper">