switch toggle to checkbox for overrides

themes/grav/css-compiled/template.css

@@ -491,6 +491,8 @@ form label {
   padding: 5px 0;
   font-weight: 400;
   margin: 0; }
+  form label.toggleable {
+    display: inline; }
 form input, form select, form textarea, form button, form .selectize-input {
   font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
   font-size: 1rem;
@@ -631,6 +633,8 @@ form .checkboxes {
     font-size: 1.2rem;
     line-height: 1.5rem;
     text-align: center; }
+  form .checkboxes.toggleable label {
+    margin-right: 0; }
 
 .form-frontmatter-wrapper {
   margin-bottom: 3rem; }

themes/grav/js/forms/fields/checkboxes.js

@@ -28,6 +28,7 @@
     CheckboxesField.prototype.disabled = function(state) {
         if (typeof state !== 'undefined') {
             this._disabled = state ? true : false;
+            this.el.css('opacity', state ? 0.6 : 1);
         }
 
         return this._disabled;

themes/grav/js/forms/form.js

@@ -57,21 +57,28 @@
 
     function linkToggle (element, toggleable) {
         element.onChange(function (value) {
-            toggleable.find('input').prop('checked', false).filter('[value=1]').prop('checked', true);
+            toggleable.find('input').prop('checked', true);
+            toggleable.siblings('label').css('opacity', 1);
             element.disabled(false);
         });
 
         toggleable.find('input').on('change', function () {
-            var el = $(this);
+            var el = $(this),
-            if (el.is(':checked')) {
+                on = el.is(':checked');
-                var on = el.val() == '1' ? true : false;
 
-                element.disabled(!on);
+            toggleable.siblings('label').css('opacity', on ? 1 : 0.7);
-                if (!on) {
+            element.disabled(!on);
-                    element.reset();
+            if (!on) {
-                }
+                element.reset();
             }
         });
+
+        var on = toggleable.is(':checked');
+        toggleable.siblings('label').css('opacity', on ? 1 : 0.7);
+        element.disabled(!on);
+        if (!on) {
+            element.reset();
+        }
     }
 
     var Form = function (el, options) {

themes/grav/scss/template/_forms.scss

@@ -83,6 +83,10 @@ form {
         padding: 5px 0;
         font-weight: 400;
         margin:0;
+
+        &.toggleable {
+            display: inline;
+        }
     }
 
     input, select, textarea, button, .selectize-input {
@@ -333,6 +337,10 @@ form {
             line-height: 1.5rem;
             text-align: center;
         }
+
+        &.toggleable label{
+            margin-right: 0;
+        }
     }
 }
 

themes/grav/templates/forms/field.html.twig

@@ -4,9 +4,21 @@
 {% block field %}
     <div class="form-field grid">
 
+
         {% block contents %}
             <div class="form-label block size-1-3">
-                <label>
+                {% if field.toggleable %}
+                    <span class="checkboxes toggleable" data-grav-field="toggleable" data-grav-field-name="{{ field.name|fieldName }}">
+                        <input type="checkbox"
+                               id="toggleable_{{ field.name }}"
+                               value="1"
+                               name="toggleable_{{ (scope ~ field.name)|fieldName }}"
+                               {% if originalValue is not null %}checked="checked"{% endif %}
+                        >
+                        <label for="toggleable_{{ field.name }}"></label>
+                    </span>
+                {% endif %}
+                <label class="{{ field.toggleable ? 'toggleable' : '' }}">
                 {% block label %}
                     {% if field.help %}
                     <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
@@ -43,28 +55,6 @@
                     {% endblock %}
                 {% endblock %}
             </div>
-            {% if field.toggleable %}
-                <div class="block size-1-6">
-                    <div class="switch-toggle switch-grav switch-2" data-grav-field="toggleable" data-grav-field-name="{{ field.name|fieldName }}">
-                        <input
-                            type="radio" value="1"
-                            id="toggleable_{{ field.name }}_1"
-                            class="highlight"
-                            name="toggleable_{{ (scope ~ field.name)|fieldName }}"
-                            {% if originalValue is not null %}checked="checked"{% endif %}
-                        />
-                        <label for="toggleable_{{ field.name }}_1">On</label>
-                        <input
-                            type="radio" value="0"
-                            id="toggleable_{{ field.name }}_0"
-                            name="toggleable_{{ (scope ~ field.name)|fieldName }}"
-                            {% if originalValue is null %}checked="checked"{% endif %}
-                        />
-                        <label for="toggleable_{{ field.name }}_0">Off</label>
-                        <a></a>
-                    </div>
-                </div>
-            {% endif %}
         {% endblock %}
     </div>
 {% endblock %}