@gradio/button 0.2.50 → 0.3.0-beta.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.
- package/Button.stories.svelte +11 -4
- package/CHANGELOG.md +25 -0
- package/dist/Index.svelte +35 -0
- package/dist/Index.svelte.d.ts +31 -0
- package/dist/main.d.ts +2 -0
- package/dist/main.js +2 -0
- package/dist/shared/Button.svelte +179 -0
- package/dist/shared/Button.svelte.d.ts +31 -0
- package/package.json +14 -7
- package/shared/Button.svelte +40 -9
package/Button.stories.svelte
CHANGED
|
@@ -55,16 +55,23 @@
|
|
|
55
55
|
<Button value="Gradio Button" {...args} />
|
|
56
56
|
</Template>
|
|
57
57
|
|
|
58
|
-
<Story
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
<Story
|
|
59
|
+
name="Primary"
|
|
60
|
+
args={{ variant: "primary", size: "lg", scale: 1, interactive: true }}
|
|
61
|
+
/>
|
|
62
|
+
<Story
|
|
63
|
+
name="Secondary"
|
|
64
|
+
args={{ variant: "secondary", size: "lg", interactive: true }}
|
|
65
|
+
/>
|
|
66
|
+
<Story name="Stop" args={{ variant: "stop", size: "lg", interactive: true }} />
|
|
61
67
|
<Story
|
|
62
68
|
name="Button with link"
|
|
63
|
-
args={{ link: "https://huggingface.co/welcome" }}
|
|
69
|
+
args={{ link: "https://huggingface.co/welcome", interactive: true }}
|
|
64
70
|
/>
|
|
65
71
|
<Story
|
|
66
72
|
name="Button with external image icon"
|
|
67
73
|
args={{
|
|
74
|
+
interactive: true,
|
|
68
75
|
icon: {
|
|
69
76
|
url: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
|
|
70
77
|
path: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @gradio/button
|
|
2
2
|
|
|
3
|
+
## 0.3.0-beta.1
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- [#9167](https://github.com/gradio-app/gradio/pull/9167) [`e9e737e`](https://github.com/gradio-app/gradio/commit/e9e737eeeb61d0bbf43277c75b6ffed8b34aa445) - Redesign `gr.Button()`. Thanks @hannahblair!
|
|
8
|
+
- [#9254](https://github.com/gradio-app/gradio/pull/9254) [`03f3735`](https://github.com/gradio-app/gradio/commit/03f3735fba1fd4f1978b5431af9e67de3b6e7945) - Adds a "huggingface" button variant, and makes it the default for `gr.LoginButton` and `gr.DuplicateButton`. Thanks @abidlabs!
|
|
9
|
+
|
|
10
|
+
### Dependency updates
|
|
11
|
+
|
|
12
|
+
- @gradio/utils@0.7.0-beta.1
|
|
13
|
+
- @gradio/client@1.6.0-beta.1
|
|
14
|
+
- @gradio/upload@0.12.4-beta.1
|
|
15
|
+
|
|
16
|
+
## 0.2.51-beta.0
|
|
17
|
+
|
|
18
|
+
### Fixes
|
|
19
|
+
|
|
20
|
+
- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types. Thanks @pngwn!
|
|
21
|
+
|
|
22
|
+
### Dependency updates
|
|
23
|
+
|
|
24
|
+
- @gradio/utils@0.7.0-beta.0
|
|
25
|
+
- @gradio/client@1.6.0-beta.0
|
|
26
|
+
- @gradio/upload@0.12.4-beta.0
|
|
27
|
+
|
|
3
28
|
## 0.2.50
|
|
4
29
|
|
|
5
30
|
### Features
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<script context="module">export { default as BaseButton } from "./shared/Button.svelte";
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<script>import {} from "@gradio/client";
|
|
5
|
+
import Button from "./shared/Button.svelte";
|
|
6
|
+
export let elem_id = "";
|
|
7
|
+
export let elem_classes = [];
|
|
8
|
+
export let visible = true;
|
|
9
|
+
export let value;
|
|
10
|
+
export let variant = "secondary";
|
|
11
|
+
export let interactive;
|
|
12
|
+
export let size = "lg";
|
|
13
|
+
export let scale = null;
|
|
14
|
+
export let icon = null;
|
|
15
|
+
export let link = null;
|
|
16
|
+
export let min_width = void 0;
|
|
17
|
+
export let gradio;
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<Button
|
|
21
|
+
{value}
|
|
22
|
+
{variant}
|
|
23
|
+
{elem_id}
|
|
24
|
+
{elem_classes}
|
|
25
|
+
{size}
|
|
26
|
+
{scale}
|
|
27
|
+
{link}
|
|
28
|
+
{icon}
|
|
29
|
+
{min_width}
|
|
30
|
+
{visible}
|
|
31
|
+
disabled={!interactive}
|
|
32
|
+
on:click={() => gradio.dispatch("click")}
|
|
33
|
+
>
|
|
34
|
+
{value ? gradio.i18n(value) : ""}
|
|
35
|
+
</Button>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
export { default as BaseButton } from "./shared/Button.svelte";
|
|
3
|
+
import type { Gradio } from "@gradio/utils";
|
|
4
|
+
import { type FileData } from "@gradio/client";
|
|
5
|
+
declare const __propDef: {
|
|
6
|
+
props: {
|
|
7
|
+
elem_id?: string | undefined;
|
|
8
|
+
elem_classes?: string[] | undefined;
|
|
9
|
+
visible?: boolean | undefined;
|
|
10
|
+
value: string | null;
|
|
11
|
+
variant?: ("primary" | "secondary" | "stop") | undefined;
|
|
12
|
+
interactive: boolean;
|
|
13
|
+
size?: ("sm" | "lg") | undefined;
|
|
14
|
+
scale?: (number | null) | undefined;
|
|
15
|
+
icon?: (FileData | null) | undefined;
|
|
16
|
+
link?: (string | null) | undefined;
|
|
17
|
+
min_width?: number | undefined;
|
|
18
|
+
gradio: Gradio<{
|
|
19
|
+
click: never;
|
|
20
|
+
}>;
|
|
21
|
+
};
|
|
22
|
+
events: {
|
|
23
|
+
[evt: string]: CustomEvent<any>;
|
|
24
|
+
};
|
|
25
|
+
slots: {};
|
|
26
|
+
};
|
|
27
|
+
export type IndexProps = typeof __propDef.props;
|
|
28
|
+
export type IndexEvents = typeof __propDef.events;
|
|
29
|
+
export type IndexSlots = typeof __propDef.slots;
|
|
30
|
+
export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
|
|
31
|
+
}
|
package/dist/main.d.ts
ADDED
package/dist/main.js
ADDED
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
<script>import {} from "@gradio/client";
|
|
2
|
+
export let elem_id = "";
|
|
3
|
+
export let elem_classes = [];
|
|
4
|
+
export let visible = true;
|
|
5
|
+
export let variant = "secondary";
|
|
6
|
+
export let size = "lg";
|
|
7
|
+
export let value = null;
|
|
8
|
+
export let link = null;
|
|
9
|
+
export let icon = null;
|
|
10
|
+
export let disabled = false;
|
|
11
|
+
export let scale = null;
|
|
12
|
+
export let min_width = void 0;
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
{#if link && link.length > 0}
|
|
16
|
+
<a
|
|
17
|
+
href={link}
|
|
18
|
+
rel="noopener noreferrer"
|
|
19
|
+
class:hidden={!visible}
|
|
20
|
+
class:disabled
|
|
21
|
+
aria-disabled={disabled}
|
|
22
|
+
class="{size} {variant} {elem_classes.join(' ')}"
|
|
23
|
+
style:flex-grow={scale}
|
|
24
|
+
style:pointer-events={disabled ? "none" : null}
|
|
25
|
+
style:width={scale === 0 ? "fit-content" : null}
|
|
26
|
+
style:min-width={typeof min_width === "number"
|
|
27
|
+
? `calc(min(${min_width}px, 100%))`
|
|
28
|
+
: null}
|
|
29
|
+
id={elem_id}
|
|
30
|
+
>
|
|
31
|
+
{#if icon}
|
|
32
|
+
<img class="button-icon" src={icon.url} alt={`${value} icon`} />
|
|
33
|
+
{/if}
|
|
34
|
+
<slot />
|
|
35
|
+
</a>
|
|
36
|
+
{:else}
|
|
37
|
+
<button
|
|
38
|
+
on:click
|
|
39
|
+
class:hidden={!visible}
|
|
40
|
+
class="{size} {variant} {elem_classes.join(' ')}"
|
|
41
|
+
style:flex-grow={scale}
|
|
42
|
+
style:width={scale === 0 ? "fit-content" : null}
|
|
43
|
+
style:min-width={typeof min_width === "number"
|
|
44
|
+
? `calc(min(${min_width}px, 100%))`
|
|
45
|
+
: null}
|
|
46
|
+
id={elem_id}
|
|
47
|
+
{disabled}
|
|
48
|
+
>
|
|
49
|
+
{#if icon}
|
|
50
|
+
<img class="button-icon" src={icon.url} alt={`${value} icon`} />
|
|
51
|
+
{/if}
|
|
52
|
+
<slot />
|
|
53
|
+
</button>
|
|
54
|
+
{/if}
|
|
55
|
+
|
|
56
|
+
<style>
|
|
57
|
+
button,
|
|
58
|
+
a {
|
|
59
|
+
display: inline-flex;
|
|
60
|
+
justify-content: center;
|
|
61
|
+
align-items: center;
|
|
62
|
+
transition: var(--button-transition);
|
|
63
|
+
padding: var(--size-0-5) var(--size-2);
|
|
64
|
+
text-align: center;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
button:hover {
|
|
68
|
+
transform: var(--button-transform);
|
|
69
|
+
transition: all 0.2s;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
button:hover,
|
|
73
|
+
button[disabled],
|
|
74
|
+
a:hover,
|
|
75
|
+
a.disabled {
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
button:active,
|
|
79
|
+
a:active {
|
|
80
|
+
transform: var(--button-active-transform);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
button[disabled],
|
|
84
|
+
a.disabled {
|
|
85
|
+
opacity: 0.5;
|
|
86
|
+
filter: grayscale(30%);
|
|
87
|
+
cursor: not-allowed;
|
|
88
|
+
transform: none;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.hidden {
|
|
92
|
+
display: none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.primary {
|
|
96
|
+
border: var(--button-border-width) solid var(--button-primary-border-color);
|
|
97
|
+
background: var(--button-primary-background-fill);
|
|
98
|
+
color: var(--button-primary-text-color);
|
|
99
|
+
}
|
|
100
|
+
.primary:hover,
|
|
101
|
+
.primary[disabled] {
|
|
102
|
+
background: var(--button-primary-background-fill-hover);
|
|
103
|
+
color: var(--button-primary-text-color-hover);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.primary:hover {
|
|
107
|
+
border-color: var(--button-primary-border-color-hover);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.primary[disabled] {
|
|
111
|
+
border-color: var(--button-primary-border-color);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.secondary {
|
|
115
|
+
border: var(--button-border-width) solid
|
|
116
|
+
var(--button-secondary-border-color);
|
|
117
|
+
background: var(--button-secondary-background-fill);
|
|
118
|
+
color: var(--button-secondary-text-color);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.huggingface {
|
|
122
|
+
border: var(--button-border-width) solid
|
|
123
|
+
var(--button-secondary-border-color);
|
|
124
|
+
background: var(--background-fill-primary);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.secondary:hover,
|
|
128
|
+
.secondary[disabled] {
|
|
129
|
+
background: var(--button-secondary-background-fill-hover);
|
|
130
|
+
color: var(--button-secondary-text-color-hover);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.secondary:hover {
|
|
134
|
+
border-color: var(--button-secondary-border-color-hover);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.secondary[disabled] {
|
|
138
|
+
border-color: var(--button-secondary-border-color);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.stop {
|
|
142
|
+
background: var(--button-cancel-background-fill);
|
|
143
|
+
color: var(--button-cancel-text-color);
|
|
144
|
+
border: var(--button-border-width) solid var(--button-cancel-border-color);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.stop:hover,
|
|
148
|
+
.stop[disabled] {
|
|
149
|
+
background: var(--button-cancel-background-fill-hover);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.stop:hover {
|
|
153
|
+
border-color: var(--button-cancel-border-color-hover);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.stop[disabled] {
|
|
157
|
+
border-color: var(--button-cancel-border-color);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.sm {
|
|
161
|
+
border-radius: var(--button-small-radius);
|
|
162
|
+
padding: var(--button-small-padding);
|
|
163
|
+
font-weight: var(--button-small-text-weight);
|
|
164
|
+
font-size: var(--button-small-text-size);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.lg {
|
|
168
|
+
border-radius: var(--button-large-radius);
|
|
169
|
+
padding: var(--button-large-padding);
|
|
170
|
+
font-weight: var(--button-large-text-weight);
|
|
171
|
+
font-size: var(--button-large-text-size);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.button-icon {
|
|
175
|
+
width: var(--text-xl);
|
|
176
|
+
height: var(--text-xl);
|
|
177
|
+
margin-right: var(--spacing-xl);
|
|
178
|
+
}
|
|
179
|
+
</style>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import { type FileData } from "@gradio/client";
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
elem_id?: string | undefined;
|
|
6
|
+
elem_classes?: string[] | undefined;
|
|
7
|
+
visible?: boolean | undefined;
|
|
8
|
+
variant?: ("primary" | "secondary" | "stop" | "huggingface") | undefined;
|
|
9
|
+
size?: ("sm" | "lg") | undefined;
|
|
10
|
+
value?: (string | null) | undefined;
|
|
11
|
+
link?: (string | null) | undefined;
|
|
12
|
+
icon?: (FileData | null) | undefined;
|
|
13
|
+
disabled?: boolean | undefined;
|
|
14
|
+
scale?: (number | null) | undefined;
|
|
15
|
+
min_width?: number | undefined;
|
|
16
|
+
};
|
|
17
|
+
events: {
|
|
18
|
+
click: MouseEvent;
|
|
19
|
+
} & {
|
|
20
|
+
[evt: string]: CustomEvent<any>;
|
|
21
|
+
};
|
|
22
|
+
slots: {
|
|
23
|
+
default: {};
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
export type ButtonProps = typeof __propDef.props;
|
|
27
|
+
export type ButtonEvents = typeof __propDef.events;
|
|
28
|
+
export type ButtonSlots = typeof __propDef.slots;
|
|
29
|
+
export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
|
|
30
|
+
}
|
|
31
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,24 +1,31 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0-beta.1",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
7
7
|
"license": "ISC",
|
|
8
8
|
"private": false,
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@gradio/client": "^1.
|
|
11
|
-
"@gradio/
|
|
12
|
-
"@gradio/
|
|
10
|
+
"@gradio/client": "^1.6.0-beta.1",
|
|
11
|
+
"@gradio/utils": "^0.7.0-beta.1",
|
|
12
|
+
"@gradio/upload": "^0.12.4-beta.1"
|
|
13
13
|
},
|
|
14
14
|
"devDependencies": {
|
|
15
|
-
"@gradio/preview": "^0.11.0"
|
|
15
|
+
"@gradio/preview": "^0.11.1-beta.0"
|
|
16
16
|
},
|
|
17
17
|
"main": "./Index.svelte",
|
|
18
18
|
"main_changeset": true,
|
|
19
19
|
"exports": {
|
|
20
|
-
".": "./
|
|
21
|
-
"
|
|
20
|
+
"./package.json": "./package.json",
|
|
21
|
+
".": {
|
|
22
|
+
"gradio": "./Index.svelte",
|
|
23
|
+
"svelte": "./dist/Index.svelte",
|
|
24
|
+
"types": "./dist/Index.svelte.d.ts"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"peerDependencies": {
|
|
28
|
+
"svelte": "^4.0.0"
|
|
22
29
|
},
|
|
23
30
|
"repository": {
|
|
24
31
|
"type": "git",
|
package/shared/Button.svelte
CHANGED
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
export let elem_id = "";
|
|
5
5
|
export let elem_classes: string[] = [];
|
|
6
6
|
export let visible = true;
|
|
7
|
-
export let variant: "primary" | "secondary" | "stop"
|
|
7
|
+
export let variant: "primary" | "secondary" | "stop" | "huggingface" =
|
|
8
|
+
"secondary";
|
|
8
9
|
export let size: "sm" | "lg" = "lg";
|
|
9
10
|
export let value: string | null = null;
|
|
10
11
|
export let link: string | null = null;
|
|
@@ -62,21 +63,24 @@
|
|
|
62
63
|
justify-content: center;
|
|
63
64
|
align-items: center;
|
|
64
65
|
transition: var(--button-transition);
|
|
65
|
-
box-shadow: var(--button-shadow);
|
|
66
66
|
padding: var(--size-0-5) var(--size-2);
|
|
67
67
|
text-align: center;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
+
button:hover {
|
|
71
|
+
transform: var(--button-transform);
|
|
72
|
+
transition: all 0.2s;
|
|
73
|
+
}
|
|
74
|
+
|
|
70
75
|
button:hover,
|
|
71
76
|
button[disabled],
|
|
72
77
|
a:hover,
|
|
73
78
|
a.disabled {
|
|
74
|
-
box-shadow: var(--button-shadow-hover);
|
|
75
79
|
}
|
|
76
80
|
|
|
77
81
|
button:active,
|
|
78
82
|
a:active {
|
|
79
|
-
|
|
83
|
+
transform: var(--button-active-transform);
|
|
80
84
|
}
|
|
81
85
|
|
|
82
86
|
button[disabled],
|
|
@@ -84,6 +88,7 @@
|
|
|
84
88
|
opacity: 0.5;
|
|
85
89
|
filter: grayscale(30%);
|
|
86
90
|
cursor: not-allowed;
|
|
91
|
+
transform: none;
|
|
87
92
|
}
|
|
88
93
|
|
|
89
94
|
.hidden {
|
|
@@ -97,11 +102,18 @@
|
|
|
97
102
|
}
|
|
98
103
|
.primary:hover,
|
|
99
104
|
.primary[disabled] {
|
|
100
|
-
border-color: var(--button-primary-border-color-hover);
|
|
101
105
|
background: var(--button-primary-background-fill-hover);
|
|
102
106
|
color: var(--button-primary-text-color-hover);
|
|
103
107
|
}
|
|
104
108
|
|
|
109
|
+
.primary:hover {
|
|
110
|
+
border-color: var(--button-primary-border-color-hover);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.primary[disabled] {
|
|
114
|
+
border-color: var(--button-primary-border-color);
|
|
115
|
+
}
|
|
116
|
+
|
|
105
117
|
.secondary {
|
|
106
118
|
border: var(--button-border-width) solid
|
|
107
119
|
var(--button-secondary-border-color);
|
|
@@ -109,24 +121,43 @@
|
|
|
109
121
|
color: var(--button-secondary-text-color);
|
|
110
122
|
}
|
|
111
123
|
|
|
124
|
+
.huggingface {
|
|
125
|
+
border: var(--button-border-width) solid
|
|
126
|
+
var(--button-secondary-border-color);
|
|
127
|
+
background: var(--background-fill-primary);
|
|
128
|
+
}
|
|
129
|
+
|
|
112
130
|
.secondary:hover,
|
|
113
131
|
.secondary[disabled] {
|
|
114
|
-
border-color: var(--button-secondary-border-color-hover);
|
|
115
132
|
background: var(--button-secondary-background-fill-hover);
|
|
116
133
|
color: var(--button-secondary-text-color-hover);
|
|
117
134
|
}
|
|
118
135
|
|
|
136
|
+
.secondary:hover {
|
|
137
|
+
border-color: var(--button-secondary-border-color-hover);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.secondary[disabled] {
|
|
141
|
+
border-color: var(--button-secondary-border-color);
|
|
142
|
+
}
|
|
143
|
+
|
|
119
144
|
.stop {
|
|
120
|
-
border: var(--button-border-width) solid var(--button-cancel-border-color);
|
|
121
145
|
background: var(--button-cancel-background-fill);
|
|
122
146
|
color: var(--button-cancel-text-color);
|
|
147
|
+
border: var(--button-border-width) solid var(--button-cancel-border-color);
|
|
123
148
|
}
|
|
124
149
|
|
|
125
150
|
.stop:hover,
|
|
126
151
|
.stop[disabled] {
|
|
127
|
-
border-color: var(--button-cancel-border-color-hover);
|
|
128
152
|
background: var(--button-cancel-background-fill-hover);
|
|
129
|
-
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.stop:hover {
|
|
156
|
+
border-color: var(--button-cancel-border-color-hover);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.stop[disabled] {
|
|
160
|
+
border-color: var(--button-cancel-border-color);
|
|
130
161
|
}
|
|
131
162
|
|
|
132
163
|
.sm {
|