mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-06-19 05:59:26 +08:00
00347de1d1
`align-self: stretch` wasn't applying to the combo button because it isn't a flex element. Changing it to inline-flex allows it to apply and fixes the height difference. I've also removed a stray margin when the button text is removed on small screens. Before: <img width="200" alt="image" src="https://github.com/user-attachments/assets/d11c6c01-70d4-45c5-9cd8-171471aeb699" /> After: <img width="200" alt="image" src="https://github.com/user-attachments/assets/0192b075-7e70-400a-84b4-4c8012b38c96" />
30 lines
619 B
SCSS
Vendored
30 lines
619 B
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
.d-combo-button {
|
|
display: inline-flex;
|
|
|
|
&.--has-menu {
|
|
.d-combo-button-button {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
.d-combo-button-menu {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-left-color: transparent;
|
|
margin-left: 0.1em; // more flexible than border, and scales with UI zoom
|
|
|
|
&.fk-d-menu__trigger .d-icon {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
.d-icon {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
