|
@tailwind components; |
|
|
|
@layer components { |
|
.btn { |
|
@apply inline-flex justify-center items-center cursor-pointer whitespace-nowrap; |
|
} |
|
|
|
.btn-disabled { |
|
@apply cursor-not-allowed; |
|
} |
|
|
|
.btn-small { |
|
@apply px-2 h-6 rounded-md text-xs font-medium; |
|
} |
|
|
|
.btn-medium { |
|
@apply px-3.5 h-8 rounded-lg text-[13px] leading-4 font-medium; |
|
} |
|
|
|
.btn-large { |
|
@apply px-4 h-9 rounded-[10px] text-sm font-semibold; |
|
} |
|
|
|
.btn-primary { |
|
@apply |
|
shadow |
|
bg-components-button-primary-bg |
|
border-components-button-primary-border |
|
hover:bg-components-button-primary-bg-hover |
|
hover:border-components-button-primary-border-hover |
|
text-components-button-primary-text; |
|
} |
|
|
|
.btn-primary.btn-destructive { |
|
@apply |
|
bg-components-button-destructive-primary-bg |
|
border-components-button-destructive-primary-border |
|
hover:bg-components-button-destructive-primary-bg-hover |
|
hover:border-components-button-destructive-primary-border-hover |
|
text-components-button-destructive-primary-text; |
|
} |
|
|
|
.btn-primary.btn-disabled { |
|
@apply |
|
shadow-none |
|
bg-components-button-primary-bg-disabled |
|
border-components-button-primary-border-disabled |
|
text-components-button-primary-text-disabled; |
|
} |
|
|
|
.btn-primary.btn-destructive.btn-disabled { |
|
@apply |
|
shadow-none |
|
bg-components-button-destructive-primary-bg-disabled |
|
border-components-button-destructive-primary-border-disabled |
|
text-components-button-destructive-primary-text-disabled; |
|
} |
|
|
|
.btn-secondary { |
|
@apply |
|
border-[0.5px] |
|
shadow-xs |
|
bg-components-button-secondary-bg |
|
border-components-button-secondary-border |
|
hover:bg-components-button-secondary-bg-hover |
|
hover:border-components-button-secondary-border-hover |
|
text-components-button-secondary-text; |
|
} |
|
|
|
.btn-secondary.btn-disabled { |
|
@apply |
|
bg-components-button-secondary-bg-disabled |
|
border-components-button-secondary-border-disabled |
|
text-components-button-secondary-text-disabled; |
|
} |
|
|
|
.btn-secondary.btn-destructive { |
|
@apply |
|
bg-components-button-destructive-secondary-bg |
|
border-components-button-destructive-secondary-border |
|
hover:bg-components-button-destructive-secondary-bg-hover |
|
hover:border-components-button-destructive-secondary-border-hover |
|
text-components-button-destructive-secondary-text; |
|
} |
|
|
|
.btn-secondary.btn-destructive.btn-disabled { |
|
@apply |
|
bg-components-button-destructive-secondary-bg-disabled |
|
border-components-button-destructive-secondary-border-disabled |
|
text-components-button-destructive-secondary-text-disabled; |
|
} |
|
|
|
|
|
.btn-secondary-accent { |
|
@apply |
|
border-[0.5px] |
|
shadow-xs |
|
bg-components-button-secondary-bg |
|
border-components-button-secondary-border |
|
hover:bg-components-button-secondary-bg-hover |
|
hover:border-components-button-secondary-border-hover |
|
text-components-button-secondary-accent-text; |
|
} |
|
|
|
.btn-secondary-accent.btn-disabled { |
|
@apply |
|
bg-components-button-secondary-bg-disabled |
|
border-components-button-secondary-border-disabled |
|
text-components-button-secondary-accent-text-disabled; |
|
} |
|
|
|
.btn-warning { |
|
@apply |
|
bg-components-button-destructive-primary-bg |
|
border-components-button-destructive-primary-border |
|
hover:bg-components-button-destructive-primary-bg-hover |
|
hover:border-components-button-destructive-primary-border-hover |
|
text-components-button-destructive-primary-text; |
|
} |
|
|
|
.btn-warning.btn-disabled { |
|
@apply |
|
bg-components-button-destructive-primary-bg-disabled |
|
border-components-button-destructive-primary-border-disabled |
|
text-components-button-destructive-primary-text-disabled; |
|
} |
|
|
|
.btn-tertiary { |
|
@apply |
|
bg-components-button-tertiary-bg |
|
hover:bg-components-button-tertiary-bg-hover |
|
text-components-button-tertiary-text; |
|
} |
|
|
|
.btn-tertiary.btn-disabled { |
|
@apply |
|
bg-components-button-tertiary-bg-disabled |
|
text-components-button-tertiary-text-disabled; |
|
} |
|
|
|
.btn-tertiary.btn-destructive { |
|
@apply |
|
bg-components-button-destructive-tertiary-bg |
|
hover:bg-components-button-destructive-tertiary-bg-hover |
|
text-components-button-destructive-tertiary-text; |
|
} |
|
|
|
.btn-tertiary.btn-destructive.btn-disabled { |
|
@apply |
|
bg-components-button-destructive-tertiary-bg-disabled |
|
text-components-button-destructive-tertiary-text-disabled; |
|
} |
|
|
|
.btn-ghost { |
|
@apply |
|
hover:bg-components-button-ghost-bg-hover |
|
text-components-button-ghost-text; |
|
} |
|
|
|
.btn-ghost.btn-disabled { |
|
@apply |
|
text-components-button-ghost-text-disabled; |
|
} |
|
|
|
.btn-ghost.btn-destructive { |
|
@apply |
|
hover:bg-components-button-destructive-ghost-bg-hover |
|
text-components-button-destructive-ghost-text; |
|
} |
|
|
|
.btn-ghost.btn-destructive.btn-disabled { |
|
@apply |
|
text-components-button-destructive-ghost-text-disabled; |
|
} |
|
|
|
.btn-ghost-accent { |
|
@apply |
|
hover:bg-state-accent-hover |
|
text-components-button-secondary-accent-text; |
|
} |
|
|
|
.btn-ghost-accent.btn-disabled { |
|
@apply |
|
text-components-button-secondary-accent-text-disabled; |
|
} |
|
} |