@galaxy-io/dls 1.5.18 → 1.6.1
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.
|
@@ -23,12 +23,18 @@ export interface AccordionProps {
|
|
|
23
23
|
header: string;
|
|
24
24
|
/** Secondary line under the header. */
|
|
25
25
|
subheader?: string;
|
|
26
|
-
/** Trailing content in the header — a count, a badge, a status. */
|
|
27
|
-
|
|
26
|
+
/** Trailing content in the header — a count, a badge, a status, an action. */
|
|
27
|
+
trailing?: React.ReactNode;
|
|
28
28
|
/** A number is px. */
|
|
29
29
|
borderRadius?: number | string;
|
|
30
30
|
/** Inset for the body. @default "12px" */
|
|
31
31
|
padding?: string | number;
|
|
32
|
+
/**
|
|
33
|
+
* Whether the panel can be toggled. When `false` the accordion is always
|
|
34
|
+
* open, the caret is hidden and the header is not interactive — `isOpen`,
|
|
35
|
+
* `isOpenInitial` and `onToggle` are ignored. @default true
|
|
36
|
+
*/
|
|
37
|
+
isCollapsible?: boolean;
|
|
32
38
|
/** Starting state in uncontrolled mode. Ignored once `isOpen` is passed. */
|
|
33
39
|
isOpenInitial?: boolean;
|
|
34
40
|
/** Controlled open state. Pass it together with `onToggle`. */
|
|
@@ -37,10 +43,12 @@ export interface AccordionProps {
|
|
|
37
43
|
onToggle?: () => void;
|
|
38
44
|
}
|
|
39
45
|
/**
|
|
40
|
-
* A
|
|
46
|
+
* A section with a persistent header and a collapsible body.
|
|
41
47
|
*
|
|
42
48
|
* Uncontrolled by default — it tracks its own state from `isOpenInitial`. Pass
|
|
43
|
-
* `isOpen` *and* `onToggle` together to drive it from outside instead.
|
|
49
|
+
* `isOpen` *and* `onToggle` together to drive it from outside instead. Pass
|
|
50
|
+
* `isCollapsible={false}` for a static, always-open section: the caret goes
|
|
51
|
+
* away and the header stops being a button.
|
|
44
52
|
*/
|
|
45
|
-
declare const Accordion: ({ children, variant, size, icon, header, subheader,
|
|
53
|
+
declare const Accordion: ({ children, variant, size, icon, header, subheader, trailing, borderRadius, padding, isCollapsible, isOpenInitial, isOpen: controlledIsOpen, onToggle: controlledOnToggle, }: PropsWithChildren<AccordionProps>) => React.JSX.Element;
|
|
46
54
|
export default Accordion;
|
|
@@ -9,7 +9,7 @@ import HorizontalDivider from "../dividers/HorizontalDivider.js";
|
|
|
9
9
|
/* empty css */
|
|
10
10
|
import { styled } from "@linaria/react";
|
|
11
11
|
import { match } from "ts-pattern";
|
|
12
|
-
import { useState } from "react";
|
|
12
|
+
import { useRef, useState } from "react";
|
|
13
13
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
14
14
|
import { CaretDownIcon } from "@phosphor-icons/react";
|
|
15
15
|
//#region src/accordion/Accordion.tsx
|
|
@@ -49,73 +49,109 @@ var AccordionWrapper = withTheme(/*#__PURE__*/ styled("div")({
|
|
|
49
49
|
var _exp5 = () => ({ $size }) => {
|
|
50
50
|
return match($size).with("SMALL", () => "8px").with("MEDIUM", () => "12px").with("LARGE", () => "16px").exhaustive();
|
|
51
51
|
};
|
|
52
|
-
var
|
|
52
|
+
var _exp6 = () => ({ $isCollapsible }) => $isCollapsible ? "pointer" : "default";
|
|
53
|
+
var AccordionHeader = withTheme(/*#__PURE__*/ styled("div")({
|
|
53
54
|
name: "AccordionHeader",
|
|
54
55
|
class: "a1gttren",
|
|
55
56
|
propsAsIs: false,
|
|
56
|
-
vars: {
|
|
57
|
+
vars: {
|
|
58
|
+
"a1gttren-0": [_exp5()],
|
|
59
|
+
"a1gttren-1": [_exp6()]
|
|
60
|
+
}
|
|
61
|
+
}));
|
|
62
|
+
/**
|
|
63
|
+
* The accessible toggle. Wraps only the leading content so a `trailing` action
|
|
64
|
+
* is never a button inside a button — the row above handles pointer clicks on
|
|
65
|
+
* the rest of the header (caret, padding) and forwards them here.
|
|
66
|
+
*/
|
|
67
|
+
var _exp7 = () => ({ $isCollapsible }) => $isCollapsible ? "pointer" : "default";
|
|
68
|
+
var AccordionToggle = withTheme(/*#__PURE__*/ styled("button")({
|
|
69
|
+
name: "AccordionToggle",
|
|
70
|
+
class: "ai1xw52",
|
|
71
|
+
propsAsIs: false,
|
|
72
|
+
vars: { "ai1xw52-0": [_exp7()] }
|
|
57
73
|
}));
|
|
58
|
-
var
|
|
74
|
+
var AccordionTrailing = /*#__PURE__*/ styled("div")({
|
|
75
|
+
name: "AccordionTrailing",
|
|
76
|
+
class: "a1f5gwwu",
|
|
77
|
+
propsAsIs: false
|
|
78
|
+
});
|
|
79
|
+
var _exp8 = () => ({ $isOpen }) => $isOpen ? "1fr" : "0fr";
|
|
59
80
|
var AccordionContent = withTheme(/*#__PURE__*/ styled("div")({
|
|
60
81
|
name: "AccordionContent",
|
|
61
|
-
class: "
|
|
82
|
+
class: "a1g9gu22",
|
|
62
83
|
propsAsIs: false,
|
|
63
|
-
vars: { "
|
|
84
|
+
vars: { "a1g9gu22-0": [_exp8()] }
|
|
64
85
|
}));
|
|
65
86
|
var AccordionContentInner = withTheme(/*#__PURE__*/ styled("div")({
|
|
66
87
|
name: "AccordionContentInner",
|
|
67
|
-
class: "
|
|
88
|
+
class: "a1xsnpfl",
|
|
68
89
|
propsAsIs: false
|
|
69
90
|
}));
|
|
70
91
|
/**
|
|
71
|
-
* A
|
|
92
|
+
* A section with a persistent header and a collapsible body.
|
|
72
93
|
*
|
|
73
94
|
* Uncontrolled by default — it tracks its own state from `isOpenInitial`. Pass
|
|
74
|
-
* `isOpen` *and* `onToggle` together to drive it from outside instead.
|
|
95
|
+
* `isOpen` *and* `onToggle` together to drive it from outside instead. Pass
|
|
96
|
+
* `isCollapsible={false}` for a static, always-open section: the caret goes
|
|
97
|
+
* away and the header stops being a button.
|
|
75
98
|
*/
|
|
76
|
-
var Accordion = ({ children, variant = "PRIMARY", size = "MEDIUM", icon, header, subheader,
|
|
99
|
+
var Accordion = ({ children, variant = "PRIMARY", size = "MEDIUM", icon, header, subheader, trailing, borderRadius, padding = "12px", isCollapsible = true, isOpenInitial = false, isOpen: controlledIsOpen, onToggle: controlledOnToggle }) => {
|
|
77
100
|
const [internalIsOpen, setInternalIsOpen] = useState(isOpenInitial);
|
|
101
|
+
const trailingRef = useRef(null);
|
|
78
102
|
const isControlled = controlledIsOpen !== void 0;
|
|
79
|
-
const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
|
|
103
|
+
const isOpen = !isCollapsible || (isControlled ? controlledIsOpen : internalIsOpen);
|
|
80
104
|
const handleToggle = () => {
|
|
105
|
+
if (!isCollapsible) return;
|
|
81
106
|
if (isControlled) controlledOnToggle?.();
|
|
82
107
|
else setInternalIsOpen((prev) => !prev);
|
|
83
108
|
};
|
|
109
|
+
const handleHeaderClick = (e) => {
|
|
110
|
+
if (trailingRef.current?.contains(e.target)) return;
|
|
111
|
+
handleToggle();
|
|
112
|
+
};
|
|
84
113
|
return /* @__PURE__ */ jsxs(AccordionWrapper, {
|
|
85
114
|
$borderRadius: borderRadius,
|
|
86
115
|
$variant: variant,
|
|
87
116
|
$isOpen: isOpen,
|
|
88
117
|
children: [
|
|
89
118
|
/* @__PURE__ */ jsxs(AccordionHeader, {
|
|
90
|
-
$
|
|
91
|
-
$variant: variant,
|
|
119
|
+
$isCollapsible: isCollapsible,
|
|
92
120
|
$size: size,
|
|
93
|
-
onClick:
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
121
|
+
onClick: isCollapsible ? handleHeaderClick : void 0,
|
|
122
|
+
children: [
|
|
123
|
+
/* @__PURE__ */ jsx(AccordionToggle, {
|
|
124
|
+
as: isCollapsible ? "button" : "div",
|
|
125
|
+
$isCollapsible: isCollapsible,
|
|
126
|
+
type: isCollapsible ? "button" : void 0,
|
|
127
|
+
"aria-expanded": isCollapsible ? isOpen : void 0,
|
|
128
|
+
children: /* @__PURE__ */ jsxs(FlexWrapper, {
|
|
129
|
+
alignItems: AlignItems.CENTER,
|
|
130
|
+
gap: 8,
|
|
131
|
+
children: [icon && /* @__PURE__ */ jsx(Icon, {
|
|
132
|
+
component: icon,
|
|
133
|
+
variant: isOpen ? IconVariant.PRIMARY : IconVariant.SECONDARY,
|
|
134
|
+
size: 16
|
|
135
|
+
}), /* @__PURE__ */ jsxs(FlexWrapper, {
|
|
136
|
+
direction: FlexDirection.COLUMN,
|
|
137
|
+
gap: 2,
|
|
138
|
+
children: [/* @__PURE__ */ jsx(Text, {
|
|
139
|
+
variant: isOpen ? TextVariant.PRIMARY : TextVariant.SECONDARY,
|
|
140
|
+
weight: TextWeight.MEDIUM,
|
|
141
|
+
children: header
|
|
142
|
+
}), subheader && /* @__PURE__ */ jsx(Text, {
|
|
143
|
+
size: TextSize.BODY_SM,
|
|
144
|
+
variant: isOpen ? TextVariant.SECONDARY : TextVariant.TERTIARY,
|
|
145
|
+
children: subheader
|
|
146
|
+
})]
|
|
147
|
+
})]
|
|
148
|
+
})
|
|
149
|
+
}),
|
|
150
|
+
trailing && /* @__PURE__ */ jsx(AccordionTrailing, {
|
|
151
|
+
ref: trailingRef,
|
|
152
|
+
children: trailing
|
|
153
|
+
}),
|
|
154
|
+
isCollapsible && /* @__PURE__ */ jsx(Rotate, {
|
|
119
155
|
isRotated: isOpen,
|
|
120
156
|
deg: -180,
|
|
121
157
|
children: /* @__PURE__ */ jsx(Icon, {
|
|
@@ -123,8 +159,8 @@ var Accordion = ({ children, variant = "PRIMARY", size = "MEDIUM", icon, header,
|
|
|
123
159
|
variant: isOpen ? IconVariant.PRIMARY : IconVariant.SECONDARY,
|
|
124
160
|
size: 12
|
|
125
161
|
})
|
|
126
|
-
})
|
|
127
|
-
|
|
162
|
+
})
|
|
163
|
+
]
|
|
128
164
|
}),
|
|
129
165
|
isOpen && /* @__PURE__ */ jsx(FlexItem, {
|
|
130
166
|
shrink: 0,
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
+
import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
|
|
1
2
|
import { InputSize, InputVariant } from "./Input";
|
|
2
3
|
export interface SwitcherInputItem {
|
|
3
4
|
/** Matched against `selectedId` to decide which segment is active. */
|
|
4
5
|
id: string;
|
|
5
6
|
label: string;
|
|
7
|
+
/** Phosphor icon *component* leading the label — pass `ListIcon`, not `<ListIcon />`. */
|
|
8
|
+
icon?: PhosphorIcon;
|
|
6
9
|
/** Called when this segment is clicked. Update `selectedId` yourself. */
|
|
7
10
|
onClick: () => void;
|
|
8
11
|
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { withTheme } from "../theme/GalaxyTheme.js";
|
|
2
2
|
import Text, { TextVariant, TextWeight } from "../text/Text.js";
|
|
3
|
-
import
|
|
3
|
+
import FlexItem from "../containers/FlexItem.js";
|
|
4
|
+
import Icon, { IconVariant } from "../icons/Icon.js";
|
|
5
|
+
import { InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputIconSize, getInputSurfaceColor, getInputTextSize } from "./Input.js";
|
|
4
6
|
/* empty css */
|
|
5
7
|
import { styled } from "@linaria/react";
|
|
6
8
|
import { match } from "ts-pattern";
|
|
7
|
-
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
10
|
//#region src/inputs/SwitcherInput.tsx
|
|
9
11
|
var _exp = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
|
|
10
12
|
var _exp2 = () => ({ theme, $variant }) => getInputBorderColor(theme, $variant);
|
|
@@ -24,10 +26,13 @@ var StyledSwitcherInput = withTheme(/*#__PURE__*/ styled("div")({
|
|
|
24
26
|
}
|
|
25
27
|
}));
|
|
26
28
|
var _exp5 = () => ({ $size }) => {
|
|
29
|
+
return match($size).with(InputSize.SMALL, () => "4px").with(InputSize.MEDIUM, () => "6px").with(InputSize.LARGE, () => "6px").exhaustive();
|
|
30
|
+
};
|
|
31
|
+
var _exp6 = () => ({ $size }) => {
|
|
27
32
|
return match($size).with(InputSize.SMALL, () => "2px 8px").with(InputSize.MEDIUM, () => "3px 10px").with(InputSize.LARGE, () => "5px 12px").exhaustive();
|
|
28
33
|
};
|
|
29
|
-
var
|
|
30
|
-
var
|
|
34
|
+
var _exp7 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.background.primaryAlt : "transparent";
|
|
35
|
+
var _exp8 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.border.primary : "transparent";
|
|
31
36
|
var StyledSwitcherInputItem = withTheme(/*#__PURE__*/ styled("div")({
|
|
32
37
|
name: "StyledSwitcherInputItem",
|
|
33
38
|
class: "s1pe4aqp",
|
|
@@ -35,7 +40,8 @@ var StyledSwitcherInputItem = withTheme(/*#__PURE__*/ styled("div")({
|
|
|
35
40
|
vars: {
|
|
36
41
|
"s1pe4aqp-0": [_exp5()],
|
|
37
42
|
"s1pe4aqp-1": [_exp6()],
|
|
38
|
-
"s1pe4aqp-2": [_exp7()]
|
|
43
|
+
"s1pe4aqp-2": [_exp7()],
|
|
44
|
+
"s1pe4aqp-3": [_exp8()]
|
|
39
45
|
}
|
|
40
46
|
}));
|
|
41
47
|
/**
|
|
@@ -46,18 +52,29 @@ var SwitcherInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM,
|
|
|
46
52
|
return /* @__PURE__ */ jsx(StyledSwitcherInput, {
|
|
47
53
|
$size: size,
|
|
48
54
|
$variant: variant,
|
|
49
|
-
children: items.map((item) =>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
size:
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
55
|
+
children: items.map((item) => {
|
|
56
|
+
const isSelected = item.id === selectedId;
|
|
57
|
+
return /* @__PURE__ */ jsxs(StyledSwitcherInputItem, {
|
|
58
|
+
onClick: item.onClick,
|
|
59
|
+
$isSelected: isSelected,
|
|
60
|
+
$size: size,
|
|
61
|
+
children: [item.icon && /* @__PURE__ */ jsx(FlexItem, {
|
|
62
|
+
shrink: 0,
|
|
63
|
+
grow: 0,
|
|
64
|
+
children: /* @__PURE__ */ jsx(Icon, {
|
|
65
|
+
component: item.icon,
|
|
66
|
+
size: getInputIconSize(size),
|
|
67
|
+
variant: isSelected ? IconVariant.PRIMARY_ALT : IconVariant.SECONDARY
|
|
68
|
+
})
|
|
69
|
+
}), /* @__PURE__ */ jsx(Text, {
|
|
70
|
+
size: getInputTextSize(size),
|
|
71
|
+
variant: isSelected ? TextVariant.PRIMARY_ALT : TextVariant.SECONDARY,
|
|
72
|
+
weight: isSelected ? TextWeight.MEDIUM : TextWeight.REGULAR,
|
|
73
|
+
cursor: "pointer",
|
|
74
|
+
children: item.label
|
|
75
|
+
})]
|
|
76
|
+
}, item.id);
|
|
77
|
+
})
|
|
61
78
|
});
|
|
62
79
|
};
|
|
63
80
|
//#endregion
|
package/dist/styles.css
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
.a1uic4p3{width:100%;background-color:var(--a1uic4p3-0);border:0.5px solid var(--a1uic4p3-1);border-radius:var(--a1uic4p3-2);overflow:hidden;overscroll-behavior:auto;}.a1uic4p3:hover{border-color:var(--a1uic4p3-3);}
|
|
2
|
-
.a1gttren{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;width:100%;padding:var(--a1gttren-0);background-color:transparent;cursor:
|
|
3
|
-
.ai1xw52{display:-ms-
|
|
4
|
-
.a1f5gwwu{
|
|
2
|
+
.a1gttren{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:8px;width:100%;padding:var(--a1gttren-0);background-color:transparent;cursor:var(--a1gttren-1);-webkit-transition:background-color 0.075s ease-in-out;transition:background-color 0.075s ease-in-out;}
|
|
3
|
+
.ai1xw52{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;padding:0;border:none;background-color:transparent;color:inherit;font:inherit;text-align:left;cursor:var(--ai1xw52-0);}
|
|
4
|
+
.a1f5gwwu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;cursor:default;}
|
|
5
|
+
.a1g9gu22{display:-ms-grid;display:grid;-ms-grid-rows:var(--a1g9gu22-0);grid-template-rows:var(--a1g9gu22-0);-webkit-transition:grid-template-rows 0.15s ease-in-out;transition:grid-template-rows 0.15s ease-in-out;}
|
|
6
|
+
.a1xsnpfl{overflow:hidden;overscroll-behavior:auto;}
|
|
5
7
|
.s1he36jx{position:var(--s1he36jx-0);display:var(--s1he36jx-1);-webkit-align-items:var(--s1he36jx-2);-webkit-box-align:var(--s1he36jx-2);-ms-flex-align:var(--s1he36jx-2);align-items:var(--s1he36jx-2);-webkit-box-pack:var(--s1he36jx-3);-ms-flex-pack:var(--s1he36jx-3);-webkit-justify-content:var(--s1he36jx-3);justify-content:var(--s1he36jx-3);-webkit-box-flex:var(--s1he36jx-4);-webkit-flex-grow:var(--s1he36jx-4);-ms-flex-positive:var(--s1he36jx-4);flex-grow:var(--s1he36jx-4);-webkit-flex-shrink:var(--s1he36jx-5);-ms-flex-negative:var(--s1he36jx-5);flex-shrink:var(--s1he36jx-5);-webkit-flex-basis:var(--s1he36jx-6);-ms-flex-preferred-size:var(--s1he36jx-6);flex-basis:var(--s1he36jx-6);width:var(--s1he36jx-7);height:var(--s1he36jx-8);min-width:var(--s1he36jx-9);max-width:var(--s1he36jx-10);min-height:var(--s1he36jx-11);max-height:var(--s1he36jx-12);overflow:var(--s1he36jx-13);white-space:var(--s1he36jx-14);text-overflow:var(--s1he36jx-15);padding:var(--s1he36jx-16);overscroll-behavior:auto;cursor:var(--s1he36jx-17);}
|
|
6
8
|
.s12krdms{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;-webkit-flex-direction:var(--s12krdms-0);-ms-flex-direction:var(--s12krdms-0);flex-direction:var(--s12krdms-0);-webkit-align-items:var(--s12krdms-1);-webkit-box-align:var(--s12krdms-1);-ms-flex-align:var(--s12krdms-1);align-items:var(--s12krdms-1);-webkit-box-pack:var(--s12krdms-2);-ms-flex-pack:var(--s12krdms-2);-webkit-justify-content:var(--s12krdms-2);justify-content:var(--s12krdms-2);gap:var(--s12krdms-3);-webkit-box-flex-wrap:var(--s12krdms-4);-webkit-flex-wrap:var(--s12krdms-4);-ms-flex-wrap:var(--s12krdms-4);flex-wrap:var(--s12krdms-4);-webkit-box-flex:var(--s12krdms-5);-webkit-flex-grow:var(--s12krdms-5);-ms-flex-positive:var(--s12krdms-5);flex-grow:var(--s12krdms-5);-webkit-flex-shrink:var(--s12krdms-6);-ms-flex-negative:var(--s12krdms-6);flex-shrink:var(--s12krdms-6);-webkit-flex-basis:var(--s12krdms-7);-ms-flex-preferred-size:var(--s12krdms-7);flex-basis:var(--s12krdms-7);width:var(--s12krdms-8);height:var(--s12krdms-9);min-width:var(--s12krdms-10);max-width:var(--s12krdms-11);min-height:var(--s12krdms-12);max-height:var(--s12krdms-13);overflow:var(--s12krdms-14);padding:var(--s12krdms-15);margin:var(--s12krdms-16);overscroll-behavior:auto;cursor:var(--s12krdms-17);}
|
|
7
9
|
.h1sww5hz{width:var(--h1sww5hz-0);height:0.5px;min-height:0.5px;-webkit-flex:var(--h1sww5hz-1);-ms-flex:var(--h1sww5hz-1);flex:var(--h1sww5hz-1);background-color:var(--h1sww5hz-2);}
|
|
@@ -121,7 +123,7 @@
|
|
|
121
123
|
.salrebx{position:absolute;left:var(--salrebx-0);top:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--salrebx-1);height:var(--salrebx-1);background:var(--salrebx-2);border-radius:50%;cursor:var(--salrebx-3);-webkit-transition:var(--salrebx-4);transition:var(--salrebx-4);z-index:3;pointer-events:var(--salrebx-5);}.salrebx:active{cursor:var(--salrebx-6);-webkit-transform:translate(-50%, -50%) scale(1.1);-moz-transform:translate(-50%, -50%) scale(1.1);-ms-transform:translate(-50%, -50%) scale(1.1);transform:translate(-50%, -50%) scale(1.1);}.salrebx:hover{-webkit-transform:var(--salrebx-7);-moz-transform:var(--salrebx-7);-ms-transform:var(--salrebx-7);transform:var(--salrebx-7);}
|
|
122
124
|
.h1trli0w{position:absolute;opacity:0;width:100%;height:100%;margin:0;padding:0;cursor:pointer;z-index:2;}
|
|
123
125
|
.sx2momv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--sx2momv-0);border:0.5px solid var(--sx2momv-1);border-radius:5px;padding:var(--sx2momv-2);height:var(--sx2momv-3);}
|
|
124
|
-
.s1pe4aqp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:
|
|
126
|
+
.s1pe4aqp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--s1pe4aqp-0);padding:var(--s1pe4aqp-1);background:var(--s1pe4aqp-2);cursor:pointer;border:0.5px solid var(--s1pe4aqp-3);border-radius:4px;}
|
|
125
127
|
.s1jhbbpd{outline:none;resize:none;min-height:var(--s1jhbbpd-0);width:var(--s1jhbbpd-1);height:var(--s1jhbbpd-2);-webkit-flex:var(--s1jhbbpd-3);-ms-flex:var(--s1jhbbpd-3);flex:var(--s1jhbbpd-3);background-color:var(--s1jhbbpd-4);border:0.5px solid var(--s1jhbbpd-5);border-radius:4px;color:var(--s1jhbbpd-6);font-size:var(--s1jhbbpd-7);line-height:var(--s1jhbbpd-8);font-weight:var(--s1jhbbpd-9);font-family:var(--s1jhbbpd-10);padding:var(--s1jhbbpd-11);-webkit-transition:border-color 0.075s ease-in-out;transition:border-color 0.075s ease-in-out;}.s1jhbbpd:hover:not(:disabled, :focus){border-color:var(--s1jhbbpd-12);}.s1jhbbpd:focus{border-color:var(--s1jhbbpd-13);}.s1jhbbpd:disabled{cursor:not-allowed;opacity:0.6;}.s1jhbbpd::-webkit-input-placeholder{color:var(--s1jhbbpd-14);}.s1jhbbpd::-moz-placeholder{color:var(--s1jhbbpd-14);}.s1jhbbpd:-ms-input-placeholder{color:var(--s1jhbbpd-14);}.s1jhbbpd::placeholder{color:var(--s1jhbbpd-14);}
|
|
126
128
|
.tu0hnok{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:var(--tu0hnok-0);height:var(--tu0hnok-1);}
|
|
127
129
|
.l48iv0n{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:4px;min-height:var(--l48iv0n-0);width:var(--l48iv0n-1);height:var(--l48iv0n-2);-webkit-flex:var(--l48iv0n-3);-ms-flex:var(--l48iv0n-3);flex:var(--l48iv0n-3);background-color:var(--l48iv0n-4);border:0.5px solid var(--l48iv0n-5);border-radius:4px;padding:var(--l48iv0n-6);}
|