@greghowe79/the-lib 2.13.1 → 2.13.3
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.
- package/lib/components/button/button.qwik.cjs +1 -1
- package/lib/components/button/button.qwik.mjs +1 -1
- package/lib/components/button/button.utils.qwik.cjs +2 -1
- package/lib/components/button/button.utils.qwik.mjs +2 -1
- package/lib/components/input/input.qwik.cjs +18 -10
- package/lib/components/input/input.qwik.mjs +18 -10
- package/lib/components/navigationmenu/styles.css.qwik.cjs +1 -1
- package/lib/components/navigationmenu/styles.css.qwik.mjs +1 -1
- package/lib/components/text_area/text_area.qwik.cjs +13 -4
- package/lib/components/text_area/text_area.qwik.mjs +13 -4
- package/lib-types/components/button/button.d.ts +1 -0
- package/lib-types/components/input/input.d.ts +1 -1
- package/lib-types/components/text_area/text_area.d.ts +3 -2
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ const button_utils = require("./button.utils.qwik.cjs");
|
|
|
8
8
|
const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false, customColors }) => {
|
|
9
9
|
qwik.useStylesScoped$(styles);
|
|
10
10
|
const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
|
|
11
|
-
const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border || customColors.padding || customColors.width);
|
|
11
|
+
const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border || customColors.padding || customColors.width || customColors.height);
|
|
12
12
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
13
13
|
children: [
|
|
14
14
|
hasCustomStyles && /* @__PURE__ */ jsxRuntime.jsx("style", {
|
|
@@ -6,7 +6,7 @@ import { generateCustomCSS } from "./button.utils.qwik.mjs";
|
|
|
6
6
|
const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false, customColors }) => {
|
|
7
7
|
useStylesScoped$(styles);
|
|
8
8
|
const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
|
|
9
|
-
const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border || customColors.padding || customColors.width);
|
|
9
|
+
const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border || customColors.padding || customColors.width || customColors.height);
|
|
10
10
|
return /* @__PURE__ */ jsxs(Fragment, {
|
|
11
11
|
children: [
|
|
12
12
|
hasCustomStyles && /* @__PURE__ */ jsx("style", {
|
|
@@ -12,7 +12,8 @@ function generateCustomCSS(id, colors) {
|
|
|
12
12
|
colors.text && `color: ${colors.text} !important;`,
|
|
13
13
|
colors.border && `border: 2px solid ${colors.border} !important;`,
|
|
14
14
|
colors.padding && `padding: ${colors.padding} !important;`,
|
|
15
|
-
colors.width && `width: ${colors.width} !important
|
|
15
|
+
colors.width && `width: ${colors.width} !important;`,
|
|
16
|
+
colors.height && `height: ${colors.height} !important;`
|
|
16
17
|
].filter(Boolean).join("\n");
|
|
17
18
|
const hoverBg = colors.hoverBg || colors.bg;
|
|
18
19
|
const hoverText = colors.hoverText || colors.text;
|
|
@@ -10,7 +10,8 @@ function generateCustomCSS(id, colors) {
|
|
|
10
10
|
colors.text && `color: ${colors.text} !important;`,
|
|
11
11
|
colors.border && `border: 2px solid ${colors.border} !important;`,
|
|
12
12
|
colors.padding && `padding: ${colors.padding} !important;`,
|
|
13
|
-
colors.width && `width: ${colors.width} !important
|
|
13
|
+
colors.width && `width: ${colors.width} !important;`,
|
|
14
|
+
colors.height && `height: ${colors.height} !important;`
|
|
14
15
|
].filter(Boolean).join("\n");
|
|
15
16
|
const hoverBg = colors.hoverBg || colors.bg;
|
|
16
17
|
const hoverText = colors.hoverText || colors.text;
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
|
|
4
4
|
const qwik = require("@builder.io/qwik");
|
|
5
5
|
const styles = require("./styles.css.qwik.cjs");
|
|
6
|
+
const isSignal = (v) => v !== null && typeof v === "object" && "value" in v;
|
|
6
7
|
const displayLocalImage = qwik.$((file, imageUrl) => {
|
|
7
8
|
const allowedExtensions = [
|
|
8
9
|
".jpg",
|
|
@@ -30,43 +31,45 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
30
31
|
const internalError = qwik.useSignal(null);
|
|
31
32
|
const isPasswordVisible = qwik.useSignal(false);
|
|
32
33
|
const showError = error ?? internalError;
|
|
34
|
+
const valueIsSignal = isSignal(value);
|
|
35
|
+
const resolvedValue = valueIsSignal ? value.value : value ?? "";
|
|
33
36
|
const togglePasswordVisibility = qwik.$(() => {
|
|
34
37
|
isPasswordVisible.value = !isPasswordVisible.value;
|
|
35
38
|
});
|
|
36
39
|
const inputHandler = qwik.$(async (_, elem) => {
|
|
37
40
|
if (type === "url" && _.type === "blur" && lowercaseOnBlur) {
|
|
38
41
|
elem.value = elem.value.toLowerCase();
|
|
39
|
-
if (
|
|
42
|
+
if (valueIsSignal) value.value = elem.value.toLowerCase();
|
|
40
43
|
}
|
|
41
44
|
if (type === "number") {
|
|
42
|
-
if (
|
|
45
|
+
if (valueIsSignal) value.value = elem.value;
|
|
43
46
|
if (!/^\d+$/.test(elem.value)) {
|
|
44
|
-
if (
|
|
47
|
+
if (valueIsSignal) {
|
|
45
48
|
elem.value = value.value;
|
|
46
49
|
}
|
|
47
50
|
return;
|
|
48
51
|
}
|
|
49
52
|
if (elem.value.length > 1 && elem.value.startsWith("0")) {
|
|
50
53
|
elem.value = elem.value.slice(0, -1);
|
|
51
|
-
if (
|
|
54
|
+
if (valueIsSignal) value.value = elem.value;
|
|
52
55
|
return;
|
|
53
56
|
}
|
|
54
57
|
const num = parseInt(elem.value, 10);
|
|
55
58
|
if (!isNaN(num) && num > 100) {
|
|
56
59
|
elem.value = elem.value.slice(0, -1);
|
|
57
|
-
if (
|
|
60
|
+
if (valueIsSignal) value.value = elem.value;
|
|
58
61
|
return;
|
|
59
62
|
}
|
|
60
63
|
}
|
|
61
64
|
if (type === "tel") {
|
|
62
65
|
if (!/^[0-9]*$/.test(elem.value)) {
|
|
63
|
-
if (
|
|
66
|
+
if (valueIsSignal) {
|
|
64
67
|
elem.value = value.value;
|
|
65
68
|
}
|
|
66
69
|
return;
|
|
67
70
|
}
|
|
68
71
|
}
|
|
69
|
-
if (
|
|
72
|
+
if (valueIsSignal) value.value = elem.value;
|
|
70
73
|
if (onInput$ && _.type === "input") {
|
|
71
74
|
await onInput$(_, elem);
|
|
72
75
|
}
|
|
@@ -76,6 +79,11 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
76
79
|
}
|
|
77
80
|
});
|
|
78
81
|
const effectiveType = type === "password" && isPasswordVisible.value ? "text" : type;
|
|
82
|
+
const inputBindProps = valueIsSignal ? {
|
|
83
|
+
"bind:value": value
|
|
84
|
+
} : {
|
|
85
|
+
value: resolvedValue
|
|
86
|
+
};
|
|
79
87
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
80
88
|
class: "input-container",
|
|
81
89
|
children: [
|
|
@@ -140,7 +148,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
140
148
|
pattern: "[0-9]*",
|
|
141
149
|
class: `input ${showError.value ? "error" : ""}`,
|
|
142
150
|
placeholder,
|
|
143
|
-
|
|
151
|
+
...inputBindProps,
|
|
144
152
|
onInput$: inputHandler,
|
|
145
153
|
onBlur$: inputHandler,
|
|
146
154
|
maxLength: 14,
|
|
@@ -191,7 +199,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
191
199
|
type: effectiveType,
|
|
192
200
|
class: `input ${showError.value ? "error" : ""}`,
|
|
193
201
|
placeholder,
|
|
194
|
-
|
|
202
|
+
...inputBindProps,
|
|
195
203
|
onInput$: inputHandler,
|
|
196
204
|
onBlur$: inputHandler,
|
|
197
205
|
required,
|
|
@@ -229,7 +237,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
229
237
|
type,
|
|
230
238
|
class: `input ${showError.value ? "error" : ""}`,
|
|
231
239
|
placeholder,
|
|
232
|
-
|
|
240
|
+
...inputBindProps,
|
|
233
241
|
onInput$: inputHandler,
|
|
234
242
|
onBlur$: inputHandler,
|
|
235
243
|
required,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from "@builder.io/qwik/jsx-runtime";
|
|
2
2
|
import { $, noSerialize, component$, useStylesScoped$, useSignal } from "@builder.io/qwik";
|
|
3
3
|
import styles from "./styles.css.qwik.mjs";
|
|
4
|
+
const isSignal = (v) => v !== null && typeof v === "object" && "value" in v;
|
|
4
5
|
const displayLocalImage = $((file, imageUrl) => {
|
|
5
6
|
const allowedExtensions = [
|
|
6
7
|
".jpg",
|
|
@@ -28,43 +29,45 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
28
29
|
const internalError = useSignal(null);
|
|
29
30
|
const isPasswordVisible = useSignal(false);
|
|
30
31
|
const showError = error ?? internalError;
|
|
32
|
+
const valueIsSignal = isSignal(value);
|
|
33
|
+
const resolvedValue = valueIsSignal ? value.value : value ?? "";
|
|
31
34
|
const togglePasswordVisibility = $(() => {
|
|
32
35
|
isPasswordVisible.value = !isPasswordVisible.value;
|
|
33
36
|
});
|
|
34
37
|
const inputHandler = $(async (_, elem) => {
|
|
35
38
|
if (type === "url" && _.type === "blur" && lowercaseOnBlur) {
|
|
36
39
|
elem.value = elem.value.toLowerCase();
|
|
37
|
-
if (
|
|
40
|
+
if (valueIsSignal) value.value = elem.value.toLowerCase();
|
|
38
41
|
}
|
|
39
42
|
if (type === "number") {
|
|
40
|
-
if (
|
|
43
|
+
if (valueIsSignal) value.value = elem.value;
|
|
41
44
|
if (!/^\d+$/.test(elem.value)) {
|
|
42
|
-
if (
|
|
45
|
+
if (valueIsSignal) {
|
|
43
46
|
elem.value = value.value;
|
|
44
47
|
}
|
|
45
48
|
return;
|
|
46
49
|
}
|
|
47
50
|
if (elem.value.length > 1 && elem.value.startsWith("0")) {
|
|
48
51
|
elem.value = elem.value.slice(0, -1);
|
|
49
|
-
if (
|
|
52
|
+
if (valueIsSignal) value.value = elem.value;
|
|
50
53
|
return;
|
|
51
54
|
}
|
|
52
55
|
const num = parseInt(elem.value, 10);
|
|
53
56
|
if (!isNaN(num) && num > 100) {
|
|
54
57
|
elem.value = elem.value.slice(0, -1);
|
|
55
|
-
if (
|
|
58
|
+
if (valueIsSignal) value.value = elem.value;
|
|
56
59
|
return;
|
|
57
60
|
}
|
|
58
61
|
}
|
|
59
62
|
if (type === "tel") {
|
|
60
63
|
if (!/^[0-9]*$/.test(elem.value)) {
|
|
61
|
-
if (
|
|
64
|
+
if (valueIsSignal) {
|
|
62
65
|
elem.value = value.value;
|
|
63
66
|
}
|
|
64
67
|
return;
|
|
65
68
|
}
|
|
66
69
|
}
|
|
67
|
-
if (
|
|
70
|
+
if (valueIsSignal) value.value = elem.value;
|
|
68
71
|
if (onInput$ && _.type === "input") {
|
|
69
72
|
await onInput$(_, elem);
|
|
70
73
|
}
|
|
@@ -74,6 +77,11 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
74
77
|
}
|
|
75
78
|
});
|
|
76
79
|
const effectiveType = type === "password" && isPasswordVisible.value ? "text" : type;
|
|
80
|
+
const inputBindProps = valueIsSignal ? {
|
|
81
|
+
"bind:value": value
|
|
82
|
+
} : {
|
|
83
|
+
value: resolvedValue
|
|
84
|
+
};
|
|
77
85
|
return /* @__PURE__ */ jsxs("div", {
|
|
78
86
|
class: "input-container",
|
|
79
87
|
children: [
|
|
@@ -138,7 +146,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
138
146
|
pattern: "[0-9]*",
|
|
139
147
|
class: `input ${showError.value ? "error" : ""}`,
|
|
140
148
|
placeholder,
|
|
141
|
-
|
|
149
|
+
...inputBindProps,
|
|
142
150
|
onInput$: inputHandler,
|
|
143
151
|
onBlur$: inputHandler,
|
|
144
152
|
maxLength: 14,
|
|
@@ -189,7 +197,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
189
197
|
type: effectiveType,
|
|
190
198
|
class: `input ${showError.value ? "error" : ""}`,
|
|
191
199
|
placeholder,
|
|
192
|
-
|
|
200
|
+
...inputBindProps,
|
|
193
201
|
onInput$: inputHandler,
|
|
194
202
|
onBlur$: inputHandler,
|
|
195
203
|
required,
|
|
@@ -227,7 +235,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
227
235
|
type,
|
|
228
236
|
class: `input ${showError.value ? "error" : ""}`,
|
|
229
237
|
placeholder,
|
|
230
|
-
|
|
238
|
+
...inputBindProps,
|
|
231
239
|
onInput$: inputHandler,
|
|
232
240
|
onBlur$: inputHandler,
|
|
233
241
|
required,
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const styles = "/* .menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n.menu-right {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.menu-toggle {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n width: 25px;\r\n height: 3px;\r\n background-color: #333;\r\n border-radius: 2px;\r\n transition: all 0.3s ease;\r\n transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n.desktop-only {\r\n display: flex;\r\n}\r\n\r\n.mobile-only {\r\n display: none;\r\n}\r\n\r\n@media (max-width: 949px) {\r\n .menu {\r\n height: 5.75rem;\r\n }\r\n .menu-container {\r\n height: 100%;\r\n padding: 0;\r\n }\r\n\r\n .menu-toggle {\r\n display: flex;\r\n }\r\n\r\n .menu-left {\r\n justify-content: space-between;\r\n width: 100%;\r\n padding: 1rem;\r\n }\r\n\r\n .menu-list {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow-y: auto;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n position: fixed;\r\n top: 5.75rem;\r\n left: 0;\r\n right: 0;\r\n background-color: #fff;\r\n flex-direction: column;\r\n padding: 1rem;\r\n z-index: 999;\r\n height: calc(100vh - 5.75rem);\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 5.75rem);\r\n opacity: 1;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n }\r\n\r\n .desktop-only {\r\n display: none;\r\n }\r\n\r\n .mobile-only {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n width: 100%;\r\n }\r\n} */\r\n\r\n.menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n/* ── Layout ── */\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 0 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n\r\n.menu-logo {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-toolbar {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* ── Links ── */\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n/* ── Search ── */\r\n.search-link {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.5rem;\r\n color: #333;\r\n text-decoration: none;\r\n min-width:
|
|
2
|
+
const styles = "/* .menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n.menu-right {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.menu-toggle {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n width: 25px;\r\n height: 3px;\r\n background-color: #333;\r\n border-radius: 2px;\r\n transition: all 0.3s ease;\r\n transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n.desktop-only {\r\n display: flex;\r\n}\r\n\r\n.mobile-only {\r\n display: none;\r\n}\r\n\r\n@media (max-width: 949px) {\r\n .menu {\r\n height: 5.75rem;\r\n }\r\n .menu-container {\r\n height: 100%;\r\n padding: 0;\r\n }\r\n\r\n .menu-toggle {\r\n display: flex;\r\n }\r\n\r\n .menu-left {\r\n justify-content: space-between;\r\n width: 100%;\r\n padding: 1rem;\r\n }\r\n\r\n .menu-list {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow-y: auto;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n position: fixed;\r\n top: 5.75rem;\r\n left: 0;\r\n right: 0;\r\n background-color: #fff;\r\n flex-direction: column;\r\n padding: 1rem;\r\n z-index: 999;\r\n height: calc(100vh - 5.75rem);\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 5.75rem);\r\n opacity: 1;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n }\r\n\r\n .desktop-only {\r\n display: none;\r\n }\r\n\r\n .mobile-only {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n width: 100%;\r\n }\r\n} */\r\n\r\n.menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n/* ── Layout ── */\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 0 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n\r\n.menu-logo {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-toolbar {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* ── Links ── */\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n/* ── Search ── */\r\n.search-link {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.5rem;\r\n color: #333;\r\n text-decoration: none;\r\n min-width: 3rem;\r\n min-height: 3rem;\r\n}\r\n\r\n.search-link:hover {\r\n cursor: pointer;\r\n}\r\n\r\n.search-list-item {\r\n display: flex;\r\n}\r\n\r\n/* ── Hamburger button ── */\r\n.menu-toggle {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n width: 25px;\r\n height: 3px;\r\n background-color: #333;\r\n border-radius: 2px;\r\n transition: all 0.3s ease;\r\n transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n/* ── Visibility helpers ── */\r\n.desktop-only {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n}\r\n\r\n.mobile-only {\r\n display: none;\r\n}\r\n\r\n/* ── Mobile ── */\r\n@media (max-width: 949px) {\r\n .menu {\r\n height: 5.75rem;\r\n }\r\n\r\n .menu-container {\r\n height: 100%;\r\n padding: 0 1rem;\r\n }\r\n\r\n .menu-left {\r\n padding-left: 1rem;\r\n }\r\n\r\n .menu-toolbar {\r\n padding-right: 1rem;\r\n }\r\n\r\n .menu-toggle {\r\n display: flex;\r\n }\r\n\r\n .search-link {\r\n display: flex;\r\n }\r\n\r\n .search-list-item {\r\n display: none;\r\n }\r\n\r\n .menu-list {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow-y: auto;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n position: fixed;\r\n top: 5.75rem;\r\n left: 0;\r\n right: 0;\r\n background-color: #fff;\r\n flex-direction: column;\r\n padding: 1rem;\r\n z-index: 999;\r\n height: calc(100vh - 5.75rem);\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 5.75rem);\r\n opacity: 1;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n }\r\n\r\n .desktop-only {\r\n display: none;\r\n }\r\n\r\n .mobile-only {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n width: 100%;\r\n }\r\n}\r\n";
|
|
3
3
|
module.exports = styles;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const styles = "/* .menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n.menu-right {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.menu-toggle {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n width: 25px;\r\n height: 3px;\r\n background-color: #333;\r\n border-radius: 2px;\r\n transition: all 0.3s ease;\r\n transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n.desktop-only {\r\n display: flex;\r\n}\r\n\r\n.mobile-only {\r\n display: none;\r\n}\r\n\r\n@media (max-width: 949px) {\r\n .menu {\r\n height: 5.75rem;\r\n }\r\n .menu-container {\r\n height: 100%;\r\n padding: 0;\r\n }\r\n\r\n .menu-toggle {\r\n display: flex;\r\n }\r\n\r\n .menu-left {\r\n justify-content: space-between;\r\n width: 100%;\r\n padding: 1rem;\r\n }\r\n\r\n .menu-list {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow-y: auto;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n position: fixed;\r\n top: 5.75rem;\r\n left: 0;\r\n right: 0;\r\n background-color: #fff;\r\n flex-direction: column;\r\n padding: 1rem;\r\n z-index: 999;\r\n height: calc(100vh - 5.75rem);\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 5.75rem);\r\n opacity: 1;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n }\r\n\r\n .desktop-only {\r\n display: none;\r\n }\r\n\r\n .mobile-only {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n width: 100%;\r\n }\r\n} */\r\n\r\n.menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n/* ── Layout ── */\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 0 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n\r\n.menu-logo {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-toolbar {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* ── Links ── */\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n/* ── Search ── */\r\n.search-link {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.5rem;\r\n color: #333;\r\n text-decoration: none;\r\n min-width:
|
|
1
|
+
const styles = "/* .menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n.menu-right {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.menu-toggle {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n width: 25px;\r\n height: 3px;\r\n background-color: #333;\r\n border-radius: 2px;\r\n transition: all 0.3s ease;\r\n transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n.desktop-only {\r\n display: flex;\r\n}\r\n\r\n.mobile-only {\r\n display: none;\r\n}\r\n\r\n@media (max-width: 949px) {\r\n .menu {\r\n height: 5.75rem;\r\n }\r\n .menu-container {\r\n height: 100%;\r\n padding: 0;\r\n }\r\n\r\n .menu-toggle {\r\n display: flex;\r\n }\r\n\r\n .menu-left {\r\n justify-content: space-between;\r\n width: 100%;\r\n padding: 1rem;\r\n }\r\n\r\n .menu-list {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow-y: auto;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n position: fixed;\r\n top: 5.75rem;\r\n left: 0;\r\n right: 0;\r\n background-color: #fff;\r\n flex-direction: column;\r\n padding: 1rem;\r\n z-index: 999;\r\n height: calc(100vh - 5.75rem);\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 5.75rem);\r\n opacity: 1;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n }\r\n\r\n .desktop-only {\r\n display: none;\r\n }\r\n\r\n .mobile-only {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n width: 100%;\r\n }\r\n} */\r\n\r\n.menu {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: saturate(180%) blur(20px);\r\n -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n width: 100%;\r\n position: fixed;\r\n top: 0;\r\n z-index: 2;\r\n height: 5.75rem;\r\n}\r\n\r\n.menu-list.no-transition {\r\n transition: none !important;\r\n}\r\n\r\n.menu.open {\r\n background-color: rgba(255, 255, 255, 1);\r\n backdrop-filter: none;\r\n -webkit-backdrop-filter: none;\r\n box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n opacity: 0;\r\n}\r\n\r\n/* ── Layout ── */\r\n.menu-container {\r\n max-width: 75rem;\r\n padding: 0 1rem;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: 100%;\r\n}\r\n\r\n.menu-left {\r\n display: flex;\r\n align-items: center;\r\n gap: 2rem;\r\n height: 100%;\r\n}\r\n\r\n.menu-logo {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.menu-list {\r\n display: flex;\r\n list-style: none;\r\n gap: 1.5rem;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.menu-toolbar {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n flex-shrink: 0;\r\n}\r\n\r\n/* ── Links ── */\r\n.menu-link {\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n color: #333;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.active {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n display: inline-block;\r\n padding: 0.5rem 1rem;\r\n text-decoration: none;\r\n border-radius: 4px;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 500;\r\n transition:\r\n background-color 0.2s,\r\n color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n background-color: #f0f0f0;\r\n color: #333;\r\n}\r\n\r\n/* ── Search ── */\r\n.search-link {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.5rem;\r\n color: #333;\r\n text-decoration: none;\r\n min-width: 3rem;\r\n min-height: 3rem;\r\n}\r\n\r\n.search-link:hover {\r\n cursor: pointer;\r\n}\r\n\r\n.search-list-item {\r\n display: flex;\r\n}\r\n\r\n/* ── Hamburger button ── */\r\n.menu-toggle {\r\n display: none;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 5px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n width: 25px;\r\n height: 3px;\r\n background-color: #333;\r\n border-radius: 2px;\r\n transition: all 0.3s ease;\r\n transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n/* ── Visibility helpers ── */\r\n.desktop-only {\r\n display: flex;\r\n gap: 0.75rem;\r\n align-items: center;\r\n}\r\n\r\n.mobile-only {\r\n display: none;\r\n}\r\n\r\n/* ── Mobile ── */\r\n@media (max-width: 949px) {\r\n .menu {\r\n height: 5.75rem;\r\n }\r\n\r\n .menu-container {\r\n height: 100%;\r\n padding: 0 1rem;\r\n }\r\n\r\n .menu-left {\r\n padding-left: 1rem;\r\n }\r\n\r\n .menu-toolbar {\r\n padding-right: 1rem;\r\n }\r\n\r\n .menu-toggle {\r\n display: flex;\r\n }\r\n\r\n .search-link {\r\n display: flex;\r\n }\r\n\r\n .search-list-item {\r\n display: none;\r\n }\r\n\r\n .menu-list {\r\n max-height: 0;\r\n opacity: 0;\r\n overflow-y: auto;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n position: fixed;\r\n top: 5.75rem;\r\n left: 0;\r\n right: 0;\r\n background-color: #fff;\r\n flex-direction: column;\r\n padding: 1rem;\r\n z-index: 999;\r\n height: calc(100vh - 5.75rem);\r\n }\r\n\r\n .menu-list.open {\r\n max-height: calc(100vh - 5.75rem);\r\n opacity: 1;\r\n transition:\r\n max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n opacity 0.4s ease-in-out;\r\n }\r\n\r\n .desktop-only {\r\n display: none;\r\n }\r\n\r\n .mobile-only {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n margin-top: 1rem;\r\n width: 100%;\r\n }\r\n}\r\n";
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|
|
@@ -3,9 +3,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
|
|
4
4
|
const qwik = require("@builder.io/qwik");
|
|
5
5
|
const styles = require("./styles.css.qwik.cjs");
|
|
6
|
-
const
|
|
6
|
+
const isSignal = (v) => v !== null && typeof v === "object" && "value" in v;
|
|
7
|
+
const TextArea = qwik.component$(({ id, title, content, onInput$, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
|
|
7
8
|
qwik.useStylesScoped$(styles);
|
|
8
|
-
const
|
|
9
|
+
const contentIsSignal = isSignal(content);
|
|
10
|
+
const resolvedContent = contentIsSignal ? content.value : content ?? "";
|
|
11
|
+
const currentLength = resolvedContent.length;
|
|
12
|
+
const textareaBindProps = contentIsSignal ? {
|
|
13
|
+
"bind:value": content
|
|
14
|
+
} : {
|
|
15
|
+
value: resolvedContent
|
|
16
|
+
};
|
|
9
17
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
10
18
|
class: "text-area-container",
|
|
11
19
|
children: [
|
|
@@ -19,12 +27,13 @@ const TextArea = qwik.component$(({ id, title, content, required = false, placeh
|
|
|
19
27
|
name: "story",
|
|
20
28
|
rows: 5,
|
|
21
29
|
cols: 33,
|
|
22
|
-
|
|
30
|
+
...textareaBindProps,
|
|
31
|
+
onInput$: !contentIsSignal && onInput$ ? (e, el) => onInput$(e, el) : void 0,
|
|
23
32
|
required,
|
|
24
33
|
placeholder,
|
|
25
34
|
class: `text-area ${bgLight ? "bg_light" : ""}`,
|
|
26
35
|
maxLength,
|
|
27
|
-
children:
|
|
36
|
+
children: resolvedContent
|
|
28
37
|
}),
|
|
29
38
|
showCounter && maxLength && /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
30
39
|
class: `counter ${currentLength >= maxLength ? "counter-limit" : ""}`,
|
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
|
|
2
2
|
import { component$, useStylesScoped$ } from "@builder.io/qwik";
|
|
3
3
|
import styles from "./styles.css.qwik.mjs";
|
|
4
|
-
const
|
|
4
|
+
const isSignal = (v) => v !== null && typeof v === "object" && "value" in v;
|
|
5
|
+
const TextArea = component$(({ id, title, content, onInput$, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
|
|
5
6
|
useStylesScoped$(styles);
|
|
6
|
-
const
|
|
7
|
+
const contentIsSignal = isSignal(content);
|
|
8
|
+
const resolvedContent = contentIsSignal ? content.value : content ?? "";
|
|
9
|
+
const currentLength = resolvedContent.length;
|
|
10
|
+
const textareaBindProps = contentIsSignal ? {
|
|
11
|
+
"bind:value": content
|
|
12
|
+
} : {
|
|
13
|
+
value: resolvedContent
|
|
14
|
+
};
|
|
7
15
|
return /* @__PURE__ */ jsxs("div", {
|
|
8
16
|
class: "text-area-container",
|
|
9
17
|
children: [
|
|
@@ -17,12 +25,13 @@ const TextArea = component$(({ id, title, content, required = false, placeholder
|
|
|
17
25
|
name: "story",
|
|
18
26
|
rows: 5,
|
|
19
27
|
cols: 33,
|
|
20
|
-
|
|
28
|
+
...textareaBindProps,
|
|
29
|
+
onInput$: !contentIsSignal && onInput$ ? (e, el) => onInput$(e, el) : void 0,
|
|
21
30
|
required,
|
|
22
31
|
placeholder,
|
|
23
32
|
class: `text-area ${bgLight ? "bg_light" : ""}`,
|
|
24
33
|
maxLength,
|
|
25
|
-
children:
|
|
34
|
+
children: resolvedContent
|
|
26
35
|
}),
|
|
27
36
|
showCounter && maxLength && /* @__PURE__ */ jsxs("div", {
|
|
28
37
|
class: `counter ${currentLength >= maxLength ? "counter-limit" : ""}`,
|
|
@@ -4,7 +4,7 @@ export interface InputProps {
|
|
|
4
4
|
id: string;
|
|
5
5
|
type: InputType;
|
|
6
6
|
placeholder?: string;
|
|
7
|
-
value?: Signal<string
|
|
7
|
+
value?: Signal<string> | string;
|
|
8
8
|
error?: Signal<string | null>;
|
|
9
9
|
onValidate$?: QRL<(value: string) => Promise<string>>;
|
|
10
10
|
onInput$?: QRL<() => void> | QRL<(event: InputEvent, el: HTMLInputElement) => void>;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { Signal } from '@builder.io/qwik';
|
|
1
|
+
import { QRL, Signal } from '@builder.io/qwik';
|
|
2
2
|
export interface TextAreaProps {
|
|
3
3
|
id: string;
|
|
4
4
|
title?: string;
|
|
5
|
-
content: Signal<string
|
|
5
|
+
content: Signal<string> | string;
|
|
6
|
+
onInput$?: QRL<(event: InputEvent, el: HTMLTextAreaElement) => void>;
|
|
6
7
|
required?: boolean;
|
|
7
8
|
placeholder?: string;
|
|
8
9
|
bgLight?: boolean;
|