ID-4558 Added support for new field labels and Show/Hide icons (#216)

* Style for signup button * Added selector * Updates to support label and show password
Fliplet · Jul 9, 2024 · 3a54450 · 3a54450
1 parent a186c7e
commit 3a54450
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 9 deletions.
diff --git a/scss/components/login-registration.scss b/scss/components/login-registration.scss
@@ -260,12 +260,19 @@
       padding: map-get($configuration, loginPaddingTop) map-get($configuration, loginPaddingRight)
         map-get($configuration, loginPaddingBottom) map-get($configuration, loginPaddingLeft);
 
-      .fl-login-form .fl-email:before,
-      .fl-login-form .fl-password:before {
+      .fl-login-form .form-group label {
         color: map-get($configuration, iconColor);
         border-right-color: map-get($configuration, iconColor);
       }
 
+      .fl-login-form .form-group .toggle-password-visibility {
+        color: map-get($configuration, iconColor);
+      }
+
+      .fl-login-form .form-group .toggle-password-visibility:focus-visible {
+        outline-color: map-get($configuration, iconColor);
+      }
+
       .fl-login-form .btn-login,
       .btn-primary {
         width: map-get($configuration, loginButtonWidth);
@@ -366,12 +373,19 @@
           map-get($configuration, loginPaddingBottomTablet)
           map-get($configuration, loginPaddingLeftTablet);
 
-        .fl-login-form .fl-email:before,
-        .fl-login-form .fl-password:before {
+        .fl-login-form .form-group label {
           color: map-get($configuration, iconColorTablet);
           border-right-color: map-get($configuration, iconColorTablet);
         }
 
+        .fl-login-form .form-group .toggle-password-visibility {
+          color: map-get($configuration, iconColorTablet);
+        }
+
+        .fl-login-form .form-group .toggle-password-visibility:focus-visible {
+          outline-color: map-get($configuration, iconColorTablet);
+        }
+
         .fl-login-form .btn-login {
           width: map-get($configuration, loginButtonWidthTablet);
           background-color: map-get($configuration, loginButtonColorTablet);
@@ -447,12 +461,19 @@
           map-get($configuration, loginPaddingBottomDesktop)
           map-get($configuration, loginPaddingLeftDesktop);
 
-        .fl-login-form .fl-email:before,
-        .fl-login-form .fl-password:before {
+        .fl-login-form .form-group label {
           color: map-get($configuration, iconColorDesktop);
           border-right-color: map-get($configuration, iconColorDesktop);
         }
 
+        .fl-login-form .form-group .toggle-password-visibility {
+          color: map-get($configuration, iconColorDesktop);
+        }
+
+        .fl-login-form .form-group .toggle-password-visibility:focus-visible {
+          outline-color: map-get($configuration, iconColorDesktop);
+        }
+
         .fl-login-form .btn-login {
           width: map-get($configuration, loginButtonWidthDesktop);
           background-color: map-get($configuration, loginButtonColorDesktop);
@@ -562,8 +583,7 @@
       }
     }
 
-    .fl-login-form .fl-email:before,
-    .fl-login-form .fl-password:before {
+    .fl-login-form .form-group label {
       color: $chevronSeparator;
       border-right-color: $chevronSeparator;
 
@@ -580,6 +600,34 @@
       }
     }
 
+    .fl-login-form .form-group .toggle-password-visibility {
+      color: $chevronSeparator;
+
+      // Styles for tablet
+      @include above($tabletBreakpoint) {
+        color: $chevronSeparatorTablet;
+      }
+
+      // Styles for desktop
+      @include above($desktopBreakpoint) {
+        color: $chevronSeparatorDesktop;
+      }
+    }
+
+    .fl-login-form .form-group .toggle-password-visibility:focus-visible {
+      outline-color: $chevronSeparator;
+
+      // Styles for tablet
+      @include above($tabletBreakpoint) {
+        color: $chevronSeparatorTablet;
+      }
+
+      // Styles for desktop
+      @include above($desktopBreakpoint) {
+        color: $chevronSeparatorDesktop;
+      }
+    }
+
     .state {
       .back {
         border-right: 1px solid map-get($configuration, chevronSeparator);

diff --git a/theme.json b/theme.json
@@ -44429,8 +44429,12 @@
                 "columns": 12,
                 "styles": [
                   {
-                    "selectors": ".fl-login-form .fl-email:before, .fl-login-form .fl-password:before",
+                    "selectors": ".fl-login-form label",
                     "properties": ["color", "border-right-color"]
+                  },
+                  {
+                    "selectors": ".fl-login-form .form-group .toggle-password-visibility",
+                    "properties": ["color"]
                   }
                 ],
                 "breakpoints": {