Merge pull request #1098 from BeatC/toolbar-splitter-restyle
Restyled toolbar splitter
This commit is contained in:
commit
e86294191a
|
@ -4,6 +4,18 @@
|
||||||
z-index: $toolbarZ;
|
z-index: $toolbarZ;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
pointer-events: auto;
|
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{
|
#mainToolbarContainer{
|
||||||
|
@ -42,21 +54,7 @@
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#extendedToolbar {
|
#extendedToolbar {
|
||||||
|
|
|
@ -34,7 +34,7 @@ $toolbarSelectBackground: rgba(0, 0, 0, .6);
|
||||||
$toolbarBadgeBackground: #165ECC;
|
$toolbarBadgeBackground: #165ECC;
|
||||||
$toolbarBadgeColor: #FFFFFF;
|
$toolbarBadgeColor: #FFFFFF;
|
||||||
$toolbarToggleBackground: #12499C;
|
$toolbarToggleBackground: #12499C;
|
||||||
$splitterToolbarButtonLeftMargin: 0px;
|
$splitterToolbarButtonMargin: 18px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Main controls
|
* Main controls
|
||||||
|
|
|
@ -54,4 +54,7 @@ $dropdownColor: #333;
|
||||||
// Popover colors
|
// Popover colors
|
||||||
$popoverBg: #000;
|
$popoverBg: #000;
|
||||||
$popoverFontColor: #ffffff;
|
$popoverFontColor: #ffffff;
|
||||||
$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
|
$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
|
||||||
|
|
||||||
|
// Toolbar
|
||||||
|
$splitterColor: #ccc;
|
|
@ -769,9 +769,15 @@ Toolbar = {
|
||||||
};
|
};
|
||||||
let id = places[place];
|
let id = places[place];
|
||||||
let buttonElement = document.createElement("a");
|
let buttonElement = document.createElement("a");
|
||||||
if (button.className)
|
if (button.className) {
|
||||||
buttonElement.className = button.className
|
buttonElement.className = button.className;
|
||||||
+ ((isSplitter) ? " splitter": "");
|
}
|
||||||
|
|
||||||
|
if (isSplitter) {
|
||||||
|
let splitter = document.createElement('span');
|
||||||
|
splitter.className = 'toolbar__splitter';
|
||||||
|
document.getElementById(id).appendChild(splitter);
|
||||||
|
}
|
||||||
|
|
||||||
buttonElement.id = button.id;
|
buttonElement.id = button.id;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue