Allow balloon control markup to be used independently
This commit is contained in:
parent
fccf1e92b0
commit
2561131f38
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue