57 lines
No EOL
1.6 KiB
SCSS
57 lines
No EOL
1.6 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 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 bg-danger hover:bg-danger-hover active:bg-danger-pressed disabled:bg-danger-disabled;
|
|
}
|
|
|
|
&__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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon > * {
|
|
@apply w-4;
|
|
} |