aboutsummaryrefslogtreecommitdiff
path: root/src/ui/c-button/c-button.vue
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--src/ui/c-button/c-button.vue15
1 files changed, 10 insertions, 5 deletions
diff --git a/src/ui/c-button/c-button.vue b/src/ui/c-button/c-button.vue
index 2cbc4fd..c17b078 100644
--- a/src/ui/c-button/c-button.vue
+++ b/src/ui/c-button/c-button.vue
@@ -25,6 +25,7 @@ const props = withDefaults(
circle?: boolean;
href?: string;
to?: RouteLocationRaw;
+ size?: 'small' | 'medium' | 'large';
}>(),
{
type: 'default',
@@ -34,9 +35,10 @@ const props = withDefaults(
circle: false,
href: undefined,
to: undefined,
+ size: 'medium',
},
);
-const { variant, disabled, round, circle, href, type, to } = toRefs(props);
+const { variant, disabled, round, circle, href, type, to, size: sizeName } = toRefs(props);
const emits = defineEmits(['click']);
@@ -58,18 +60,20 @@ const tag = computed(() => {
return 'button';
});
const appTheme = useAppTheme();
+
+const size = computed(() => theme.value.size[sizeName.value]);
</script>
<style lang="less" scoped>
.c-button {
line-height: 1;
font-family: inherit;
- font-size: inherit;
+ font-size: v-bind('size.fontSize');
border: none;
text-align: center;
cursor: pointer;
text-decoration: none;
- height: 34px;
+ height: v-bind('size.width');
font-weight: 400;
color: v-bind('variantTheme.textColor');
padding: 0 14px;
@@ -89,8 +93,9 @@ const appTheme = useAppTheme();
}
&.circle {
- border-radius: 40px;
- width: 34px;
+ border-radius: v-bind('size.width');
+ width: v-bind('size.width');
+ padding: 0;
}
&:not(.disabled) {