Allow balloon control markup to be used independently

This commit is contained in:
Samuel Georges 2015-03-06 20:35:54 +11:00
parent fccf1e92b0
commit 2561131f38
2 changed files with 17 additions and 4 deletions

View File

@ -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;
}
}

View File

@ -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>