From 2561131f38e3cd88c2e101c5f4967c348e7d3883 Mon Sep 17 00:00:00 2001
From: Samuel Georges <sam@daftspunk.com>
Date: Fri, 6 Mar 2015 20:35:54 +1100
Subject: [PATCH] Allow balloon control markup to be used independently

---
 .../assets/less/controls/ballooncontrols.less     | 15 ++++++++++++---
 .../form/partials/_field_balloon-selector.htm     |  6 +++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/modules/backend/assets/less/controls/ballooncontrols.less b/modules/backend/assets/less/controls/ballooncontrols.less
index bea3fd72b..0bd9ef5dc 100644
--- a/modules/backend/assets/less/controls/ballooncontrols.less
+++ b/modules/backend/assets/less/controls/ballooncontrols.less
@@ -1,13 +1,16 @@
-div[data-control="balloon-selector"] {
+.control-balloon-selector {
     ul {
         padding: 0;
-        margin-bottom: 0;
+
+        // Offset the item top margin
+        margin-top: -5px;
 
         li {
             list-style: none;
             display: inline-block;
             padding: 6px 7px 5px;
             margin-right: 5px;
+            margin-top: 6px;
             text-transform: uppercase;
             background: @color-balloon-control-default-bg;
             color: @color-balloon-control-default-text;
@@ -17,7 +20,7 @@ div[data-control="balloon-selector"] {
             .transition(all 0.1s ease);
 
             &.active {
-                background: @color-balloon-control-active-bg!important;
+                background: @color-balloon-control-active-bg !important;
             }
         }
     }
@@ -32,4 +35,10 @@ div[data-control="balloon-selector"] {
             cursor: pointer;
         }
     }
+}
+
+.form-group {
+    .control-balloon-selector ul {
+        margin-bottom: 0;
+    }
 }
\ No newline at end of file
diff --git a/modules/backend/widgets/form/partials/_field_balloon-selector.htm b/modules/backend/widgets/form/partials/_field_balloon-selector.htm
index 2fa9620c4..20912519d 100644
--- a/modules/backend/widgets/form/partials/_field_balloon-selector.htm
+++ b/modules/backend/widgets/form/partials/_field_balloon-selector.htm
@@ -2,7 +2,11 @@
     $fieldOptions = $field->options();
 ?>
 <!-- Balloon selector -->
-<div data-control="balloon-selector" id="<?= $field->getId() ?>" <?= $field->getAttributes() ?>>
+<div
+    data-control="balloon-selector"
+    id="<?= $field->getId() ?>"
+    class="control-balloon-selector"
+    <?= $field->getAttributes() ?>>
     <ul>
         <?php foreach ($fieldOptions as $value => $text): ?>
             <li data-value="<?= e($value) ?>" class="<?= $value == $field->value ? 'active' : '' ?>"><?= e(trans($text)) ?></li>