diff --git a/src/components/shared/form_fields/AmountField.vue b/src/components/shared/form_fields/AmountField.vue index 8712e7818..587a4f1ea 100644 --- a/src/components/shared/form_fields/AmountField.vue +++ b/src/components/shared/form_fields/AmountField.vue @@ -156,7 +156,7 @@ watch( () => props.modelValue, ( newValue: string ) => { @use '@src/scss/settings/breakpoints'; @use 'sass:map'; -$max-width: 384px; +$max-width: 414px; $input-height: 50px; .form-field-amount { diff --git a/src/components/shared/form_fields/RadioField.vue b/src/components/shared/form_fields/RadioField.vue index 45d690abf..0f85cc603 100644 --- a/src/components/shared/form_fields/RadioField.vue +++ b/src/components/shared/form_fields/RadioField.vue @@ -94,54 +94,62 @@ const onFieldChange = ( newValue: string | number | boolean | null ): void => { } label { - padding-left: map.get( units.$spacing, 'small' ) * 3; + padding-left: map.get( units.$spacing, 'x-large' ); } } &.row-alignment { - @include breakpoints.tablet-up { - max-width: none; - } - .form-field-radio-container { flex-direction: column; + margin: 0 ( -( map.get( units.$spacing, 'xx-small' ) ) ); .radio-form-input { - margin: 0 0 map.get(units.$spacing, 'small'); + padding: 0 map.get(units.$spacing, 'xx-small'); + margin-bottom: map.get(units.$spacing, 'small'); &:last-child { margin-bottom: 0; } + + input { + left: map.get( units.$spacing, 'medium' ); + } } @include breakpoints.tablet-up { flex-direction: row; + flex-wrap: wrap; .radio-form-input { - margin: 0 map.get(units.$spacing, 'large') 0 0; - } - - label { - padding-left: map.get(units.$spacing, 'x-large'); + &:last-child { + margin-bottom: map.get(units.$spacing, 'small'); + } } } } } &.twocolumnsperrow-alignment { - max-width: 430px; + max-width: map.get( forms.$input, 'max-width' ); + .form-field-radio-container { flex-direction: column; flex-wrap: wrap; + margin: 0 ( -( map.get( units.$spacing, 'xx-small' ) ) ); .radio-form-input { width: 100%; - margin: 0 0 16px 0; + padding: 0 map.get(units.$spacing, 'xx-small') 0; + margin-bottom: map.get(units.$spacing, 'small'); &:last-child { margin-bottom: 0; } + + input { + left: map.get( units.$spacing, 'medium' ); + } } @include breakpoints.tablet-up { @@ -149,11 +157,6 @@ const onFieldChange = ( newValue: string | number | boolean | null ): void => { .radio-form-input { width: 50%; - padding-right: 16px; - } - - label { - padding-left: map.get(units.$spacing, 'x-large'); } } } diff --git a/src/scss/settings/_forms.scss b/src/scss/settings/_forms.scss index 76af8a5da..04565d6cc 100644 --- a/src/scss/settings/_forms.scss +++ b/src/scss/settings/_forms.scss @@ -11,7 +11,7 @@ $input: ( 'height': 46px, 'font-size': 16px, 'min-width': 272px, - 'max-width': 384px, + 'max-width': 414px, ); $checkbox-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");