xt/comfy-downloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(button): 添加按钮组件的多种样式状态

Browse Source 
- 增加了普通、悬浮、激活和禁用状态的样式
- 添加了多种颜色主题的样式，包括：primary、secondary、tertiary、accent、danger、success、warn、info、progressive、defensive
- 实现了实心和轮廓两种样式风格
This commit is contained in:
Vixalie
2025-08-05 13:18:15 +08:00
parent e7c9b700a6
commit c0d8c4b21a
1 changed files with 67 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/index.css
View File

@@ -50,8 +50,73 @@
button {
@apply border-0 flex flex-row items-center justify-center gap-1 px-2 py-1;
&.icon {
@apply bg-swatch-neutral-40 text-on-surface;
&:not(.outlined) {
&.primary {
@apply bg-primary hover:bg-primary-hover active:bg-primary-active text-on-primary disabled:bg-primary-disabled disabled:text-on-primary-disabled;
}
&.secondary {
@apply bg-secondary hover:bg-secondary-hover active:bg-secondary-active text-on-secondary disabled:bg-secondary-disabled disabled:text-on-secondary-disabled;
}
&.tertiary {
@apply bg-tertiary hover:bg-tertiary-hover active:bg-tertiary-active text-on-tertiary disabled:bg-tertiary-disabled disabled:text-on-tertiary-disabled;
}
&.accent {
@apply bg-accent hover:bg-accent-hover active:bg-accent-active text-on-accent disabled:bg-accent-disabled disabled:text-on-accent-disabled;
}
&.danger {
@apply bg-danger hover:bg-danger-hover active:bg-danger-active text-on-danger disabled:bg-danger-disabled disabled:text-on-danger-disabled;
}
&.success {
@apply bg-success hover:bg-success-hover active:bg-success-active text-on-success disabled:bg-success-disabled disabled:text-on-success-disabled;
}
&.warn {
@apply bg-warn hover:bg-warn-hover active:bg-warn-active text-on-warn disabled:bg-warn-disabled disabled:text-on-warn-disabled;
}
&.info {
@apply bg-info hover:bg-info-hover active:bg-info-active text-on-info disabled:bg-info-disabled disabled:text-on-info-disabled;
}
&.progressive {
@apply bg-progressive hover:bg-progressive-hover active:bg-progressive-active text-on-progressive disabled:bg-progressive-disabled disabled:text-on-progressive-disabled;
}
&.defensive {
@apply bg-defensive hover:bg-defensive-hover active:bg-defensive-active text-on-defensive disabled:bg-defensive-disabled disabled:text-on-defensive-disabled;
}
&.neutral {
@apply bg-neutral hover:bg-neutral-hover active:bg-neutral-active text-on-neutral disabled:bg-neutral-disabled disabled:text-on-neutral-disabled;
}
}
&.outlined {
@apply bg-transparent border;
&.primary {
@apply border-primary text-primary hover:border-primary-hover hover:text-primary-hover active:border-primary-active active:text-primary-active disabled:border-primary-disabled disabled:text-primary-disabled;
}
&.secondary {
@apply border-secondary text-secondary hover:border-secondary-hover hover:text-secondary-hover active:border-secondary-active active:text-secondary-active disabled:border-secondary-disabled disabled:text-secondary-disabled;
}
&.tertiary {
@apply border-tertiary text-tertiary hover:border-tertiary-hover hover:text-tertiary-hover active:border-tertiary-active active:text-tertiary-active disabled:border-tertiary-disabled disabled:text-tertiary-disabled;
}
&.accent {
@apply border-accent text-accent hover:border-accent-hover hover:text-accent-hover active:border-accent-active active:text-accent-active disabled:border-accent-disabled disabled:text-accent-disabled;
}
&.danger {
@apply border-danger text-danger hover:border-danger-hover hover:text-danger-hover active:border-danger-active active:text-danger-active disabled:border-danger-disabled disabled:text-danger-disabled;
}
&.success {
@apply border-success text-success hover:border-success-hover hover:text-success-hover active:border-success-active active:text-success-active disabled:border-success-disabled disabled:text-success-disabled;
}
&.warn {
@apply border-warn text-warn hover:border-warn-hover hover:text-warn-hover active:border-warn-active active:text-warn-active disabled:border-warn-disabled disabled:text-warn-disabled;
}
&.info {
@apply border-info text-info hover:border-info-hover hover:text-info-hover active:border-info-active active:text-info-active disabled:border-info-disabled disabled:text-info-disabled;
}
&.progressive {
@apply border-progressive text-progressive hover:border-progressive-hover hover:text-progressive-hover active:border-progressive-active active:text-progressive-active disabled:border-progressive-disabled disabled:text-progressive-disabled;
}
&.defensive {
@apply border-defensive text-defensive hover:border-defensive-hover hover:text-defensive-hover active:border-defensive-active active:text-defensive-active disabled:border-defensive-disabled disabled:text-defensive-disabled;
}
}
}
}