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 input_styles_default = r`
|
13 | ${component_styles_default}
|
14 | ${form_control_styles_default}
|
15 |
|
16 | :host {
|
17 | display: block;
|
18 | }
|
19 |
|
20 | .input {
|
21 | flex: 1 1 auto;
|
22 | display: inline-flex;
|
23 | align-items: stretch;
|
24 | justify-content: start;
|
25 | position: relative;
|
26 | width: 100%;
|
27 | font-family: var(--sl-input-font-family);
|
28 | font-weight: var(--sl-input-font-weight);
|
29 | letter-spacing: var(--sl-input-letter-spacing);
|
30 | vertical-align: middle;
|
31 | overflow: hidden;
|
32 | cursor: text;
|
33 | transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow,
|
34 | var(--sl-transition-fast) background-color;
|
35 | }
|
36 |
|
37 | /* Standard inputs */
|
38 | .input--standard {
|
39 | background-color: var(--sl-input-background-color);
|
40 | border: solid var(--sl-input-border-width) var(--sl-input-border-color);
|
41 | }
|
42 |
|
43 | .input--standard:hover:not(.input--disabled) {
|
44 | background-color: var(--sl-input-background-color-hover);
|
45 | border-color: var(--sl-input-border-color-hover);
|
46 | }
|
47 |
|
48 | .input--standard.input--focused:not(.input--disabled) {
|
49 | background-color: var(--sl-input-background-color-focus);
|
50 | border-color: var(--sl-input-border-color-focus);
|
51 | box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
|
52 | }
|
53 |
|
54 | .input--standard.input--focused:not(.input--disabled) .input__control {
|
55 | color: var(--sl-input-color-focus);
|
56 | }
|
57 |
|
58 | .input--standard.input--disabled {
|
59 | background-color: var(--sl-input-background-color-disabled);
|
60 | border-color: var(--sl-input-border-color-disabled);
|
61 | opacity: 0.5;
|
62 | cursor: not-allowed;
|
63 | }
|
64 |
|
65 | .input--standard.input--disabled .input__control {
|
66 | color: var(--sl-input-color-disabled);
|
67 | }
|
68 |
|
69 | .input--standard.input--disabled .input__control::placeholder {
|
70 | color: var(--sl-input-placeholder-color-disabled);
|
71 | }
|
72 |
|
73 | /* Filled inputs */
|
74 | .input--filled {
|
75 | border: none;
|
76 | background-color: var(--sl-input-filled-background-color);
|
77 | color: var(--sl-input-color);
|
78 | }
|
79 |
|
80 | .input--filled:hover:not(.input--disabled) {
|
81 | background-color: var(--sl-input-filled-background-color-hover);
|
82 | }
|
83 |
|
84 | .input--filled.input--focused:not(.input--disabled) {
|
85 | background-color: var(--sl-input-filled-background-color-focus);
|
86 | outline: var(--sl-focus-ring);
|
87 | outline-offset: var(--sl-focus-ring-offset);
|
88 | }
|
89 |
|
90 | .input--filled.input--disabled {
|
91 | background-color: var(--sl-input-filled-background-color-disabled);
|
92 | opacity: 0.5;
|
93 | cursor: not-allowed;
|
94 | }
|
95 |
|
96 | .input__control {
|
97 | flex: 1 1 auto;
|
98 | font-family: inherit;
|
99 | font-size: inherit;
|
100 | font-weight: inherit;
|
101 | min-width: 0;
|
102 | height: 100%;
|
103 | color: var(--sl-input-color);
|
104 | border: none;
|
105 | background: none;
|
106 | box-shadow: none;
|
107 | padding: 0;
|
108 | margin: 0;
|
109 | cursor: inherit;
|
110 | -webkit-appearance: none;
|
111 | }
|
112 |
|
113 | .input__control::-webkit-search-decoration,
|
114 | .input__control::-webkit-search-cancel-button,
|
115 | .input__control::-webkit-search-results-button,
|
116 | .input__control::-webkit-search-results-decoration {
|
117 | -webkit-appearance: none;
|
118 | }
|
119 |
|
120 | .input__control:-webkit-autofill,
|
121 | .input__control:-webkit-autofill:hover,
|
122 | .input__control:-webkit-autofill:focus,
|
123 | .input__control:-webkit-autofill:active {
|
124 | box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-background-color-hover) inset !important;
|
125 | -webkit-text-fill-color: var(--sl-color-primary-500);
|
126 | caret-color: var(--sl-input-color);
|
127 | }
|
128 |
|
129 | .input--filled .input__control:-webkit-autofill,
|
130 | .input--filled .input__control:-webkit-autofill:hover,
|
131 | .input--filled .input__control:-webkit-autofill:focus,
|
132 | .input--filled .input__control:-webkit-autofill:active {
|
133 | box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-filled-background-color) inset !important;
|
134 | }
|
135 |
|
136 | .input__control::placeholder {
|
137 | color: var(--sl-input-placeholder-color);
|
138 | user-select: none;
|
139 | }
|
140 |
|
141 | .input:hover:not(.input--disabled) .input__control {
|
142 | color: var(--sl-input-color-hover);
|
143 | }
|
144 |
|
145 | .input__control:focus {
|
146 | outline: none;
|
147 | }
|
148 |
|
149 | .input__prefix,
|
150 | .input__suffix {
|
151 | display: inline-flex;
|
152 | flex: 0 0 auto;
|
153 | align-items: center;
|
154 | cursor: default;
|
155 | }
|
156 |
|
157 | .input__prefix ::slotted(sl-icon),
|
158 | .input__suffix ::slotted(sl-icon) {
|
159 | color: var(--sl-input-icon-color);
|
160 | }
|
161 |
|
162 | /*
|
163 | * Size modifiers
|
164 | */
|
165 |
|
166 | .input--small {
|
167 | border-radius: var(--sl-input-border-radius-small);
|
168 | font-size: var(--sl-input-font-size-small);
|
169 | height: var(--sl-input-height-small);
|
170 | }
|
171 |
|
172 | .input--small .input__control {
|
173 | height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
|
174 | padding: 0 var(--sl-input-spacing-small);
|
175 | }
|
176 |
|
177 | .input--small .input__clear,
|
178 | .input--small .input__password-toggle {
|
179 | width: calc(1em + var(--sl-input-spacing-small) * 2);
|
180 | }
|
181 |
|
182 | .input--small .input__prefix ::slotted(*) {
|
183 | padding-inline-start: var(--sl-input-spacing-small);
|
184 | }
|
185 |
|
186 | .input--small .input__suffix ::slotted(*) {
|
187 | padding-inline-end: var(--sl-input-spacing-small);
|
188 | }
|
189 |
|
190 | .input--medium {
|
191 | border-radius: var(--sl-input-border-radius-medium);
|
192 | font-size: var(--sl-input-font-size-medium);
|
193 | height: var(--sl-input-height-medium);
|
194 | }
|
195 |
|
196 | .input--medium .input__control {
|
197 | height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
|
198 | padding: 0 var(--sl-input-spacing-medium);
|
199 | }
|
200 |
|
201 | .input--medium .input__clear,
|
202 | .input--medium .input__password-toggle {
|
203 | width: calc(1em + var(--sl-input-spacing-medium) * 2);
|
204 | }
|
205 |
|
206 | .input--medium .input__prefix ::slotted(*) {
|
207 | padding-inline-start: var(--sl-input-spacing-medium);
|
208 | }
|
209 |
|
210 | .input--medium .input__suffix ::slotted(*) {
|
211 | padding-inline-end: var(--sl-input-spacing-medium);
|
212 | }
|
213 |
|
214 | .input--large {
|
215 | border-radius: var(--sl-input-border-radius-large);
|
216 | font-size: var(--sl-input-font-size-large);
|
217 | height: var(--sl-input-height-large);
|
218 | }
|
219 |
|
220 | .input--large .input__control {
|
221 | height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
|
222 | padding: 0 var(--sl-input-spacing-large);
|
223 | }
|
224 |
|
225 | .input--large .input__clear,
|
226 | .input--large .input__password-toggle {
|
227 | width: calc(1em + var(--sl-input-spacing-large) * 2);
|
228 | }
|
229 |
|
230 | .input--large .input__prefix ::slotted(*) {
|
231 | padding-inline-start: var(--sl-input-spacing-large);
|
232 | }
|
233 |
|
234 | .input--large .input__suffix ::slotted(*) {
|
235 | padding-inline-end: var(--sl-input-spacing-large);
|
236 | }
|
237 |
|
238 | /*
|
239 | * Pill modifier
|
240 | */
|
241 |
|
242 | .input--pill.input--small {
|
243 | border-radius: var(--sl-input-height-small);
|
244 | }
|
245 |
|
246 | .input--pill.input--medium {
|
247 | border-radius: var(--sl-input-height-medium);
|
248 | }
|
249 |
|
250 | .input--pill.input--large {
|
251 | border-radius: var(--sl-input-height-large);
|
252 | }
|
253 |
|
254 | /*
|
255 | * Clearable + Password Toggle
|
256 | */
|
257 |
|
258 | .input__clear,
|
259 | .input__password-toggle {
|
260 | display: inline-flex;
|
261 | align-items: center;
|
262 | justify-content: center;
|
263 | font-size: inherit;
|
264 | color: var(--sl-input-icon-color);
|
265 | border: none;
|
266 | background: none;
|
267 | padding: 0;
|
268 | transition: var(--sl-transition-fast) color;
|
269 | cursor: pointer;
|
270 | }
|
271 |
|
272 | .input__clear:hover,
|
273 | .input__password-toggle:hover {
|
274 | color: var(--sl-input-icon-color-hover);
|
275 | }
|
276 |
|
277 | .input__clear:focus,
|
278 | .input__password-toggle:focus {
|
279 | outline: none;
|
280 | }
|
281 |
|
282 | .input--empty .input__clear {
|
283 | visibility: hidden;
|
284 | }
|
285 |
|
286 | /* Don't show the browser's password toggle in Edge */
|
287 | ::-ms-reveal {
|
288 | display: none;
|
289 | }
|
290 |
|
291 | /* Hide Firefox's clear button on date and time inputs */
|
292 | .input--is-firefox input[type='date'],
|
293 | .input--is-firefox input[type='time'] {
|
294 | clip-path: inset(0 2em 0 0);
|
295 | }
|
296 |
|
297 | /* Hide the built-in number spinner */
|
298 | .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
|
299 | .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
|
300 | -webkit-appearance: none;
|
301 | display: none;
|
302 | }
|
303 |
|
304 | .input--no-spin-buttons input[type='number'] {
|
305 | -moz-appearance: textfield;
|
306 | }
|
307 | `;
|
308 |
|
309 | export {
|
310 | input_styles_default
|
311 | };
|