65 lines
1.3 KiB
CSS
65 lines
1.3 KiB
CSS
|
@layer components {
|
||
|
|
.card-button {
|
||
|
|
@apply flex w-full cursor-pointer flex-nowrap items-center gap-2 rounded-2xl px-5 py-4 text-left font-bold transition;
|
||
|
|
font-family: var(--font-heading);
|
||
|
|
|
||
|
|
&.card-button-neutral {
|
||
|
|
@apply text-content bg-surface border-line;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
@apply border-primary;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.card-button-primary {
|
||
|
|
@apply text-primary-content bg-primary border-primary;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
@apply bg-primary-bold border-primary-bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-button__left {
|
||
|
|
@apply flex grow flex-row items-start gap-4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-button__right {
|
||
|
|
@apply hidden h-14 w-14 items-center justify-end sm:flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-button__icon {
|
||
|
|
@apply flex h-14 w-12 shrink-0 items-center justify-center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-button__content {
|
||
|
|
@apply flex flex-col gap-1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-button__title {
|
||
|
|
@apply text-lg font-bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-button__info {
|
||
|
|
@apply text-sm;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-fl-theme="flat"] .card-button {
|
||
|
|
@apply border border-solid;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-fl-theme="clay"] .card-button {
|
||
|
|
@apply border-2 border-solid shadow-sm;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: var(--shadow-lg), var(--shadow-inset);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
transform: translateY(2px);
|
||
|
|
box-shadow: 2px 2px 0 rgba(var(--shadow-color), 0.3);
|
||
|
|
}
|
||
|
|
}
|