diff --git a/src/app/settings/payment.component.html b/src/app/settings/payment.component.html
index aab5a4ed9b..e4ec35f4aa 100644
--- a/src/app/settings/payment.component.html
+++ b/src/app/settings/payment.component.html
@@ -19,14 +19,14 @@
diff --git a/src/app/settings/payment.component.ts b/src/app/settings/payment.component.ts
index 3922810b57..1c8b77c5ac 100644
--- a/src/app/settings/payment.component.ts
+++ b/src/app/settings/payment.component.ts
@@ -16,10 +16,9 @@ const Keys = {
const StripeElementStyle = {
base: {
color: '#333333',
- lineHeight: '21px',
fontFamily: '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
- fontSize: '1rem',
+ fontSize: '14px',
fontSmoothing: 'antialiased',
},
invalid: {
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index ea8214bb19..70cb5b3fc1 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -704,16 +704,23 @@ app-user-billing {
}
}
-.form-control.is-focused {
- color: $input-focus-color;
- background-color: $input-focus-bg;
- border-color: $input-focus-border-color;
- outline: 0;
- box-shadow: $input-focus-box-shadow;
+.form-control.stripe-form-control {
+ padding-top: 0.55rem;
+ &.is-focused {
+ color: $input-focus-color;
+ background-color: $input-focus-bg;
+ border-color: $input-focus-border-color;
+ outline: 0;
+ box-shadow: $input-focus-box-shadow;
+
+ &.is-invalid {
+ box-shadow: 0 0 0 $input-focus-width rgba($form-feedback-invalid-color, .25);
+ }
+ }
+
&.is-invalid {
border-color: $form-feedback-invalid-color;
- box-shadow: 0 0 0 $input-focus-width rgba($form-feedback-invalid-color, .25);
}
}