@greghowe79/the-lib 1.1.0 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/components/input/input.qwik.cjs +59 -45
  2. package/lib/components/input/input.qwik.mjs +59 -45
  3. package/lib/components/input/styles.css.qwik.cjs +1 -1
  4. package/lib/components/input/styles.css.qwik.mjs +1 -1
  5. package/package.json +1 -1
package/lib/components/input/input.qwik.cjs CHANGED
@@ -88,31 +88,38 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
88
88
  })
89
89
  ]
90
90
  })
91
- }) : type === "tel" ? /* @__PURE__ */ jsxRuntime.jsx("label", {
91
+ }) : type === "tel" ? /* @__PURE__ */ jsxRuntime.jsxs("label", {
92
92
  class: `input-label ${bgLight ? "bg_light" : ""}`,
93
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
94
- class: "input-wrapper",
95
- children: [
96
- /* @__PURE__ */ jsxRuntime.jsx("span", {
97
- class: "input-icon",
98
- "aria-hidden": "true",
99
- children: prefix
100
- }),
101
- /* @__PURE__ */ jsxRuntime.jsx("input", {
102
- id,
103
- type,
104
- inputMode: "tel",
105
- pattern: "[0-9]*",
106
- class: `input ${showError.value ? "error" : ""}`,
107
- placeholder,
108
- "bind:value": value,
109
- onInput$: inputHandler,
110
- onBlur$: inputHandler,
111
- maxLength: 14,
112
- required
113
- })
114
- ]
115
- })
93
+ for: id,
94
+ children: [
95
+ label && /* @__PURE__ */ jsxRuntime.jsx("span", {
96
+ class: "sr-only",
97
+ children: label
98
+ }),
99
+ /* @__PURE__ */ jsxRuntime.jsxs("div", {
100
+ class: "input-wrapper",
101
+ children: [
102
+ /* @__PURE__ */ jsxRuntime.jsx("span", {
103
+ class: "input-icon",
104
+ "aria-hidden": "true",
105
+ children: prefix
106
+ }),
107
+ /* @__PURE__ */ jsxRuntime.jsx("input", {
108
+ id,
109
+ type,
110
+ inputMode: "tel",
111
+ pattern: "[0-9]*",
112
+ class: `input ${showError.value ? "error" : ""}`,
113
+ placeholder,
114
+ "bind:value": value,
115
+ onInput$: inputHandler,
116
+ onBlur$: inputHandler,
117
+ maxLength: 14,
118
+ required
119
+ })
120
+ ]
121
+ })
122
+ ]
116
123
  }) : type === "radio" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
117
124
  children: [
118
125
  /* @__PURE__ */ jsxRuntime.jsx("input", {
@@ -132,28 +139,35 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
132
139
  children: label
133
140
  })
134
141
  ]
135
- }) : /* @__PURE__ */ jsxRuntime.jsx("label", {
142
+ }) : /* @__PURE__ */ jsxRuntime.jsxs("label", {
136
143
  class: `input-label ${bgLight ? "bg_light" : ""}`,
137
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
138
- class: icon ? "input-wrapper" : "no_icon",
139
- children: [
140
- icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
141
- class: "input-icon",
142
- "aria-hidden": "true",
143
- children: typeof icon === "function" ? icon({}, null, 0) : icon
144
- }),
145
- /* @__PURE__ */ jsxRuntime.jsx("input", {
146
- id,
147
- type,
148
- class: `input ${showError.value ? "error" : ""}`,
149
- placeholder,
150
- "bind:value": value,
151
- onInput$: inputHandler,
152
- onBlur$: inputHandler,
153
- required
154
- })
155
- ]
156
- })
144
+ for: id,
145
+ children: [
146
+ label && /* @__PURE__ */ jsxRuntime.jsx("span", {
147
+ class: "sr-only",
148
+ children: label
149
+ }),
150
+ /* @__PURE__ */ jsxRuntime.jsxs("div", {
151
+ class: icon ? "input-wrapper" : "no_icon",
152
+ children: [
153
+ icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
154
+ class: "input-icon",
155
+ "aria-hidden": "true",
156
+ children: typeof icon === "function" ? icon({}, null, 0) : icon
157
+ }),
158
+ /* @__PURE__ */ jsxRuntime.jsx("input", {
159
+ id,
160
+ type,
161
+ class: `input ${showError.value ? "error" : ""}`,
162
+ placeholder,
163
+ "bind:value": value,
164
+ onInput$: inputHandler,
165
+ onBlur$: inputHandler,
166
+ required
167
+ })
168
+ ]
169
+ })
170
+ ]
157
171
  }),
158
172
  showError.value && /* @__PURE__ */ jsxRuntime.jsx("div", {
159
173
  class: "error-message",
package/lib/components/input/input.qwik.mjs CHANGED
@@ -86,31 +86,38 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
86
86
  })
87
87
  ]
88
88
  })
89
- }) : type === "tel" ? /* @__PURE__ */ jsx("label", {
89
+ }) : type === "tel" ? /* @__PURE__ */ jsxs("label", {
90
90
  class: `input-label ${bgLight ? "bg_light" : ""}`,
91
- children: /* @__PURE__ */ jsxs("div", {
92
- class: "input-wrapper",
93
- children: [
94
- /* @__PURE__ */ jsx("span", {
95
- class: "input-icon",
96
- "aria-hidden": "true",
97
- children: prefix
98
- }),
99
- /* @__PURE__ */ jsx("input", {
100
- id,
101
- type,
102
- inputMode: "tel",
103
- pattern: "[0-9]*",
104
- class: `input ${showError.value ? "error" : ""}`,
105
- placeholder,
106
- "bind:value": value,
107
- onInput$: inputHandler,
108
- onBlur$: inputHandler,
109
- maxLength: 14,
110
- required
111
- })
112
- ]
113
- })
91
+ for: id,
92
+ children: [
93
+ label && /* @__PURE__ */ jsx("span", {
94
+ class: "sr-only",
95
+ children: label
96
+ }),
97
+ /* @__PURE__ */ jsxs("div", {
98
+ class: "input-wrapper",
99
+ children: [
100
+ /* @__PURE__ */ jsx("span", {
101
+ class: "input-icon",
102
+ "aria-hidden": "true",
103
+ children: prefix
104
+ }),
105
+ /* @__PURE__ */ jsx("input", {
106
+ id,
107
+ type,
108
+ inputMode: "tel",
109
+ pattern: "[0-9]*",
110
+ class: `input ${showError.value ? "error" : ""}`,
111
+ placeholder,
112
+ "bind:value": value,
113
+ onInput$: inputHandler,
114
+ onBlur$: inputHandler,
115
+ maxLength: 14,
116
+ required
117
+ })
118
+ ]
119
+ })
120
+ ]
114
121
  }) : type === "radio" ? /* @__PURE__ */ jsxs(Fragment, {
115
122
  children: [
116
123
  /* @__PURE__ */ jsx("input", {
@@ -130,28 +137,35 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
130
137
  children: label
131
138
  })
132
139
  ]
133
- }) : /* @__PURE__ */ jsx("label", {
140
+ }) : /* @__PURE__ */ jsxs("label", {
134
141
  class: `input-label ${bgLight ? "bg_light" : ""}`,
135
- children: /* @__PURE__ */ jsxs("div", {
136
- class: icon ? "input-wrapper" : "no_icon",
137
- children: [
138
- icon && /* @__PURE__ */ jsx("span", {
139
- class: "input-icon",
140
- "aria-hidden": "true",
141
- children: typeof icon === "function" ? icon({}, null, 0) : icon
142
- }),
143
- /* @__PURE__ */ jsx("input", {
144
- id,
145
- type,
146
- class: `input ${showError.value ? "error" : ""}`,
147
- placeholder,
148
- "bind:value": value,
149
- onInput$: inputHandler,
150
- onBlur$: inputHandler,
151
- required
152
- })
153
- ]
154
- })
142
+ for: id,
143
+ children: [
144
+ label && /* @__PURE__ */ jsx("span", {
145
+ class: "sr-only",
146
+ children: label
147
+ }),
148
+ /* @__PURE__ */ jsxs("div", {
149
+ class: icon ? "input-wrapper" : "no_icon",
150
+ children: [
151
+ icon && /* @__PURE__ */ jsx("span", {
152
+ class: "input-icon",
153
+ "aria-hidden": "true",
154
+ children: typeof icon === "function" ? icon({}, null, 0) : icon
155
+ }),
156
+ /* @__PURE__ */ jsx("input", {
157
+ id,
158
+ type,
159
+ class: `input ${showError.value ? "error" : ""}`,
160
+ placeholder,
161
+ "bind:value": value,
162
+ onInput$: inputHandler,
163
+ onBlur$: inputHandler,
164
+ required
165
+ })
166
+ ]
167
+ })
168
+ ]
155
169
  }),
156
170
  showError.value && /* @__PURE__ */ jsx("div", {
157
171
  class: "error-message",
package/lib/components/input/styles.css.qwik.cjs CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
- const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.29412rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n background: transparent;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.input-label {\r\n border-radius: 0.75rem;\r\n transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.75rem 0 0 0.75rem;\r\n height: 3.29412rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.29412rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.75rem 0.75rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n width: 100%;\r\n}\r\n";
2
+ const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.29412rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n /* background: transparent; */\r\n background: inherit;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.input-label {\r\n border-radius: 0.75rem;\r\n transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.75rem 0 0 0.75rem;\r\n height: 3.29412rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.29412rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.75rem 0.75rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n width: 100%;\r\n}\r\n";
3
3
  module.exports = styles;
package/lib/components/input/styles.css.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.29412rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n background: transparent;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.input-label {\r\n border-radius: 0.75rem;\r\n transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.75rem 0 0 0.75rem;\r\n height: 3.29412rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.29412rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.75rem 0.75rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n width: 100%;\r\n}\r\n";
1
+ const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.29412rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n /* background: transparent; */\r\n background: inherit;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.input-label {\r\n border-radius: 0.75rem;\r\n transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.75rem 0 0 0.75rem;\r\n height: 3.29412rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.29412rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.75rem 0.75rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n width: 100%;\r\n}\r\n";
2
2
  export {
3
3
  styles as default
4
4
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "1.1.0",
3
+ "version": "1.1.2",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",