Merge pull request #1098 from BeatC/toolbar-splitter-restyle

Restyled toolbar splitter

css/_toolbars.scss

@@ -4,6 +4,18 @@
     z-index: $toolbarZ;
     height: 100%;
     pointer-events: auto;
+
+    /**
+     * Splitter button in the toolbar.
+     */
+    &__splitter {
+        display: inline-block;
+        vertical-align: middle;
+        width: 1px;
+        height: 50%;
+        margin: 0 $splitterToolbarButtonMargin;
+        background: $splitterColor;
+    }
 }
 
 #mainToolbarContainer{
@@ -42,21 +54,7 @@
     margin-right: auto;
     width: auto;
     border-radius: 3px;
-
-    .button:first-child {
-        border-bottom-left-radius: 3px;
-        border-top-left-radius: 3px;
-    }
-    .button:last-child {
-        border-bottom-right-radius: 3px;
-        border-top-right-radius: 3px;
-    }
-    /**
-     * Splitter button in the toolbar.
-     */
-    .splitter {
-        margin-left: $splitterToolbarButtonLeftMargin;
-    }
+    overflow: hidden;
 }
 
 #extendedToolbar {

css/_variables.scss

@@ -34,7 +34,7 @@ $toolbarSelectBackground: rgba(0, 0, 0, .6);
 $toolbarBadgeBackground: #165ECC;
 $toolbarBadgeColor: #FFFFFF;
 $toolbarToggleBackground: #12499C;
-$splitterToolbarButtonLeftMargin: 0px;
+$splitterToolbarButtonMargin: 18px;
 
 /*
  * Main controls

css/themes/_light.scss

@@ -54,4 +54,7 @@ $dropdownColor: #333;
 // Popover colors
 $popoverBg: #000;
 $popoverFontColor: #ffffff;
-$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
+$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
+
+// Toolbar
+$splitterColor: #ccc;

modules/UI/toolbars/Toolbar.js

@@ -769,9 +769,15 @@ Toolbar = {
         };
         let id = places[place];
         let buttonElement = document.createElement("a");
-        if (button.className)
-            buttonElement.className = button.className
-                + ((isSplitter) ? " splitter": "");
+        if (button.className) {
+            buttonElement.className = button.className;
+        }
+
+        if (isSplitter) {
+            let splitter = document.createElement('span');
+            splitter.className = 'toolbar__splitter';
+            document.getElementById(id).appendChild(splitter);
+        }
 
         buttonElement.id = button.id;