@intechstudio/grid-uikit 1.20250623.1432 → 1.20250623.1548
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/README.md +1 -0
- package/dist/MeltRadio.svelte +8 -13
- package/dist/MoltenButton.svelte +7 -4
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/MeltRadio.svelte
CHANGED
|
@@ -40,19 +40,14 @@ $: {
|
|
|
40
40
|
class:container-full={size == "full" && orientation == "horizontal"}
|
|
41
41
|
class:container-vertical={orientation === "vertical"}
|
|
42
42
|
class:container-button={style === "button"}
|
|
43
|
-
class:radio-border={style !== "button"
|
|
43
|
+
class:radio-border={style !== "button"}
|
|
44
44
|
class="container"
|
|
45
45
|
>
|
|
46
46
|
{#each options as option}
|
|
47
47
|
<!-- Convert value to string in case it was originally boolean -->
|
|
48
48
|
{@const value = option.value.toString()}
|
|
49
49
|
{@const title = option.title}
|
|
50
|
-
<label
|
|
51
|
-
class:radio-border={orientation === "vertical"}
|
|
52
|
-
class:vertical-padding={orientation === "vertical"}
|
|
53
|
-
class:horizontal-padding={style !== "button"}
|
|
54
|
-
class="row"
|
|
55
|
-
>
|
|
50
|
+
<label class:horizontal-padding={style !== "button"} class="row">
|
|
56
51
|
{#if style === "radio"}
|
|
57
52
|
<button {...$item(value)} use:item id={title}>
|
|
58
53
|
<div class="style-radio">
|
|
@@ -86,7 +81,7 @@ $: {
|
|
|
86
81
|
|
|
87
82
|
<style>
|
|
88
83
|
div.container {
|
|
89
|
-
color:
|
|
84
|
+
color: var(--foreground-muted);
|
|
90
85
|
overflow: visible;
|
|
91
86
|
display: grid;
|
|
92
87
|
grid-auto-flow: column;
|
|
@@ -104,8 +99,8 @@ $: {
|
|
|
104
99
|
gap: 1rem;
|
|
105
100
|
}
|
|
106
101
|
.radio-border {
|
|
107
|
-
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
108
102
|
background-color: rgba(0, 0, 0, 0.1);
|
|
103
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
109
104
|
}
|
|
110
105
|
label.row {
|
|
111
106
|
cursor: pointer;
|
|
@@ -127,6 +122,7 @@ $: {
|
|
|
127
122
|
justify-content: center;
|
|
128
123
|
border-radius: 9999px;
|
|
129
124
|
border-width: 1px;
|
|
125
|
+
border-color: var(--foreground);
|
|
130
126
|
width: 1.5rem;
|
|
131
127
|
height: 1.5rem;
|
|
132
128
|
margin-right: 0.75rem;
|
|
@@ -134,7 +130,7 @@ $: {
|
|
|
134
130
|
div.style-radio-inside {
|
|
135
131
|
position: absolute;
|
|
136
132
|
border-radius: 9999px;
|
|
137
|
-
background-color:
|
|
133
|
+
background-color: var(--foreground);
|
|
138
134
|
width: 0.75rem;
|
|
139
135
|
height: 0.75rem;
|
|
140
136
|
}
|
|
@@ -157,13 +153,12 @@ $: {
|
|
|
157
153
|
padding: 0.25rem 0.5rem;
|
|
158
154
|
width: 100%;
|
|
159
155
|
border-radius: 0.25rem;
|
|
160
|
-
background-color: rgba(0, 0, 0, 0.1);
|
|
161
156
|
border: 1px solid rgba(0, 0, 0, 0.4);
|
|
162
157
|
}
|
|
163
158
|
button.style-button:hover {
|
|
164
|
-
background-color:
|
|
159
|
+
background-color: var(--background-muted);
|
|
165
160
|
}
|
|
166
161
|
button.style-button.selected {
|
|
167
|
-
background-color:
|
|
162
|
+
background-color: var(--background-soft);
|
|
168
163
|
}
|
|
169
164
|
</style>
|
package/dist/MoltenButton.svelte
CHANGED
|
@@ -19,8 +19,8 @@ export let title;
|
|
|
19
19
|
button {
|
|
20
20
|
padding: 0.25rem 2rem;
|
|
21
21
|
border-radius: 0.25rem;
|
|
22
|
-
background-color:
|
|
23
|
-
border: 1px;
|
|
22
|
+
background-color: var(--background);
|
|
23
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
24
24
|
font-family: inherit; /* 1 */
|
|
25
25
|
font-feature-settings: inherit; /* 1 */
|
|
26
26
|
font-variation-settings: inherit; /* 1 */
|
|
@@ -28,12 +28,15 @@ export let title;
|
|
|
28
28
|
font-weight: inherit; /* 1 */
|
|
29
29
|
line-height: inherit; /* 1 */
|
|
30
30
|
letter-spacing: inherit; /* 1 */
|
|
31
|
-
color:
|
|
31
|
+
color: var(--foreground-muted);
|
|
32
32
|
margin: 0; /* 2 */
|
|
33
33
|
text-transform: none;
|
|
34
34
|
cursor: pointer;
|
|
35
35
|
}
|
|
36
36
|
button:hover {
|
|
37
|
-
background-color:
|
|
37
|
+
background-color: var(--background-muted);
|
|
38
|
+
}
|
|
39
|
+
button:active {
|
|
40
|
+
background-color: var(--background-soft);
|
|
38
41
|
}
|
|
39
42
|
</style>
|