1
- $input-border : (
1
+ $input-borders : (
2
2
" general" : var (--du-state-active , #d6dadb ),
3
3
" hover" : var (--du-border-hover , #999999 ),
4
4
" active" : var (--du-brand-secondary , #85acb0 ),
5
- " disabled" : var (--du-state-active , #d6dadb ),
6
5
" success" : var (--du-status-success , #4bb4b3 ),
7
6
" error" : var (--du-status-danger , #ec3f3f ),
8
7
);
9
8
10
- $label-color : (
9
+ $label-colors : (
11
10
" general" : var (--du-border-hover , #999999 ),
12
11
" active" : var (--du-brand-secondary , #85acb0 ),
13
12
" error" : var (--du-status-danger , #ec3f3f ),
@@ -43,25 +42,25 @@ $input-placement: 16px;
43
42
color : var (--du-text-prominent , #333333 );
44
43
45
44
& --general {
46
- border-color : map-get ($input-border , " general" );
45
+ border-color : map-get ($input-borders , " general" );
47
46
& :hover:not (:disabled ):not (:focus-within ) {
48
- border-color : map-get ($input-border , " hover" );
47
+ border-color : map-get ($input-borders , " hover" );
49
48
}
50
49
& :focus-within {
51
- border-color : map-get ($input-border , " active" );
50
+ border-color : map-get ($input-borders , " active" );
52
51
}
53
52
}
54
53
& --error {
55
- border-color : map-get ($input-border , " error" );
54
+ border-color : map-get ($input-borders , " error" );
56
55
}
57
56
& --success {
58
- border-color : map-get ($input-border , " success" );
57
+ border-color : map-get ($input-borders , " success" );
59
58
}
60
59
& --active {
61
- border-color : map-get ($input-border , " active" );
60
+ border-color : map-get ($input-borders , " active" );
62
61
}
63
62
& --disabled {
64
- border-color : map-get ($input-border , " disabled " );
63
+ border-color : map-get ($input-borders , " general " );
65
64
cursor : not-allowed ;
66
65
}
67
66
@@ -96,20 +95,20 @@ $input-placement: 16px;
96
95
transition : all 0.15s ease-out ;
97
96
font-size : var (--du-text-size-default , 14px );
98
97
& --general {
99
- color : map-get ($label-color , " general" );
98
+ color : map-get ($label-colors , " general" );
100
99
}
101
100
& --error {
102
- color : map-get ($label-color , " error" );
101
+ color : map-get ($label-colors , " error" );
103
102
}
104
103
& --success {
105
- color : map-get ($label-color , " success" );
104
+ color : map-get ($label-colors , " success" );
106
105
}
107
106
& --active {
108
- color : map-get ($label-color , " active" );
107
+ color : map-get ($label-colors , " active" );
109
108
}
110
109
111
110
& --disabled {
112
- color : map-get ($label-color , " disabled" );
111
+ color : map-get ($label-colors , " disabled" );
113
112
}
114
113
}
115
114
@@ -121,19 +120,19 @@ $input-placement: 16px;
121
120
.deriv-input--general .deriv-input__field :disabled + .deriv-input__label ,
122
121
.deriv-input--error .deriv-input__field :disabled + .deriv-input__label ,
123
122
.deriv-input--success .deriv-input__field :disabled + .deriv-input__label {
124
- color : map-get ($label-color , " disabled" );
123
+ color : map-get ($label-colors , " disabled" );
125
124
}
126
125
127
126
.deriv-input--general .deriv-input__field :focus + .deriv-input__label {
128
- color : map-get ($label-color , " active" );
127
+ color : map-get ($label-colors , " active" );
129
128
}
130
129
131
130
.deriv-input--error .deriv-input__field :focus + .deriv-input__label {
132
- color : map-get ($label-color , " error" );
131
+ color : map-get ($label-colors , " error" );
133
132
}
134
133
135
134
.deriv-input--success .deriv-input__field :focus + .deriv-input__label {
136
- color : map-get ($label-color , " success" );
135
+ color : map-get ($label-colors , " success" );
137
136
}
138
137
139
138
.deriv-input__helper-message {
0 commit comments