46 lines
1.3 KiB
SCSS
46 lines
1.3 KiB
SCSS
.button {
|
|
@apply py-1.5 px-3 rounded-lg flex flex-row justify-center items-center gap-x-2.5;
|
|
|
|
&__primary {
|
|
@apply text-onbrand hover:text-onbrand-hover active:text-onbrand-pressed disabled:text-onbrand-disabled;
|
|
@apply bg-brand hover:bg-brand-hover active:bg-brand-pressed disabled:bg-brand-disabled;
|
|
}
|
|
|
|
&__secondary {
|
|
@apply border border-gray-0.05;
|
|
@apply text-fg-primary hover:text-fg-primary-hover active:text-fg-primary-pressed disabled:text-fg-primary-disabled;
|
|
@apply bg-component-bg hover:bg-component-bg-hover active:bg-component-bg-pressed disabled:bg-component-bg-disabled;
|
|
}
|
|
|
|
&__danger {
|
|
@apply bg-danger hover:bg-danger-hover active:bg-danger-pressed disabled:bg-danger-disabled;
|
|
}
|
|
|
|
&__ghost {
|
|
@apply hover:bg-gray-0.05 active:bg-gray-0.10;
|
|
}
|
|
|
|
&__icon {
|
|
@apply p-1.5 hover:bg-gray-0.05 active:bg-gray-0.10 aspect-square box-border;
|
|
|
|
& > * {
|
|
@apply w-full h-full stroke-fg-primary;
|
|
}
|
|
|
|
&:hover > * {
|
|
@apply stroke-fg-primary-hover;
|
|
}
|
|
|
|
&:active > * {
|
|
@apply stroke-fg-primary-pressed;
|
|
}
|
|
|
|
&:disabled > * {
|
|
@apply stroke-fg-primary-disabled;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon > * {
|
|
@apply w-4;
|
|
}
|