diff --git a/themes/grav/scss/template/_forms.scss b/themes/grav/scss/template/_forms.scss index 606c7707..612260c6 100644 --- a/themes/grav/scss/template/_forms.scss +++ b/themes/grav/scss/template/_forms.scss @@ -472,3 +472,64 @@ form { z-index: 10005; } } + +// Fieldset +#admin-main .admin-block h2 { + font-size: 1.25rem; + margin: 0 0 .5rem; + + letter-spacing: normal; +} +.form-fieldset { + background-color: #f7f7f7; + border: 2px solid #e1e1e1; + margin: 1rem 2rem; +} + +.form-fieldset--label { + background-color: #f3f3f3; + + &:hover, + .form-fieldset input:checked + & { + background-color: #eee; + } + + label { + display: table; + font-size: 1.25rem; + padding: .5rem 1rem; + width: 100%; + } + + h2 { + margin: 0 !important; + } + + .actions { + font-size: initial; + display: table-cell; + text-align: right; + vertical-align: middle; + } + + & + .form-data { + margin-top: 1rem; + padding: 0; + } +} +.form-fieldset--cursor { + cursor: pointer; +} +.form-fieldset--info { + font-size: small; +} +.form-fieldset > input:checked ~ .form-data, +.form-fieldset--collapsible .open, +.form-fieldset input:checked ~ .form-label .form-fieldset--collapsible .close { + display: block; +} +.form-fieldset > .form-data, +.form-fieldset--collapsible .close, +.form-fieldset input:checked ~ .form-label .form-fieldset--collapsible .open { + display: none; +} diff --git a/themes/grav/templates/forms/fields/fieldset/fieldset.html.twig b/themes/grav/templates/forms/fields/fieldset/fieldset.html.twig new file mode 100644 index 00000000..0a3d9e6b --- /dev/null +++ b/themes/grav/templates/forms/fields/fieldset/fieldset.html.twig @@ -0,0 +1,67 @@ +{% extends "forms/field.html.twig" %} + +{% block field %} +
+ {% block contents %} + + +
+

+ + {% if field.help %} + + {% endif %} + {% block label %} + {% if field.icon %} + + {% endif %} + {{ field.title|tu }} + {{ field.validate.required in ['on', 'true', 1] ? '*' }} + {% if field.info %} + {{ field.info|tu }} + {% endif %} + {% endblock %} + {% if field.help %} + + {% endif %} + + {# Actions panel #} + + {% block actions %} + {% if field.collapsible %} + + + + + {% endif %} + {% endblock %} + + +

+
+
+ + {% block group %} + {% if field.text %} +

{% if grav.twig.twig.filters['tu'] is defined %}{{ field.text|tu }}{% else %}{{ field.text|t }}{% endif %}

+ {% endif %} + + {% if field.fields %} + {% for field in field.fields %} + {% if field.type %} + {% set value = data.value(field.name) %} + {% include ["forms/fields/#{field.type}/#{field.type}.html.twig", 'forms/fields/text/text.html.twig'] %} + {% endif %} + {% endfor %} + {% endif %} + {% endblock %} +

+ {% endblock %} +
+{% endblock %}