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));
}
}
}