-
Notifications
You must be signed in to change notification settings - Fork 9
/
Textarea.styles.js
83 lines (64 loc) 路 1.77 KB
/
Textarea.styles.js
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";
const textareaStyles = () => `
position: relative;
.form-textarea__textarea {
${stylers.placeholders};
background-color: ${tokens.color.white};
border: 1px solid ${tokens.border.color};
border-radius: ${tokens.border.radius};
box-shadow: none;
box-sizing: border-box;
color: ${tokens.color.black};
display: block;
margin: 0;
min-height: 80px;
padding: ${tokens.space};
resize: none;
width: 100%;
&:hover:not(.is-disabled):not(.is-readonly):not([disabled]) {
border-color: ${tokens.color.blackLighten30};
}
&.form-element--has-error {
border-color: ${tokens.color.orange};
}
&:focus {
background-color: ${tokens.color.white};
border-color: ${tokens.highlight.active.noBorder.borderColor};
box-shadow: ${tokens.highlight.active.noBorder.boxShadow};
outline: none;
}
}
.form-textarea__aria-label {
${stylers.visuallyHidden}
}
// Sizes
&.form-textarea--small .form-textarea__textarea {
${stylers.fontSize(-2)};
}
&.form-textarea--medium .form-textarea__textarea {
${stylers.fontSize(-1)};
}
&.form-textarea--large .form-textarea__textarea {
${stylers.fontSize()};
}
// Read Only
&.form-textarea--is-readonly .form-textarea__textarea {
${stylers.readOnlyFormStyles};
cursor: text;
}
// Disabled
&.form-textarea--is-disabled, &[disabled] {
textarea.form-textarea__textarea {
${stylers.disabledFormStyles}
}
.form-textarea__icon {
color: ${tokens.color.blackLighten60};
}
}
// Error
&.form-textarea--has-error textarea.form-textarea__textarea {
${stylers.errorFormStyles}
}
`;
export default textareaStyles;