105 lines
2.4 KiB
CSS
105 lines
2.4 KiB
CSS
@layer components {
|
|
.bw-button {
|
|
@apply py-3 px-5 tracking-wider text-xs font-medium inline-block items-center transition duration-300
|
|
}
|
|
|
|
.bw-button-circle {
|
|
@apply focus:outline-none focus:!ring-opacity-25 focus:ring-offset-0 rounded-full inline-flex place-items-center justify-center
|
|
}
|
|
|
|
.bw-button.tiny {
|
|
@apply py-[6px] px-[15px] text-[10px]
|
|
}
|
|
|
|
.bw-button.small {
|
|
@apply py-[11px] px-4 !text-[11px]
|
|
}
|
|
|
|
.bw-button.medium {
|
|
@apply py-4 px-6
|
|
}
|
|
|
|
.bw-button.medium.has-icon {
|
|
@apply py-[15px] px-6
|
|
}
|
|
|
|
.bw-button.big {
|
|
@apply py-6 px-9 !text-[14px]
|
|
}
|
|
|
|
.bw-button.big.has-icon {
|
|
@apply pt-[19px] pb-[20px] px-8 !text-[16px]
|
|
}
|
|
|
|
.bw-button.primary:not(.outlined), .bw-button-circle.primary:not(.outlined),
|
|
.bw-button.secondary:not(.outlined), .bw-button-circle.secondary:not(.outlined) {
|
|
@apply active:translate-y-0.5 text-white text-opacity-90 hover:text-opacity-100 hover:!no-underline
|
|
active:opacity-100 focus:outline-none focus:!ring-opacity-25 focus:!ring-offset-0
|
|
}
|
|
|
|
.bw-button.primary.outlined, .bw-button-circle.primary.outlined,
|
|
.bw-button.secondary.outlined, .bw-button-circle.secondary.outlined {
|
|
@apply bg-transparent focus:outline-none focus:!ring-opacity-25 focus:!ring-offset-0
|
|
}
|
|
|
|
.bw-button.disabled, .bw-button-circle.disabled {
|
|
@apply disabled:opacity-50 disabled:cursor-not-allowed
|
|
}
|
|
|
|
.bw-button.outlined {
|
|
@apply py-2.5
|
|
}
|
|
|
|
.bw-button.tiny.outlined {
|
|
@apply py-[5px]
|
|
}
|
|
|
|
.bw-button.small.outlined {
|
|
@apply py-[8.5px]
|
|
}
|
|
|
|
.bw-button.medium.outlined {
|
|
@apply py-[14px]
|
|
}
|
|
|
|
.bw-button.big.outlined {
|
|
@apply py-[22px]
|
|
}
|
|
|
|
.bw-button-circle.tiny {
|
|
@apply size-[31px]
|
|
}
|
|
|
|
.bw-button-circle.small {
|
|
@apply p-0.5 size-10
|
|
}
|
|
|
|
.bw-button-circle.regular {
|
|
@apply p-1 size-[42px]
|
|
}
|
|
|
|
.bw-button-circle.medium {
|
|
@apply p-1 size-[50px]
|
|
}
|
|
|
|
.bw-button-circle.big {
|
|
@apply p-3 size-[65px]
|
|
}
|
|
|
|
.bw-button-circle.tiny.outlined {
|
|
@apply size-[32px]
|
|
}
|
|
|
|
.bw-button-circle.small.outlined {
|
|
@apply p-0.5
|
|
}
|
|
|
|
.bw-button-circle.medium.outlined {
|
|
@apply p-1 size-[50px]
|
|
}
|
|
|
|
.bw-button-circle.big.outlined {
|
|
@apply p-3 size-[66px]
|
|
}
|
|
|
|
} |