mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-20 06:55:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

ui-lib(button): size variants

Browse source
This commit is contained in:
Corentin Thomasset 2023-05-07 23:29:55 +02:00 • committed by Corentin THOMASSET
parent edae4c6915
commit 401f13f7e3
3 changed files with 51 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/ui/c-button/c-button.vue
View file

@ -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) {