45 lines
1.3 KiB
CSS
45 lines
1.3 KiB
CSS
/* Button Size Classes */
|
|
@layer components {
|
|
.btn-base {
|
|
@apply relative inline-flex items-center justify-center font-medium border border-gray-600/30 overflow-hidden;
|
|
/* 기본 크기: size-medium */
|
|
--btn-padding: theme('spacing.10');
|
|
--btn-height: theme('spacing.14');
|
|
--btn-text: theme('fontSize.base');
|
|
--btn-radius: theme('borderRadius.lg');
|
|
@apply px-10 h-14 text-base rounded-lg;
|
|
}
|
|
|
|
.size-extra-small {
|
|
--btn-padding: theme('spacing.6');
|
|
--btn-height: theme('spacing.10');
|
|
--btn-text: theme('fontSize.sm');
|
|
--btn-radius: theme('borderRadius.DEFAULT');
|
|
@apply px-6 h-10 text-sm rounded;
|
|
}
|
|
|
|
.size-small {
|
|
--btn-padding: theme('spacing.10');
|
|
--btn-height: theme('spacing.12');
|
|
--btn-text: theme('fontSize.sm');
|
|
--btn-radius: theme('borderRadius.lg');
|
|
@apply px-10 h-12 text-sm rounded-lg;
|
|
}
|
|
|
|
.size-medium {
|
|
--btn-padding: theme('spacing.10');
|
|
--btn-height: theme('spacing.14');
|
|
--btn-text: theme('fontSize.base');
|
|
--btn-radius: theme('borderRadius.lg');
|
|
@apply px-10 h-14 text-base rounded-lg;
|
|
}
|
|
|
|
.size-large {
|
|
--btn-padding: theme('spacing.10');
|
|
--btn-height: theme('spacing.16');
|
|
--btn-text: theme('fontSize.lg');
|
|
--btn-radius: theme('borderRadius.lg');
|
|
@apply px-10 h-16 text-lg rounded-lg;
|
|
}
|
|
}
|