milk-lib 0.0.8 → 0.0.9
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.
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
children,
|
|
20
20
|
style,
|
|
21
21
|
iconButton,
|
|
22
|
+
dataVariant,
|
|
22
23
|
...rest
|
|
23
24
|
}: IButtonProps = $props();
|
|
24
25
|
|
|
@@ -33,6 +34,7 @@
|
|
|
33
34
|
class={`Button ${iconButton ? 'Button-icon' : ''} ${classNames ? classNames : ''}`}
|
|
34
35
|
class:block={block}
|
|
35
36
|
class:loading={loading}
|
|
37
|
+
{...(dataVariant ? { 'data-variant': dataVariant } : {})}
|
|
36
38
|
>
|
|
37
39
|
{@render children?.()}
|
|
38
40
|
<span class="loader">
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
.Button.Button-base-emphasis {
|
|
1
|
+
.Button.Button-base-emphasis[data-variant="milk"] {
|
|
2
2
|
--background-color: var(--bg-base-emp-100);
|
|
3
3
|
--hover-background: var(--bg-base-emp-200);
|
|
4
4
|
--active-background: var(--bg-base-emp-300);
|
|
5
5
|
--color: white
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
.Button.Button-base-outlined {
|
|
8
|
+
.Button.Button-base-outlined[data-variant="milk"] {
|
|
9
9
|
--background-color: transparent;
|
|
10
10
|
--hover-background: var(--bg-base-200);
|
|
11
11
|
--active-background: var(--bg-base-300);
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
--focus-color: var(--line-base-emp);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
.Button.Button-base-contained {
|
|
17
|
+
.Button.Button-base-contained[data-variant="milk"] {
|
|
18
18
|
--background-color: var(--bg-base-100);
|
|
19
19
|
--hover-background: var(--bg-base-200);
|
|
20
20
|
--active-background: var(--bg-base-300);
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
--focus-color: var(--line-base-emp);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
.Button.Button-primary-contained {
|
|
25
|
+
.Button.Button-primary-contained[data-variant="milk"] {
|
|
26
26
|
--background-color: var(--bg-primary-100);
|
|
27
27
|
--hover-background: var(--bg-primary-200);
|
|
28
28
|
--active-background: var(--bg-primary-300);
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
--focus-color: var(--line-primary-emp);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
.Button.Button-primary-outlined {
|
|
33
|
+
.Button.Button-primary-outlined[data-variant="milk"] {
|
|
34
34
|
--background-color: transparent;
|
|
35
35
|
--hover-background: var(--bg-primary-100);
|
|
36
36
|
--active-background: var(--bg-primary-200);
|
|
@@ -39,14 +39,14 @@
|
|
|
39
39
|
--focus-color: var(--line-primary-emp);
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
.Button.Button-primary-emphasis {
|
|
42
|
+
.Button.Button-primary-emphasis[data-variant="milk"] {
|
|
43
43
|
--background-color: var(--bg-primary-emp-100);
|
|
44
44
|
--hover-background: var(--bg-primary-emp-200);
|
|
45
45
|
--active-background: var(--bg-primary-emp-300);
|
|
46
46
|
--color: var(--text-base-main);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
.Button.Button-lg {
|
|
49
|
+
.Button.Button-lg[data-variant="milk"] {
|
|
50
50
|
--padding-y: 7px;
|
|
51
51
|
--padding-x: 20px;
|
|
52
52
|
--font-size: 16px;
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
--padding-x: 11px;
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
|
-
.Button.Button-md {
|
|
61
|
+
.Button.Button-md[data-variant="milk"] {
|
|
62
62
|
--padding-y: 5px;
|
|
63
63
|
--padding-x: 16px;
|
|
64
64
|
--font-size: 14px;
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
--padding-x: 8px;
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
|
-
.Button.Button-sm {
|
|
73
|
+
.Button.Button-sm[data-variant="milk"] {
|
|
74
74
|
--padding-y: 5px;
|
|
75
75
|
--padding-x: 10px;
|
|
76
76
|
--font-size: 12px;
|