fix(addon-commerce): InputCardGroup fix autofill styles

taiga-family · Sep 2, 2024 · de91857 · de91857
1 parent d864924
commit de91857
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.style.less b/projects/addon-commerce/components/input-card-group/input-card-group.style.less
@@ -18,6 +18,10 @@
     :host-context(tui-root._mobile) {
         inline-size: @width-mobile;
     }
+
+    &:has(:-webkit-autofill) {
+        background: var(--tui-service-autofill-background);
+    }
 }
 
 .t-outline {
@@ -117,15 +121,13 @@
     &:-webkit-autofill {
         -webkit-text-fill-color: var(--tui-text-primary) !important;
         caret-color: var(--tui-text-primary) !important;
-        border-color: var(--tui-service-autofill-background) !important;
-        box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important;
+        transition: background-color 600000s 0s;
     }
 
     &&&_card {
         // @note: (&&&_) it's increasing css cascade priority
-        &:not(.t-input_hidden),
-        &:not(.t-input_hidden)::placeholder,
-        &:not(.t-input_hidden):-webkit-autofill {
+        &:not(.t-input_visible),
+        &:not(.t-input_visible):not(.t-input_collapsed):-webkit-autofill {
             caret-color: var(--tui-text-primary);
             color: transparent !important;
             -webkit-text-fill-color: transparent !important;
@@ -181,11 +183,13 @@
     .transition(all);
     .text-overflow();
 
+    position: relative;
     margin: 1.125rem 1rem;
     font: var(--tui-font-text-m);
     line-height: 1.25rem;
     color: var(--tui-text-secondary);
 
+    input:-webkit-autofill ~ &,
     &_raised {
         font-size: 0.8156rem;
         transform: translateY(-0.7em);

diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.template.html b/projects/addon-commerce/components/input-card-group/input-card-group.template.html
@@ -13,8 +13,9 @@
             [attr.aria-invalid]="!cardPrefilled && !(this.card | tuiMapper: cardValidator)"
             [attr.id]="id + '_card'"
             [autocomplete]="autocomplete ? 'cc-number' : 'off'"
-            [class.t-input_hidden]="!card.length && focus()"
+            [class.t-input_collapsed]="cardCollapsed"
             [class.t-input_inert]="cardPrefilled"
+            [class.t-input_visible]="!card.length && focus()"
             [disabled]="disabled()"
             [maskito]="maskCard"
             [ngModel]="formattedCard"

diff --git a/projects/core/styles/theme/appearance/textfield.less b/projects/core/styles/theme/appearance/textfield.less
@@ -42,6 +42,7 @@
         caret-color: var(--tui-text-primary) !important;
         border-color: var(--tui-service-autofill-background) !important;
         box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important;
+        transition: background-color 600000s 0s;
     }
 }