blob: b61da70c2e38a4135efae2199bcae1bc62e33dc0 [file] [log] [blame]
Adrià Vilanova Martínez7ad72fe2023-11-02 21:54:41 +01001material-input input {
2 color: var(--TWPT-primary-text)!important;
3}
4
5material-input .label-text,
6 material-input .hint-text,
7 material-input .counter,
8 material-input .leading-text,
9 material-input .leading-text material-icon {
10 color: var(--TWPT-subtle-button-background)!important;
11}
12
13material-input .underline .unfocused-underline {
14 background-color: var(--TWPT-input-underline)!important;
15}
16
17material-input .underline .focused-underline {
18 background-color: var(--TWPT-blue-A100)!important;
19}
20
21:is(material-input.gm-input, .gm-input material-input) .baseline {
22 border-color: var(--gm-outlinedtextfield-outline-color)!important;
23}
24
25:is(material-input.gm-input, .gm-input material-input) .baseline:hover {
26 border-color: var(--gm-outlinedtextfield-outline-color)!important;
27}
28
29:is(material-input.gm-input, .gm-input material-input) .baseline.focused {
30 border-color: var(--gm-outlinedtextfield-outline-color--stateful)!important;
31}
32
33:is(material-input.gm-input, .gm-input material-input).invalid .baseline {
34 border-color: var(--gm-outlinedtextfield-outline-color--error)!important;
35}
36
37:is(material-input.gm-input, .gm-input material-input).invalid .error-text {
38 color: var(--gm-outlinedtextfield-helper-text-color--error)!important;
39}
40
41label .label,
42 .input-field > .label {
43 color: var(--TWPT-primary-text)!important;
44}
45
46.mdc-text-field--outlined:hover:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-floating-label {
47 color: var(--gm-outlinedtextfield-label-color)!important;
48}
49
50.mdc-text-field--outlined:hover:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-notched-outline :is(.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing) {
51 border-color: var(--gm-outlinedtextfield-outline-color)!important;
52}
53
54.mdc-text-field--outlined.mdc-text-field--invalid:hover:not(.mdc-text-field--focused):not(.mdc-text-field--disabled) .mdc-floating-label {
55 color: var(--gm-outlinedtextfield-label-color--error)!important;
56}
57
58.mdc-text-field--outlined.mdc-text-field--invalid:hover:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) .mdc-notched-outline :is(.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing) {
59 border-color: var(--gm-outlinedtextfield-outline-color--error)!important;
60}
61
62.mdc-text-field--outlined.mdc-text-field--invalid:hover:not(.mdc-text-field--focused):not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
63 color: var(--gm-outlinedtextfield-helper-text-color--error)!important;
64}
65
66// Input underline
67material-input .underline .unfocused-underline,
68 material-dropdown-select dropdown-button [buttondecorator] {
69 border-color: var(--TWPT-input-underline)!important;
70}