mirror of
https://github.com/go-gitea/gitea.git
synced 2026-10-27 15:21:58 +01:00
enhance(ui): use normal line-height for buttons and selection dropdowns (#39796)
The legacy Fomantic `line-height: 1` on buttons made ellipsized button text clip descenders like `g` letters, like in the PR target branch selector. Selection dropdowns were 3px taller than the inputs and buttons next to them because their padding assumed `line-height: 1em`. - Buttons and selection dropdowns use `--line-height-default` with smaller vertical padding, `min-height` keeps their sizes for every font including CJK - Remove overrides that only compensated for the old values and dropdown declarations that never applied - Label-edit and push-mirror modals use regular-size action buttons like all other modals
This commit is contained in:
1 parent
8d6b3e48d3
commit
a36bb47c84
8 files changed
+12
-39
No files matched your search
@@ -10,7 +10,7 @@
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
line-height: var(--line-height-default);
|
||||
border-radius: var(--border-radius);
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
@@ -92,19 +92,18 @@
|
||||
}
|
||||
.ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
|
||||
margin: 0 0.42857143em 0 -0.21428571em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */
|
||||
.ui.button { /* stylelint-disable-line no-duplicate-selectors -- deliberate second block for the reference sizes */
|
||||
gap: var(--gap-block);
|
||||
min-height: 38px;
|
||||
padding: 0.57em /* around 8px */ 1.43em /* around 20px */;
|
||||
padding: 0.43em /* around 6px, keeps CJK text within min-height */ 1.43em /* around 20px */;
|
||||
}
|
||||
.ui.compact.buttons .button,
|
||||
.ui.compact.button {
|
||||
gap: var(--gap-inline);
|
||||
padding: 6px 15px;
|
||||
padding: 3px 15px;
|
||||
min-height: 32px;
|
||||
}
|
||||
.ui.compact.icon.buttons .button,
|
||||
@@ -149,7 +148,7 @@
|
||||
|
||||
.ui.icon.buttons .button,
|
||||
.ui.icon.button:not(.compact) {
|
||||
padding: 0.57em;
|
||||
padding-inline: 0.57em;
|
||||
}
|
||||
.ui.icon.buttons .button > .icon,
|
||||
.ui.icon.button > .icon {
|
||||
|
||||
Reference in new issue
Block a user