@marianmeres/stuic 3.74.0 → 3.76.0
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/dist/components/Button/Button.svelte +2 -0
- package/dist/components/Button/index.css +18 -0
- package/dist/components/DismissibleMessage/index.css +6 -2
- package/dist/components/LoginForm/LoginForm.svelte +1 -1
- package/dist/components/RegisterForm/RegisterForm.svelte +1 -1
- package/package.json +1 -1
|
@@ -142,6 +142,7 @@
|
|
|
142
142
|
data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
|
|
143
143
|
data-aspect1={!unstyled && _isAspect1 ? "true" : undefined}
|
|
144
144
|
data-icon-button={!unstyled && _isIconButton ? "true" : undefined}
|
|
145
|
+
data-x={!unstyled && !!_xProps ? "true" : undefined}
|
|
145
146
|
use:tooltip={_tooltipConfig}
|
|
146
147
|
{...rest as HTMLAnchorAttributes}
|
|
147
148
|
>
|
|
@@ -175,6 +176,7 @@
|
|
|
175
176
|
data-rounded-full={!unstyled && roundedFull ? "true" : undefined}
|
|
176
177
|
data-aspect1={!unstyled && _isAspect1 ? "true" : undefined}
|
|
177
178
|
data-icon-button={!unstyled && _isIconButton ? "true" : undefined}
|
|
179
|
+
data-x={!unstyled && !!_xProps ? "true" : undefined}
|
|
178
180
|
use:tooltip={_tooltipConfig}
|
|
179
181
|
{...rest}
|
|
180
182
|
>
|
|
@@ -42,6 +42,14 @@
|
|
|
42
42
|
/* Raised (3D push) effect */
|
|
43
43
|
--stuic-button-raised-offset: 2px;
|
|
44
44
|
--stuic-button-raised-color: rgb(0 0 0 / 0.8);
|
|
45
|
+
|
|
46
|
+
/* Neutral overlay hover for "pure rounded X" (ghost + x + roundedFull).
|
|
47
|
+
Intentionally non-themed — sits on top of any background color. */
|
|
48
|
+
--stuic-button-x-bg-hover: rgb(0 0 0 / 0.1);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
:root.dark {
|
|
52
|
+
--stuic-button-x-bg-hover: rgb(255 255 255 / 0.05);
|
|
45
53
|
}
|
|
46
54
|
|
|
47
55
|
@layer components {
|
|
@@ -416,4 +424,14 @@
|
|
|
416
424
|
.stuic-button[data-icon-button] {
|
|
417
425
|
--stuic-button-radius: 9999px;
|
|
418
426
|
}
|
|
427
|
+
|
|
428
|
+
/* ============================================================================
|
|
429
|
+
PURE ROUNDED X
|
|
430
|
+
Ghost variant + x icon + fully rounded — replace the intent-tinted ghost
|
|
431
|
+
hover with a neutral overlay so the button reads on any background.
|
|
432
|
+
============================================================================ */
|
|
433
|
+
.stuic-button[data-variant="ghost"][data-x][data-rounded-full] {
|
|
434
|
+
--_bg-hover: var(--stuic-button-x-bg-hover);
|
|
435
|
+
--_bg-active: var(--stuic-button-x-bg-hover);
|
|
436
|
+
}
|
|
419
437
|
}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
:root {
|
|
8
8
|
--stuic-dismissible-message-padding-x: calc(var(--spacing) * 4);
|
|
9
9
|
--stuic-dismissible-message-padding-y: calc(var(--spacing) * 3);
|
|
10
|
+
--stuic-dismissible-x-padding: calc(var(--spacing) * 1);
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
@layer components {
|
|
@@ -17,7 +18,10 @@
|
|
|
17
18
|
.stuic-dismissible-message {
|
|
18
19
|
display: flex;
|
|
19
20
|
align-items: center;
|
|
20
|
-
border-width: var(
|
|
21
|
+
border-width: var(
|
|
22
|
+
--stuic-dismissible-message-border-width,
|
|
23
|
+
var(--stuic-border-width)
|
|
24
|
+
);
|
|
21
25
|
border-style: solid;
|
|
22
26
|
border-radius: var(--stuic-dismissible-message-radius, var(--stuic-radius));
|
|
23
27
|
transition:
|
|
@@ -58,7 +62,7 @@
|
|
|
58
62
|
display: flex;
|
|
59
63
|
align-items: center;
|
|
60
64
|
justify-content: center;
|
|
61
|
-
padding:
|
|
65
|
+
padding: var(--stuic-dismissible-x-padding);
|
|
62
66
|
}
|
|
63
67
|
|
|
64
68
|
/* Dismiss button inherits message text color */
|
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
|
|
158
158
|
<form bind:this={el} class={_class} use:onSubmitValidityCheck {...rest}>
|
|
159
159
|
<!-- General error alert -->
|
|
160
|
-
<DismissibleMessage message={error} intent="destructive"
|
|
160
|
+
<DismissibleMessage message={error} intent="destructive" />
|
|
161
161
|
|
|
162
162
|
<!--
|
|
163
163
|
svelte-ignore binding_property_non_reactive:
|
|
@@ -193,7 +193,7 @@
|
|
|
193
193
|
|
|
194
194
|
<form bind:this={el} class={_class} use:onSubmitValidityCheck {...rest}>
|
|
195
195
|
<!-- General error alert -->
|
|
196
|
-
<DismissibleMessage message={error} intent="destructive"
|
|
196
|
+
<DismissibleMessage message={error} intent="destructive" />
|
|
197
197
|
|
|
198
198
|
<!-- Top-position extra fields -->
|
|
199
199
|
{#each topFields as cfg (cfg.name)}
|