💄 Update spacing of radio and checkbox inputs (#841)

homeday-de · Oct 18, 2021 · 38d7d98 · 38d7d98
1 parent b3674bb
commit 38d7d98
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 35 deletions.
diff --git a/src/components/form/FieldBase.vue b/src/components/form/FieldBase.vue
@@ -120,20 +120,11 @@ export default {
 <style scoped lang="scss">
 @import 'homeday-blocks/src/styles/mixins.scss';
 
-@mixin typography-regular {
-  font-size: 16px;
-  line-height: 24px;
-}
-@mixin typography-small {
-  font-size: 12px;
-  line-height: 16px;
-}
-
 .field {
   $root: &;
   display: flex;
   align-items: flex-start;
-  @include typography-regular;
+  @include font("DS-100");
 
   &__icon {
     margin-top: $sp-m;
@@ -151,8 +142,8 @@ export default {
     position: relative;
 
     #{$root}--grouped:not(#{$root}--unlabelled) & {
-      padding-top: $sp-m;
-      margin-top: $sp-s;
+      padding-top: #{$sp-m + $sp-xs};
+      margin-top: $sp-xs;
     }
   }
   &:not(#{$root}--grouped) &__main {
@@ -272,7 +263,7 @@ export default {
   &__helper {
     width: 100%;
     color: getShade($quaternary-color, 80);
-    @include typography-small;
+    @include font("DS-80");
     padding-right: $sp-m;
     padding-left: $sp-m;
 

diff --git a/src/components/form/HdCheckbox.vue b/src/components/form/HdCheckbox.vue
@@ -179,8 +179,13 @@ export default {
 <style lang="scss" scoped>
 @import 'homeday-blocks/src/styles/mixins.scss';
 
+$checkbox-width: 20px;
+
 .field {
   margin-bottom: $sp-m;
+  ::v-deep .field__helper {
+    padding-left: #{$checkbox-width + $sp-s};
+  }
 }
 
 .checkbox {
@@ -205,7 +210,7 @@ export default {
     flex: 1;
     margin: 0 0 0 $sp-s;
     text-align: left;
-    @include font('text-small');
+    @include font("DS-100");
   }
 
   &__use-mouse {
@@ -221,25 +226,5 @@ export default {
       outline: 0;
     }
   }
-  &__error {
-    @include font('text-xxsmall');
-    position: absolute;
-    top: calc(100% + #{$sp-xs});
-    margin-left: $sp-m;
-    color: $error-color;
-    display: none;
-  }
-  &__label {
-    display: block;
-    flex: 1;
-    margin: 0 0 0 $sp-s;
-
-    text-align: left;
-    font-size: 14px;
-    line-height: 18px;
-    color: $quaternary-color;
-    transition: color 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
-    pointer-events: none;
-  }
 }
 </style>
diff --git a/src/components/form/HdRadio.vue b/src/components/form/HdRadio.vue
@@ -236,6 +236,11 @@ export default {
 <style lang="scss" scoped>
 @import 'homeday-blocks/src/styles/mixins.scss';
 
+.field ::v-deep .field__helper {
+  margin-top: $sp-xs;
+  padding-left: 0;
+}
+
 .radio-wrapper {
   position: relative;
   flex: 1;
@@ -286,7 +291,7 @@ export default {
     padding-left: $sp-s;
     cursor: pointer;
     text-align: left;
-    @include font("text-small");
+    @include font("DS-100");
   }
 }
 </style>