ehscan-react-components 0.1.19 → 0.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/style/input.css +47 -36
- package/package.json +1 -1
package/dist/style/input.css
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.ext-textarea-box {
|
|
28
|
-
background-color: var(--ext-textarea-box-bck-color,
|
|
28
|
+
background-color: var(--ext-textarea-box-bck-color, transparent);
|
|
29
29
|
border-radius: 10px;
|
|
30
30
|
display: flex;
|
|
31
31
|
position: relative;
|
|
@@ -54,16 +54,6 @@ textarea::placeholder {
|
|
|
54
54
|
padding: 0
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
input[type="text"],
|
|
58
|
-
input[type="email"],
|
|
59
|
-
textarea {
|
|
60
|
-
color: var(--input-clr);
|
|
61
|
-
text-align: var(--input-align);
|
|
62
|
-
background-color: var(--d-input-bck-clr);
|
|
63
|
-
outline: none;
|
|
64
|
-
border: none;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
57
|
textarea {
|
|
68
58
|
resize: none;
|
|
69
59
|
overflow: hidden;
|
|
@@ -83,17 +73,17 @@ input:-webkit-autofill:active {
|
|
|
83
73
|
|
|
84
74
|
/* 🌐 Wrapper */
|
|
85
75
|
.ext-textarea-wrapper {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
76
|
+
display: flex;
|
|
77
|
+
flex-direction: column;
|
|
78
|
+
gap: 4px;
|
|
89
79
|
}
|
|
90
80
|
|
|
91
81
|
/* 🏷️ Label Area */
|
|
92
82
|
.ext-textarea-label {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
83
|
+
display: flex;
|
|
84
|
+
justify-content: center;
|
|
85
|
+
align-items:center;
|
|
86
|
+
height: 22px;
|
|
97
87
|
}
|
|
98
88
|
|
|
99
89
|
/* 🏷️ Label Title */
|
|
@@ -105,42 +95,43 @@ input:-webkit-autofill:active {
|
|
|
105
95
|
|
|
106
96
|
/* ⚙️ Label Controls (counter + clear) */
|
|
107
97
|
.ext-textarea-label-btns {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
gap: 8px;
|
|
111
101
|
}
|
|
112
102
|
|
|
113
103
|
/* 🔢 Character Count */
|
|
114
104
|
.form-container-count {
|
|
115
|
-
|
|
116
|
-
|
|
105
|
+
font-size: 0.85rem;
|
|
106
|
+
color: #666;
|
|
117
107
|
}
|
|
118
108
|
|
|
119
109
|
/* ❌ Clear Button */
|
|
120
110
|
.form-container-clear {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
111
|
+
border: none;
|
|
112
|
+
background: none;
|
|
113
|
+
color: #007aff;
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
font-size: 0.85rem;
|
|
126
116
|
}
|
|
127
117
|
|
|
128
118
|
/* ✏️ Textarea Box */
|
|
129
119
|
.ext-textarea-box {
|
|
130
|
-
|
|
120
|
+
width: 100%;
|
|
131
121
|
}
|
|
132
122
|
|
|
133
123
|
.ext-textarea {
|
|
134
124
|
font-size: var(--ext-textarea-input-txt-size, 14px);
|
|
125
|
+
background-color: var(--ext-textarea-input-bck-clr, darkblue);
|
|
126
|
+
color: var(--ext-textarea-input-clr, red);
|
|
127
|
+
font-weight: var(--ext-textarea-d-font-weight, 400);
|
|
128
|
+
border-radius: var(--ext-textarea-border-radius, 20px);
|
|
135
129
|
border: none;
|
|
136
130
|
outline: none;
|
|
137
131
|
width: 100%;
|
|
138
|
-
font-weight: var(--ext-textarea-d-font-weight, 400);
|
|
139
132
|
display: grid;
|
|
140
133
|
justify-content: left;
|
|
141
134
|
align-items: center;
|
|
142
|
-
background-color: transparent;
|
|
143
|
-
color: var(--ext-textarea-input-clr, red);
|
|
144
135
|
box-sizing: border-box;
|
|
145
136
|
resize: none;
|
|
146
137
|
overflow: hidden;
|
|
@@ -148,11 +139,31 @@ input:-webkit-autofill:active {
|
|
|
148
139
|
line-height: 1.5;
|
|
149
140
|
}
|
|
150
141
|
|
|
151
|
-
|
|
142
|
+
.ext-textarea:focus{
|
|
143
|
+
background-color: var(--ext-textarea-focus-bck-clr);
|
|
144
|
+
border-radius: var(--ext-textarea-border-radius);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
input[type="text"],
|
|
148
|
+
input[type="email"],
|
|
149
|
+
textarea {
|
|
150
|
+
color: var(--ext-textarea-input-clr);
|
|
151
|
+
text-align: left;
|
|
152
|
+
background-color: var(--ext-textarea-input-bck-clr);
|
|
153
|
+
outline: none;
|
|
154
|
+
border: none;
|
|
155
|
+
}
|
|
156
|
+
|
|
152
157
|
.ext-textarea.highlight {
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
158
|
+
border: 1px solid #ccc; /* normal border */
|
|
159
|
+
outline: none; /* remove default focus outline */
|
|
160
|
+
transition: box-shadow 0.2s ease, border-color 0.2s ease;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* Highlight on focus */
|
|
164
|
+
.ext-textarea.highlight:focus {
|
|
165
|
+
border-color: #4A90E2; /* optional: change border color */
|
|
166
|
+
box-shadow: 0 0 8px rgba(74, 144, 226, 0.6); /* glow effect */
|
|
156
167
|
}
|
|
157
168
|
|
|
158
169
|
.ext-textarea-svg-close{
|