ui(sass): add class to indent checkboxes if using horizontal data edi…

…t styling
sfxcode · Oct 5, 2024 · a7d64e7 · a7d64e7
1 parent 1cb2a0a
commit a7d64e7
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/dev/pages/data/Edit.vue b/dev/pages/data/Edit.vue
@@ -5,6 +5,7 @@ import { useMessages } from '../../composables/messages'
 const { addElement } = useFormKitSchema()
 const { t } = useI18n()
 const horizontal = ref(false)
+const indentCheckboxes = ref(false)
 
 const options = [
   { label: 'Every page load', value: 'refresh' },
@@ -99,13 +100,18 @@ async function submitHandler() {
 <template>
   <PrimeData header="FormKitDataEdit Demo">
     <div class="flex gap-2 mb-4">
-      Horizontal  <ToggleSwitch v-model="horizontal" />
+      <div>Horizontal</div>
+      <ToggleSwitch v-model="horizontal" />
+      <div v-if="horizontal">
+        Indent Checkboxes
+      </div>
+      <ToggleSwitch v-if="horizontal" v-model="indentCheckboxes" />
     </div>
     <FormKitDataEdit
       :data="data"
       :schema="schema"
       :submit-label="t('save')"
-      :form-class="horizontal ? 'form-horizontal' : ''"
+      :form-class="(horizontal ? ' form-horizontal' : '') + (indentCheckboxes ? ' form-horizontal-checkbox-indent ' : '')"
       :debug-data="true"
       :debug-schema="true"
       @data-saved="submitHandler"

diff --git a/src/sass/formkit-primevue.scss b/src/sass/formkit-primevue.scss
@@ -326,6 +326,15 @@ $grid-breakpoints: (
           }
         }
       }
+
+      &.form-horizontal-checkbox-indent {
+        .formkit-outer[data-type="primeCheckbox"] {
+          @include media-breakpoint-up(md) {
+            padding-left: calc((4 / 12) * 100%);
+          }
+        }
+      }
+
     }
 
     .p-formkit-data-view & {
@@ -344,13 +353,13 @@ $grid-breakpoints: (
           width: 100%;
 
           label {
-            width: 33.3333333333%;
+            width: calc((4 / 12) * 100%);
             padding-top: 0.25rem;
             line-height: normal;
           }
 
           .formkit-inner {
-            width: 66.6666666667%;
+            width: calc((8 / 12) * 100%);
           }
         }
 
@@ -370,7 +379,7 @@ $grid-breakpoints: (
         }
 
         .formkit-help, .formkit-messages {
-          width: 66.6666666667%;
+          width: calc((8 / 12) * 100%);
           margin-left: auto;
         }
       }