UNPKG

4.65 kBJavaScriptView Raw
1import {
2 form_control_styles_default
3} from "./chunk.TNVY3ST3.js";
4import {
5 component_styles_default
6} from "./chunk.7IGWJVQF.js";
7import {
8 r
9} from "./chunk.WWAD5WF4.js";
10
11// src/components/textarea/textarea.styles.ts
12var textarea_styles_default = r`
13 ${component_styles_default}
14 ${form_control_styles_default}
15
16 :host {
17 display: block;
18 }
19
20 .textarea {
21 display: flex;
22 align-items: center;
23 position: relative;
24 width: 100%;
25 font-family: var(--sl-input-font-family);
26 font-weight: var(--sl-input-font-weight);
27 line-height: var(--sl-line-height-normal);
28 letter-spacing: var(--sl-input-letter-spacing);
29 vertical-align: middle;
30 transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow,
31 var(--sl-transition-fast) background-color;
32 cursor: text;
33 }
34
35 /* Standard textareas */
36 .textarea--standard {
37 background-color: var(--sl-input-background-color);
38 border: solid var(--sl-input-border-width) var(--sl-input-border-color);
39 }
40
41 .textarea--standard:hover:not(.textarea--disabled) {
42 background-color: var(--sl-input-background-color-hover);
43 border-color: var(--sl-input-border-color-hover);
44 }
45 .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
46 color: var(--sl-input-color-hover);
47 }
48
49 .textarea--standard.textarea--focused:not(.textarea--disabled) {
50 background-color: var(--sl-input-background-color-focus);
51 border-color: var(--sl-input-border-color-focus);
52 color: var(--sl-input-color-focus);
53 box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
54 }
55
56 .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
57 color: var(--sl-input-color-focus);
58 }
59
60 .textarea--standard.textarea--disabled {
61 background-color: var(--sl-input-background-color-disabled);
62 border-color: var(--sl-input-border-color-disabled);
63 opacity: 0.5;
64 cursor: not-allowed;
65 }
66
67 .textarea--standard.textarea--disabled .textarea__control {
68 color: var(--sl-input-color-disabled);
69 }
70
71 .textarea--standard.textarea--disabled .textarea__control::placeholder {
72 color: var(--sl-input-placeholder-color-disabled);
73 }
74
75 /* Filled textareas */
76 .textarea--filled {
77 border: none;
78 background-color: var(--sl-input-filled-background-color);
79 color: var(--sl-input-color);
80 }
81
82 .textarea--filled:hover:not(.textarea--disabled) {
83 background-color: var(--sl-input-filled-background-color-hover);
84 }
85
86 .textarea--filled.textarea--focused:not(.textarea--disabled) {
87 background-color: var(--sl-input-filled-background-color-focus);
88 outline: var(--sl-focus-ring);
89 outline-offset: var(--sl-focus-ring-offset);
90 }
91
92 .textarea--filled.textarea--disabled {
93 background-color: var(--sl-input-filled-background-color-disabled);
94 opacity: 0.5;
95 cursor: not-allowed;
96 }
97
98 .textarea__control {
99 flex: 1 1 auto;
100 font-family: inherit;
101 font-size: inherit;
102 font-weight: inherit;
103 line-height: 1.4;
104 color: var(--sl-input-color);
105 border: none;
106 background: none;
107 box-shadow: none;
108 cursor: inherit;
109 -webkit-appearance: none;
110 }
111
112 .textarea__control::-webkit-search-decoration,
113 .textarea__control::-webkit-search-cancel-button,
114 .textarea__control::-webkit-search-results-button,
115 .textarea__control::-webkit-search-results-decoration {
116 -webkit-appearance: none;
117 }
118
119 .textarea__control::placeholder {
120 color: var(--sl-input-placeholder-color);
121 user-select: none;
122 }
123
124 .textarea__control:focus {
125 outline: none;
126 }
127
128 /*
129 * Size modifiers
130 */
131
132 .textarea--small {
133 border-radius: var(--sl-input-border-radius-small);
134 font-size: var(--sl-input-font-size-small);
135 }
136
137 .textarea--small .textarea__control {
138 padding: 0.5em var(--sl-input-spacing-small);
139 }
140
141 .textarea--medium {
142 border-radius: var(--sl-input-border-radius-medium);
143 font-size: var(--sl-input-font-size-medium);
144 }
145
146 .textarea--medium .textarea__control {
147 padding: 0.5em var(--sl-input-spacing-medium);
148 }
149
150 .textarea--large {
151 border-radius: var(--sl-input-border-radius-large);
152 font-size: var(--sl-input-font-size-large);
153 }
154
155 .textarea--large .textarea__control {
156 padding: 0.5em var(--sl-input-spacing-large);
157 }
158
159 /*
160 * Resize types
161 */
162
163 .textarea--resize-none .textarea__control {
164 resize: none;
165 }
166
167 .textarea--resize-vertical .textarea__control {
168 resize: vertical;
169 }
170
171 .textarea--resize-auto .textarea__control {
172 height: auto;
173 resize: none;
174 }
175`;
176
177export {
178 textarea_styles_default
179};