1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 | @use 'sass:math';
|
27 | @use 'sass:color';
|
28 | @use '@material/density/variables' as density-variables;
|
29 | @use '@material/floating-label/variables' as floating-label-variables;
|
30 | @use '@material/notched-outline/variables' as notched-outline-variables;
|
31 | @use '@material/theme/theme-color';
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 | @function get-outlined-label-position-y($text-field-height) {
|
40 | @return math.div($text-field-height, 2) +
|
41 | math.div(notched-outline-variables.$label-box-height, 2);
|
42 | }
|
43 |
|
44 | $error: error !default;
|
45 | $disabled-border: rgba(theme-color.prop-value(on-surface), 0.06) !default;
|
46 | $disabled-icon: rgba(theme-color.prop-value(on-surface), 0.3) !default;
|
47 | $bottom-line-hover: rgba(theme-color.prop-value(on-surface), 0.87) !default;
|
48 | $bottom-line-idle: rgba(theme-color.prop-value(on-surface), 0.42) !default;
|
49 | $label: rgba(theme-color.prop-value(on-surface), 0.6) !default;
|
50 |
|
51 | $ink-color: rgba(theme-color.prop-value(on-surface), 0.87) !default;
|
52 | $helper-text-color: rgba(theme-color.prop-value(on-surface), 0.6) !default;
|
53 | $icon-color: rgba(theme-color.prop-value(on-surface), 0.54) !default;
|
54 | $focused-label-color: rgba(theme-color.prop-value(primary), 0.87) !default;
|
55 | $placeholder-ink-color: rgba(theme-color.prop-value(on-surface), 0.54) !default;
|
56 | $affix-color: rgba(theme-color.prop-value(on-surface), 0.6) !default;
|
57 |
|
58 | $disabled-label-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;
|
59 | $disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;
|
60 | $disabled-placeholder-ink-color: rgba(
|
61 | theme-color.prop-value(on-surface),
|
62 | 0.38
|
63 | ) !default;
|
64 | $disabled-helper-text-color: rgba(
|
65 | theme-color.prop-value(on-surface),
|
66 | 0.38
|
67 | ) !default;
|
68 | $disabled-affix-color: rgba(theme-color.prop-value(on-surface), 0.38) !default;
|
69 |
|
70 | $background: color.mix(
|
71 | theme-color.prop-value(on-surface),
|
72 | theme-color.prop-value(surface),
|
73 | 4%
|
74 | ) !default;
|
75 | $disabled-background: color.mix(
|
76 | theme-color.prop-value(on-surface),
|
77 | theme-color.prop-value(surface),
|
78 | 2%
|
79 | ) !default;
|
80 | $secondary-text: rgba(theme-color.prop-value(on-surface), 0.6) !default;
|
81 |
|
82 | $outlined-idle-border: rgba(theme-color.prop-value(on-surface), 0.38) !default;
|
83 | $outlined-disabled-border: rgba(
|
84 | theme-color.prop-value(on-surface),
|
85 | 0.06
|
86 | ) !default;
|
87 | $outlined-hover-border: rgba(theme-color.prop-value(on-surface), 0.87) !default;
|
88 |
|
89 | $textarea-border: rgba(theme-color.prop-value(on-surface), 0.73) !default;
|
90 | $textarea-background: rgba(theme-color.prop-value(surface), 1) !default;
|
91 | $textarea-disabled-border-color: rgba(
|
92 | theme-color.prop-value(on-surface),
|
93 | 0.26
|
94 | ) !default;
|
95 |
|
96 |
|
97 | $textarea-disabled-background: rgba(249, 249, 249, 1) !default;
|
98 |
|
99 | $ripple-target: '.mdc-text-field__ripple';
|
100 | $outlined-stroke-width: 2px !default;
|
101 | $height: 56px !default;
|
102 | $minimum-height: 40px !default;
|
103 | $minimum-height-for-filled-label: 52px !default;
|
104 | $maximum-height: $height !default;
|
105 | $padding-horizontal: 16px !default;
|
106 | $density-scale: density-variables.$default-scale !default;
|
107 | $density-config: (
|
108 | height: (
|
109 | default: $height,
|
110 | maximum: $maximum-height,
|
111 | minimum: $minimum-height,
|
112 | ),
|
113 | ) !default;
|
114 | $shape-radius: small !default;
|
115 | $label-position-y: floating-label-variables.$position-y !default;
|
116 | $label-offset: 16px !default;
|
117 |
|
118 |
|
119 |
|
120 |
|
121 | $outlined-label-position-y: get-outlined-label-position-y($height) !default;
|
122 | $outlined-with-leading-icon-label-position-x: 32px !default;
|
123 | $textarea-outlined-label-position-y: 24.75px !default;
|
124 | $textarea-filled-label-position-y: 10.25px !default;
|
125 | $helper-line-padding: 16px !default;
|
126 | $filled-baseline-top: 40px !default;
|
127 | $input-height: 28px !default;
|
128 | $textarea-label-top: 19px !default;
|
129 | $textarea-outlined-label-top: $textarea-label-top -
|
130 | notched-outline-variables.$border-width !default;
|
131 | $textarea-line-height: 1.5rem !default;
|
132 | $textarea-input-handle-margin: 1px !default;
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 | $textarea-outlined-input-margin-top: 16px !default;
|
140 | $textarea-outlined-input-margin-bottom: 16px !default;
|
141 | $textarea-outlined-density-config: (
|
142 | margin-top: (
|
143 | default: $textarea-outlined-input-margin-top,
|
144 | maximum: $textarea-outlined-input-margin-top,
|
145 | minimum: $textarea-outlined-input-margin-top - 8,
|
146 | ),
|
147 | margin-bottom: (
|
148 | default: $textarea-outlined-input-margin-bottom,
|
149 | maximum: $textarea-outlined-input-margin-bottom,
|
150 | minimum: $textarea-outlined-input-margin-bottom - 8,
|
151 | ),
|
152 | ) !default;
|
153 | $textarea-outlined-label-density-config: (
|
154 | top: (
|
155 | default: $textarea-outlined-label-top,
|
156 | maximum: $textarea-outlined-label-top,
|
157 | minimum: $textarea-outlined-label-top - 8,
|
158 | ),
|
159 | ) !default;
|
160 | $textarea-filled-input-margin-top: 23px !default;
|
161 | $textarea-filled-input-margin-bottom: 9px !default;
|
162 | $textarea-filled-density-config: (
|
163 | margin-bottom: (
|
164 | default: $textarea-filled-input-margin-bottom,
|
165 | maximum: $textarea-filled-input-margin-bottom,
|
166 | minimum: $textarea-filled-input-margin-bottom - 4,
|
167 | ),
|
168 | ) !default;
|
169 | $textarea-filled-label-density-config: (
|
170 | top: (
|
171 | default: $textarea-label-top,
|
172 | maximum: $textarea-label-top,
|
173 | minimum: $textarea-label-top - 2,
|
174 | ),
|
175 | ) !default;
|
176 | $textarea-filled-no-label-input-margin-top: 16px !default;
|
177 | $textarea-filled-no-label-input-margin-bottom: 16px !default;
|
178 | $textarea-filled-no-label-density-config: (
|
179 | margin-top: (
|
180 | default: $textarea-filled-no-label-input-margin-top,
|
181 | maximum: $textarea-filled-no-label-input-margin-top,
|
182 | minimum: $textarea-filled-no-label-input-margin-top - 8,
|
183 | ),
|
184 | margin-bottom: (
|
185 | default: $textarea-filled-no-label-input-margin-bottom,
|
186 | maximum: $textarea-filled-no-label-input-margin-bottom,
|
187 | minimum: $textarea-filled-no-label-input-margin-bottom - 8,
|
188 | ),
|
189 | ) !default;
|
190 | $textarea-internal-counter-input-margin-bottom: 2px !default;
|
191 | $textarea-internal-counter-baseline-bottom: 16px !default;
|
192 |
|
193 |
|
194 | $prefix-padding: 2px !default;
|
195 | $prefix-end-aligned-padding: 12px !default;
|
196 | $suffix-padding: 12px !default;
|
197 | $suffix-end-aligned-padding: 2px !default;
|