diff --git a/assets/css/component/field.css b/assets/css/component/field.css new file mode 100644 index 0000000000000000000000000000000000000000..2ba4f0c3d2e52378c9b671b7926176fbf73b5c27 --- /dev/null +++ b/assets/css/component/field.css @@ -0,0 +1,3 @@ +.field--label--inline::after { + content: ":"; +} diff --git a/templates/overrides/system/field.html.twig b/templates/overrides/system/field.html.twig index b68d67a9628160787645eb838125032aafba6b00..e28e40674197274439a061f9b9beeea2ebf17e50 100644 --- a/templates/overrides/system/field.html.twig +++ b/templates/overrides/system/field.html.twig @@ -38,18 +38,30 @@ * @ingroup themeable */ #} +{{ attach_library('ui_suite_bootstrap/field') }} {% set title_classes = [ + 'field--label', + 'field--label--' ~ label_display|clean_class, label_display == 'visually_hidden' ? 'visually-hidden', + label_display == 'inline' ? 'float-start', + label_display == 'inline' ? 'pe-2', + 'fw-bold', ] %} -<div{{ attributes.addClass(classes) }}> +{% set field_items_attributes = create_attribute({ + 'class': [ + 'field--items', + multiple and label_display == 'inline' ? 'float-start', + ] +}) %} +<div{{ attributes }}> {% if not label_hidden %} <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div> {% endif %} - <div class="field__items"> + <div{{ field_items_attributes }}> {% for item in items %} - <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div> + <div{{ item.attributes.addClass('field--item') }}>{{ item.content }}</div> {% endfor %} </div> </div> diff --git a/ui_suite_bootstrap.libraries.yml b/ui_suite_bootstrap.libraries.yml index b8a524c1888f93c77b4f9ca3d7b941945852ec6a..51644822d2ad0e8577a8ff8deb94d4e9483d2667 100644 --- a/ui_suite_bootstrap.libraries.yml +++ b/ui_suite_bootstrap.libraries.yml @@ -45,6 +45,11 @@ example_carousel: theme: assets/css/example/carousel.css: {} +field: + css: + component: + assets/css/component/field.css: {} + form: css: component: