diff --git a/css/_toolbars.scss b/css/_toolbars.scss index 96be09f23..6bd5da34f 100644 --- a/css/_toolbars.scss +++ b/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 { diff --git a/css/_variables.scss b/css/_variables.scss index 8d1d5d517..10cc6f68f 100644 --- a/css/_variables.scss +++ b/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 diff --git a/css/themes/_light.scss b/css/themes/_light.scss index 8eadc8724..95ac124b0 100644 --- a/css/themes/_light.scss +++ b/css/themes/_light.scss @@ -54,4 +54,7 @@ $dropdownColor: #333; // Popover colors $popoverBg: #000; $popoverFontColor: #ffffff; -$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2); \ No newline at end of file +$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2); + +// Toolbar +$splitterColor: #ccc; \ No newline at end of file diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 08147e6cf..5e17d9be6 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/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;