fix(storefront): BCTHEME-540 User Account, bug styles in section paym…

…ent methods (#2085)
bigcommerce · Jul 20, 2021 · 00219ad · 00219ad
1 parent 8e45901
commit 00219ad
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- User Account, bug styles in section payment methods. [#2085](https://github.com/bigcommerce/cornerstone/pull/2085)
 - Scss lint has been replaced with stylelint. [#2069](https://github.com/bigcommerce/cornerstone/pull/2069)
 
 ## 5.7.1 (2021-07-09)

diff --git a/assets/scss/components/citadel/forms/_forms.scss b/assets/scss/components/citadel/forms/_forms.scss
@@ -54,6 +54,14 @@
             repeat: no-repeat;
         }
     }
+
+    .form-input[name="credit_card_number"] {
+        background-position: right $form-success-icon-check-right center;
+    }
+
+    .form-input[name="cvv"] {
+        background-position: right $form-success-icon-check-right center;
+    }
 }
 
 

diff --git a/assets/scss/settings/citadel/forms/_settings.scss b/assets/scss/settings/citadel/forms/_settings.scss
@@ -214,6 +214,7 @@ $form-success-icon:                         url("data:image/svg+xml;charset=utf8
 $form-success-icon-height:                  remCalc(24px);
 $form-success-icon-top:                     remCalc(37px);
 $form-success-icon-right:                   spacing("third") + spacing("eighth");
+$form-success-icon-check-right:             spacing("single") + spacing("half");
 $form-success-icon-width:                   remCalc(24px);
 $form-success-input-paddingRight:           spacing("double");