@dev-tcloud/tcloud-ui 6.28.0 → 6.28.1
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/js/tcloud-ui-app.js +2 -2
- package/package.json +1 -1
- package/scss/tcloud/custom/forms.scss +32 -10
package/package.json
CHANGED
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
// Forms
|
|
6
6
|
// ---------------------------------
|
|
7
7
|
|
|
8
|
+
// Cores migradas para tokens --c-* (dark-aware via themes/_dark.scss).
|
|
9
|
+
// Demais propriedades preservam o formato standard original.
|
|
8
10
|
.tc-form-control{
|
|
9
11
|
display: block;
|
|
10
12
|
width: 100%;
|
|
@@ -12,10 +14,10 @@
|
|
|
12
14
|
font-size: 12px;
|
|
13
15
|
font-weight: 400;
|
|
14
16
|
line-height: 1.5;
|
|
15
|
-
color:
|
|
16
|
-
background-color:
|
|
17
|
+
color: var(--c-neutral-700);
|
|
18
|
+
background-color: var(--c-neutral-50);
|
|
17
19
|
background-clip: padding-box;
|
|
18
|
-
border: 1px solid var(--
|
|
20
|
+
border: 1px solid var(--c-neutral-300);
|
|
19
21
|
-webkit-appearance: none;
|
|
20
22
|
-moz-appearance: none;
|
|
21
23
|
appearance: none;
|
|
@@ -24,19 +26,33 @@
|
|
|
24
26
|
height: 40px;
|
|
25
27
|
cursor: pointer;
|
|
26
28
|
|
|
29
|
+
&::placeholder {
|
|
30
|
+
color: var(--c-neutral-400);
|
|
31
|
+
}
|
|
32
|
+
|
|
27
33
|
&:focus {
|
|
28
|
-
border-color: var(--
|
|
34
|
+
border-color: var(--c-primary-500);
|
|
29
35
|
box-shadow: none;
|
|
30
36
|
}
|
|
31
37
|
|
|
32
38
|
&:focus-visible {
|
|
33
|
-
outline: 1px solid var(--
|
|
39
|
+
outline: 1px solid var(--c-primary-500);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Autofill: o navegador força fundo claro; o box-shadow inset com token repinta
|
|
43
|
+
// o fundo respeitando o dark mode.
|
|
44
|
+
&:-webkit-autofill,
|
|
45
|
+
&:-webkit-autofill:hover,
|
|
46
|
+
&:-webkit-autofill:focus {
|
|
47
|
+
-webkit-text-fill-color: var(--c-neutral-700);
|
|
48
|
+
-webkit-box-shadow: 0 0 0 1000px var(--c-neutral-50) inset;
|
|
49
|
+
caret-color: var(--c-neutral-700);
|
|
34
50
|
}
|
|
35
51
|
|
|
36
52
|
&:disabled {
|
|
37
53
|
cursor: not-allowed;
|
|
38
54
|
opacity: 0.6;
|
|
39
|
-
background-color: var(--
|
|
55
|
+
background-color: var(--c-neutral-200);
|
|
40
56
|
}
|
|
41
57
|
}
|
|
42
58
|
|
|
@@ -46,21 +62,27 @@ textarea.tc-form-control{
|
|
|
46
62
|
|
|
47
63
|
|
|
48
64
|
select.tc-form-control{
|
|
49
|
-
background-color:
|
|
65
|
+
background-color: var(--c-neutral-50);
|
|
50
66
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
|
51
67
|
background-repeat: no-repeat;
|
|
52
68
|
background-position: right .75rem center;
|
|
53
69
|
background-size: 16px 12px;
|
|
54
70
|
|
|
55
|
-
border: 1px solid var(--
|
|
71
|
+
border: 1px solid var(--c-neutral-300);
|
|
56
72
|
border-radius: 3px;
|
|
57
|
-
color: var(--
|
|
73
|
+
color: var(--c-neutral-500);
|
|
58
74
|
font-family: "Open Sans";
|
|
59
75
|
height: 40px !important;
|
|
60
76
|
padding: 0 10px;
|
|
61
77
|
|
|
62
78
|
}
|
|
63
79
|
|
|
80
|
+
// A seta do <select> é um SVG inline (stroke fixo escuro) e não aceita token.
|
|
81
|
+
// No dark, troca por uma seta clara para manter o contraste.
|
|
82
|
+
.tc-dark select.tc-form-control{
|
|
83
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C0C6D8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
|
84
|
+
}
|
|
85
|
+
|
|
64
86
|
|
|
65
87
|
.tc-form-group{
|
|
66
88
|
margin-top: 10px;
|
|
@@ -76,5 +98,5 @@ select.tc-form-control{
|
|
|
76
98
|
}
|
|
77
99
|
|
|
78
100
|
.tc-group-input-table td:last-child button {
|
|
79
|
-
color: var(--
|
|
101
|
+
color: var(--c-neutral-500);
|
|
80
102
|
}
|