✨ [#483] fix some styling

open-formulieren · Mar 11, 2024 · f606572 · f606572
1 parent 14ceab8
commit f606572
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/src/formio/components/Checkbox.scss b/src/formio/components/Checkbox.scss
@@ -8,7 +8,10 @@
 .utrecht-form-field {
   @include bem.modifier('openforms') {
     &.utrecht-form-field--checkbox {
-      background-color: var(--of-utrecht-form-field-checkbox-background-color, var(--of-checkbox-bg));
+       --_of-utrecht-form-field-checkbox-background-color: var(
+        --of-utrecht-form-field-checkbox-background-color,
+        var(--of-checkbox-bg)
+      );
 
       & + & {
         margin-block-start: var(--of-utrecht-form-field-checkbox-margin-block-start);
@@ -24,15 +27,16 @@
         }
       }
 
-      .utrecht-form-field__label {
+      .utrecht-form-field__label, .utrecht-form-description--openforms {
+        background-color: var(--_of-utrecht-form-field-checkbox-background-color);
         --_of-checkbox-label-shift: calc(
           var(--of-utrecht-form-label-checkbox-padding-block-start) + var(--utrecht-checkbox-size)
         );
         padding-inline-start: var(--_of-checkbox-label-shift);
         margin-inline-start: calc(var(--_of-checkbox-label-shift) * -1);
       }
 
-      .utrecht-form-label--checkbox, .utrecht-form-field-description {
+      .utrecht-form-label--checkbox, .utrecht-form-field-description.utrecht-form-field__description {
         padding-block-end: var(--of-utrecht-form-label-checkbox-padding-block-end);
         padding-block-start: var(--of-utrecht-form-label-checkbox-padding-block-start);
         padding-inline-end: var(--of-utrecht-form-label-checkbox-padding-inline-end);
@@ -53,3 +57,18 @@
     background-color: var(--utrecht-checkbox-background-color);
   }
 }
+
+.openforms-theme {
+  .utrecht-custom-checkbox--openforms:not(:checked) {
+    background-color: var(--utrecht-checkbox-background-color);
+  }
+
+  .utrecht-form-field {
+    @include bem.modifier('checkbox') {
+      .utrecht-form-field-description {
+        grid-column-start: input;
+        grid-column-end: description;
+      }
+    }
+  }
+}
diff --git a/src/formio/templates/radio.ejs b/src/formio/templates/radio.ejs
@@ -23,7 +23,7 @@
     {% } %}
   >
   {% if (item.description) { %}
-    <div class="utrecht-paragraph">
+    <div class="utrecht-description utrecht-form-description--openforms">
         <p class="utrecht-form-field-description utrecht-form-field__description">
           {{ item.description }}
         </p>

diff --git a/src/scss/components/_radio-field.scss b/src/scss/components/_radio-field.scss
@@ -17,7 +17,7 @@
         margin-inline-start: var(--of-utrecht-form-label-radio-padding-inline-start);
       }
 
-      .utrecht-form-label--radio, .utrecht-form-field-description {
+      .utrecht-form-label--radio, .utrecht-form-field-description.utrecht-form-field__description {
         padding-block-end: var(--of-utrecht-form-label-radio-padding-block-end);
         padding-block-start: var(--of-utrecht-form-label-radio-padding-block-start);
         padding-inline-end: var(--of-utrecht-form-label-radio-padding-inline-end);