70 lines
1.9 KiB
SCSS
70 lines
1.9 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, &__iconSecondary {
|
|
@apply border box-border border-gray-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, &__iconDanger {
|
|
@apply text-onbrand hover:text-onbrand-hover active:text-onbrand-pressed disabled:text-onbrand-disabled;
|
|
@apply bg-danger hover:bg-danger-hover active:bg-danger-pressed disabled:bg-danger-disabled;
|
|
}
|
|
|
|
&__iconDanger {
|
|
@apply bg-op-50;
|
|
}
|
|
|
|
&__ghost {
|
|
@apply hover:bg-gray-05 [&[aria-checked="true"]]:bg-gray-10 active:bg-gray-10;
|
|
}
|
|
|
|
&__icon, &__iconSecondary, &__iconDanger {
|
|
@apply p-1.5 aspect-square box-border w-8 h-8;
|
|
|
|
&.large {
|
|
@apply w-9 h-9;
|
|
& > * {
|
|
@apply p-0.5;
|
|
}
|
|
}
|
|
|
|
& > * {
|
|
@apply w-full h-full stroke-fg-primary;
|
|
}
|
|
}
|
|
|
|
&__icon, &__iconSecondary {
|
|
@apply hover:bg-gray-05 [&[aria-checked="true"]]:bg-gray-10 active:bg-gray-10;
|
|
|
|
&:hover > * {
|
|
@apply stroke-fg-primary-hover;
|
|
}
|
|
|
|
&:active > * {
|
|
@apply stroke-fg-primary-pressed;
|
|
}
|
|
|
|
&:disabled > * {
|
|
@apply stroke-fg-primary-disabled;
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
@apply border-opacity-1! bg-opacity-10! text-opacity-10! pointer-events-none;
|
|
|
|
svg {
|
|
@apply fill-opacity-10! stroke-opacity-10!;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon > * {
|
|
@apply w-4;
|
|
}
|