diff --git a/haxe/ui/_module/styles/default/buttons.css b/haxe/ui/_module/styles/default/buttons.css index 86ea54faa..76bbf20cd 100644 --- a/haxe/ui/_module/styles/default/buttons.css +++ b/haxe/ui/_module/styles/default/buttons.css @@ -72,6 +72,10 @@ WIP - dunno what looks "right" spacing: 0; } +.button-bar .button-bar-divider { + hidden: true; +} + .button-bar .button { border-radius: 0; border: $normal-border-size solid $normal-border-color; @@ -113,6 +117,40 @@ WIP - dunno what looks "right" border-bottom-right-radius: $normal-border-radius; } +/************************************************************************ +** BUTTON BAR - ALT STYLES - PILL BUTTONS +*************************************************************************/ +.button-bar.pill-buttons { + padding: 5px; + background-color: $solid-background-color-down; + border-radius: 5px; + spacing: 5px; +} + +.button-bar.pill-buttons .button-bar-divider { + hidden: false; + height: 80%; + width: 1px; + background-color: $normal-border-color; + vertical-align: center; +} + +.button-bar.pill-buttons .button, .button-bar.pill-buttons .button.first, .button-bar.pill-buttons .button.last { + border: none; + background-color: none; + filter: none; + border-radius: 5px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} + +.button-bar.pill-buttons .button:down { + background-color: $selection-background-color; + color: $selection-text-color; +} + /************************************************************************ ** BUTTON BAR - LEFT MENU ALTERNATE *************************************************************************/ diff --git a/haxe/ui/containers/ButtonBar.hx b/haxe/ui/containers/ButtonBar.hx index b4fdce566..c6537dbf0 100644 --- a/haxe/ui/containers/ButtonBar.hx +++ b/haxe/ui/containers/ButtonBar.hx @@ -150,6 +150,13 @@ class ButtonBarBuilder extends CompositeBuilder { public override function addComponent(child:Component):Component { if ((child is Button)) { + if (_bar.numComponents > 0) { + var divider = new Component(); + divider.addClass("button-bar-divider"); + divider.scriptAccess = false; + _bar.addComponent(divider); + + } if (_bar.selectedIndex == _bar.numComponents) { cast(child, Button).selected = true; }