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-10-29 15:34:54 +09:00
parent e5a1b0e2ae
commit 6482c7f832
1 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
layers/components/atoms/Button/Download.vue
View File

@@ -79,17 +79,19 @@ const inlineStyle = computed<CSSProperties>(() => {
v-if="!isDuplication"
class="icon-platform"
/>
<slot />
</span>
<span v-if="type === 'default'" class="icon-download">
<AtomsIconsDownloadLine />
<span class="text">
<slot />
</span>
<span v-if="type === 'default'" class="icon-download">
<AtomsIconsDownloadLine />
</span>
</span>
</button>
</template>
<style scoped>
.btn-base {
@apply overflow-hidden relative inline-flex items-center font-medium cursor-pointer
@apply overflow-hidden relative 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
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0;
}
@@ -97,10 +99,10 @@ const inlineStyle = computed<CSSProperties>(() => {
@apply after:opacity-20;
}
.btn-content {
@apply relative flex items-center z-[1];
@apply relative flex items-center z-[1] text-left;
}
.icon-platform {
@apply w-5 h-5 bg-contain bg-center bg-no-repeat;
@apply w-5 h-5 flex-shrink-0;
}
.btn-base[data-variant='filled'] {
@@ -119,15 +121,16 @@ const inlineStyle = computed<CSSProperties>(() => {
/* default */
.btn-base.default {
@apply justify-between w-[296px] py-3.5 px-5 text-[14px] rounded-[4px]
md:w-[356px] md:py-4 md:px-6 md:text-[16px]
@apply w-[296px] py-3.5 px-5 rounded-[4px]
md:w-[356px] md:py-4 md:px-6
before:rounded-[4px] after:rounded-[4px];
}
.btn-base.default .icon-download {
@apply border-l border-white/10 ml-4 pl-4;
.btn-base.default .text {
@apply pl-2 pr-4 line-clamp-2 text-[14px]
md:text-[16px];
}
.btn-base.default .icon-platform {
@apply mr-2;
.btn-base.default .icon-download {
@apply border-l border-white/10 ml-auto pl-4;
}
.btn-base.default[data-platform='stove'] {
@apply bg-[#FC4420];
@@ -143,8 +146,8 @@ const inlineStyle = computed<CSSProperties>(() => {
.btn-base.duplication {
@apply items-start bg-[16px_50%] bg-[length:auto_28px] bg-no-repeat rounded-[4px]
before:rounded-[4px] after:rounded-[4px]
h-[48px] pt-[22px] pl-[44px] pr-[22px] text-[11px]
md:h-[64px] md:pt-[30px] md:pl-[64px] md:pr-[28px] md:text-[12px] md:bg-[20px_50%] md:bg-[length:auto_40px];
pt-[22px] pl-[44px] pr-[22px] pb-[7px] text-[11px]
md:h-[64px] md:pt-[30px] md:pl-[64px] md:pr-[28px] md:pb-[11px] md:text-[12px] md:bg-[20px_50%] md:bg-[length:auto_40px];
color: red;
}
@@ -160,6 +163,9 @@ const inlineStyle = computed<CSSProperties>(() => {
.btn-base.duplication[data-platform='stove'] {
@apply min-w-[113px] md:min-w-[150px];
}
.btn-base.duplication .text {
@apply line-clamp-1;
}
/* single */
.btn-base.single {
@@ -171,7 +177,10 @@ const inlineStyle = computed<CSSProperties>(() => {
.btn-base.single.no-text {
@apply min-w-[40px] px-0 md:min-w-[48px];
}
.btn-base.single .btn-content {
@apply gap-1;
.btn-base.single.no-text .icon-platform {
@apply mx-auto;
}
.btn-base.single .icon-platform {
@apply mr-1;
}
</style>