Add `.inlineList` support for `.labelSelection`

diff --git a/com.woltlab.wcf/templates/shared_badgeColorFormField.tpl b/com.woltlab.wcf/templates/shared_badgeColorFormField.tpl
index 7b5680b85bc7958ec37477fb17d854013d0a5296..688f0d9a70ac761a824bfdafc0830c6f481cb45e 100644 (file)
--- a/com.woltlab.wcf/templates/shared_badgeColorFormField.tpl
+++ b/com.woltlab.wcf/templates/shared_badgeColorFormField.tpl
@@ -1,4 +1,4 @@
-<ul class="labelSelection">
+<ul class="labelSelection{if !$field->getClasses()|empty} {implode from=$field->getClasses() item=class glue=' '}{$class}{/implode}{/if}">
        {foreach from=$field->getOptions() item=color}
                <li{if $color == 'custom'} class="custom"{/if}>
                        <label class="labelSelection__label">

diff --git a/wcfsetup/install/files/lib/system/form/builder/field/BadgeColorFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/BadgeColorFormField.class.php
index e1a433e8af259d2e602df45a3c9c0c564f37c78a..9c47ee6bc02db72c1f0c3541ce82f6818552cf11 100644 (file)
--- a/wcfsetup/install/files/lib/system/form/builder/field/BadgeColorFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/BadgeColorFormField.class.php
@@ -47,6 +47,7 @@ final class BadgeColorFormField extends RadioButtonFormField implements IPattern
     public function __construct()
     {
         $this
+            ->addClass('inlineList')
             ->addFieldClass('labelSelection__radio')
             ->defaultLabelText(WCF::getLanguage()->get('wcf.acp.label.defaultValue'))
             ->options(\array_combine(self::AVAILABLE_CSS_CLASSNAMES, self::AVAILABLE_CSS_CLASSNAMES))

diff --git a/wcfsetup/install/files/style/ui/label.scss b/wcfsetup/install/files/style/ui/label.scss
index 373baa297077d30b84ec13c6ca771e0caf590344..38efebb34460e1fc3fe4bb5bf20829aa88e17d7f 100644 (file)
--- a/wcfsetup/install/files/style/ui/label.scss
+++ b/wcfsetup/install/files/style/ui/label.scss
@@ -51,6 +51,10 @@
        cursor: pointer;
 }
 
+.labelSelection.inlineList > li {
+       flex-basis: 30%;
+}
+
 .labelSelection > li.custom {
        display: flex;
 }