Impossible to use boostrap button sizes like btn-lg and btn-sm

[teklakct]

Does anyone else experience this or is it some kind of defect in my setup? I can prepare a PR with those changes but for sure I need some help to test it and avoid breaking the whole theme.

Describe the bug Seems like theme variables for buttons are overriding bootstrap variables and there is no way to use different button sizes.

How it looks like:

When variables for .btn are removed from the variables-theme.css

- .btn {
-     --bs-btn-padding-x: 8px;
-     --bs-btn-padding-y: 4px;
-     --bs-btn-font-size: 0.875rem;
-     --bs-btn-font-weight: 400;
-     --bs-btn-border-width: 0;
-     --bs-btn-border-radius: var(--border-radius);
- }

then it looks like below

The default bootstrap button is slightly bigger than those EasyAdmin one.

To Reproduce I am currently using v4.13

Use this html in any template that extends easyadmin layout.

<button class="btn btn-success d-block w-100 my-3" >Button</button>
<button class="btn btn-primary btn-lg d-block w-100 my-3" >Large button</button>
<button class="btn btn-warning btn-sm d-block w-100 my-3" >Large small</button>

(OPTIONAL) Additional context The import order seems to be an issue. Boostrap variables are loaded in the first line of app.css then some of them are overridden by theme variables at line 7 of app.css

Something like that is helping:

// assets/css/app.css
+ @import "./easyadmin-theme/variables-theme.css";
@import "~bootstrap/dist/css/bootstrap.min.css";

@import "~@fortawesome/fontawesome-free/css/all.css";

// assets/css/easyadmin-theme/theme.css
@import "./color-palette.css";
- @import "./variables-theme.css";

@import "./base.css";

but I am not sure how it will impact the whole theme. For sure the action buttons are noticeably bigger

--

🤔 Maybe switching from SASS to CSS might be an issue here https://github.com/EasyCorp/EasyAdminBundle/pull/6139

[teklakct]

When the "default" font size (16px) is used, then the EasyAdmin standard button is the same as the bootstrap small button.

// In EasyAdmin
.btn {
  --bs-btn-padding-x: 8px;
  --bs-btn-padding-y: 4px;
  --bs-btn-font-size: 0.875rem;
}

// From boostrap 
.btn-group-sm > .btn, .btn-sm {
  --bs-btn-padding-x: 0.5rem;  // 8px
  --bs-btn-padding-y: 0.25rem; // 4px
  --bs-btn-font-size: 0.875rem; // 14px
}

Perhaps marking the buttons as btn-sm and not overriding the CSS variables is an option?