From 5d94230077cee2eea7f61f0491764510fb1cdeb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Balet?= <raphael@megaphone.info>
Date: Thu, 8 Feb 2024 16:22:47 +0100
Subject: [PATCH] fix(css): editable css variable

---
 .../src/lib/code-input.component.scss         | 49 +++++++------------
 1 file changed, 17 insertions(+), 32 deletions(-)

diff --git a/angular-code-input/src/lib/code-input.component.scss b/angular-code-input/src/lib/code-input.component.scss
index 463152e..4444be7 100644
--- a/angular-code-input/src/lib/code-input.component.scss
+++ b/angular-code-input/src/lib/code-input.component.scss
@@ -1,65 +1,50 @@
 :host {
-  --text-security-type: disc;
-  --item-spacing: 4px;
-  --item-height: 4.375em;
-  --item-border: 1px solid #dddddd;
-  --item-border-bottom: 1px solid #dddddd;
-  --item-border-has-value: 1px solid #dddddd;
-  --item-border-bottom-has-value: 1px solid #dddddd;
-  --item-border-focused: 1px solid #dddddd;
-  --item-border-bottom-focused: 1px solid #dddddd;
-  --item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);
-  --item-border-radius: 5px;
-  --item-background: transparent;
-  --item-font-weight: 300;
-  --color: #171516;
-
   display: flex;
   transform: translate3d(0, 0, 0);
   font-size: inherit;
-  color: var(--color);
+  color: var(--color, #171516);
 
   span {
     display: block;
     flex: 1;
-    padding-right: var(--item-spacing);
+    padding-right: var(--item-spacing, 4px);
 
     &:first-child {
-      padding-left: var(--item-spacing);
+      padding-left: var(--item-spacing, 4px);
     }
 
     &.code-hidden input {
-      text-security: var(--text-security-type);
-      -webkit-text-security: var(--text-security-type);
-      -moz-text-security: var(--text-security-type);
+      text-security: var(--text-security-type, disc);
+      -webkit-text-security: var(--text-security-type, disc);
+      -moz-text-security: var(--text-security-type, disc);
     }
   }
 
   input {
     width: 100%;
-    height: var(--item-height);
+    height: var(--item-height, 4.375em);
     color: inherit;
-    background: var(--item-background);
+    background: var(--item-background, transparent);
     text-align: center;
     font-size: inherit;
-    font-weight: var(--item-font-weight);
-    border: var(--item-border);
-    border-bottom: var(--item-border-bottom);
-    border-radius: var(--item-border-radius);
+    font-weight: var(--item-font-weight, 300);
+    border: var(--item-border, 1px solid #dddddd);
+    border-bottom: var(--item-border-bottom, 1px solid #dddddd);
+    border-radius: var(--item-border-radius, 5px);
     -webkit-appearance: none;
     transform: translate3d(0, 0, 0);
     -webkit-transform: translate3d(0, 0, 0);
     outline: none;
 
     &.has-value {
-      border: var(--item-border-has-value);
-      border-bottom: var(--item-border-bottom-has-value);
+      border: var(--item-border-has-value, 1px solid #dddddd);
+      border-bottom: var(--item-border-bottom-has-value, 1px solid #dddddd);
     }
 
     &:focus {
-      border: var(--item-border-focused);
-      border-bottom: var(--item-border-bottom-focused);
-      box-shadow: var(--item-shadow-focused);
+      border: var(--item-border-focused, 1px solid #dddddd);
+      border-bottom: var(--item-border-bottom-focused, 1px solid #dddddd);
+      box-shadow: var(--item-shadow-focused, 0 1px 5px rgba(221, 221, 221, 1));
     }
   }
 }