updates to toggle

themes/grav/css-compiled/template.css

@@ -596,6 +596,9 @@ form textarea {
 form .form-frontmatter-wrapper {
   border: 1px solid #d4d4d4;
   border-radius: 4px; }
+form .switch-toggle.medium {
+  width: 100%;
+  width: 20rem; }
 form .switch-toggle label {
   cursor: pointer; }
 form .switch-toggle a, form .switch-toggle label {

themes/grav/scss/template/_forms.scss

@@ -265,6 +265,11 @@ form {
     .switch-toggle {
         // margin-left: 30%;
 
+        &.medium {
+            width: 100%;
+            width: 20rem;
+        }
+
         label {
             cursor: pointer;
         }

themes/grav/templates/forms/fields/themeselect/themeselect.html.twig

@@ -1,18 +1,31 @@
-{% set value = config.system.pages.theme %}
-{% set options = {} %}
+{% extends "forms/field.html.twig" %}
 
+{% set options = {} %}
 {% for slug, package in admin.themes %}
     {% set option = {(slug): package.toArray().name} %}
     {% set options = options|merge(option) %}
-{% endfor  %}
+{% endfor %}
 
-{% set field = {
-    type: 'select',
-    classes: 'fancy',
-    label: field.label,
-    name: field.name,
-    options: options
-} %}
+{% block global_attributes %}
+    data-grav-selectize="{{ (field.selectize is defined ? field.selectize : {})|json_encode()|e('html_attr') }}"
+    data-grav-field="select"
+    data-grav-disabled="{{ originalValue is null ? 'true' : 'false' }}"
+    data-grav-default="{{ field.default|json_encode()|e('html_attr') }}"
+{% endblock %}
+
+{% block input %}
+    <div class="form-select-wrapper {{ field.size }}">
+        <select class="{{ field.classes }}" name="{{ (scope ~ field.name)|fieldName ~ (field.multiple ? '[]' : '') }}"
+                {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
+                {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
+                {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
+                {% if field.multiple in ['on', 'true', 1] %}multiple="multiple"{% endif %}
+                >
+            {% for key, text in options %}
+                <option {% if key == value or text in value %}selected="selected"{% endif %} value="{{ field.multiple ? text : key }}">{{ text }}</option>
+            {% endfor %}
+        </select>
+    </div>
+{% endblock %}
 
-{% include ['forms/fields/select/select.html.twig'] %}
 

themes/grav/templates/forms/fields/toggle/toggle.html.twig

@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block input %}
-    <div class="switch-toggle switch-grav switch-{{ field.options|length }}">
+    <div class="switch-toggle switch-grav {{ field.size }} switch-{{ field.options|length }}">
         {% for key, text in field.options %}
             {% set id = "toggle_" ~ field.name ~ key %}
             <input type="radio"