mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-07-25 08:09:38 +02:00
bebe7b40d6
* Add ability to name a rule * Add sorting by name and date, * Improve rule page and form design * Small header tweak * Improve sorting click areas by including icon * Fix brakeman * Use icon helper instead of lucide_icon helper * Fix double headers with new DialogComponent * Use updated_at for sorting instead of created_at * Use copy-plus icon for compound rules * Remove icons and change IF/THEN/FOR font in edit form * Use text-secondary on disabled rules * First pass at redesigning the sorting menu * New rule list * Borders instead of shadows * Apply proper text color to TO in edit form * Improve dark mode with proper background color classes * Use border-secondary * Add touch: true to conditions and actions of a rule, so updated_at works as expected * Fix db schema * Change sort direction to be a LinkComponent outside of the form for better sort behavior * Clean up dropdown design to match figma * Match tags/categories design * Fix name text color, add bg-divider background for dividers * Fix family subscription tests (thanks zach!)
95 lines
1.3 KiB
CSS
95 lines
1.3 KiB
CSS
@utility bg-surface {
|
|
@apply bg-gray-50;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-black;
|
|
}
|
|
}
|
|
|
|
@utility bg-surface-hover {
|
|
@apply bg-gray-100;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-900;
|
|
}
|
|
}
|
|
|
|
@utility bg-surface-inset {
|
|
@apply bg-gray-100;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-800;
|
|
}
|
|
}
|
|
|
|
@utility bg-surface-inset-hover {
|
|
@apply bg-gray-200;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-800;
|
|
}
|
|
}
|
|
|
|
@utility bg-container {
|
|
@apply bg-white;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-900;
|
|
}
|
|
}
|
|
|
|
@utility bg-container-hover {
|
|
@apply bg-gray-50;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-800;
|
|
}
|
|
}
|
|
|
|
@utility bg-container-inset {
|
|
@apply bg-gray-50;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-800;
|
|
}
|
|
}
|
|
|
|
@utility bg-container-inset-hover {
|
|
@apply bg-gray-100;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-700;
|
|
}
|
|
}
|
|
|
|
@utility bg-inverse {
|
|
@apply bg-gray-800;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-white;
|
|
}
|
|
}
|
|
|
|
@utility bg-inverse-hover {
|
|
@apply bg-gray-700;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-100;
|
|
}
|
|
}
|
|
|
|
@utility bg-divider {
|
|
@apply bg-alpha-black-100;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-alpha-white-100;
|
|
}
|
|
}
|
|
|
|
@utility bg-overlay {
|
|
background-color: --alpha(var(--color-gray-100) / 50%);
|
|
|
|
@variant theme-dark {
|
|
background-color: var(--color-alpha-black-900);
|
|
}
|
|
}
|