gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix. 버튼 컴포넌트 링크 적용, 코드 리팩토링

Browse Source
This commit is contained in:
clkim
2025-09-25 18:28:02 +09:00
parent 0ef8c5bdf5
commit acea3418e3
10 changed files with 247 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
layers/assets/css/components/_button.css
View File

@@ -1,44 +1,34 @@
/* Button Size Classes */
@layer components {
.btn-base {
@apply relative inline-flex items-center justify-center font-medium border border-gray-600/30 overflow-hidden;
@apply overflow-hidden relative inline-flex items-center justify-center font-medium cursor-pointer
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-white/10 before:rounded-lg
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-lg after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
/* 기본 크기: 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;
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;
.btn-base:hover {
@apply after:opacity-20;
}
.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;
.btn-base:disabled {
@apply cursor-default
after:bg-[var(--text-color)] after:opacity-20 after:z-[2];
}
.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;
@apply px-10 h-16 text-lg;
}
.size-medium {
@apply px-10 h-14 text-base;
}
.size-small {
@apply px-10 h-12 text-sm;
}
.size-extra-small {
@apply before:rounded after:rounded
px-6 h-10 text-sm rounded;
}
}