1 | @charset "UTF-8";
|
2 |
|
3 | ////
|
4 | /// @module input: 输入框
|
5 | /// @tag input
|
6 | /// @category component
|
7 | /// @family data-entry
|
8 | /// @varPrefix $input-
|
9 | /// @classPrefix {prefix}-input
|
10 | /// @order {"statement/normal":10,"statement/normal/addon":100,"statement/normal/warning":101,"statement/normal/success":102,"statement/normal/loading":103,"statement/normal/maxlen":104,"statement/normal/clear":105,"statement/hover":11,"statement/hover/clear":110,"statement/focus":12,"statement/disabled":13,"statement/error":14,"size/bounding":10,"size/bounding/addon":100,"size/label":11,"size/maxlen":12}
|
11 | ////
|
12 |
|
13 | $input-prefix: '.#{$css-prefix}input';
|
14 |
|
15 | // 公共
|
16 | // --------------------------------------------------
|
17 |
|
18 | /// text
|
19 | /// @namespace statement/normal
|
20 | $input-text-color: $color-text1-4 !default;
|
21 |
|
22 | /// border
|
23 | /// @namespace statement/normal
|
24 | $input-border-color: $color-line1-3 !default;
|
25 |
|
26 | /// label
|
27 | /// @namespace statement/normal
|
28 | $input-label-color: $color-text1-3 !default;
|
29 |
|
30 | /// border
|
31 | /// @namespace statement/hover
|
32 | $input-hover-border-color: $color-line1-4 !default;
|
33 |
|
34 | /// background
|
35 | /// @namespace statement/hover
|
36 | $input-hover-bg-color: $color-white !default;
|
37 |
|
38 | /// border
|
39 | /// @namespace statement/focus
|
40 | $input-focus-border-color: $color-brand1-6 !default;
|
41 | $color-calculate-input-focus-shadow: rgba(get-compiling-value($input-focus-border-color), .2) !default;
|
42 |
|
43 | /// background
|
44 | /// @namespace statement/focus
|
45 | $input-focus-bg-color: $color-white !default;
|
46 |
|
47 | /// shadow
|
48 | /// @namespace statement/focus
|
49 | $input-focus-shadow-spread: $line-2 !default;
|
50 |
|
51 | /// border
|
52 | /// @namespace size/bounding
|
53 | $input-border-width: $line-1 !default;
|
54 |
|
55 | /// background
|
56 | /// @namespace statement/normal
|
57 | $input-bg-color: $color-white !default;
|
58 |
|
59 | /// placeholder
|
60 | /// @namespace statement/normal
|
61 | $input-placeholder-color: $color-text1-2 !default;
|
62 |
|
63 | /// text
|
64 | /// @namespace statement/disabled
|
65 | $input-disabled-color: $color-text1-1 !default;
|
66 |
|
67 | /// border
|
68 | /// @namespace statement/disabled
|
69 | $input-disabled-border-color: $color-line1-1 !default;
|
70 |
|
71 | /// background
|
72 | /// @namespace statement/disabled
|
73 | $input-disabled-bg-color: $color-fill1-1 !default;
|
74 |
|
75 | // 多行
|
76 | // --------------------------------------------------
|
77 |
|
78 | /// padding(l,r)
|
79 | /// @namespace size/bounding
|
80 | $input-multiple-padding-lr: $s-2 !default;
|
81 |
|
82 | /// padding(t,b)
|
83 | /// @namespace size/bounding
|
84 | $input-multiple-padding-tb: $s-1 !default;
|
85 |
|
86 | /// text
|
87 | /// @namespace size/bounding
|
88 | $input-multiple-font-size: $font-size-body-1 !default;
|
89 |
|
90 | /// corner
|
91 | /// @namespace size/bounding
|
92 | $input-multiple-corner: $corner-1 !default;
|
93 |
|
94 | // addon
|
95 | // --------------------------------------------------
|
96 |
|
97 | /// background
|
98 | /// @namespace statement/normal/addon
|
99 | $input-addon-bg-color: $color-fill1-2 !default;
|
100 |
|
101 | /// text
|
102 | /// @namespace statement/normal/addon
|
103 | $input-addon-text-color: $color-text1-2 !default;
|
104 |
|
105 | /// padding(l,r)
|
106 | /// @namespace size/bounding/addon
|
107 | $input-addon-padding: $s-2 !default;
|
108 |
|
109 | // large
|
110 | // --------------------------------------------------
|
111 |
|
112 | /// padding
|
113 | /// @namespace size/bounding
|
114 | $input-l-padding: $s-3 !default;
|
115 |
|
116 | /// padding(l)
|
117 | /// @namespace size/label
|
118 | $input-l-label-padding-left: $s-3 !default;
|
119 |
|
120 | /// padding(r)
|
121 | /// @namespace size/label
|
122 | $input-l-icon-padding-right: $s-2 !default;
|
123 |
|
124 | // medium
|
125 | // --------------------------------------------------
|
126 |
|
127 | /// padding
|
128 | /// @namespace size/bounding
|
129 | $input-m-padding: $s-2 !default;
|
130 |
|
131 | /// padding(l)
|
132 | /// @namespace size/label
|
133 | $input-m-label-padding-left: $s-2 !default;
|
134 |
|
135 | /// padding(r)
|
136 | /// @namespace size/label
|
137 | $input-m-icon-padding-right: $s-2 !default;
|
138 |
|
139 | // small
|
140 | // --------------------------------------------------
|
141 |
|
142 | /// padding
|
143 | /// @namespace size/bounding
|
144 | $input-s-padding: $s-1 !default;
|
145 |
|
146 | /// padding(l)
|
147 | /// @namespace size/label
|
148 | $input-s-label-padding-left: $s-2 !default;
|
149 |
|
150 | /// padding(r)
|
151 | /// @namespace size/label
|
152 | $input-s-icon-padding-right: $s-1 !default;
|
153 |
|
154 | // feedback
|
155 | // --------------------------------------------------
|
156 | /// border
|
157 | /// @namespace statement/normal/warning
|
158 | $input-feedback-warning-border-color: $color-warning-3 !default;
|
159 | $color-calculate-input-feedback-warning-shadow: rgba(get-compiling-value($input-feedback-warning-border-color), .2) !default;
|
160 | /// background
|
161 | /// @namespace statement/normal/warning
|
162 | $input-feedback-warning-bg-color: $color-white !default;
|
163 | /// icon color
|
164 | /// @namespace statement/normal/warning
|
165 | $input-feedback-warning-color: $color-warning-3 !default;
|
166 | /// icon
|
167 | /// @namespace statement/normal/warning
|
168 | /// @type icon
|
169 | $input-feedback-warning-icon: $icon-content-warning !default;
|
170 | /// icon color
|
171 | /// @namespace statement/normal/success
|
172 | $input-feedback-success-color: $color-success-3 !default;
|
173 | /// icon
|
174 | /// @namespace statement/normal/success
|
175 | /// @type icon
|
176 | $input-feedback-success-icon: $icon-content-success-filling !default;
|
177 | /// icon color
|
178 | /// @namespace statement/normal/loading
|
179 | $input-feedback-loading-color: $color-notice-3 !default;
|
180 | /// icon
|
181 | /// @namespace statement/normal/loading
|
182 | /// @type icon
|
183 | $input-feedback-loading-icon: $icon-content-loading !default;
|
184 |
|
185 | /// text
|
186 | /// @namespace statement/error
|
187 | /// @type enum
|
188 | /// @enum color.default
|
189 | $input-feedback-error-color: $input-text-color !default;
|
190 |
|
191 | /// border
|
192 | /// @namespace statement/error
|
193 | $input-feedback-error-border-color: $color-error-3 !default;
|
194 | $color-calculate-input-feedback-error-shadow: rgba(get-compiling-value($input-feedback-error-border-color), .2) !default;
|
195 |
|
196 | /// background
|
197 | /// @namespace statement/error
|
198 | $input-feedback-error-bg-color: $color-white !default;
|
199 |
|
200 | // maxlen
|
201 | // --------------------------------------------------
|
202 |
|
203 | /// error
|
204 | /// @namespace statement/normal/maxlen
|
205 | $input-maxlen-error-color: $color-error-3 !default;
|
206 |
|
207 | /// warning
|
208 | /// @namespace statement/normal/maxlen
|
209 | $input-maxlen-warning-color: $color-warning-3 !default;
|
210 |
|
211 | /// text
|
212 | /// @namespace statement/normal/maxlen
|
213 | $input-maxlen-color: $color-text1-2 !default;
|
214 |
|
215 | /// text
|
216 | /// @namespace size/maxlen
|
217 | $input-maxlen-font-size: $font-size-caption !default;
|
218 |
|
219 | // hint
|
220 | // --------------------------------------------------
|
221 |
|
222 | /// background
|
223 | /// @namespace statement/normal/clear
|
224 | $input-hint-color: $color-text1-2 !default;
|
225 |
|
226 | /// background
|
227 | /// @namespace statement/hover/clear
|
228 | $input-hint-hover-color: $color-text1-3 !default;
|
229 |
|
230 | /// clear icon
|
231 | /// @namespace statement/normal/clear
|
232 | /// @type icon
|
233 | $input-feedback-clear-icon: $icon-content-delete-filling !default;
|