style: reorganize and enhance button styles with additional variables

This commit is contained in:
2026-06-25 17:02:05 -03:00
parent 5e25c00240
commit a6a9f4e5e3

View File

@@ -1,6 +1,35 @@
@use "@fortawesome/fontawesome-free/css/all.min.css";
@use "bootstrap/scss/bootstrap";
$primary:#6376F3;
$danger: #FF8888;
$secondary:#A0A0A0;
$primary-button-hover-shade-amount: 40%;
$primary-button-disabled-tint-amount: 50%;
@import "../node_modules/bootstrap/scss/bootstrap";
.btn-primary,
.btn-secondary,
.btn-danger {
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
}
.btn-primary {
$primary-disabled-bg: tint-color($primary, $primary-button-disabled-tint-amount);
--bs-btn-hover-bg: #{shade-color($primary, $primary-button-hover-shade-amount)};
--bs-btn-hover-border-color: #{shade-color($primary, $primary-button-hover-shade-amount)};
--bs-btn-disabled-color: #{color-contrast($primary-disabled-bg)};
--bs-btn-disabled-bg: #{$primary-disabled-bg};
--bs-btn-disabled-border-color: #{$primary-disabled-bg};
--bs-btn-disabled-opacity: 1;
}
:root {
--bs-body-font-family: "Gotham", sans-serif;
}