1 | import {
|
2 | form_control_styles_default
|
3 | } from "./chunk.TNVY3ST3.js";
|
4 | import {
|
5 | component_styles_default
|
6 | } from "./chunk.7IGWJVQF.js";
|
7 | import {
|
8 | r
|
9 | } from "./chunk.WWAD5WF4.js";
|
10 |
|
11 |
|
12 | var 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 |
|
177 | export {
|
178 | textarea_styles_default
|
179 | };
|